Outcomes
The idea
Realtime market screens are a fixture of fintech products, and they are also where frontends tend to fall apart. Eight symbols streaming trades several times a second will grind a naive React implementation to a halt, and users notice a laggy price feed immediately because the whole point of the screen is that it moves. I built LiveCrypto to work through that class of problem end to end, from the socket connection to the pixels on screen.
The app reads Binance's public endpoints directly, so there is no backend to build or pay for. That constraint is deliberate: it keeps running costs at effectively zero, and it pushes all of the interesting engineering into the browser, where buffering, aggregation, and rendering have to hold up on their own with no server to lean on.
Architecture
WebSocket streams for eight USDT pairs feed a 15,000-trade ring buffer called TradeStore. The stat bar, trade list, and 3-second candle aggregator all read from that store. Longer timeframes come from Binance REST klines. Both APIs are public, so the dashboard works without a market-data key.
- Next.js 16 App Router, React 19, Tailwind CSS v4.
- A 15k ring buffer as the single source of truth for live trades.
- Deployed on Vercel with no server-side data key required.
Custom chart rendering
The line and candlestick charts are drawn directly on Canvas inside a requestAnimationFrame loop. I skipped a charting library because I wanted control over when each frame is rendered and how much work happens when new trades arrive. The chart reads candle data through a ref on each frame, so live ticks update the picture without re-rendering the React tree at all.
Keeping the interface responsive
TanStack Virtual keeps only visible rows in the DOM, which holds the trade tape at 60fps with thousands of trades sitting in the buffer, and memory stays flat because the ring buffer never grows past 15,000 entries. Rather than asking anyone to take that on faith, the app ships a /perf page that measures FPS, interaction delay, events per minute, and heap usage in the browser, so the numbers can be checked live against the running stream.
AI copilot
The copilot receives a snapshot of the current market state with each question. A mock provider keeps the public demo usable without credentials; a real provider can be connected at one adapter boundary while its API key remains on the server.
Honest limits
Everything lives in one browser tab with no persistence: reload the page and the trade buffer starts empty, with only REST history available until live trades fill it back up. Candle aggregation also runs on the main thread, which is fine on a laptop and untested on genuinely weak hardware. If I take the project further, aggregation moves into a Web Worker and the buffer gets IndexedDB persistence so a session can survive a refresh.