TradeMax | ExpoStacker

LIVE PRODUCT

trademax.expostacker.com.br/

live preview

TradeMax — live trading terminal, 100% in the browser

Use now Architecture

Tech stack: HTML/CSS/JS Lightweight Charts React Node.js WebSocket Order Engine

8
Instruments: 11
Timeframes: 0
Server deps

Client

TradeMax Terminal

Sector

Fintech — Trading / Simulation

Timeline

Projeto consolidado · Set 2026

Live product

Use now

Results

Client-reported results during rollout

8 Instrumentos

11 Timeframes

0 Dependências de servidor

Client-reported data

The challenge

TradeMax demonstrates the point that separates a demo from a platform: the chart isn't an image — it's Lightweight Charts rendering candles that are born, move and close in real time, while the order panel tracks the same price.

Quem vende tecnologia para o mercado financeiro precisa provar que entende o domínio: candlestick ao vivo, book de ofertas, ordens mercado/limite, TP/SL e posições — não um print bonito. O desafio era entregar um terminal que parecesse e se comportasse como uma corretora de verdade, rodando 100% no browser.

The approach

We chose the most honest stack possible: pure HTML/CSS/JS + Lightweight Charts (TradingView's lib) served locally. The simulator generates a realistic candle random walk, updates the last candle per tick and rolls time — the Sell/Buy panel derives from the same price, keeping spread coherent. The full version preserved in backend/ has an OrderEngine with real matching for when a server is wired up.

The solution

The terminal covers the full WebTerminal surface:

Candlestick chart with Lightweight Charts — TradingView's real library
Simulated live feed: current candle updates every second, new candle every minute
Sidebar with 8 instruments (crypto, forex, metals, energy, index) and change
Market/Limit order panel with bid/ask, spread, margin and volume
Positions table with tabs (open, pending, closed) and P&L
Timeframes 5s→M and chart types (candles, line, area)
Full local version: React + WebSocket + OrderEngine with real matching
Permanent disclaimer: SIMULATION — no real operation is executed

Timeline

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Methodology

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Consolidation of both projects (full React app + static terminal) into one TradeMax base

Time-axis fix: business-day collapsed 1m candles — migrated to UNIX timestamps

Live candle: per-second tick updates current candle, per-minute rollover opens the next

Price sync: Sell/Buy panel derives from the same chart value

Local vendored Lightweight Charts (no CDN), custom favicon, zero emojis

Validation: real screenshot, zero console errors, canvas confirmed

Architecture

→ Client-side terminal with Lightweight Charts — candles, volume and indicators in real time
→ Node OrderEngine for order matching and simulated execution
→ Persisted market state with sessions and local order book
→ Optimized vanilla frontend + React modules where needed
→ Static deploy on Cloudflare Pages with zero backend dependency

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

Decision log

What I chose, what I rejected, and why.

Client-side simulation instead of a real feed

Why: A real market feed requires a paid API, backend and keys — all unnecessary to demonstrate the terminal. The calibrated random walk produces candles indistinguishable from real market and runs on any static host.

Rejected alternatives: Binance public API (rejected — rate limit, external dependency and geo-blocking); own backend (rejected — kills the static model).

Vanilla JS instead of React for the demo

Why: The terminal is a single dense screen — a self-contained HTML file loads instantly inside the case iframe and has no build to break. The full React version stays preserved for evolution.

Rejected alternatives: React + Vite (rejected for the demo — weight with no gain on a single screen); iframe of the React version with backend (rejected — would require a running server).

UNIX timestamp instead of business-day

Why: Lightweight Charts' {year,month,day} format only has day precision — 1-minute candles collapsed into blocks. Second-precision timestamps gave the correct time axis and enabled the live candle.

Rejected alternatives: UTC strings (rejected — extra parsing); leave as-is (rejected — broken chart).

Security and access

Lessons learned

Not everything went as planned.

— A trading terminal is the showcase's most demanding case — if the candle doesn't move, it's a lie on its face. Simulating properly requires understanding the domain: tick, candle, spread, bid/ask. The detail is the product.