Lesson roadmap¶
One app, thirteen checkpoints, increasing independence.
| Lesson | Build | Interview focus |
|---|---|---|
| 1 | App shell | elements, components, JSX |
| 2 | Topic cards | identity, keys, conditional UI |
| 3 | Progress UI | props, children, ownership |
| 4 | Tracker reducer | state, actions, derived data |
| 5 | Provider boundary | Context, dependencies, testability |
| 6 | Lazy topic routes | URLs, parameters, splitting |
| 7 | Study form | controlled inputs, validation |
| 8 | Topic repository | fetching and async states |
| 9 | Search synchronization | effects, cleanup, cancellation |
| 10 | Behavior tests | Vitest and Testing Library |
| 11 | Render optimization | profiling and memoization |
| 12 | Production boundaries | a11y, security, SSR |
| 13 | Change request | synthesis and design defense |
Run npm run typecheck && npm test && npm run lint && npm run build after each checkpoint.