Track project · 03

Build TaskFlow Lite in JavaScript

Turn the static page into a working task manager using only browser JavaScript so the language fundamentals are visible.

Build plan

Work through it one observable step at a time

01
Model one task as a plain object, then create an array of tasks.
02
Write pure functions for creating, updating, filtering, and deleting tasks.
03
Render the array into the DOM and keep rendering separate from state-changing functions.
04
Wire form submit and button events to the state functions.
05
Add search and status filtering as derived values rather than duplicate state.
06
Persist tasks to localStorage and safely handle missing or malformed stored JSON.
07
Add an async request with `fetch`, loading/error handling, and cancellation.
08
Introduce one race or stale-result bug, then fix it deliberately.
09
Reload the page and prove all expected behavior still works.

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.