React TypeScript Foundations

This repository is a deterministic, prompt-first training system for experienced backend engineers learning browser, TypeScript, React, tooling, and fullstack frontend work.

It is not a passive tutorial. Learners run standalone prompts, make a user-first attempt, produce artifacts, and then use review, debugging, and interview prompts to tighten the work.

Where To Start

Learners should start with tracks/sequence.md, then open exercises/01-dom-state. Follow the exercise README, make the required user-first attempt in starter/, and use the review, debugging, and interview artifacts before advancing.

Maintainers should use .prompts/ only when adding, replaying, or reviewing repository build prompts. The current repository buildout is complete through .prompts/PROMPT_19.txt; .context/prompt-log.md records that there is no next expected build prompt right now.

System Map

flowchart TD
  BuildPrompts[.prompts build plan] --> RepoDocs[Root contract docs]
  RepoDocs --> Tracks[Tracks and canonical sequence]
  Tracks --> Exercise[Exercise README and constraints]
  Exercise --> Starter[Starter attempt]
  Starter --> Review[Self-assessment and LLM review]
  Review --> Broken[Broken cases and scenarios]
  Broken --> Interview[Interview and design gates]
  Interview --> Advance[Advance to next layer]

Loading

Learning Layers

The build order is strict:

1. Browser Fundamentals, no React.
2. TypeScript as a Control System.
3. React as a State Machine.
4. Tooling and Build Pipeline.
5. Fullstack Integration.

Progressive Constraint Ladder

Every exercise uses the same ladder:

1. ORIENTATION: concept explanation, backend analogies, common traps.
2. GUIDED CONSTRUCTION: partially scaffolded implementation, strict constraints.
3. CONSTRAINED REBUILD: minimal hints, no copy/paste.
4. ADVERSARIAL DEBUGGING: intentionally broken implementations, realistic bugs.
5. EXPLANATION + TRADEOFFS: interview-style reasoning and architecture decisions.

How To Use This Repo

1. Choose the learner path or maintainer path from "Where To Start."
2. For learner work, follow the next exercise in tracks/sequence.md.
3. Make the required user-first attempt before requesting implementation help.
4. Save the exercise artifacts requested by the exercise README.
5. Run the validation steps named by that exercise.
6. Use the review, bug-hunt, and interview prompts to identify gaps.
7. Revise the artifacts until they satisfy the constraints.

What Completion Means

Completion means working code and defensible reasoning, not finishing prose. A completed unit has:

• runnable or inspectable artifacts that satisfy the target concept;
• explicit handling of required states and constraints;
• self-review against the exercise contract;
• adversarial debugging work against realistic defects;
• interview-ready explanations of tradeoffs and failure modes.