Build A Simple Node.js Interactive Web-Based To-Do List

Are you looking to enhance your web development skills with Node.js? Building a to-do list application is an excellent project for beginners and intermediate developers. It allows you to grasp fundamental concepts like server-side programming, handling user input, and interacting with a database (if you choose to add one). This tutorial will guide you step-by-step through creating a simple, interactive, web-based to-do list using Node.js, Express.js (a web application framework), and a bit of HTML, CSS, and JavaScript for the front-end.

Why Build a To-Do List?

To-do lists are ubiquitous. They help us stay organized, manage our tasks, and improve productivity. Building one yourself offers several benefits:

Practical Application: You learn to build something immediately useful.
Fundamental Concepts: You’ll work with routing, handling requests, and responding to clients.
Front-End Integration: You’ll learn how to connect your back-end (Node.js) with your front-end (HTML, CSS, JavaScript).
Scalability: It’s a foundational project; you can expand it with features like user authentication, due dates, and priority levels.

Prerequisites

Before you start, make sure you have the following installed:

Node.js and npm (Node Package Manager): You can download these from the official Node.js website (nodejs.org). npm is included when you install Node.js.
A Text Editor or IDE: VS Code, Sublime Text, Atom, or any editor you prefer.

Step-by-Step Guide

1. Setting up the Project

First, create a new directory for your project and navigate into it using your terminal or command prompt:

mkdir todo-app
cd todo-app

Next, initialize a new Node.js project. This creates a package.json file, which will manage your project’s dependencies:

npm init -y

The -y flag accepts the default settings. You can customize these settings if you prefer.

2. Installing Dependencies

We’ll need two main dependencies: Express.js for our web server and a templating engine (we’ll use EJS, Embedded JavaScript templates) to render HTML dynamically.

npm install express ejs

3. Creating the Server File

Create a file named index.js (or server.js – the name is up to you) in your project directory. This will be the main file for our server. Add the following code:

const express = require('express');
const app = express();
const port = 3000;

// Middleware to parse URL-encoded bodies (for form submissions)
app.use(express.urlencoded({ extended: true }));

// Set the view engine to EJS
app.set('view engine', 'ejs');

// Serve static files (CSS, JavaScript, images)
app.use(express.static('public'));

// Sample to-do items (in-memory storage)
let todos = [
 { id: 1, text: 'Learn Node.js', completed: false },
 { id: 2, text: 'Build a to-do app', completed: false }
];

// Routes
app.get('/', (req, res) => {
 res.render('index', { todos: todos }); // Render the index.ejs view
});

app.post('/add', (req, res) => {
 const newTodoText = req.body.todoText;
 const newTodo = { id: Date.now(), text: newTodoText, completed: false };
 todos.push(newTodo);
 res.redirect('/'); // Redirect back to the home page
});

app.post('/complete/:id', (req, res) => {
 const todoId = parseInt(req.params.id);
 const todo = todos.find(todo => todo.id === todoId);
 if (todo) {
 todo.completed = !todo.completed;
 }
 res.redirect('/');
});

app.post('/delete/:id', (req, res) => {
 const todoId = parseInt(req.params.id);
 todos = todos.filter(todo => todo.id !== todoId);
 res.redirect('/');
});

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

Let’s break down this code:

Import Express: const express = require('express'); imports the Express.js library.
Create an App Instance: const app = express(); creates an Express application.
Set the Port: const port = 3000; sets the port the server will listen on.
Middleware: app.use(express.urlencoded({ extended: true })); parses incoming requests with URL-encoded payloads. This is crucial for handling form submissions. app.use(express.static('public')); serves static files like CSS and JavaScript from the ‘public’ directory.
Set View Engine: app.set('view engine', 'ejs'); configures EJS as the templating engine.
To-Do Items: let todos = [...] is an array to store our to-do items in memory. In a real-world application, you’d use a database.
Routes: These define how the server responds to different HTTP requests (GET, POST):
- /: Handles the home page and renders the index.ejs view.
- /add: Handles adding new to-do items from a form.
- /complete/:id: Handles marking a to-do item as complete or incomplete.
- /delete/:id: Handles deleting a to-do item.
Start the Server: app.listen(port, () => { ... }); starts the server and listens for incoming requests on the specified port.

4. Creating the View (index.ejs)

Create a directory named views in your project directory. Inside views, create a file named index.ejs. This file will contain the HTML structure for your to-do list. Add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>To-Do List</title>
 <link rel="stylesheet" href="/css/style.css"> <!-- Link to your CSS file -->
