Step 1 of 2
How much How this is built do you already have?
Be honest, nobody is watching. This only decides which chapters come first. Every chapter stays open to you either way.
Part 1 of 3
Beginner
“I want to know what this thing is.”
6 chapters~42 min0 exercises
Orientation — the one decision that shaped the site, every dependency and why it is there, where the code lives, how the content is modelled, and what is written versus what is still an outline.
It opens with
- B1What this site is5 min
- B2The tech stack6 min
- B3Where everything lives6 min
- B4The content model6 min
and 2 more chapters below
This is you if
- You have opened the repository and want the map
- You want the stack without reading package.json
- You want to know what is real and what is planned
Part 2 of 3
Intermediate
“I want to know how it runs.”
13 chapters~2 h 16 min0 exercises
The moving parts: what happens on a request, how 559 pages are produced, where the server ends and the browser begins, where a reader's state lives, how the playground executes code, the four endpoints, and search without a search service.
It opens with
- I1What happens when you open a page6 min
- I2How 1,762 files get made6 min
- I3Server, client, and the line between them24 min
- I4Where a reader's state lives9 min
and 9 more chapters below
This is you if
- You are comfortable with the map and want the mechanics
- You want to know why every page route is static
- You want the server/client boundary explained with numbers
Part 3 of 3
Advanced
“I want to know whether it holds up.”
7 chapters~48 min0 exercises
The design review: what was measured and what changed, the security posture, what the local checks cover, the current health of the project including what is failing, what breaks first under pressure, and what is next.
It opens with
- A1Performance, and how it is kept8 min
- A2Security: strangers' code and strangers' links8 min
- A3Tests and hooks9 min
- A4How code reaches readers7 min
and 3 more chapters below
This is you if
- You want the regressions, not the highlights
- You want to know where this design stops being right
- You are looking for a worked example for a design interview
Every stop on the way
Everything each level eventually covers. Solid cards are written and open to read, dashed ones are still on the desk.
Beginner
“I want to know what this thing is.”
6 chapters written
- What this site isOne decision shaped everything else: the site is a build artifact, and the heavy work runs in your browser.
- The tech stackEvery dependency, what it does here, where it runs, and what it would cost to remove.
- Where everything livesTen directories, the rule each one follows, and the places the rules bend.
- The content modelFour types, two special cases, and one record that turns into several routes.
- What is written and what is notSeven of thirty-two topics are written. The other twenty-five say so rather than pretending.
- Every route and why the URLs look the way they do53 pages, 27 route handlers, the metadata files, and the links that live after the # sign.
Checkpointyou can say what the site is built from and why it has no database
Intermediate
“I want to know how it runs.”
13 chapters written
- What happens when you open a pageEvery page and every JSON file is already a file when you ask for it. Three handlers under /api are the only code that runs per request, plus one quiet exception.
- How 1,762 files get madeOne source of truth, one pass, and every page, index, test case and preview image is derived from it in about thirty seconds.
- Server, client, and the line between themEvery page is rendered on the server once, at build time. The work is in deciding what crosses into the browser and making sure the first client render matches what the server wrote.
- Where a reader's state livesThirty-six localStorage keys, two sessionStorage keys, a query string and a URL hash. There are no accounts, no cookies and no database.
- An editor inside a web pageCodeMirror, a worker full of tools, files that live in localStorage, and links that carry code.
- Eleven languages, no serverThree workers, two iframes, one database on the main thread, and a C compiler that downloads itself.
- How an answer gets checkedTests written once in JavaScript, replayed in six other languages, and a React sandbox in an iframe.
- Stepping through a runRecord every statement once, then scrub through the recording as if it were live.
- The whiteboardAn infinite SVG board built on plain arrays, pure functions and one history stack.
- The mock interview engineA loop planner, a pure session reducer and a hiring committee, all in the browser.
- Every endpoint, and how each one failsThree route handlers run per request, and three families of JSON routes were run once, at build time. This chapter covers what each takes, what it caches and what the reader sees when it breaks.
- Search without a search serviceTwenty-one JSON files written at build time, fetched on the first keystroke and scanned in the browser, with a test that fails the build when one grows too large.
- The design systemNine themes and eight fonts as CSS variables, two page frames, and the checks that keep them readable.
Checkpointyou can trace a request from the browser to the file that answers it
Advanced
“I want to know whether it holds up.”
7 chapters written
- Performance, and how it is keptBudgets that fail the check, code that loads only when it is asked for, and two places where the browser is told to skip work.
- Security: strangers' code and strangers' linksCode runs in workers and sandboxed frames, share links are parsed as hostile, and a policy says who the page may talk to.
- Tests and hooks1630 unit tests, 27 browser tests, and one test that checks what these pages say about the site.
- How code reaches readersA branch, a preview, a merge, and a daily job that deletes what Vercel would otherwise keep forever.
- Current health: what is actually wrongThe checks pass. The debt is in a stuck framework version, a few very large files, repeated code, and documents that have drifted from the code.
- What breaks firstTraffic is the least of it. The limits that are close are a search index, a storage plan and a few files that grow with every exercise.
- What is missing on purpose, and what is nextHalf of the old list has shipped. What is left is a schema, offline reading, accounts, and a short list this rewrite turned up.
Checkpointyou can name what would break first, and what it would take to fix
Three honest notes
This is the only topic on the shelf about the site itself, which is why it reads as a reference rather than a course — there is no exercise to do, only a system to understand.
The advanced tier is the point of it. Anyone can describe an architecture that works; the chapters on performance, current health and what breaks first are the ones that make it a design review rather than a tour.
It doubles as the missing practice for System Design: a real system, with real numbers, including the parts that are wrong.