10 parts · 61 chapters

Frontend System Design

A frontend system is a set of numbers (rows, users, bytes, updates per second, milliseconds) and the simplest design that meets them, revised each time a number grows past what the design can carry. Every revision is a named trade-off, and the skill is knowing which number breaks which design, and what to reach for next.

Nine systems, each run the same way the Core Banking module ran its rounds: a product brief, the questions that pin it down, requirements with numbers, the naive version, the failure demonstrated, the better version, and the point at which that one fails too. A data table that grows to ten million rows, a compute job that must not freeze the tab, a media pipeline, a dashboard at sixty frames, a collaborative editor, a list of a million items, a social feed, a real-time layer, and a trading screen with a latency budget.

PRD · numbers · increments · trade-offssenior → staff · frontend engineers designing systems, not components
the methodBrief, questions, requirements with numbers, v1, the break, v2, the next break: the same loop for every system.
data-intensiveTables, filters, pagination, normalisation, server state and exports from 10k rows to 10M.
compute and mediaWorkers, WASM, scheduling and cancellation; images, uploads, transcoding and adaptive video.
dashboards and listsCanvas versus SVG versus WebGL at 60 fps; virtualisation, identity and selection at a million items.
change-intensiveCollaborative editing with CRDTs and OT, presence, conflicts and offline.
social and real-timeFeeds, fan-out, infinite scroll and notifications; WebSockets, SSE, backpressure and ordering.
tradingOrder books, price streams, order entry, client-side risk checks, degraded modes, a latency budget in milliseconds.
trade-offsEach increment names what it costs: bytes, complexity, consistency, latency, or money.
00

The Method

What a frontend system design is · The loop: brief, questions, numbers, v1, the break, v2 · The numbers, and the budgets they are measured against · Naming the trade-off · The nine systems, and how to read them
5 ch · ~30 min
01

M1: A Data-Intensive Web App

The brief and the questions · v1: everything in memory · Round two: a million rows · Round three: one transaction, four views · Round four: select all, export everything · Round five: fresh, live, and hours-long sessions · The whole board, and the exercise
7 ch · ~50 min
02

M2: A Compute-Intensive Web App

The brief and the questions · v1: a loop on the main thread, and the freeze · Round two: a worker, and what crosses · Round three: many jobs, a pool, and stopping · Round four: the fuzzy pass and WASM · Round five: memory, devices, and the honest fallback · The whole board, and the exercise
7 ch · ~50 min
03

M3: A Media-Intensive Web App

The brief and the questions · v1: originals everywhere, and the decode budget · Round two: the upload pipeline · Round three: video is a bitrate ladder · Round four: delivery at a million visitors · The whole board, and the exercise
6 ch · ~45 min
04

M4: Visualisations and Dashboards

The brief and the questions · v1: SVG charts, raw series, and the pixel budget · Round two: reduce before you render · Round three: live mode at fifty updates a second · Round four: forty panels and three hundred dashboards · The whole board, and the exercise
6 ch · ~45 min
05

M5: Change-Intensive Apps

The brief and the questions · v1: save the document, and who loses · Round two: the document as a CRDT · Round three: presence · Round four: offline, sync, and semantic conflicts · The whole board, and the exercise
6 ch · ~45 min
06

M6: Managing React Lists at Scale

The brief and the questions · v1 and v2: the window and variable heights · Round three: identity under change · Round four: a million items as pages in a window · Round five: selection, focus and the screen reader · The whole board, and the exercise
6 ch · ~45 min
07

M7: Social Media

The brief and the questions · v1: a chronological feed, and where it is assembled · Round two: the feed as a media list · Round three: likes, counts and the graph · Round four: notifications, the badge and push · The whole board, and the exercise
6 ch · ~45 min
08

M8: Real-Time Design

The brief and the questions · v1: the transports, and one socket per widget · Round two: the subscription model · Round three: backpressure · Round four: presence and delivery guarantees · The whole board, and the exercise
6 ch · ~45 min
09

M9: A Trading System at Scale

The brief and the questions · v1: JSON ticks through React state, and the budget · Round two: the book as data, the tape as a ring · Round three: order entry, risk on the client, idempotent submission · Round four: degraded modes · The whole board, the course, and the exercise
6 ch · ~50 min
The loopEvery part runs the same loop: brief → questions → requirements with numbers → v1 → what breaks, with the number that breaks it → v2 → what v2 cannot survive. Read any part alone; read the first part for the loop itself.