Part VI — The Blueprint

11 High Level Design

GoalRun a 45-minute frontend system design interview end to end, using one repeatable frame.

11.1 HLD Overview One frame, eight steps, forty-five minutes — the structure is what's being graded, not the trivia. The 8-step frame + the 45-minute time budget · 16 min
11.2 HLD – Photo Sharing App (Instagram) An image pipeline feeding an infinite feed — the two hard problems are upload and scroll. Upload → transcode → CDN, plus the feed fetch path · 20 min
11.3 HLD – E-commerce App (Amazon, Flipkart) Different pages need different rendering strategies — that decision is the whole design. Per-route rendering split + the cart consistency problem · 20 min
11.4 HLD – News Media Feed (Facebook, Twitter) A cursor-paginated list that must accept live inserts without ever moving content under the reader. Cursor feed with buffered live prepends · 19 min
11.5 HLD – Video Streaming (Netflix) Adaptive bitrate keeps the buffer full — every other decision serves that one goal. ABR ladder + buffer state machine · 20 min
11.6 HLD – Music Streaming (Spotify) The player must survive navigation, so it lives above the router — everything else follows from that. Player above the route tree + queue state machine · 18 min
11.7 HLD – Live Commentary (CricInfo, Cricbuzz) One event fans out to millions of read-only clients — the design problem is broadcast, not interaction. Fan-out from one event to N clients + the spike profile · 18 min
11.8 HLD – Email Client An offline-first local database that syncs both ways — the design is the sync protocol. IndexedDB schema + two-way sync with a watermark · 20 min
11.9 HLD – Diagram Tools (Excalidraw) A canvas render loop plus an operation log — undo, collaboration, and persistence all come from the log. Canvas layer model + operation log driving undo and sync · 20 min
11.1 HLD – Analytics Dashboard (Google Analytics) Aggregate on the server, render only what fits on screen, and never ship a million rows to a browser. Query pipeline + widget grid with independent loading · 19 min
11.11 HLD – Google Docs Two people typing in the same paragraph is the entire problem — OT or CRDT is the answer. Concurrent edit conflict + OT vs CRDT resolution · 21 min
11.12 HLD – Google Sheets A virtualized grid over a dependency graph — render what's visible, recalculate only what changed. Virtualized viewport + formula dependency DAG · 21 min
11.13 Microfrontend Split the frontend by team ownership, compose at runtime, and pay for it in shared-dependency discipline. Shell + remotes composition, and the version-skew problem · 20 min
11.14 HLD Kanban Board Drag-and-drop with optimistic reordering — the design problem is what happens when the server says no. Optimistic reorder with rollback + fractional ordering keys · 19 min

Capstone

Record yourself designing any two of these in 45 minutes each, following the 8-step frame without notes.