Building a To-Do App Using MERN Stack

 The MERN stack — consisting of MongoDB, Express.js, React, and Node.js — is a popular combination of technologies for building full-stack web applications using JavaScript. One of the best ways to learn the MERN stack is by building a simple To-Do application. This blog provides a step-by-step overview of how to build a basic To-Do app using the MERN stack.

Project Setup

Start by setting up the project structure with separate directories for the client (React) and server (Node/Express).

npx create-react-app client

mkdir server

cd server

npm init -y

npm install express mongoose cors

Also, install nodemon for automatic server reload during development.

Backend: Node.js + Express + MongoDB

Create a MongoDB database using MongoDB Atlas or locally.

Define a Mongoose schema for your To-Do items:

const mongoose = require('mongoose');

const TodoSchema = new mongoose.Schema({

  text: String,

  completed: Boolean

});

module.exports = mongoose.model('Todo', TodoSchema);

Set up REST API routes using Express:

app.get('/todos', getTodos);

app.post('/todos', addTodo);

app.put('/todos/:id', updateTodo);

app.delete('/todos/:id', deleteTodo);

These routes handle CRUD operations and communicate with the MongoDB database.

Frontend: React.js

In the client directory, use axios to make HTTP requests to the backend:

npm install axios

Create components like:

  • TodoList – displays all to-do items
  • TodoForm – handles new task input
  • TodoItem – shows individual to-dos with edit/delete functionality

Use React Hooks (useState, useEffect) to manage state and API calls.

Connecting Frontend and Backend

Use CORS in the backend to allow the frontend to make requests:

const cors = require('cors');

app.use(cors());

Set up proxy in client/package.json to point to the backend server for seamless API communication.

Final Touches

Run both servers simultaneously using tools like concurrently for development:

npm install concurrently --save-dev

Now you have a functional full-stack To-Do app where users can:

  • Add new tasks
  • View all tasks
  • Mark tasks as completed
  • Delete tasks

Conclusion

Building a To-Do app using the MERN stack gives you hands-on experience with each layer of a full-stack application. It’s a great project for mastering CRUD operations, REST APIs, React components, and MongoDB integration. Once completed, you can further enhance the app with user authentication, due dates, or even deploy it using platforms like Heroku or Vercel.

Learn MERN Stack Training Course

Read More:

Exploring the Basics of Express.js for Beginners

How to Create Your First MERN Stack App

Managing State in React with Context API

Deploying Your MERN App on Vercel

CRUD Operations Using MERN Stack

Visit Quality Thought Training Institute

Get Direction









Comments

Post a Comment

Popular posts from this blog

How to Create Your First MERN Stack App

 The MERN stack—MongoDB, Express.js, React.js, and Node.js—is one of the most popular JavaScript-based tech stacks for building full-stack web applications. It allows developers to use a single language (JavaScript) across both frontend and backend, making development fast and efficient. In this blog, we'll walk through how to create your first MERN stack app step by step. Set Up the Backend (Node.js + Express) Initialize a Node project: bash Copy Edit mkdir mern-app cd mern-app npm init -y Install dependencies: bash Copy Edit npm install express mongoose cors dotenv Create the basic server (server.js): javascript Copy Edit const express = require('express'); const mongoose = require('mongoose'); const cors = require('cors'); const app = express(); require('dotenv').config(); app.use(cors()); app.use(express.json()); mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true }); const port = process.env.PORT || 5000; ap...
Read more

Regression Analysis in Python

Regression analysis is one of the most widely used statistical techniques in data science and machine learning. It helps us understand relationships between variables and make predictions. In this blog, we’ll walk through the basics of regression analysis using Python and its popular libraries. 🔍 What is Regression Analysis? Regression analysis is a predictive modeling technique used to examine the relationship between a dependent (target) variable and one or more independent (predictor) variables. The most common type is linear regression, which assumes a linear relationship between variables. For example, predicting house prices based on area, location, and number of bedrooms is a regression problem. 🛠 Libraries Required Before we start, install the required Python libraries: pip install numpy pandas matplotlib seaborn scikit-learn Now, let's import them: import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns from sklearn.linear_model impor...
Read more

Top 10 Projects to Build Using the MERN Stack

 The MERN Stack — MongoDB, Express.js, React.js, and Node.js — is one of the most popular full-stack JavaScript frameworks used to build dynamic and scalable web applications. Whether you're a beginner or an experienced developer, building real-world projects is the best way to strengthen your MERN stack skills. Here are 10 project ideas to help you practice and showcase your expertise. Personal Portfolio Website Create a portfolio to showcase your skills, projects, and resume. Use React for the frontend and Node.js with Express to store contact form submissions in MongoDB. Blog Platform Develop a fully functional blog where users can register, write posts, edit content, and leave comments. This project helps you implement authentication, CRUD operations, and routing. E-Commerce Store Build an online shopping platform with product listings, search filters, user authentication, shopping cart functionality, and payment integration like Stripe or Razorpay. Social Media App Design a so...
Read more