frontend / README.md

Frontend System Design — Worked Examples

2 min read index source

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

# Design
01 Typeahead / autocomplete
02 Infinite feed (Twitter-style)
03 Image gallery (responsive, lazy, lightbox)
04 Chat (optimistic + WS + presence)
05 Collaborative editor (CRDT/OT)
06 Document comments (Google-Docs style)
07 File uploader with resume
08 Notification center
09 Design a component library

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 ../11_apis_data_fetching/04_pagination_and_infinite_queries.md), 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 ../19_rendering_modes/). 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