Day 22: Dashboard Frontend (React + Recharts)

• ~5 min read

What I Built

  • PaperTradingDashboard React component with real-time SSE streaming
  • Equity curve visualization using Recharts LineChart
  • Live metrics display (Current Equity, Available Cash, Trades Executed, Max Drawdown)
  • Trade history table showing last 10 trades with P&L
  • Auto-reconnect logic for SSE connection failures (3-second retry)
  • Latency monitoring with <500ms target display
  • Comprehensive unit tests covering rendering, SSE connectivity, and reconnection

Code Highlight

useEffect(() => {
  let eventSource: EventSource | null = null;
  let reconnectTimeout: NodeJS.Timeout;

  const connectSSE = () => {
    eventSource = new EventSource('/api/events/equity');
    const connectTime = Date.now();

    eventSource.onopen = () => {
      setState(prev => ({ ...prev, connected: true }));
    };

    eventSource.onmessage = (event) => {
      const latency = Date.now() - connectTime;
      const data = JSON.parse(event.data);
      setState(prev => ({
        ...prev,
        equity: data.equity,
        balance: data.balance,
        trades_executed: data.trades_executed,
        current_position: data.current_position,
        latency_ms: latency
      }));
    };

    eventSource.onerror = () => {
      setState(prev => ({ ...prev, connected: false }));
      eventSource?.close();
      reconnectTimeout = setTimeout(connectSSE, 3000);
    };
  };

  connectSSE();
  // ... cleanup
}, []);

Architecture Decision

Chose Server-Sent Events (SSE) over WebSockets for real-time dashboard updates due to simpler implementation and better browser support. SSE provides automatic reconnection and is ideal for server-to-client streaming without the complexity of bidirectional WebSocket communication. Recharts was selected for charting due to its React-native integration and performance with real-time data updates.

Testing Results

All 4 unit tests pass, covering critical dashboard scenarios:

  • Dashboard renders with initial metrics display
  • SSE connection receives and processes real-time updates
  • Trade history table displays correctly
  • Auto-reconnection works on SSE disconnect

Next Steps

Day 23: Paper Trading Engine - implementing order execution simulation with market-like fills and position tracking.

Follow @therealkamba on X for regular updates. View all posts →