Part 2 · 1 chapters · ~8 min

Frontend System Design

The frontend design round format, requirements and constraints, component and state architecture, rendering strategies, API design from the client's side, caching and real-time updates, performance budgets, accessibility and internationalisation, and five classic prompts worked in outline (news feed, autocomplete, chat, spreadsheet, payments checkout).

3

Five prompts in outline

promptthe hard part to findLearna
news feedinfinite list virtualisation, cursor pagination, new-item insertion without jumpsFSD P6 lists at scale
autocomplete / typeaheaddebounce, cancellation of stale requests, caching prefixes, keyboard accessibilityFSD P2, Disciplines
chatWebSocket lifecycle, ordering, optimistic send with client ids, offline queueFSD P8 real-time
spreadsheet / data grid2D virtualisation, formula dependency graph, recalculation in a workerFSD P2 compute-intensive
payments checkoutidempotent submit, pending and unknown states, 3-D Secure redirects, never double chargeTrust course, API Design P8
code
structure for 45 minutes
 5 min  requirements and constraints (devices, data size, real-time, a11y)
10 min  component tree and data flow; API contract sketch
15 min  deep dive on the hard part (the column above)
10 min  performance, accessibility, failure states, observability
 5 min  trade-offs you made and what you would do with more time
FRONTEND SYSTEM DESIGN, THE AXES
what interviewers probe in a frontend design round
requirementsUsers, devices, networks, scale ofdata, real-time needs.architectureRendering (CSR, SSR, streaming,RSC), routing, state layers.dataAPI shape, caching, pagination,optimistic updates, offline.performanceCore Web Vitals, bundle budgets,virtualisation, images.accessibility and i18nKeyboard, screen readers, RTL,locale formatting.operationsError tracking, feature flags,experiments, rollout.
swipe the figure sideways, or tap expand for full screen
1/4
requirements
Ask who uses it, on what devices and networks, how much data, and what must be real-time. A news feed on 3G in Lagos is a different design from an internal dashboard.
users, devices, networksdecides everything else