TradeMax | ExpoStacker

PRODUTO EM PRODUÇÃO

trademax.expostacker.com.br/

live preview

TradeMax — terminal de trading ao vivo, 100% no browser

Usar agora Arquitetura

Stack tecnológica: HTML/CSS/JS Lightweight Charts React Node.js WebSocket Order Engine

8
Instrumentos: 11
Timeframes: 0
Servidor

Cliente

TradeMax Terminal

Setor

Fintech — Trading / Simulação

Linha do tempo

Projeto consolidado · Set 2026

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

8 Instrumentos

11 Timeframes

0 Dependências de servidor

Dados reportados pelo cliente

O desafio

TradeMax demonstra um ponto que separa demo de plataforma: o gráfico não é uma imagem — é Lightweight Charts renderizando velas que nascem, movem e fecham em tempo real, enquanto o painel de ordem acompanha o mesmo preço.

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.

A abordagem

Escolhemos a stack mais honesta possível: HTML/CSS/JS puro + Lightweight Charts (a lib do TradingView) servido localmente. O simulador gera um random walk realista de velas, atualiza a última vela por tick e rola o tempo — o painel Venda/Compra deriva do mesmo preço, mantendo spread coerente. A versão completa preservada em backend/ tem OrderEngine com matching real para quando um servidor for ligado.

A solução

O terminal cobre a superfície completa de um WebTerminal:

Gráfico de velas com Lightweight Charts — a lib real do TradingView
Feed ao vivo simulado: vela corrente atualiza a cada segundo, nova vela a cada minuto
Sidebar com 8 instrumentos (crypto, forex, metais, energia, índice) e variação
Painel de ordem Mercado/Limite com bid/ask, spread, margem e volume
Tabela de posições com abas (abertas, pendentes, encerradas) e PL
Timeframes 5s→M e tipos de gráfico (velas, linha, área)
Versão completa local: React + WebSocket + OrderEngine com matching real
Disclaimer permanente: SIMULAÇÃO — nenhuma operação real é executada

Linha do tempo

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

Metodologia

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

Consolidação dos dois projetos (app React completo + terminal estático) em uma base TradeMax

Correção do eixo temporal: business-day colapsava velas de 1m — migrado para timestamp UNIX

Vela ao vivo: tick por segundo atualiza a corrente, rollover por minuto abre a próxima

Sincronia de preço: painel Venda/Compra deriva do mesmo valor do gráfico

Vendor local do Lightweight Charts (sem CDN), favicon próprio, zero emojis

Validação: screenshot real, zero erros de console, canvas confirmado

Arquitetura

→ Terminal client-side com Lightweight Charts — velas, volume e indicadores em tempo real
→ OrderEngine em Node para matching de ordens e execução simulada
→ Estado de mercado persistido com sessões e book de ofertas local
→ Frontend vanilla otimizado + módulos React onde necessário
→ Deploy estático no Cloudflare Pages com zero dependência de backend

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

Decision log

O que escolhi, o que rejeitei e por quê.

Simulação no client em vez de feed real

Por que: Um feed de mercado real exige API paga, backend e chaves — tudo desnecessário para demonstrar o terminal. O random walk calibrado produz velas indistinguíveis de mercado real e roda em qualquer hospedagem estática.

Alternativas rejeitadas: API Binance pública (rejeitado — rate limit, dependência externa e geo-bloqueio); backend próprio (rejeitado — mata o modelo estático).

Vanilla JS em vez de React na demo

Por que: O terminal é uma tela única e densa — um arquivo HTML autocontido carrega instantâneo no iframe do case e não tem build para quebrar. A versão React completa fica preservada para evolução.

Alternativas rejeitadas: React + Vite (rejeitado para a demo — peso sem ganho em tela única); iframe da versão React com backend (rejeitado — exigiria servidor ligado).

Timestamp UNIX em vez de business-day

Por que: O formato {year,month,day} do Lightweight Charts só tem precisão de dia — velas de 1 minuto colapsavam em blocos. Timestamp em segundos deu o eixo temporal correto e permitiu a vela ao vivo.

Alternativas rejeitadas: UTC strings (rejeitado — parsing extra); deixar como estava (rejeitado — gráfico quebrado).

Segurança e acesso

Lições aprendidas

Nem tudo saiu como planejado.

— Terminal de trading é o case mais exigente da vitrine — se a vela não se move, é mentira na cara. Simular direito exige entender o domínio: tick, vela, spread, bid/ask. O detalhe é o produto.