HomeGroundworkHow this is built
Start reading

A design review of the site you are reading

How this site is built

Every other topic here explains somebody else's system. This one explains its own — and every number in it was measured against the running site rather than estimated, including the unflattering ones.

Start here: What this site is The system on one page
26 chaptersabout 4 hours of reading253 chapters written across the site

Measured at build time8 numbers

The site, counted

Counted from the repository during the build that made this page, including the unflattering ones.

page routes
76
route handlers, 3 under /api
27
lines of app code in 551 files
61,797
lines of written content
246,043
languages run in the browser
11 of 17
exercises with tests
955
dependencies + dev tools
42 + 15
unit test files + browser specs
98 + 1

The system on one page20 boxs

Pick any box

Every row is a chapter. Read the ones behind the part you care about first.

Your browser

while you read and code

8 chapters

Vercel

on every request

4 chapters

The build

before you arrive

4 chapters

Around it

on every push

4 chapters

Read it in order26 chapters

Three parts, one trail

From what the site is made of, to how a request runs, to how it holds up.

Foundations

What the site is, what it is made of, and where everything lives.

6 chapters0 / 6 read

  1. What this site isOne decision shaped everything else: the site is a build artifact, and the heavy work runs in your browser.
    5 min
  2. The tech stackEvery dependency, what it does here, where it runs, and what it would cost to remove.
    6 min
  3. Where everything livesTen directories, the rule each one follows, and the places the rules bend.
    6 min
  4. The content modelFour types, two special cases, and one record that turns into several routes.
    6 min
  5. What is written and what is notSeven of thirty-two topics are written. The other twenty-five say so rather than pretending.
    6 min
  6. 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.
    13 min

How it runs

From request to rendered page, and every feature that runs in your browser.

13 chapters0 / 13 read

  1. 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.
    6 min
  2. 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.
    6 min
  3. 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.
    24 min
  4. 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.
    9 min
  5. An editor inside a web pageCodeMirror, a worker full of tools, files that live in localStorage, and links that carry code.
    9 min
  6. Eleven languages, no serverThree workers, two iframes, one database on the main thread, and a C compiler that downloads itself.
    10 min
  7. How an answer gets checkedTests written once in JavaScript, replayed in six other languages, and a React sandbox in an iframe.
    9 min
  8. Stepping through a runRecord every statement once, then scrub through the recording as if it were live.
    7 min
  9. The whiteboardAn infinite SVG board built on plain arrays, pure functions and one history stack.
    9 min
  10. The mock interview engineA loop planner, a pure session reducer and a hiring committee, all in the browser.
    8 min
  11. 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.
    6 min
  12. 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.
    7 min
  13. The design systemNine themes and eight fonts as CSS variables, two page frames, and the checks that keep them readable.
    26 min

How it holds up

Speed, safety, tests, delivery, current health and what breaks first.

7 chapters0 / 7 read

  1. 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.
    8 min
  2. 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.
    8 min
  3. Tests and hooks1630 unit tests, 27 browser tests, and one test that checks what these pages say about the site.
    9 min
  4. How code reaches readersA branch, a preview, a merge, and a daily job that deletes what Vercel would otherwise keep forever.
    7 min
  5. 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.
    6 min
  6. 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.
    5 min
  7. 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.
    5 min