Built by

core-check2-1784838524666

Computer Science

Build a To-Do App with Express and Vanilla JavaScript

JavaScriptNode.jsExpress

Build a To-Do App with Express and Vanilla JavaScript

You’ll turn your existing web fundamentals into a small, working to-do app. You’ll build the Express server first, connect a tiny API, then use browser JavaScript to add, complete, and delete tasks in a clean interface you can run and demonstrate.

3 modules9 lessonsComputer ScienceJavaScriptNode.jsExpressHTMLCSSFetch API

What you learn by building this

Create and run a small Node.js Express application
Serve a browser page and static frontend assets from Express
Implement API routes for listing, adding, completing, and deleting to-do items
Use vanilla JavaScript DOM events and fetch to update the interface without page reloads
Handle empty states, invalid input, and visible request errors

Learning Journey

Create the Express app and browser shell

2 lessons

Start with a standalone working app: a Node.js server, a semantic to-do page, and enough styling to make the project visible before API behavior is added.

Build the task API

3 lessons

Add a small in-memory task store and connect it to clear HTTP routes, keeping each behavior simple enough to test directly before wiring up the browser.

Connect the browser with vanilla JavaScript

4 lessons

Turn the static page into a usable application by rendering API data, handling form actions, and keeping the interface synchronized after every task change.

Public lesson

Start a minimal Express server

Lesson: Start your Express server

Your React app now needs a small backend process of its own. You’ll create it in a separate server folder so it doesn’t interfere with the frontend files.

Predict

What will happen?

1. Predict what will happen

Before writing the server, make a quick prediction:

If a browser visits http://localhost:3000/ before Express is running, what do you expect to see?

Write your prediction down, then check it by opening that address.

Tasks

2. Create the server project

In a terminal, move to your React fullstack project folder and create a backend folder:

mkdir server
cd server
npm init -y
npm install express
npm pkg set scripts.start="node server.js"

mkdir server
cd server
npm init -y
npm install express
npm pkg set scripts.start="node server.js"

These commands create a separate Node project, install Express, and add an npm start command.

Tasks

Check that it worked:

npm ls express

npm ls express

You should see an Express version listed beneath your project name.

Tasks

Also open server/package.json. Its scripts section should include:

"scripts": {
  "start": "node server.js"
}

"scripts": {
  "start": "node server.js"
}

The exact spacing may differ.

Tasks

3. Write the server entry file

Inside the server folder, create a file named server.js.

Start with this structure:

const express = require("express");

const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  // Send a short response from your server here.
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

const express = require("express");

const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  // Send a short response from your server here.
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Tasks

Complete the missing line inside the home route. Make it send a short message such as:

My Express server is working

My Express server is working

Do not put that text in the browser yourself—the server should send it.

Tasks

4. Start the server

From inside the server folder, run:

npm start

npm start

Check the terminal. You should see a message containing:

http://localhost:3000

http://localhost:3000

Leave this terminal running. A running server keeps the terminal occupied while it listens for browser requests.

Tasks

5. Visit the home route

Open this address in your browser:

http://localhost:3000/

http://localhost:3000/

You should see the message you chose in server.js.

Find the bug

Something's wrong — can you spot it?

If you see “Cannot GET /”, check that:

the route path is exactly "/"
your response line is inside the app.get callback
you restarted the server after saving the file

Tasks

Stop the server with Ctrl+C when you are finished.

Tasks

6. Confirm the project can start again

Start it one more time:

npm start

npm start

Refresh http://localhost:3000/.

Your check is complete when the server starts with npm start and the home route displays your message.

Course Outline

3 modules · 9 lessons

Create the Express app and browser shell

Build the task API

Connect the browser with vanilla JavaScript

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.