Frontend Beauty
ESC

Type to search the knowledge base.

System Design Interview Framework FE

A frontend-first system design framework — journeys, UI map, data/cache, client architecture, and non-functionals under time.

advanced3 min read
  • interview
  • system-design

Frontend system design is not drawing Kubernetes. It is designing client architecture that meets product, performance, accessibility, and team constraints.

What interviewers score

  1. Requirements discipline — goals, non-goals, scale assumptions
  2. User-centric structure — journeys before tech
  3. Data & state — cache, ownership, consistency
  4. Non-functionals — perf, a11y, security, i18n
  5. Phased delivery — MVP vs scale

45–60 minute timeline

Minutes Phase
0–5 Clarify goals, users, constraints, success metrics
5–12 Journeys + UI map (screens/components)
12–25 Data model + API sketch + client state
25–40 Deep dive (realtime / offline / perf / a11y)
40–50 Failure modes, security, observability
50–60 Phases, tradeoffs, Q&A

Phase 1 — Clarify

Ask:

  • Who are the users? Critical path?
  • Scale: items per view, concurrent editors, regions?
  • Realtime? Offline? Mobile web?
  • Auth model? Multi-tenant?
  • Metrics: LCP/INP targets?

Write non-goals explicitly (“not building ads platform”).

Phase 2 — UI map

Boxes, not code:

[App shell]
  Nav / auth gate
  [Primary surface]
    List / canvas / editor
    Detail / inspector
  Overlays: modal, toast, command palette

Examples to study: Design news feed · Design YouTube · Autocomplete.

Phase 3 — Data & API

Concern Talk about
Entities IDs, relationships client needs
Reads list endpoints, pagination, search
Writes optimistic vs pessimistic
Cache keys ['todos', filters] style thinking
Invalidation on mutation, TTL, websocket events
Auth cookie/session, 401 recovery

Related: Frontend caching strategies · Auth session design · Optimistic UI.

Phase 4 — Client architecture

Pick deliberately:

Layer Options to compare
Rendering CSR / SSR / RSC / hybrid
Routing Client routing at scale
Server state RQ/SWR mental model vs hand-rolled
UI state local, URL, machine
Realtime polling, SSE, websocket
Offline SW + IDB — Offline notes

Rendering modes (Next-flavored): Rendering modes.

Phase 5 — Non-functionals (do not skip)

Performance

  • Budgets for LCP/INP
  • Code split by route
  • Virtualize huge lists
  • Image strategy

Core Web Vitals · Performance talking points.

Accessibility

  • Keyboard paths for core flows
  • Focus in overlays
  • Live regions for async status

A11y talking points · A11y in large apps.

Security

  • XSS surfaces
  • CSRF if cookie auth
  • CSP

Security talking points.

Observability

  • RUM vitals
  • error boundaries + reporting
  • feature flag exposure

Error monitoring design · Feature flags.

Deep-dive menu (pick 1–2)

Deep dive When
Realtime collab Cursors, OT/CRDT high-level — Realtime cursors
Design system Tokens, versioning — Design system
Media Players, buffering — Video player
Dashboard Heavy charts — Analytics UI
Edge rendering Edge tradeoffs

Failure modes checklist

  • Slow API / partial outage
  • Stale cache after write
  • Auth expiry mid-flow
  • Race: old response wins
  • Huge list freezes main thread
  • Offline queue conflict

Phased delivery

MVP: read path + auth + core write
v1: perf budgets + a11y hard gates
v2: realtime / offline / experiments

Tradeoff language

Always: “Given X constraint, I prefer Y because Z; risk is W.”
See Tradeoff language.

Further reading

Design is a conversation. Checkpoint often: “I’ll go deeper on caching unless you prefer realtime.”