</head>
<body>
 <h1>My To-Do List</h1>

 <form action="/add" method="POST">
 <input type="text" name="todoText" placeholder="Add a new task" required>
 <button type="submit">Add</button>
 </form>

 <ul>
 <% todos.forEach(todo => { %>
 <li>
 <%- todo.completed ? '<span style="text-decoration: line-through;">' : '' %>
 <%= todo.text %>
 <%- todo.completed ? '</span>' : '' %>
 <form action="/complete/" method="POST" style="display: inline;">
 <button type="submit"><%= todo.completed ? 'Undo' : 'Complete' %</button>
 </form>
 <form action="/delete/" method="POST" style="display: inline;">
 <button type="submit">Delete</button>
 </form>
 </li>
 <% }); %>
 </ul>

 </body>
</html>

Let’s explain the key parts of this EJS file:

HTML Structure: Standard HTML with a title, heading, and a form to add new tasks.
Form for Adding Tasks: The form sends a POST request to the /add route. The todoText input field captures the task text.
Iterating Through To-Do Items: <% todos.forEach(todo => { %> ... <% }); %> loops through the todos array (passed from the server) and displays each to-do item in a list.
Conditional Styling: <%- todo.completed ? '<span style="text-decoration: line-through;">' : '' %> applies a line-through style to completed tasks.
Complete/Undo Buttons: Each to-do item has a button to mark it as complete or undo the completion, sending a POST request to the /complete/:id route.
Delete Buttons: Each to-do item has a button to delete, sending a POST request to the /delete/:id route.

5. Creating CSS (style.css)

Create a directory named public in your project directory. Inside the public directory, create a directory named css. Inside the css directory, create a file named style.css. This file will contain your CSS styles. Add the following basic styles:

body {
 font-family: sans-serif;
 margin: 20px;
}

h1 {
 text-align: center;
}

form {
 margin-bottom: 20px;
}

input[type="text"] {
 padding: 5px;
 margin-right: 10px;
}

button {
 padding: 5px 10px;
 background-color: #4CAF50;
 color: white;
 border: none;
 cursor: pointer;
}

button:hover {
 background-color: #3e8e41;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid #eee;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

This CSS provides basic styling for the to-do list elements, making it more visually appealing.

6. Running the Application

Open your terminal or command prompt, navigate to your project directory (todo-app), and run the following command:

node index.js

This will start the server. You should see a message in the console like “Server listening at http://localhost:3000”. Open your web browser and go to http://localhost:3000. You should see your to-do list application!

Adding More Features

Now that you have a basic to-do list, let’s explore how to expand its functionality.

1. Using a Database

Currently, the to-do items are stored in memory, which means they are lost when the server restarts. To persist data, you need to use a database. Popular choices include:

MongoDB: A NoSQL database, often used with Node.js.
PostgreSQL: A relational database.
MySQL: Another relational database.
SQLite: A simple file-based database.

Here’s how you might integrate MongoDB using the Mongoose library (an Object-Document Mapper for MongoDB):

Install Mongoose: npm install mongoose

Connect to MongoDB: Add this code to your index.js file, ideally at the top:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/todo-app', {  // Replace with your MongoDB connection string
 useNewUrlParser: true,
 useUnifiedTopology: true
})
 .then(() => console.log('Connected to MongoDB'))
 .catch(err => console.error('MongoDB connection error:', err));

Define a Schema and Model: Create a schema (defining the structure of your data) and a model (a class representing your data in the database):
```
const todoSchema = new mongoose.Schema({
 text: String,
 completed: Boolean
});

const Todo = mongoose.model('Todo', todoSchema);
```

Update Routes to Use the Database: Modify your routes to interact with the database using the Mongoose model.

GET Route (/): Fetch todos from the database.

app.get('/', async (req, res) => {
  const todos = await Todo.find();
  res.render('index', { todos: todos });
 });

POST Route (/add): Save new todos to the database.

app.post('/add', async (req, res) => {
  const newTodo = new Todo({ text: req.body.todoText, completed: false });
  await newTodo.save();
  res.redirect('/');
 });

POST Route (/complete/:id): Update the ‘completed’ status in the database.

app.post('/complete/:id', async (req, res) => {
  const todoId = req.params.id;
  await Todo.findByIdAndUpdate(todoId, { completed: true }); // Or false to uncheck
  res.redirect('/');
 });

