Guide to Build a Full Stack Project: Todo App

By - Ambarish Durani•11/8/2025

Beginner Friendly Example: Todo App

Have you ever wondered how websites like YouTube, Instagram, or Amazon actually work? You click something on the frontend, and magically something happens on the backend — data gets stored, fetched, and displayed instantly. That’s the power of full-stack development. Learn step-by-step how to create a Full Stack Project: Todo App using modern technologies. This guide simplifies development for beginners.

What is a Full Stack Project?

A full stack project is one that combines both the frontend (client-side) and the backend (server-side) of an application.

Here’s the simple breakdown:

Frontend: What users see and interact with (buttons, forms, UI).
Backend: Handles logic, APIs, database, and security.
Database: Stores and retrieves the actual data.

So when you build a full-stack project, you’re basically connecting all three layers — UI → Server → Database — to make a complete working app.

Step 1: Choose Your Tech Stack

Before you write any code, pick your tools. For beginners, here are some popular combinations:

Layer	Common Tools
Frontend	HTML, CSS, JavaScript (or React)
Backend	Node.js + Express, or Python + Flask, or Java + Spring Boot
Database	MongoDB (NoSQL), MySQL/PostgreSQL (SQL)

For our example, we’ll use:

Frontend: HTML, CSS, JavaScript
Backend: Node.js with Express
Database: MongoDB

But remember — the concepts stay the same across stacks!

Step 2: Plan Your Project

Before you start coding, plan your app.
For our Todo App, the main features are simple:

Add a new task
View all tasks
Mark a task as complete
Delete a task

You can sketch a small diagram:

Frontend (HTML/CSS/JS)

↓

Backend (Node.js/Express)

↓

Database (MongoDB)

This helps visualize how data will flow through the system.

Step 3: Set up the Project Structure

Let’s create a basic folder layout for our project:

todo-app/

│

├── backend/

│ ├── server.js

│ ├── package.json

│ └── models/

│ └── Task.js

│

├── frontend/

│ ├── index.html

│ ├── style.css

│ └── script.js

Step 4: Build the Frontend (User Interface)

Start with a simple HTML file inside /frontend/index.html:

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

Add Some CSS for Styling

/* style.css */

body {

font-family: Arial, sans-serif;

background-color: #f3f4f6;

display: flex;

justify-content: center;

padding-top: 50px;

}

.container {

background: white;

padding: 20px;

border-radius: 10px;

width: 350px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

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

li { padding: 8px; border-bottom: 1px solid #ddd; }

button { margin-top: 10px; }

Add JavaScript for Basic Interactions

// script.js

const addBtn = document.getElementById("addBtn");

const taskInput = document.getElementById("taskInput");

const taskList = document.getElementById("taskList");

addBtn.addEventListener("click", () => {

const task = taskInput.value.trim();

if (task === "") return;

const li = document.createElement("li");

li.textContent = task;

taskList.appendChild(li);

taskInput.value = "";

});

You’ve just created your frontend — you can add, view, and display tasks.
Now it’s time to make it dynamic with a backend.

Explore Other Demanding Courses

No courses available for the selected domain.

Step 5: Set up the Backend (Server + API)

Switch to the /backend folder and initialize Node.js:

npm init -y

npm install express mongoose cors

Create a simple Express server in server.js:

const express = require("express");

const mongoose = require("mongoose");

const cors = require("cors");

const app = express();

app.use(cors());

app.use(express.json());

// Connect to MongoDB

mongoose.connect("mongodb://localhost:27017/todoApp", {

useNewUrlParser: true,

useUnifiedTopology: true

});

// Schema and Model

const taskSchema = new mongoose.Schema({ name: String, completed: Boolean });

const Task = mongoose.model("Task", taskSchema);

// Routes

app.get("/tasks", async (req, res) => {

const tasks = await Task.find();

res.json(tasks);

});

app.post("/tasks", async (req, res) => {

const newTask = new Task({ name: req.body.name, completed: false });

await newTask.save();

res.json(newTask);

});

app.delete("/tasks/:id", async (req, res) => {

await Task.findByIdAndDelete(req.params.id);

res.sendStatus(204);

});

app.listen(5000, () => console.log("Server running on port 5000"));

Now you have a working backend that supports:

GET /tasks → Get all tasks
POST /tasks → Add a new task
DELETE /tasks/:id → Delete a task

Step 6: Connect Frontend with Backend

In your script.js, replace the static logic with API calls using fetch:

const API_URL = "http://localhost:5000/tasks";

async function loadTasks() {

const res = await fetch(API_URL);

const tasks = await res.json();

taskList.innerHTML = "";

tasks.forEach(t => {

const li = document.createElement("li");

li.textContent = t.name;

taskList.appendChild(li);

});

}

addBtn.addEventListener("click", async () => {

const task = taskInput.value.trim();

if (task === "") return;

await fetch(API_URL, {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({ name: task })

});

taskInput.value = "";

loadTasks();

});

loadTasks();

Now, when you add a task from the frontend, it gets saved in your database via the backend API.

That’s a full-stack connection — congratulations!

Step 7: Test Everything

Run the backend:

node server.js

Then open frontend/index.html in your browser.
Try adding tasks — they’ll persist in MongoDB.

You can verify the data using MongoDB Compass or the command line.

Step 8: Deployment

Once your project is working locally:

• Deploy your backend on Render, Railway, or Vercel.
• Deploy your frontend on Netlify or GitHub Pages.
• Update API URLs in your frontend to point to the deployed backend.

Now your app is live on the internet!

Step 9: Bonus Tips for Beginners

• Use GitHub to track your project changes.
• Write README.md explaining your project.
• Try adding new features: edit tasks, mark as done, filter completed.
• Gradually learn frameworks like React for the frontend and Spring Boot / Django for the backend.

Conclusion

Building your first full-stack project may seem intimidating at first, but once you understand the layers — frontend, backend, and database — it becomes logical and fun.

Your Todo App might be simple, but it represents every concept used in real-world applications — data creation, fetching, deletion, and UI updates.

So, open your code editor, start experimenting, and watch your full-stack skills grow!

Do visit our channel to learn more: SevenMentor

Author: -

Ambarish Durani

Get Free Consultation

Call the Trainer and Book your free demo Class..... Call now!!!

| SevenMentor Pvt Ltd.