rgoussu.dev
rgoussu@goussu: ~/library/paths
❯ ~/library/paths cat full-stack-web.md

The full-stack web

# From browser internals to a shipped product — the frontend discipline in full, the API seam, and the RealWorld capstone where every piece must hold hands.

Pathsaved 2026-08-08 #path#frontend#fullstack#react#css#testing#api

Goal

Full-stack means owning everything between the database and the pixel. The backend half is covered by software craft and systems at scale; this path builds the half most backend-leaning engineers skip — the browser as a runtime, components and state as an architecture, CSS as engineering, accessibility and performance as requirements — then closes the loop through the API seam and a capstone where the whole stack ships as one product.

Prerequisites

Modules

1. The browser as a runtime

  • Read: Browser internals.
  • Do: Toy browser engine — at minimum through layout; the full build is its own reward.
  • Proof: the stage checks per the subject; the URL-to-pixels walk, now including the rendering half started in Foundations module 5.

2. Components & state

  • Read: Component architecture & state management.
  • Do: the note's drills — TodoMVC twice, the query-cache refactor, the compound component kata.
  • Proof: for any piece of state in your app you can name its category and owner in one sentence, and the vanilla-vs-framework cost comparison is written down.

3. CSS, owned

  • Read: CSS architecture & layout.
  • Do: the note's drills — layout warm-ups, the no-framework clone of a dense production page, the Every Layout primitives.
  • Proof: the clone holds at 320px–4K and 200% zoom without a media-query thicket.

4. The design system

5. Accessibility as a requirement

  • Read: Accessibility.
  • Do: the note's drills, plus retrofit: audit the module-4 components with axe and a keyboard-only session, fix what surfaces.
  • Proof: per-component a11y contracts documented; the audit's before/after list.

6. Rendering strategies

  • Read: Rendering strategies & meta-frameworks.
  • Do: the note's "same page, three ways" drill with real measurements.
  • Proof: your observed CSR/SSG/SSR table, and a per-page-profile recommendation you can defend.

7. Performance as a budget

  • Read: Web performance.
  • Do: the note's drills — profile and fix a slow real page, set a CWV budget in CI.
  • Proof: a before/after trace where the fix follows the metric, not the hunch.

8. Frontend testing

  • Read: Frontend testing.
  • Do: the note's drills — test the design system, the MSW retrofit, the Playwright money-path suite.
  • Proof: a deliberately broken API contract is caught by the integration layer; the E2E suite survives a cosmetic refactor untouched.

9. The API seam

  • Read: API design and Authentication & authorization.
  • Do: their practice drills — the contract-first kata and the PKCE login build are the two that matter here.
  • Proof: an OpenAPI contract with generated client types flowing into the frontend's single source of API truth.

10. Capstone: RealWorld

  • Read: nothing new — that's the point.
  • Do: RealWorld full-stack build, all five milestones.
  • Proof: the subject's acceptance gates, from the external API test collection to the tag-to-deploy release.

Related