Frontend System Design — Worked Examples

The frontend half of system design. Backend SD asks about partitioning, replication, queues; frontend SD asks about state colocation, render strategy, the bytes you ship, real-time UX, accessibility, and the failure modes the user sees. These are the “design X” prompts you get in senior front-end and full-stack screens.

Files

The senior rubric — answer in this order, every time

Interviewers grade structure as much as the answer. A loose recipe that wins:

1. Clarify requirements (2–3 minutes). Scale (users, items, message rate), platforms (web/mobile/web-only), realtime needs, offline support, accessibility floor, browser/network constraints.
2. Define the API contract. REST vs GraphQL vs WS, request/response shapes, pagination strategy (offset vs cursor — see Pagination — Offset vs Cursor, and Infinite Queries), idempotency.
3. Data model on the client. Normalized vs nested, what lives in server cache (TanStack/SWR), what’s local UI state, what’s URL state, what’s persisted (IndexedDB/localStorage).
4. Rendering strategy. CSR/SSR/SSG/RSC trade-offs (see Rendering Modes — Senior Interview Prep). Hydration cost. Streaming.
5. Component architecture. Container/presentation split, where state lives, where it’s lifted, where it’s colocated. How props flow. Memoization budget.
6. Performance budget. Initial bundle target, LCP/INP/CLS targets, when to virtualize, when to defer, when to prefetch.
7. Failure modes. Network drops, slow server, server errors, lost connection, concurrent edits, race conditions, double-submits, stale data. Each one with the UX response.
8. Accessibility. Keyboard navigation, focus management on dynamic updates, ARIA where semantic HTML can’t carry, screen reader announcements for live regions.
9. Telemetry. What you’d measure (Core Web Vitals, error rate, latency p99) and how you’d act on it.

A senior answer hits 5–7 of those without prompting. A mid answer hits 2–3 and waits for the interviewer to ask for the rest.

Cross-references

• Data fetching patterns used throughout: APIs & Data Fetching — Senior Interview Prep
• Performance budgets and Web Vitals: Frontend Performance — Senior Interview Prep
• Backend system design (URL shortener, payments, chat backend, etc.): Worked designs
• Backend design framework: Design framework