How to Build a Task Manager Web App in JavaScript with Node.js and Express
Learn how to build a task manager web app using JavaScript, Node.js and Express. This tutorial covers backend server setup, REST API design and data handling.
Development Tutorial Details
Software: JavaScript
Difficulty Level: Normal
Tags: Express, JavaScript, Node.JS
Created: May 05, 2025
Created By: Team APPECODE
Partner With APPECODE! Let’s Work Together!
Let APPECODE implement your vision and take your project from idea to done.
How to Build a Task Manager Web App in JavaScript with Node.js and Express
This hands-on development tutorial teaches you full-stack JavaScript development by building a web-based task manager using Node.js and Express. We’ll cover everything from routing and form handling to local storage and minimal front-end interaction.
Let’s begin.
Tutorial Information
This tutorial assumes you already have an applicable development environment set up.
In this tutorial, you will jump into full-stack JavaScript development by building a web-based task manager using Node.js and Express. You’ll cover everything from routing and form handling to local storage and minimal front-end interaction. Ideal for learners ready to go beyond static websites.
Why Use Node.js and Express in JavaScript Development
Node.js allows you to run JavaScript on the server, which means you can use one language across your entire stack — both frontend and backend. Express is a minimalist framework built on top of Node.js that simplifies routing, middleware and server setup. Together, Node.js and Express let you write backend logic (like handling tasks and form submissions) in a fast, scalable and familiar JavaScript environment.Prerequisites
- Node.js and npm installed: Download Node.js
- Basic knowledge of JavaScript and HTML
- A code editor like VS Code
- Command-line access to run your project
Step 1: Set Up Your Project Folder
In your terminal, create a folder and initialize a Node.js project:mkdir task-manager
cd task-manager
npm init -ypackage.json file to track your project’s dependencies and scripts.
Step 2: Install Express
Use npm to install Express as your web framework:npm install expressStep 3: Create Your Server File
Create a file calledindex.js in the root of your project. Add this starter server code:
const express = require("express");
const app = express();
const PORT = 3000;
app.use(express.urlencoded({ extended: true }));
app.use(express.static("public"));
let tasks = [];
app.get("/", (req, res) => {
res.sendFile(__dirname + "/public/index.html");
});
app.post("/add", (req, res) => {
const task = req.body.task;
if (task) tasks.push(task);
res.redirect("/");
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});Step 4: Create the Frontend
Make a folder calledpublic and create an index.html file inside it:
<!DOCTYPE html>
<html>
<head>
<title>Task Manager</title>
</head>
<body>
<h1>My Tasks</h1>
<form action="/add" method="POST">
<input type="text" name="task" required />
<button type="submit">Add Task</button>
</form>
<ul id="taskList"></ul>
<script>
fetch("/tasks")
.then(response => response.json())
.then(data => {
const list = document.getElementById("taskList");
data.forEach(task => {
const li = document.createElement("li");
li.textContent = task;
list.appendChild(li);
});
});
</script>
</body>
</html>Step 5: Add a Task API Endpoint
Update yourindex.js file to include a /tasks route that returns tasks as JSON:
app.get("/tasks", (req, res) => {
res.json(tasks);
});Step 6: Start the App
Back in the terminal, run:node index.jshttp://localhost:3000 in your browser. Add tasks and see them appear instantly. This setup keeps everything in memory for simplicity, but you can later add persistent storage like MongoDB or a database.
Conclusion
You’ve just built a basic task manager web app using JavaScript, Node.js, and Express. You learned how to handle form submissions, route HTTP requests, and update the frontend dynamically. This is a great starting point for building more advanced full-stack projects with authentication, storage, and user management.Team APPECODE
This concludes this APPECODE development tutorial. Thanks for coding with us today. You now have the tools and techniques to apply the demonstrated skills in real development scenarios. Whether you’re refining a feature or launching something big, APPECODE is here to guide your technical journey every step of the way. Team APPECODE is all about helping devs like you grow with real-world, hands-on examples. Have questions or project ideas? Let’s keep the conversation going—your next big breakthrough could be one line away.