🚀 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
- 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
- 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)
- 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.
