A full-stack todo list application built with MongoDB, Express.js, React.js, and Node.js. This project demonstrates CRUD operations, RESTful API design, and modern React development practices.
[Image blocked: Todo App Screenshot]
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/todos | Get all todos |
| GET | /api/todos/:id | Get single todo |
| POST | /api/todos | Create new todo |
| PUT | /api/todos/:id | Update todo |
| DELETE | /api/todos/:id | Delete todo |
| DELETE | /api/todos | Delete all completed todos |
Clone the repository
git clone https://github.com/yourusername/mern-todo-app.git
cd mern-todo-app
Navigate to backend directory
cd backend
Install dependencies
npm install
Create environment file
cp .env.example .env
Configure environment variables
MONGODB_URI=mongodb://localhost:27017/todoapp
PORT=5000
FRONTEND_URL=http://localhost:3000
Start the development server
npm run dev
The backend will be running on http://localhost:5000
Navigate to frontend directory
cd ../frontend
Install dependencies
npm install
Create environment file
cp .env.local.example .env.local
Configure environment variables
NEXT_PUBLIC_API_URL=http://localhost:5000/api
Start the development server
npm run dev
The frontend will be running on http://localhost:3000
npm installnpm startMONGODB_URI: Your MongoDB Atlas connection stringFRONTEND_URL: Your deployed frontend URLInstall Vercel CLI
npm i -g vercel
Deploy to Vercel
vercel --prod
Add environment variables in Vercel dashboard:
NEXT_PUBLIC_API_URL: Your deployed backend URLmern-todo-app/
├── backend/
│ ├── models/
│ │ └── Todo.js
│ ├── routes/
│ │ └── todos.js
│ ├── .env.example
│ ├── package.json
│ └── server.js
├── frontend/
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/
│ │ ├── ui/
│ │ ├── TodoInput.tsx
│ │ ├── TodoItem.tsx
│ │ └── TodoList.tsx
│ ├── .env.local.example
│ ├── next.config.js
│ ├── package.json
│ └── tailwind.config.js
└── README.md
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)This project is licensed under the MIT License - see the LICENSE file for details.
Your Name
## 5. Git Commit Messages (Best Practices)
Here are meaningful commit messages for your project:
```bash
# Initial setup
git commit -m "feat: initialize MERN todo app with project structure"
git commit -m "feat: setup Express server with MongoDB connection"
git commit -m "feat: create Todo model with Mongoose schema"
git commit -m "feat: implement CRUD API routes for todos"
# Frontend development
git commit -m "feat: setup Next.js frontend with TypeScript and Tailwind"
git commit -m "feat: create TodoInput component with form handling"
git commit -m "feat: implement TodoList and TodoItem components"
git commit -m "feat: integrate Axios for API communication"
git commit -m "feat: add responsive design and loading states"
# Features and improvements
git commit -m "feat: add todo completion toggle functionality"
git commit -m "feat: implement inline editing for todos"
git commit -m "feat: add progress counter and empty state"
git commit -m "fix: handle API errors with user-friendly messages"
git commit -m "style: improve UI with hover effects and animations"
# Deployment and documentation
git commit -m "deploy: configure environment variables for production"
git commit -m "docs: add comprehensive README with setup instructions"
git commit -m "deploy: setup Vercel and Render deployment configs"