Build a Todo List You Can Explain and Trust

CO

Built by

core-check2-1784838524666

Computer Science

Build a Todo List You Can Explain and Trust

Build a Todo List You Can Explain and Trust

You already have the HTML structure, CSS selectors, and a small React component foundation. This course uses that existing work to turn your React screen into a working todo list: first model the data in JavaScript, then add interactions, persistence, and automated tests without making you start from scratch.

5 modules21 lessonsComputer Science

What you learn by building this

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

Learning Journey

1

Turn the Existing React Screen into Todo Data

4 lessons

Use the learner's existing components and styling as a bridge into the JavaScript needed to represent and display todos. By the end, the project shows a list generated from JavaScript data rather than repeated markup.

2

Make Todos Change on Screen

5 lessons

Add state and event handlers in small steps so the learner can see exactly how user actions change the app. Each lesson adds one interaction to the same running project.

3

Make the App Useful Between Interactions

4 lessons

Add the behaviors users expect from a real small app: filtering, useful counts, clear empty states, and persistence. The learner reuses familiar JavaScript array operations instead of adding unrelated complexity.

4

Test the Behaviors Instead of Guessing

4 lessons

Turn the app's requirements into repeatable checks. The learner starts with simple logic that is easy to test, then verifies the real interface through user-visible actions.

5

Finish a Todo App You Can Show

4 lessons

Consolidate the working features into a clear, reliable final project. The learner documents how the app works, checks it from a user's perspective, and presents both the running result and the tests.

Public lesson

Inspect and Run the Existing Todo Screen

1. Run the project before reading the code

You’ll work from the current React project without changing its behavior yet. First, get a reliable baseline; then trace which components are actually involved in the Todo screen.

Tasks

Open the existing React project and inspect package.json to find its development script. Start it using the project’s normal command, commonly:

npm run <development-script>

Open the local URL shown in the terminal.

Tasks

Check the screen as a user:

  • Are todos visible?
  • Can you add, complete, or remove a todo?
  • Does the page show any loading or error state?
  • Does refreshing the page change the data?

Tasks

Do not fix anything yet. Record what you observe in a note such as:

Initial Todo screen:
- URL:
- Visible data:
- Working interactions:
- Anything broken or surprising:

Visible check: the app is running, and your note describes the current screen rather than an imagined version of it.

2. Find the component that produces the screen

Tasks

In the editor, begin at the app entry point and follow imports until you reach the Todo screen. Search for a piece of text you can see in the browser—such as the page heading, button label, or empty-state message.

Tasks

Create a short component map:

Entry point:
  imports ...

Route or top-level screen:
  imports ...

Todo-related components:
  imports ...

The component that directly renders the todo list:
  ...

The component that renders one todo:
  ...

For each component, write one phrase describing its job. For example, “chooses the page layout” or “renders one row.” Don’t describe React concepts generally; describe what this project’s components do.

Tasks

Visible check: for every Todo-related component you name, you can open its file and point to the JSX it contributes to the screen.

3. Trace one interaction through the files

Tasks

Choose the simplest working interaction—toggling a todo or deleting one—and follow it from the browser to the code.

Tasks

Record the path in this form:

User action:
  ...

Event starts in:
  component/file ...

Handler passed from:
  component/file ...

Data changes in:
  component/file ...

The changed value reaches the screen through:
  ...

Tasks

Use the code to verify each line. If a handler is passed through several components, include those components in order.

Visible check: you can make the interaction in the browser and explain which function receives it and which component re-renders with the changed result.

4. Decide where the todo list belongs

Tasks

Now inspect the components that sit around the list. Identify the smallest component that should own the todo list data and list-level actions.

Use these questions:

  • Which component needs the complete array of todos?
  • Which component decides whether to render the list or an empty state?
  • Which component passes one todo at a time to a row or card?
  • Is the current state already in the right place, or is it unnecessarily higher or lower?

Explain it back

Put it in your own words

Write your conclusion:

The smallest component that should own the todo list is:
  ...

It should own:
  ...

Its child component(s) should receive:
  ...

I chose this component because:
  ...

Keep “own” specific to this project: name the file and the state or data it would control. You are not moving code in this lesson.

Visible check: your chosen component is the lowest component in the tree that needs both the todo collection and the list-level behavior. If a child only displays one todo, it should not own the whole collection.

20 more characters

5. Record the working baseline

Tasks

Create a project note such as TODO-BASELINE.md or use the project’s existing notes location. Include:

  • the command you used to start the app
  • the URL
  • the component map
  • the interaction path
  • your chosen list owner
  • the original behavior you verified

Tasks

Add a final baseline statement in your own words, for example:

Baseline verified on [date]:
The existing Todo screen loads, and [interaction] changes the visible result.
The todo list is currently rendered by [component/file].

Tasks

Save the note, then refresh the running app and repeat one interaction to make sure your inspection did not accidentally alter the project.

Done when: the app still behaves as it did at the beginning, and another developer could use your note to find the Todo list and its state without searching the whole project.

Course Outline

5 modules · 21 lessons

Turn the Existing React Screen into Todo Data

Make Todos Change on Screen

Make the App Useful Between Interactions

Test the Behaviors Instead of Guessing

Finish a Todo App You Can Show

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.