Frontend System Design: Design a Large-Scale Client-Side Architecture for a Dashboard Application

Question

## Round 1 - System Design

## Problem

Design the frontend architecture for a real-time analytics dashboard used by 50,000 concurrent enterprise users. The dashboard displays live charts, filterable data tables, and drill-down panels — all updating every 10 seconds.

**Scope (clarify before diving in):**
- What is the expected data volume per user per update cycle?
- Does the app need to work offline?
- What browser support matrix is required?

## Key Areas to Cover

**State Management**
- How do you structure global vs. local component state?
- What state management library (Redux, Zustand, Jotai) fits this scale and why?

**Real-Time Data**
- WebSocket vs. SSE vs. polling for 10s updates.
- How do you handle reconnections gracefully without UI flicker?

**Performance**
- Virtual scrolling for large tables (100k+ rows).
- Chart rendering: Canvas vs. SVG at high data density.
- Bundle splitting and lazy loading for dashboard panels.

**Component Architecture**
- Design a composable filter system that multiple panels share.
- How do you isolate panel failures so one broken widget does not crash the dashboard?

## Follow-ups

1. How do you test real-time behavior in a CI environment without a live WebSocket server?
2. What monitoring would you add on the client side to detect and report rendering performance regressions?
3. How would you handle role-based visibility (some panels only visible to admins)?

Frontend System Design: Design a Large-Scale Client-Side Architecture for a Dashboard Application

Question Details

Full Details

Topics

More from Stripe