Built by

core-check2-1784838524666

Computer Science

Build Your First Node.js Express To-Do App

JavaScriptNode.jsExpress

Build Your First Node.js Express To-Do App

Build a small, usable to-do list from scratch with a Node.js Express server and vanilla JavaScript. You will move from an empty folder to a browser app where you can add, view, complete, and delete tasks.

3 modules8 lessonsComputer ScienceJavaScriptNode.jsExpressHTMLCSSVanilla JavaScriptnpm

What you learn by building this

Create and run a small Node.js project
Use Express routes to serve pages and handle task requests
Connect vanilla JavaScript in the browser to a server endpoint
Add, display, complete, and delete to-do items
Keep the project understandable with a simple file structure and clear behavior

Learning Journey

Follow the path module by module. The layout keeps the lesson count, your progress, and the module description in one scan.

Create the App Shell

2 lessons

Start from an empty project and make a working Express page with the basic to-do interface.

Make Tasks Work on the Server

3 lessons

Add a small in-memory task model and routes so the server can list, create, complete, and delete tasks.

Connect the Browser Interface

3 lessons

Use vanilla JavaScript and fetch to turn the page into a responsive client for the Express task routes.

Public lesson

Create and Run a Node.js Project

Make a Node.js server answer in the browser

Today you’ll make the supplied Node.js practice project respond to a browser request with a message you chose. The important idea is not just memorizing Express commands:

Node.js runs JavaScript outside the browser.
Express gives Node a clearer way to describe web routes.
A route connects a request, such as GET /, to a response.
The browser is a useful test client: when it displays your message, the server received the request and sent a response.

Tasks

1. Inspect the project before changing it

Open the project’s package.json. Look for:

an express entry under dependencies
a scripts section, especially a start or dev command
a main field, which may identify the server entry file
a "type": "module" field

This tells you how the project expects to run. In particular, a project using "type": "module" generally uses import, while a project without it may use require. Match the style already used by the project instead of mixing the two.

If Express is not listed as a dependency, install it from the project folder with:

npm install express

npm install express

Check that package.json now lists Express and that npm completed without an error. Do not create a second project or run initialization commands.

Tasks

2. Add a deliberate route

Open the existing server entry file. If you are unsure which file it is, use the main field or the project’s documentation rather than guessing a filename.

Find the part that creates the Express application, or add that small piece in the project’s existing style. Your server needs four ideas:

// Use the import style already present in this project.
const express = /* obtain Express */;

const app = express();
const port = /* choose a local port */;

app.get("/", (request, response) => {
  response.send(/* your deliberate welcome message */);
});

app.listen(port, () => {
  console.log(/* a message that includes the port */);
});

// Use the import style already present in this project.
const express = /* obtain Express */;

const app = express();
const port = /* choose a local port */;

app.get("/", (request, response) => {
  response.send(/* your deliberate welcome message */);
});

app.listen(port, () => {
  console.log(/* a message that includes the port */);
});

Adapt the missing parts to the project:

If the project uses import, use its existing import style.
Choose a local port such as 3000, unless the project already specifies one.
Write a message that makes it obvious this is your server, such as a welcome sentence naming the practice project. Do not leave the response as a generic placeholder.
The / route matters: / is the path the browser requests when you visit the server’s base address.

Save the file.

Why this works

When you visit a local address, the process is:

The browser sends a GET request to /.
Express matches that request to app.get("/", ...).
Your callback runs.
response.send(...) sends text back to the browser.
The browser displays the text.

Without the route, the server might still be running, but it would not know what response to provide for /. Without listen, the application would be defined in memory but would not accept browser connections.

Tasks

3. Run the server

Use the start command documented by the project or listed in package.json under scripts. For example, if the project has a "start" script, run that script through npm rather than inventing a different command.

Watch the terminal for the message from your listen callback. It should indicate that the server is listening on the port you selected.

If the process exits immediately, read the first error carefully:

An import error often means the module style does not match package.json.
“Cannot find module express” means the dependency is missing or the command was run from the wrong project folder.
“Address already in use” means another process has claimed that port; stop that process or choose another available port.

Tasks

4. Test the result in a browser

Open:

http://localhost:YOUR_PORT

http://localhost:YOUR_PORT

Replace YOUR_PORT with the port in your code.

You should see your deliberate welcome message. This is more than a visual check: it confirms the whole request-and-response path worked.

Now make one small change to the message, save the file, and observe what happens:

If the server process does not restart automatically, stop it and run the project’s command again.
Refresh the browser.
Confirm that the new message appears.

That refresh demonstrates an important boundary: changing a source file does not necessarily change the already-running Node process until the project restarts or uses a file-watching tool.

Explain it back

Put it in your own words

Check your understanding

Explain these in your own words:

What does app.get("/", ...) match?
Why does the browser show your message only after response.send(...) runs?
What is the purpose of app.listen(...)?
Which part of the result proves that your route—not merely the server process—worked?

If you can answer those questions and see your own message at localhost, you have a working minimal Express server.

20 more characters

Course Outline

3 modules · 8 lessons

Create the App Shell

Make Tasks Work on the Server

Connect the Browser Interface

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.