Skip to content

Adaptive lesson and lab roadmap

One application, twelve focused lessons, and one independent capstone. Do not treat the table as a mandatory linear syllabus: begin with the diagnostic, then choose the route matching your evidence.

Lesson Capability Prerequisite Primary subskills Capstone evidence
1 App shell and lazy dashboard TypeScript, HTML fundamentals, runtime composition/loading boundary
2 Searchable, stable topic views Lesson 1 model fundamentals, debugging correct rendering identity
3 Reusable typed component APIs bindings/events architecture, accessibility explicit ownership contract
4 Signal-based tracker store immutable updates state, runtime source/derived state model
5 Testable DI capabilities store ownership architecture, production intentional lifetime
6 Deep-linkable lazy routes DI and async states architecture, security URL/loading/navigation policy
7 Typed session workflow domain commands fundamentals, accessibility validation/submission model
8 Repository and async UI DI, unions reliability, security trust/failure boundary
9 Cancellation-aware streams HTTP/observables runtime, debugging temporal policy
10 Risk-based verification Lessons 4–9 testing, debugging regression evidence
11 Measured rendering improvement identity/testing performance before/after evidence
12 Production architecture applied core lessons architecture, security, ops ADR and failure analysis
13 Independent feature change applied evidence synthesis implementation and defense

Choose your route

  • Gap: complete Objective through Verification, opening hints one at a time only after attempts.
  • Fragile: read Mental Model and Engineering Reality, reproduce the failure, then complete Analyze/Evaluate challenges.
  • Solid: start at Verification. If prediction, implementation, and explanation hold, record evidence and move on.
  • Unmapped: return to the diagnostic; familiarity is not placement evidence.

Progression

  1. Calibration: Lessons 1–3 expose framework/runtime assumptions.
  2. Core fluency: Lessons 4–10 build state, lifetime, URL, forms, data, time, and testing capability.
  3. Optimization and production: Lessons 11–12 connect framework decisions to measured and operational outcomes.
  4. Independent synthesis: Lesson 13 removes the recipe and requires a defended system.

Spaced retrieval schedule

Answer before reopening the earlier lesson.

At lesson Retrieve
4 ownership and stable identity from 2–3
5 root composition from 1 and store ownership from 4
8 route loading from 6 and typed state from 7
9 signal derivation from 4 and cold HTTP from 8
10 public contracts from 3 plus route/form/HTTP/stream behavior from 6–9
11 list identity from 2 and lazy delivery from 1
12 trace every earlier boundary through a production failure
13 retrieve all weak areas through implementation; reread only after evidence identifies a gap

After a successful check, schedule the concept farther out (approximately +1 day, +7 days, +21 days). A later failure moves it back to Fragile and creates targeted practice.

Rules of engagement

  • Predict before running code and consult official API docs after forming a model.
  • Never use any or assertions to hide a design mismatch.
  • Keep state at the narrowest owner and derive rather than synchronize duplicate truth.
  • Reproduce and identify root cause before fixing deliberate failures.
  • Test observable behavior and domain decisions, not private implementation.
  • Record evidence that supports and could overturn each design claim.

Checkpoint commands

cd basics-components
npm run build
npm test

A green build is necessary, not sufficient. Exercise changed paths in the browser and verify keyboard focus, empty data, invalid input, failures, and teardown where relevant.