Start Here: Frontend Architect Curriculum
Purpose
This is the guided path through the book. It turns the guide into a 24-week curriculum with reading, practice, and portfolio artifacts. If you want the shortest serious route from senior frontend engineer to frontend architect, follow this path.
How to use this curriculum
Each week produces an artifact. Do not only read. Architecture skill compounds when you write decisions, diagrams, review packets, scorecards, and postmortems.
The weekly output should be stored in a portfolio folder:
frontend-architect-portfolio/
01-foundation-map/
02-route-architecture/
03-performance-budget/
...
Phase 1: Foundation and Diagnosis
| Week | Focus | Read | Artifact |
|---|---|---|---|
| 1 | Architect foundation | Part 0 foundation map, senior mindset, architect thinking | four-contract review of one production route |
| 2 | State and runtime | Part 0 domain/data/state, browser runtime, forms | state ownership map and interaction state matrix |
| 3 | Production readiness | Part 0 testing, tooling, observability, production readiness | launch readiness packet for one route |
| 4 | Weakness diagnosis | senior weakness diagnosis, transition mistakes, ownership exercises | personal skill scorecard and 30-day remediation plan |
Phase 2: Decision Quality and Platform Depth
| Week | Focus | Read | Artifact |
|---|---|---|---|
| 5 | ADRs and tradeoffs | Part I ADRs, tradeoff calculus, decision uncertainty | two ADRs with rejected alternatives |
| 6 | Browser platform | Part II web platform, event loop, CRP, networking | route runtime cost map |
| 7 | Rendering/data | Part III rendering taxonomy, RSC boundaries, API/BFF, cache layering | route rendering matrix |
| 8 | Mutations and local-first | server functions, mutation consistency, offline/local-first chapters | mutation lifecycle and idempotency design |
Phase 3: Codebase, Scale, and Delivery
| Week | Focus | Read | Artifact |
|---|---|---|---|
| 9 | Module boundaries | Part IV codebase architecture, feature slicing, shared utilities | feature/module dependency map |
| 10 | Platform engineering | frontend platform engineering, dependency governance | golden-path proposal and exception policy |
| 11 | System design at scale | Part V system design, multi-region, realtime, cost | system context diagram and NFR table |
| 12 | Performance architecture | Part VI performance architecture, budgets, profiling | completed performance budget and trace review |
Phase 4: Design Systems, Reliability, Security, Accessibility
| Week | Focus | Read | Artifact |
|---|---|---|---|
| 13 | Design systems | Part VII architecture, tokens, APIs, accessibility contracts | component API review |
| 14 | Theming and adoption | theming, governance, design-system package architecture | migration/adoption scorecard |
| 15 | Security and privacy | Part VIII security, auth/session, browser attack surface, privacy measurement | client-side security/privacy review |
| 16 | Reliability and accessibility | resilience, frontend SRE, WCAG engineering, chaos drills | failure/degradation matrix and incident drill |
Phase 5: Leadership, Reviews, and AI
| Week | Focus | Read | Artifact |
|---|---|---|---|
| 17 | Governance | Part IX governance, team topologies, RFC process | architecture operating model for a team |
| 18 | Communication | executive communication, debt roadmapping, mentoring | executive architecture narrative |
| 19 | Case studies | Part XI case studies | postmortem-style case study rewrite |
| 20 | Review toolkit | Part XII templates, checklists, completed examples | completed architecture review packet |
| 21 | GenUI foundations | Part XIII GenUI architecture, protocols, RAG, registry | GenUI workflow boundary and registry contract |
| 22 | GenUI production | GenUI eval governance, production playbook, launch review | eval matrix and kill-switch matrix |
Phase 6: Portfolio and Assessment
| Week | Focus | Read | Artifact |
|---|---|---|---|
| 23 | Capstone | choose one capstone and related solution pack | full capstone solution draft |
| 24 | Review and polish | rubrics, maturity model, calibration exercises | final portfolio packet and self-assessment |
Minimum portfolio package
By the end, you should have:
- route architecture note
- route rendering matrix
- state ownership map
- performance budget
- threat model or client-side security/privacy review
- design-system API review
- quality scorecard
- architecture operating model
- GenUI eval or registry artifact
- one full capstone solution
- self-assessment against the frontend architect rubric
Shortcut paths
| Goal | Weeks to prioritize |
|---|---|
| Interview prep | 1, 5, 7, 12, 15, 20, 23, 24 |
| Performance architect | 2, 6, 7, 12, 16, 20 |
| Design-system architect | 1, 13, 14, 17, 20 |
| Security/reliability architect | 3, 15, 16, 20 |
| GenUI architect | 7, 15, 20, 21, 22 |
Final review
Use:
rubrics/frontend-architect-rubricrubrics/frontend-architecture-maturity-modelrubrics/rubric-calibration-exercisescapstones/solution-packs/capstone-solution-pack-map
The goal is not to finish every chapter. The goal is to produce evidence that you can make architecture decisions other teams can understand, operate, and evolve.
Review checkpoints
- After week 4, review whether your artifacts expose weak foundations.
- After week 12, review whether your route, data, and performance decisions are measurable.
- After week 20, review whether your operating model has owners and feedback loops.
- After week 24, score the portfolio against the frontend architect rubric and maturity model.