State shape
How to design client-side state shape — local vs global, colocation, derived state, and normalization tradeoffs.
topic 06
State shape, data fetching, monorepo boundaries, build pipelines.
How to design client-side state shape — local vs global, colocation, derived state, and normalization tradeoffs.
Where data fetching happens decides LCP. Server fetch collapses the critical path to one round-trip; client fetch after JS adds 2-4 sequential trips. Waterfalls are silent killers — Promise.all, RSC, and TanStack Query cache cure them.
Accessible form patterns: semantic HTML, ARIA labels, focus management, error messaging, and keyboard navigation.
Design tokens as the single source of truth for color, spacing, and typography across components and themes.
Monorepo tooling tradeoffs — Turborepo, Nx, and changesets — and when shared packages justify the overhead.
Route-level and component-level code splitting, lazy loading, and preload strategies that keep Time-to-Interactive low.
Frontend build pipelines: bundler internals, tree shaking, module federation, and CI/CD integration.
Capstone: applying state, forms, tokens, monorepo, splitting, and build knowledge to a production frontend architecture.
Every unit, from the underground to the orbit. Frontend Architecture is one constellation in the atlas — climb another topic and watch the next one light up.