Track project · 05

Build TaskFlow Lite in React

Rebuild TaskFlow Lite in React while keeping state ownership, derived values, effects, and component boundaries easy to explain.

Build plan

Work through it one observable step at a time

01
Start with one component and static data.
02
Split presentation into TaskList and TaskItem using props.
03
Add `useState` for the authoritative task list and form input.
04
Use functional state updates for changes that depend on previous state.
05
Keep filtered/searched tasks derived instead of storing a second list.
06
Extract the create form as a controlled component.
07
Add a custom hook for localStorage synchronization with cleanup/error handling where needed.
08
Inspect re-renders with React DevTools and remove one unnecessary state/effect.
09
Rebuild one feature without looking at the reference.

Evidence

Do not rely on “it seems to work”

Evidence to collect

A clean Git diff or file-tree changeCommands used and their exit/resultBrowser, HTTP, database, test, container, or CI evidence that proves the behaviorOne deliberate failure, the evidence you used, and the root-cause fixA short explanation of why the final responsibility lives in the chosen layer

Project exit ticket

Close the project only when these are true

Completion

I can demonstrate every deliverable.I can reproduce one key part without the walkthrough.I can explain one trade-off I deliberately chose.I can show one failure that my tests, constraints, or runbook now protects against.