Build a Task Manager App in React

What you'll build

A task manager that adds, finishes, edits, filters and deletes tasks, remembers them and loads them from an API.

Skills you'll practise

• Components, props and lists with keys
• State and controlled forms
• Lifting state up with function props
• Derived values and filters
• Editing in place with local state
• A custom hook that saves to localStorage
• Fetching with loading and error states
• Labels and focus for keyboard users

Milestones and steps

6 milestones and 21 steps. Every step starts from your code of the step before, adds one feature, and is tested in your browser.

1. 1

   Milestone 1:Lay out the app

   A list from data, components, props and the look of a finished task.

   Free
   1. 1
      Render the task listTurn an array of tasks into a list on the screen with map and keys.
   2. 2
      A TaskItem componentPull one task row into its own component and pass the task in as a prop.
   3. 3
      A Header with propsGive the app a header component that shows a title and how many tasks there are.
   4. 4
      Show what is doneUse the done flag: a checkbox per task and a class that styles finished tasks.
2. 2

   Milestone 2:Add, finish and delete

   State, a controlled form, and changing the list from child components.

   Free
   1. 5
      Add tasks with a formKeep the tasks in state and add new ones from a controlled input.
   2. 6
      Tidy the inputTrim titles, ignore blank ones and clear the box after adding.
   3. 7
      Finish a taskLift the toggle up: TaskItem calls a function prop and App updates the task.
   4. 8
      Delete a taskA delete button per task, and filter to remove it from state.
3. 3

   Milestone 3:Count and filter

   Derived values: tasks left, All / Active / Done filters, clearing finished tasks.

   Pro
   1. 9
      Count what is leftDerive the number of unfinished tasks from state, and word it properly.
   2. 10
      Filter the listAll, Active and Done buttons: one piece of state picks which tasks show.
   3. 11
      Clear finished tasksA footer with the number done and a Clear done button that is off when there is nothing to clear.
   4. 12
      Empty statesWhen a list has nothing to show, say why instead of showing nothing.
4. 4

   Milestone 4:Edit in place

   Local state in a row: an edit box that saves on Enter and cancels on Escape.

   Pro
   1. 13
      An edit boxGive each row its own state: an Edit button swaps the title for a box holding it.
   2. 14
      Save on EnterWrap the box in a form, and send the new title up to App with an onRename prop.
   3. 15
      Cancel with EscapeListen for the Escape key to leave the box without saving.
5. 5

   Milestone 5:Remember and load

   A custom hook that saves to localStorage, then loading tasks from an API with loading and error states.

   Pro
   1. 16
      Remember tasksWrite a custom hook, useStoredState, that keeps a value in state and in localStorage.
   2. 17
      Load tasks from an APIFetch the first tasks from a server in an effect, with a loading message meanwhile.
   3. 18
      When loading failsCheck the response, catch failures, and offer a Try again button.
6. 6

   Milestone 6:Polish and ship

   Labels and focus for keyboard users, a progress bar, and the finishing touches.

   Pro
   1. 19
      Labels and focusName every control for screen readers, and put focus where keyboard users expect it.
   2. 20
      A progress barStyle from data: a progress bar whose width is set from state with the style prop.
   3. 21
      Finishing touchesFinished tasks sink to the bottom and a message celebrates when everything is done.