Design a Real-Time Analytics Dashboard

The Prompt

Design a real-time analytics dashboard for a SaaS product. It shows metrics, charts, and tables with data that updates every 5 seconds. The dataset contains 100K+ rows.

Key Challenges

1. Volume — rendering thousands of data points performantly
2. Real-time — data updates without full page refreshes
3. Interaction — filtering, sorting, date ranges, drill-down
4. Responsiveness — works on desktop and tablet

Architecture

Data Layer

WebSocket connection → Normalized store → Derived views → UI

• WebSocket for real-time updates (fall back to polling)
• Normalized store keyed by metric ID for O(1) updates
• Derived views computed via selectors (memoized)

Rendering Strategy

For charts with 100K+ points:

1. Canvas rendering — D3 + Canvas for large datasets (not SVG)
2. Data windowing — only render visible time range
3. Aggregation — server-side pre-aggregation for zoomed-out views
4. Progressive loading — show summary first, load details on zoom

For tables:

1. Virtualization — only render visible rows (react-window or TanStack Virtual)
2. Pagination — server-side for datasets > 10K
3. Sticky headers — always visible column headers

Update Strategy

function useDashboardSocket(dashboardId) {
  const queryClient = useQueryClient();
 
  useEffect(() => {
    const ws = new WebSocket(`wss://api/dashboards/${dashboardId}/stream`);
 
    ws.onmessage = (event) => {
      const update = JSON.parse(event.data);
      queryClient.setQueryData(
        ['metrics', update.metricId],
        (old) => mergeMetricUpdate(old, update)
      );
    };
 
    return () => ws.close();
  }, [dashboardId, queryClient]);
}

Performance Budget

Trade-offs to Discuss

• WebSocket vs SSE vs Polling — WebSocket for bidirectional, SSE for one-way, polling for simplicity
• Canvas vs SVG — Canvas for performance, SVG for interactivity and accessibility
• Client vs server aggregation — server for scale, client for flexibility

The senior insight: a dashboard is a data pipeline with a UI layer. Design the data flow first, then the rendering.