How to Use This Book
The shortest useful path
If you are new to the guide, do not try to read every page in order. Start with a goal, then produce artifacts.
| Goal | Start here | Produce |
|---|---|---|
| Build architect foundations | learning-paths/start-here-frontend-architect-curriculum | foundation map, state map, readiness packet |
| Orient across the full book | architecture-visual-map | personal reading path and artifact plan |
| Choose a product blueprint | reference-architectures/reference-architecture-overview | selected blueprint and deviation ADR |
| Draw architecture clearly | diagrams/frontend-architecture-diagram-pack | route, cache, observability, trust, GenUI, or package diagram |
| Prepare for interviews | system-design-interviews/frontend-system-design-answer-playbook | worked answers and route/data matrices |
| Build a portfolio | capstones/capstone-solution-pack-map | one complete capstone solution |
| Lead a team | part-xii/frontend-architecture-operating-model | decision register, exception register, scorecard |
| Fix production quality | part-xii/frontend-quality-scorecard | scorecard and review packets |
If you are preparing for interviews
Read:
- Part 0 foundation map
- Part I decision-making chapters
- Frontend Architect Interview Workbook
- system-design answer playbook
- worked answers for dashboard, lead funnel, observability, design system, offline app, and GenUI
- frontend architect rubric
Practice:
- draw the system boundary in five minutes
- produce a route rendering matrix
- name data and state ownership
- explain tradeoffs and rejected alternatives
- close with quality gates and rollout
If you are building a portfolio
Use the capstones as portfolio projects. A strong portfolio artifact includes:
- architecture summary
- diagrams
- ADR bundle
- data/state ownership map
- performance/security/accessibility/reliability gates
- rollout and rollback plan
- production scorecard
- final self-assessment against rubrics
Start with the SaaS dashboard capstone unless you already have a domain focus.
Use Reference Architectures before each capstone. The blueprint gives you the starting system shape; the capstone proves you can adapt it to constraints.
Use Reference Architecture Worked Solutions when you want compact examples of the route matrix, data map, ADR, risk register, and rollout plan each blueprint should produce.
If you are leading a team
Read:
- frontend architecture operating model
- architecture review checklists
- frontend quality scorecard
- client-side security/privacy review packet
- completed route architecture note
Install lightweight governance:
- decision register
- exception register
- third-party script register
- monthly quality scorecard
- review-depth matrix
If you are specializing
| Specialty | Hub |
|---|---|
| Performance | hubs/performance-architecture-hub |
| Security and privacy | hubs/security-privacy-hub |
| Design systems | hubs/design-system-hub |
| GenUI and AI full-stack | hubs/genui-ai-fullstack-hub |
Review prompts
- What artifact will prove you understood the chapter?
- Which production signal would prove the decision worked?
- Which related review packet should be used before launch?
- Which capstone or worked answer demonstrates the same pattern?
Source lens
This page is a navigation layer over the book's learning paths, capstones, review packets, rubrics, and completed artifacts.
Executable engineering track
The 18-domain engineering curriculum adds connected runtime examples, failure experiments and assessment criteria. It is available in the review-preview navigation while human approval is pending.