Design Trading Dashboard Frontend
Architecting a real-time trading dashboard displaying tick price variations, rendering multi-series candlestick grids, and resolving buy orders under 10ms.
1. Problem Statement
Design a real-time trading dashboard displaying live ticker arrays, rendering multi-series candlestick charts at 60fps, and submitting quick order calculations.
2. Business Context & User Friction
Financial platforms demand absolute responsiveness. Lagging price tickers or delayed orders processing leads directly to financial slippage.
3. Requirements Matrix
Functional Requirements
- Display real-time updating price ticker columns and order-book grids.
- Render interactive candlestick price charts with zoom controls.
- Provide quick order submission forms with execution states.
Non-Functional Requirements
Performance
- WebSocket data processing latency under 10ms.
- 60fps chart renders during price spikes.
- Zero main-thread blocking during data feeds.
Scalability
- Process 10,000+ ticks updates per second.
- Prune historical price series arrays in memory.
Accessibility (a11y)
- Screen reader alerts for order executions.
- Accessible contrast modes for price trends.
Security
- Enforce cryptographically signed order requests.
- Secure socket data connections.
Reliability & Failover
- Auto-reconnect sockets; fallback to polling.
- Buffer failed order requests.
Observability
- Track socket packet loss ratios.
- Measure coordinate render latency.
4. Core User Flows
Submitting a quick buy order
- User monitors real-time order-book updates.
- User clicks limit price from table, populating order form.
- User clicks Quick Buy; app submits transaction.
- Order fills; WebSocket confirms transaction, and logs update.
5. High-Level Design & Layers
The dashboard runs incoming socket feeds in background Web Workers, updating the WebGL canvas charts directly to keep the UI responsive.
Frontend Layers
- UI Layer: TickerList, OrderBook, OrderEntry, WebGLChart.
- State/Sync Layer: Web Worker price buffer, WebSocket stream client.
- Service Layer: Binary stream decoder, transaction coordinator.
Major Components
- WebGLChartCanvas: Renders candlestick vectors and overlays indicator series at 60fps.
- OrderBookGrid: Displays paginated bids and asks tables updates.
Data Flow Pipelines
- 1. WebSockets stream binary price ticks.
- 2. Web Worker decodes data, maintaining history limits.
- 3. Direct DOM updates bypass React components.
- 4. Orders enter API pathways.
6. Component Architecture & State Boundaries
| Component | Responsibility | State Owned | Dependencies |
|---|---|---|---|
| TradingShell | Orchestrates order entries, charts layouts, and live tickers panels. | Active symbol, order list | WebGLChartCanvas, OrderBookGrid |
7. State Management
Local UI State
- Zoom limits factors
- Form price input numbers
Server Query Cache State
- Historical bars data arrays
- User portfolio balances
Global/Shared State
- Active trading ticker symbol
Real-Time & Sync State
- Live tick streams
- Active order status updates
8. API Contracts Design
Purpose: Submit buy/sell transaction.
{
"order": {
"id": "o1",
"symbol": "BTC",
"price": 99000,
"status": "filled"
}
}9. Caching Strategy
Browser/HTTP Cache
- Session storage for layout settings.
Edge CDN Caching
- Edge cache system outlines.
Application Cache
- Cache historical price bars in ring buffers.
Invalidation Policies
- Clear symbol caches on symbols updates.
10. System Strategies Checklist
Performance Strategy & Budgets
- Process tick streams inside Web Workers.
- HTML5 Canvas charts instead of SVG nodes.
- Bypass React render loops for high frequency price updates.
Inclusive Accessibility Design
- High-contrast color profiles for chart markers.
- Announce price alerts to screen readers.
Security Safeguards & Risks
- Sign API order requests with cryptographic headers.
- Lock script paths using CSP policies.
Telemetry & Production Observability
- Log tick-to-render delays.
- Track WebGL canvas context drops.
Graceful Failure & Resilience
- Auto-reconnect WebSocket channels with backoff configurations.
- Fallback to REST polling if sockets are blocked.
Deployment, Rollout & CDN topologies
- CSR client editor deployed on edge CDNs.
11. Architectural Decisions & Tradeoffs
Decision: Bypassing React state updates for ticker numbers vs React state sync
Saves significant CPU cycles and prevents main-thread rendering lag.
Requires manual DOM manipulation, making state testing harder.
12. Interview Answer Framework
How to structure your defense of this architecture during a 45-minute technical system design session:
Explain that financial dashboards require low rendering latency. Detail why processing data in Web Workers is critical to keep browser frames smooth.
- Do we need support for custom charts indicators?
- Are WebSocket connections binary streams?
Propose an AppShell linking WebGLChartCanvas, Web Worker sync adapters, and WebSocket client systems.
- Detail Web Worker message passing optimizations.
- Explain canvas rendering loops (requestAnimationFrame).
Conclude by evaluating security and reliability constraints.
13. Common Pitfalls & Extension Questions
Candidate Mistakes to Avoid
- Running data parses directly on the main thread, causing frames drop.
- Rendering candlestick charts using heavy SVG templates, causing layout lag.
Interviewer Follow-ups / Extensions
- How do you optimize coordinate mapping of high-volume financial data points?
- How do you synchronize ticker feeds across multiple concurrent tabs?