🚀 How I Built My First Full-Stack To-Do App using MERN Stack (MongoDB, Express, React, Node.js)

👋 Introduction

Hi, I’m Adesh — a passionate Full Stack Developer from India 🇮🇳.

In this blog, I’ll walk you through how I built my first full-stack To-Do App using the MERN stack. This project helped me understand how frontend and backend communicate, how JWT-based authentication works, and how to deploy a complete app on the web.

🧠 Project Idea

The idea was simple:

Build a to-do app where users can register, login, and manage their daily tasks — add, update, delete, and mark them as completed.

🧰 Tech Stack

• Frontend: React + Tailwind CSS

• Backend: Node.js + Express.js

• Database: MongoDB (with Mongoose)

• Authentication: JWT (JSON Web Tokens)

• Testing Tools: Postman

• Deployment: Vercel (Frontend) + Render (Backend)

🔨 Development Breakdown

1. Backend (Express + MongoDB)

• Set up Express server with routes and controllers

• Created User and Task models using Mongoose

• Implemented JWT authentication for login/signup

• Protected task routes with authMiddleware

• Created REST APIs:

• POST /register

• POST /login

• GET /tasks

• POST /tasks

• PUT /tasks/:id

• DELETE /tasks/:id

2. Frontend (React + Axios)

• Created a beautiful UI using Tailwind CSS

• Added Login & Signup forms with form validation

• Used useContext for auth state management

• Integrated APIs with Axios

• Displayed task list with filters (pending / completed)

3. Deployment

• Deployed backend to Render

• Deployed frontend to Vercel

• Managed environment variables securely

💡 Key Learnings

• MVC Architecture in Express.js

• JWT Auth with protected routes

• CRUD operations with MongoDB

• Handling form validation in React

• Deploying full-stack apps with free tools

⚠️ Challenges Faced

• Managing CORS issues while connecting frontend-backend

• Protecting routes with JWT properly

• Handling async calls and loading states

🔗 Live Demo & Code

• 🌐 Live App - https://adeshmishra-todo-jadu.onrender.com/

• 💻 GitHub Repo - Frontend

• 💻 GitHub Repo - Backend

🔚 Conclusion

This project taught me how to bring all parts of a full-stack application together. If you’re just starting with MERN, building a To-Do app is an amazing starting point. Now, I’m exploring more advanced concepts like role-based auth, MongoDB aggregations, and building dashboards.