Crypto trading terminal with live market data
Pulse
Role: Frontend developer — real-time data & charts · Period: 2024 · Client: Own product · Platforms: Web
A Binance-style trading terminal on live market data: real-time candlestick chart with indicators, order book with depth, trade tape and a paper-trading account with market and limit orders and live P&L.
Trading interfaces are one of the hardest kinds of frontend: dozens of updates per second, dense data and zero tolerance for lag. Pulse streams Binance's public market data over a single WebSocket — watchlist tickers, aggregated trades, 100 ms order-book snapshots and live candles — and keeps the UI smooth by batching trades and updating the chart outside React.
On top of the live market sits a paper-trading account: start with a virtual $10,000, place market or limit orders (click any price in the order book), and watch unrealized and realized P&L update tick by tick. Everything runs in the browser with no backend and no API keys.
Key features
- Live watchlist, order book, trade tape and candles from Binance public streams
- Candlestick chart (1m–4h) with volume, EMA 20 and SMA 50
- Order book with cumulative depth bars and spread; click a price to prefill a limit order
- Paper trading: market & limit orders, fees, reserved balances, automatic limit fills
- Holdings with average cost, unrealized and realized P&L, order history
- One WebSocket that re-subscribes on pair / interval change, with auto-reconnect
What I did
- Built the terminal with React 19, TypeScript, Vite and Zustand
- Wrote the WebSocket client: combined streams, SUBSCRIBE/UNSUBSCRIBE and backoff reconnects
- Integrated lightweight-charts with tick-by-tick updates and indicators
- Implemented the paper-trading engine with limit matching and P&L accounting
Results
- Smooth UI on dozens of market updates per second
- No backend and no API keys
Tech stack
- React
- TypeScript
- Vite
- Zustand
- WebSocket
- lightweight-charts