Real-time chart & order book
Gallery
This work packages a full real-time market stack for exchange and fintech products: the backend streams normalized OHLC and depth updates over WebSockets while the frontend renders a dense trading terminal—pair header stats, multi-timeframe K-line chart, volume histogram, and a two-sided order book with live bid/ask levels.
Implementation covers indicator overlays (e.g. multiple MAs), cursor-driven OHLC readouts, and layout patterns familiar from professional trading venues: asset sidebar with search and filters, chart mode switches (original vs TradingView-style vs depth), and recent-transaction views next to the book.
The goal is reusable building blocks for teams shipping spot exchange, brokerage, or institutional fintech surfaces: consistent contracts for candle payloads, book snapshots and deltas, and UI states that stay coherent under fast tick updates.
Tech stack
TypeScript · Next.js · NestJS · WebSocket · OHLC / K-line · Exchange UI · FinTech
Screens & flows
- Pair header: live price, 24h change, volume, liquidity, APR-style stats, multi-pair ticker strip
- K-line (candlestick) chart with hover OHLC + amplitude/volume readouts and timeframe controls (e.g. 15m–1M)
- Moving-average overlays (MA5 / MA10 / MA30 / MA60) on price series
- Volume bars synchronized with candles (buy/sell coloring)
- Chart view modes: original, TradingView-style, depth chart entry points
- Token sidebar: search, chain/pair filters, scrollable list with price and 24h % moves
- Order book: asks above / bids below, price–amount–total columns, mid price highlight, tab for recent trades
- WebSocket-driven updates for book and chart path aligned with NestJS services