React (Modern)
Learn React through original products with increasing state, routing, data, and evidence demands
Phase Goal
Build three substantial React products with decreasing guidance: a local aquarium-care console, a routed query-powered transit-accessibility explorer, and a deployed emergency-shelter readiness dashboard.
Open the written lectures for this course before checking off the phase topics.
Day 33: React from the Browser Up
Day 34: Props, Conditional UI, and List Identity
Day 35: useState & Event Handling
Day 36: React Practice Set 1 — Components, Props, and State
Bouldering Attempt Counter
Track attempts and completed routes for two climbers with correct functional updates and derived progress text in no more than 30 minutes.
Shared Seed Order Allocator
Allocate a cooperative seed order across plots with controlled numeric inputs, safe boundaries, and derived per-plot totals in no more than 30 minutes.
Lab Sample Intake Queue
Build an add, verify, remove, and clear-processed queue with immutable state and stable sample identifiers in no more than 30 minutes.
Day 37: useEffect, useRef & Error Boundaries
Day 38: Custom Hooks
Day 39: Context & Reducer
Day 40: Project 1 — Aquarium Care Console
Aquarium Care Console
Build a local care console with feeding timers, accessible controls, tank selection, and persisted display preferences using only Days 33–39 knowledge.
Aquarium Care Console
Add reducer-driven water tests and maintenance events, with explicit state transitions that remain readable as actions grow.
Aquarium Care Console
Use Context only after experiencing prop drilling between the tank switcher, accessibility settings, maintenance log, and timer view.
Day 41: React Router — URL-Driven Apps
Day 42: Forms with React Hook Form & Zod
Day 43: Server State with TanStack Query
Day 44: Project 2 — StepFree Transit Explorer
StepFree Transit Explorer
Build shareable station and route pages, URL-owned accessibility filters, and useful unknown-station states with Days 33–43 knowledge.
StepFree Transit Explorer
Add an accessible, validated station search that navigates to a selected stop and preserves mobility requirements in the URL.
StepFree Transit Explorer
Use TanStack Query for public station and outage data with deliberate loading, empty, error, stale, and refresh states.
Day 45: Styling React Without the Confusion
Day 46: React Performance — Measure First, Concurrency Basics
Day 47: Redux Toolkit for Shared Client State
Day 48: Project 3 — Shelter Readiness Dashboard Foundation
Shelter Readiness Dashboard
Start the capstone with a responsive, accessible visual system for capacity, supplies, and operating status plus a deliberate settings surface.
Shelter Readiness Dashboard
Measure filtering and rendering across a large shelter feed, then make one evidence-based performance improvement.
Shelter Readiness Dashboard
Add durable, validated region, accessibility, and supply-view preferences with Redux only where Context has stopped being the clearest fit.
Day 49: Testing Basics for a React Product
Day 50: Frontend System Design from Requirements to Tradeoffs
Day 51: React Capstone — Shelter Readiness Dashboard
Shelter Readiness Dashboard — Deployed and Tested
Ship a responsive readiness dashboard with shareable region and shelter routes, normalized civic open-data snapshots, TanStack Query server state, validated Redux preferences, an accessible deterministic status summary, failure recovery, tests, and no browser secret.
- Search and navigate to regional shelter capacity, accessibility, supplies, and operating status through shareable URLs.
- Keep remote readiness snapshots in TanStack Query and durable region, accessibility, theme, and display preferences in Redux Toolkit.
- Render a deterministic factual status briefing now and document a future protected summarization endpoint boundary.
- Cover keyboard access, loading/empty/error/offline states, MSW tests, nested-route deployment, and architecture documentation.
Phase Complete!
After this phase, you'll be able to:
- Explain React render, state snapshots, identity, Effects, refs, and composition from first principles
- Choose URL, local, Context, Query, or Redux ownership without duplicating truth
- Build current Router, form, validation, query, styling, and performance flows
- Test user-visible behavior with Vitest, Testing Library, user-event, and MSW
- Design loading, failure, accessibility, security, and delivery before implementation
- Ship and defend a routed, queried, persisted, tested React capstone
You can build, test, deploy, and explain complete React products with deliberate state ownership.