Real-Time Dashboard at Scale

Functional

• → Live metrics & real-time charts
• → Alert notifications
• → User management
• → Search & filtering
• → Historical data
• → Export reports

Non-Functional

• → Page load < 2 seconds
• → Updates every second
• → 10K+ concurrent users
• → Responsive UI
• → Fault tolerant
• → Accessibility (WCAG 2.1)

Global Client State — Redux / Zustand

// Zustand store slice
const useUIStore = create((set) => ({
  webSocketStatus: 'disconnected',
  alerts: [],
  setStatus: (s) => set({ webSocketStatus: s }),
  addAlert: (a) =>
    set((state) => ({ alerts: [...state.alerts, a] })),
}));

Server State — TanStack Query

• ✓ use useQuery for data fetches
• ✓ use useInfiniteQuery for tables
• ✕ avoid Storing server responses in Redux

const { data } = useQuery({
  queryKey: ['dashboard', userId],
  queryFn: fetchDashboard,
  staleTime: 5_000,
  refetchInterval: 30_000,
});

Each chart component opens its own WebSocket. Results in high overhead, race conditions, and dropped messages.

// ❌ Each component connects independently
function RevenueChart() {
  const ws = new WebSocket('/ws');
  ws.onmessage = (e) => setData(parse(e));
}
function TrafficChart() {
  const ws = new WebSocket('/ws'); // duplicate!
}

One singleton WebSocket service. Distributes events to the state store; components subscribe only to what they need.

// ✓ Singleton service, fan-out via store
class WebSocketService {
  connect() {
    this.ws = new WebSocket('/ws');
    this.ws.onmessage = ({ data }) => {
      const event = JSON.parse(data);
      store.dispatch(handleLiveEvent(event));
    };
  }
}

// ❌ 1000 dispatches/sec → UI freezes
socket.on('metric', (data) => {
  dispatch(updateMetric(data)); // every single event
});

// ✓ Buffer updates, flush every 1 sec
const buffer = [];
socket.on('metric', (data) => {
  buffer.push(data);
});

setInterval(() => {
  if (buffer.length === 0) return;
  dispatch(batchUpdateMetrics(buffer.splice(0)));
}, 1000); // one re-render per second

Initial Load — Parallel Requests

// Fire all requests in parallel, not waterfall
const [summary, settings, history, filters] =
  await Promise.all([
    fetchDashboardSummary(),
    fetchUserSettings(),
    fetchHistoricalData({ range: '7d' }),
    fetchFilterOptions(),
  ]);

Caching Strategy

Set staleTimeper query key — don't apply a single TTL globally.

Frontend Scaling

• ✓ Code splitting — lazy load heavy chart libs
• ✓ Virtualization — react-window for all lists
• ✓ Chart downsampling — LTTB / min-max
• ✓ Memoization — React.memo + useMemo
• ✓ Efficient state updates — batch + transition

Backend / Platform Scaling

• ✓ WebSocket clustering via Redis pub/sub
• ✓ Event aggregation before push
• ✓ Horizontal scaling behind load balancer
• ✓ CDN for all static assets
• ✓ gzip / Brotli compression
• ✓ Database sharding by tenant