A simple, elegant and functional task management app built with the MERN stack (MongoDB, Express, React, Node.js) and Material UI.
A full-stack TODO application designed to help users organize their daily tasks with a clean and intuitive interface.
The app offers smooth user experience with hover effects, toast notifications, responsive design and optional animations for add/edit/delete actions.
| Tech | Usage |
|---|---|
| React | Frontend |
| Redux Toolkit | State management |
| Express / Node.js | Backend API |
| MongoDB / Mongoose | Database |
| Material UI | UI Components |
| Axios | API Communication |
| react-toastify | Toast Notifications |
- ✅ Add new tasks
- ✅ Edit task description or status (
isdone) - ✅ Delete task with confirmation dialog
- ✅ Filter tasks by text or completion status
- ✅ Hover effect on task items
- ✅ Toast notifications after each action
- ✅ Responsive layout (mobile/tablet/desktop)
- ✅ Optional animations using CSS or Framer Motion
git clone https://github.com/abdallahsekrafi/TODO-MERN.git
cd TODO-MERNPORT=5000
MONGO_URI=mongodb+srv://...REACT_APP_API_URL=http://localhost:5000cd backend
npm installcd ../client
npm install| Method | Route | Description |
|---|---|---|
| GET | / |
Get all tasks |
| POST | / |
Create new task |
| PUT | /:id |
Update task by ID |
| DELETE | /:id |
Delete task by ID |
- 🧾 Clean and modern UI
- 🖌️ Subtle hover effects on task items
- 🎯 Status badges dynamically styled based on task state (
Done,Not Done) - 📱 Fully responsive layout
- ✅ Centralized state management with Redux Toolkit
- ✅ Input validation with Joi in backend
- ✅ Custom hooks for filtering and animations
- ✅ Toast notifications after CRUD actions
- ✅ Modal dialogs for editing/deleting tasks
- ✅ Well-structured and reusable components
"dependencies": {
"express": "^4.18.2",
"mongoose": "^7.0.3",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"joi": "^17.9.1"
}"dependencies": {
"@mui/material": "^5.13.0",
"react-redux": "^8.0.5",
"reduxjs/toolkit": "^1.9.5",
"axios": "^1.6.2",
"react-toastify": "^9.1.3"
}node server.js # Start the server on http://localhost:5000npm start # Run the app on http://localhost:3000
npm build # Build production version
- LinkedIn: Abdallah Sekrafi
- Facebook: fb.com/abdallah.sek
- GitHub: github.com/abdallahsekrafi