Tangy is building your next step

Shaping the lesson around what you want to make.

New Project | Tangeble

Built by

core-check2-1784838524666

Computer Science

Build a To-Do List with Node.js, Express, and Vanilla JavaScript

JavaScriptNode.jsExpress

Build a To-Do List with Node.js, Express, and Vanilla JavaScript

Turn your current HTML and early React experience into a small full-stack to-do app. You will build the server in Node.js with Express, connect a browser interface with vanilla JavaScript, and finish with a project that can add, display, complete, and delete tasks.

4 modules16 lessonsComputer ScienceJavaScriptNode.jsExpressHTMLCSSFetch APInpm

What you learn by building this

Create and run a small Node.js project with Express without relying on a frontend framework
Design a simple task data model and expose it through clear HTTP endpoints
Use Express middleware to serve frontend files and parse JSON request bodies
Use browser JavaScript to fetch tasks, submit new tasks, toggle completion, and delete tasks
Keep the interface synchronized with server responses and handle common request errors
Explain the project structure and demonstrate the finished app locally

Learning Journey

Shape the app before the server

4 lessons

Use the learner's existing HTML and CSS strengths to create the visible task-list shell and define the small data shape the server will later provide. This module runs independently so the project is useful before the reference app exists.

Make the Express server useful

5 lessons

Add the Node.js runtime and Express one controlled step at a time, first serving the already-built frontend and then exposing read and write routes against in-memory task data.

Connect the browser to the API

4 lessons

Replace the static demo behavior with real browser-to-server interactions, keeping the interface understandable while the learner learns the request lifecycle.

Polish, verify, and present the app

3 lessons

Turn the working prototype into a dependable small project by checking the important behaviors, tightening the interface, and documenting how another person can run it.

Public lesson

Choose the smallest useful to-do model

Lesson 3-1: Define the to-do contract

Before building React components or routes, decide what one to-do is and what the user can do with it. This gives the interface and API the same target.

1. Choose the smallest useful to-do

Imagine the app showing one item:

Buy groceries — incomplete

What is the minimum information the app needs to remember?

For this first version, use exactly three properties:

id: uniquely identifies the item
text: what the item says
completed: whether it is finished

Tasks

Create a short design note in your project. For example, add docs/todo-contract.md.

# To-do contract

## Task object

```js
{
  id: /* choose the type and an example value */,
  text: /* example task text */,
  completed: /* true or false */
}

# To-do contract

## Task object

```js
{
  id: /* choose the type and an example value */,
  text: /* example task text */,
  completed: /* true or false */
}

User actions

1. Add a task

User does:
API method and path:
Request data:
Successful result:
Interface changes:

2. View tasks

User does:
API method and path:
Request data:
Successful result:
Interface changes:

3. Complete or uncomplete a task

User does:
API method and path:
Request data:
Successful result:
Interface changes:

4. Delete a task

User does:
API method and path:
Request data:
Successful result:
Interface changes:

Build checklist

API

Every task has a unique id.
Every task has non-empty text.
Every task has a boolean completed value.
The API supports adding a task.
The API supports retrieving tasks.
The API supports changing completion.
The API supports deleting a task.
Invalid or missing task data has a defined response.

Interface

The user can see the current tasks.
The user can enter a new task.
The user can submit a new task.
The user can tell completed and incomplete tasks apart.
The user can change a task's completed state.
The user can delete a task.
The interface shows an empty state when there are no tasks.
The interface shows what happened after an API request fails.

Tasks

Now replace every comment and blank line with your own decisions. Keep the object to those three properties; do not add dates, categories, priorities, or users yet.

2. Sketch the four actions

Use these four actions:

Add a task — the user submits text.
View tasks — the app loads and displays the current list.
Complete or uncomplete a task — the user changes its checkbox or equivalent control.
Delete a task — the user removes an item.

Tasks

For each action, write a method and path that fit your app. You might choose paths such as /api/tasks, but decide the exact design yourself.

Tasks

Your notes should make the request and result unambiguous. For example, for the completion action, specify:

which task is being changed,
whether the request sends completed: true or completed: false,
what the API returns,
how the corresponding row changes in the interface.

Tasks

Do the same for adding, viewing, and deleting. The goal is not to write server code yet; it is to remove the guesswork that would otherwise appear while building components.

3. Check the finished note

Open docs/todo-contract.md and inspect it against these questions:

Tasks

Can another developer identify a task from its id?
Can the interface display a task without inventing any missing fields?
Does each action name an API method and path?
Does each action describe both the successful API result and the visible interface change?
Are all four actions covered without adding a fifth feature?
Could you test each API action independently from the interface?

Tasks

If any answer is “not yet,” revise the note before moving on. The finished file is your API-and-interface checklist for the next implementation lesson.

Course Outline

4 modules · 16 lessons

Shape the app before the server

Make the Express server useful

Connect the browser to the API

Polish, verify, and present the app

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.