Learning Path: Senior Frontend to Frontend Architect

Target learner

This path is for senior frontend engineers who can ship complex features but want to move from feature ownership to system ownership. The goal is not to memorize more frameworks. The goal is to learn how to make decisions that survive production traffic, multiple teams, changing product strategy, and future platform shifts.

Prerequisites

You should already be comfortable with React or a comparable component model, TypeScript, routing, API integration, testing basics, browser debugging, and production delivery. If those are weak, complete Part 0 slowly before moving on.

Recommended chapter sequence

Phase	Chapters	Outcome
Baseline	Part 0	Shared vocabulary for performance, security, testing, observability, delivery, and platform constraints.
Decision quality	Part I	Ability to write tradeoff-based architecture decisions instead of preference-based proposals.
Runtime and data	Part II and Part III	Route-level rendering, caching, hydration, networking, and mutation judgment.
Codebase scale	Part IV	Module boundaries, ownership, dependency rules, and migration strategy.
Production quality	Part VI, VII, VIII	Performance, design-system, accessibility, reliability, and browser-security gates.
Leadership	Part IX, X, XII	RFCs, governance, review packets, portfolio artifacts, and cross-team communication.

Eight-week study plan

Week	Focus	Required output
1	Senior foundation	Identify three weak areas from Part 0 and write a remediation plan.
2	Decision models	Write two ADRs: one rendering decision and one dependency governance decision.
3	Rendering and data	Build a route rendering matrix for a realistic SaaS product.
4	Codebase boundaries	Design a feature-sliced module map and dependency policy.
5	Performance	Define budgets for three routes and a profiling workflow.
6	Security, reliability, accessibility	Write a threat model, degradation plan, and accessibility contract for one workflow.
7	Governance	Run a simulated architecture review using a review packet.
8	Capstone	Complete the Production SaaS Dashboard capstone and final review.

Required exercises

• Use part-iii/tutorial-rendering-data-architecture-lab to design route-level rendering decisions.
• Use part-iv/tutorial-refactor-frontend-monolith to practice boundary migration.
• Use part-vi/tutorial-performance-budget-profiling-lab to connect budgets to profiling.
• Use part-xii/tutorial-architecture-review-program to practice review governance.

Capstone project

Complete capstones/capstone-production-saas-dashboard. The final artifact should include a system context diagram, route rendering matrix, API/BFF contract, module boundary map, performance budget, observability plan, three ADRs, and a launch review packet.

Portfolio artifacts

• Architecture overview document
• ADR bundle
• Route rendering and data ownership matrix
• Performance budget and profiling evidence
• Security and accessibility review notes
• Migration or rollout plan
• Final architecture review summary

Self-assessment rubric

Use rubrics/frontend-architect-rubric. A learner is ready for architect-scope work when most areas are level 4 and no critical production area is below level 3. A level 5 is not required to start architect work; it means the engineer can teach, govern, and adapt the capability across teams.

Review checklist

• Can explain user and business risks without hiding behind framework language.
• Can name the tradeoffs of each major decision.
• Can separate reversible decisions from hard-to-reverse commitments.
• Can prove quality with observable signals, not confidence.
• Can communicate decisions to product, design, backend, and leadership audiences.