Final Project: Build a Task Board

Time to combine components, props, state, effects, and forms into a real React app.

Requirements

1. Render a list of tasks ({ id, text, done }) using .map() with a proper, stable key.
2. Let the user add a new task through a controlled form input.
3. Let the user toggle a task's done state and delete a task, updating state immutably (no direct mutation of the array or its objects).
4. Fetch an initial list of tasks from an API (or a mock async function) inside useEffect when the board first mounts.
5. Split the UI into at least three components, e.g. TaskBoard, TaskForm, and TaskItem, that communicate through props.

Stretch goals

• Persist tasks to localStorage so they survive a page reload.
• Add filter buttons for All / Active / Completed.
• Show a loading state while the initial fetch is in flight.

Submit your repository link below when you are done, an instructor will review it before you can mark this lesson complete. Good luck! 🚀