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

CO

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

You’ll turn a small Node.js and Express server into a usable to-do list: add tasks, view them, mark them complete, and delete them from a simple browser interface. Your existing HTML structure and CSS selector skills will support the interface, while the course focuses on connecting browser actions to server behavior without adding a front-end framework.

2 modules6 lessonsComputer ScienceJavaScriptNode.jsExpressHTMLCSSBrowser Fetch API

What you learn by building this

  • Create a minimal Express server with routes for a to-do list
  • Serve an HTML page and browser JavaScript from a Node.js application
  • Use the browser Fetch API to send and receive JSON
  • Maintain an in-memory task list on the server
  • Render tasks in the browser and update the interface after user actions
  • Handle empty input and missing task IDs with clear responses

Learning Journey

1

Make the server and page work

2 lessons

Start with a standalone project that runs locally, serves the to-do page, and displays the learner’s first task list. Existing HTML structure and CSS selector skills are used directly rather than retaught.

2

Connect tasks to the browser

4 lessons

Add the smallest useful server API and connect it to the existing page with vanilla JavaScript. The project becomes interactive and visibly behaves like a to-do list.

Public lesson

Create the Express server

Your React app can eventually ask this server for data. For now, you’ll make the smallest useful backend: one process, one route, and one clear browser response.

Tasks

{"steps": ["From your full-stack project’s root folder, create a separate backend folder. This keeps the server code independent from your React code.", "bash\nmkdir backend\ncd backend\nnpm init -y\nnpm install express\n"], "check": "If backend already exists, enter it instead of creating it again."}

You should now see:

  • backend/package.json
  • backend/package-lock.json
  • backend/node_modules/

Tasks

{"steps": ["Add a start command:", "bash\nnpm pkg set scripts.start=\"node server.js\"\n"]}

Tasks

{"steps": ["Check that package.json now contains a scripts section with a start command."]}

Tasks

{"steps": ["Inside backend, create a file named server.js."]}

Tasks

{"steps": ["Start with this structure. Fill in the two missing values using your own port and browser message.", "js\nconst express = require(\"express\");\n\nconst app = express();\nconst PORT = /* choose a local port, such as 3000 */;\n\napp.get(\"/\", (request, response) => {\n response.send(/* write a short message for your browser */);\n});\n\napp.listen(PORT, () => {\n console.log(`Server running at http://localhost:${PORT}`);\n});\n"]}

Use a message that makes it obvious this is your backend, such as a sentence mentioning your project. Keep the route as / for now so the browser can reach it directly.

Tasks

{"steps": ["Before running it, check:", "- The port number is the same in PORT and the log message.", "- The response.send(...) value is a string.", "- Every opening parenthesis and brace has a matching closing one."]}

Tasks

{"steps": ["In the backend folder, run:", "bash\nnpm start\n"]}

The terminal should stay running and print a URL such as:

Server running at http://localhost:3000

Leave this terminal open. A server needs to keep running while the browser sends requests to it.

Tasks

{"steps": ["Open the exact URL printed by your terminal."]}

You should see the message you placed inside response.send(...), not a blank page and not a browser error.

Tasks

{"steps": ["Then return to the terminal and stop the server with:", "text\nCtrl+C\n", "Start it again with npm start to confirm the project can be restarted cleanly."]}

Tasks

{"steps": ["Change the browser message in server.js to include the current project name or a short version number.", "Stop and restart the server, then refresh the browser."]}

Tasks

{"steps": ["Your check is complete when:", "1. npm start launches without an error.", "2. The terminal prints your local URL.", "3. Visiting / shows your updated message.", "4. Restarting the server preserves the same behavior."]}

Course Outline

2 modules · 6 lessons

Make the server and page work

Connect tasks to the browser

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.