Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
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.
Build it yourself, get guided when you are stuck, and leave with proof you can actually show.
Turn the Existing React Screen into Todo Data
4 lessonsUse 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.
Make Todos Change on Screen
5 lessonsAdd 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.
Make the App Useful Between Interactions
4 lessonsAdd 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.
Test the Behaviors Instead of Guessing
4 lessonsTurn 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.
Finish a Todo App You Can Show
4 lessonsConsolidate 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
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>
npm run <development-script>
Open the local URL shown in the terminal.
Tasks
Check the screen as a user:
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:
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.
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:
...
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.
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:
...
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.
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:
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:
...
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
Tasks
Create a project note such as TODO-BASELINE.md or use the project’s existing notes location. Include:
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].
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.
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.