POST Route (/delete/:id): Delete todos from the database.

app.post('/delete/:id', async (req, res) => {
  const todoId = req.params.id;
  await Todo.findByIdAndDelete(todoId);
  res.redirect('/');
 });

2. Adding User Authentication

To make the to-do list personal, you can add user authentication. This involves:

Installing Dependencies: npm install bcryptjs express-session (for password hashing and session management).
Creating User Models: Define a User schema and model (similar to the Todo model).
Implementing Registration: Create a route and form for users to register (store their username and securely hashed password).
Implementing Login: Create a route and form for users to log in (verify their credentials and start a session).
Implementing Logout: Create a route to destroy the user’s session.
Protecting Routes: Use middleware to ensure only authenticated users can access the to-do list.

3. Adding Due Dates and Priorities

Enhance the functionality by adding:

Due Dates: Add a date input field to the form to capture the due date for each task. Store the date in the database.
Priorities: Add a select dropdown for priority (e.g., High, Medium, Low). Store the priority in the database.
Sorting: Implement sorting by due date and priority to help users manage their tasks effectively.

4. Improving the Front-End

Make your to-do list more user-friendly by:

Using JavaScript for Dynamic Updates: Instead of full page reloads, use JavaScript (e.g., using Fetch API or Axios) to update the to-do list dynamically when adding, completing, or deleting tasks.
Adding Visual Feedback: Provide visual cues (e.g., loading spinners) during server requests.
Improving the Design: Use CSS to create a more attractive and intuitive user interface. Consider using a CSS framework like Bootstrap or Tailwind CSS to speed up development.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

Incorrect File Paths: Double-check the file paths in your index.js and index.ejs files. For example, if your CSS file isn’t loading, ensure the path in your HTML is correct (e.g., <link rel="stylesheet" href="/css/style.css">).
Missing Dependencies: Make sure you’ve installed all the required dependencies using npm install.
Server Not Running: Ensure your server is running. Check your terminal for any error messages.
Incorrect Form Method: Ensure your form method matches the route you’re trying to reach (e.g., use method="POST" for POST routes).
Incorrect Data Handling: Ensure you are parsing the data correctly from the request body (e.g., using express.urlencoded({ extended: true })).
Database Connection Issues: If you’re using a database, verify your connection string and credentials. Check the database server’s status.
EJS Syntax Errors: EJS can be sensitive to syntax errors. Carefully review your EJS files for any issues.

Key Takeaways

Node.js and Express.js: Express.js simplifies the creation of web servers and handles routing.
Templating Engines (EJS): EJS allows you to dynamically generate HTML.
HTML Forms: Forms are essential for collecting user input.
Routing: Routes define how your server responds to different requests.
Middleware: Middleware handles tasks like parsing data and serving static files.
Front-End Integration: Connecting your back-end with your front-end is key to building interactive web applications.
Database Integration (Optional): Databases allow you to persist data.

FAQ

Can I use a different templating engine? Yes, you can use other templating engines like Pug (formerly Jade) or Handlebars. You’ll need to install the appropriate package (e.g., npm install pug) and configure it in your Express app.
How do I deploy this application? You can deploy your application to platforms like Heroku, Netlify, or AWS. You’ll need to set up a deployment pipeline and configure your environment variables (e.g., for database connection strings).
How do I handle errors? Use try-catch blocks and error-handling middleware in your Express app. Express also provides built-in error handling.
How can I improve the security of my application? Use HTTPS, validate user input, sanitize data, and protect against common web vulnerabilities like Cross-Site Scripting (XSS) and SQL injection. Always store passwords securely (e.g., using bcrypt).
What are some good resources for learning more? The official Node.js and Express.js documentation are excellent resources. You can also find many tutorials and courses on websites like MDN Web Docs, freeCodeCamp, and Udemy.

Building a to-do list is a fantastic starting point for exploring web development with Node.js. By following this tutorial, you’ve gained hands-on experience with fundamental concepts. Remember that this is just the beginning. The world of web development is vast, and there’s always more to learn. Keep experimenting, exploring new features, and building more complex projects. As you continue to practice and build, your skills will grow, and you’ll be able to create increasingly sophisticated and impressive web applications. Embrace the learning process, don’t be afraid to experiment, and enjoy the journey of becoming a proficient Node.js developer.

Build a Simple Node.js Interactive Web-Based To-Do List