Build a Server‑Rendered To‑Do List with Node.js, Express & Vanilla JS

CO

Built by

core-check2-1784838524666

Computer Science

Build a Server‑Rendered To‑Do List with Node.js, Express & Vanilla JS

node.jsexpressejs

Build a Server‑Rendered To‑Do List with Node.js, Express & Vanilla JS

A hands‑on course that takes your current HTML/CSS knowledge and a splash of React experience to a full‑stack Node.js web app. You’ll set up an Express server, render pages with EJS, and add interactive vanilla‑JS behavior, ending with a deploy‑ready to‑do list you can showcase.

6 modules12 lessonsComputer Sciencenode.jsexpressejsvanilla JavaScriptnpm

What you learn by building this

  • Set up a Node.js project and run an Express server locally
  • Create server‑side routes, middleware, and handle form data
  • Render dynamic HTML with the EJS templating engine
  • Write vanilla JavaScript to manipulate the DOM and call backend APIs
  • Design a minimal in‑memory data store and expose CRUD endpoints
  • Package the project with npm scripts and document it for future use

Learning Journey

1

Project Foundations

2 lessons

Set up the development environment, initialize the Node project, and launch a minimal Express server.

2

Routing & Middleware

2 lessons

Add useful routes, serve static assets, and handle POST data from forms.

3

Server‑Side Rendering with EJS

2 lessons

Introduce EJS as the view engine and render the to‑do list dynamically.

4

Front‑End Interactivity with Vanilla JS

2 lessons

Add client‑side behavior to create and delete tasks without reloading the page.

5

CRUD API Endpoints & In‑Memory Store

2 lessons

Expose a tiny JSON API for creating, reading, and deleting to‑do items, and wire the front end to it.

6

Polish, Test & Document

2 lessons

Finalize styling, verify functionality, and prepare the project for sharing.

Public lesson

Install Node.js and initialize npm

To build a React application that goes beyond simple static pages, we need to set up a JavaScript environment outside of the browser. Node.js provides that runtime, and its package manager, npm, handles the libraries and tools we'll be pulling in.

Let's get your machine ready.

Tasks

First, download and install the Long Term Support (LTS) version of Node.js from the official website. This version is the most stable, which is what we want for a solid foundation.

Tasks

Once the installer finishes, open your terminal (Command Prompt, PowerShell, or Terminal) and verify the installation. You should see version numbers for both Node and the package manager.

node -v
npm -v

If you see version numbers printed out, you're ready to go. If not, restart your terminal or computer and try again.

Tasks

Now, let's create the home for your project. Create a new folder for your app, navigate into it, and run the initialization command.

mkdir my-react-app
cd my-react-app
npm init -y

The -y flag tells npm to use the default settings for all the questions it would normally ask (like author name or license). This keeps things moving so we can get to the code.

Open the package.json file that appeared in your folder. This file acts as the ID card for your project—it tracks what your app is called and what tools (dependencies) it needs to run.

Tasks

For now, just confirm that the file exists and contains a "name" that matches your folder name.

{
  "name": "my-react-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

With this file in place, npm knows exactly where it is, and we can start adding the specific pieces needed for React next.

Course Outline

6 modules · 12 lessons

Project Foundations

Routing & Middleware

Server‑Side Rendering with EJS

Front‑End Interactivity with Vanilla JS

CRUD API Endpoints & In‑Memory Store

Polish, Test & Document

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.