React

Build one 'team task board' app across 5 real stages: rendering (props) → interaction (useState) → real data (useEffect) → reusable logic (custom hooks) → performance. Not how to write code from scratch — how to read and review AI-written React code and write precise prompts.

Stages

1. Build a team task board · Step 1 screen

   ~80 minSubscription needed

   Render a task board screen with real function components, JSX, and props. This project builds one real app across 5 lessons — start by reading an AI-written component tree and tracing where data comes from and where it flows.

2. Build a team task board · Step 2 completion check

   ~90 minSubscription needed

   Add a real completion-check feature to the static screen from Step 1 with useState. Diagnose the common closure/stale-state bug through execution flow, not the compiler.

3. Build a team task board · Step 3 real data

   ~110 minSubscription needed

   Replace a hardcoded task array with a real API fetch using useEffect. Diagnose the infinite-loop/missed-update bugs that come from a wrong dependency array.

4. Build a team task board · Step 4 reusable logic

   ~100 minSubscription needed

   Extract Step 3's data-fetching logic into a useTasks custom hook and reuse it in a new board-summary widget. Build the eye for confirming an AI-proposed hook extraction actually preserves the original behavior.

5. Build a team task board · Step 5 performance

   ~110 minSubscription needed

   Eliminate unnecessary re-renders at a real scale of hundreds of tasks with memo/useMemo/useCallback. The wrap-up lesson for this 5-step task board project: review an AI-proposed optimization diff and filter out over-optimization.