The MERN stack Task Management System is a powerful yet user-friendly application designed to help individuals and teams efficiently manage their tasks and stay organized. It combines the robustness of the MERN stack, which includes MongoDB, Express.js, React, and Node.js, to deliver a seamless user experience. It is responsive with user authentication.
- Signup
- Login
- Logout
- Add tasks
- View tasks
- Update tasks
- Delete tasks
- Toasts for success and error messages
- Form validations in frontend and backend
- Fully Responsive Navbar
- Token based Authentication
- Use of 404 page for wrong urls
- Relevant redirects
- Global user state using Redux
- Custom Loaders
- Use of layout component for pages
- Use of theme colors
- No external CSS files needed (made using Tailwind CSS)
- Usage of Tooltips
- Dynamic document titles
- Redirect to previous page after login
- Use of various React hooks
- Custom hook also used (useFetch)
- Routes protection
- Middleware for verifying the user in backend
- Use of different HTTP status codes for sending responses
- Standard pratices followed
- HTML
- CSS
- Javascript
- Tailwind CSS
- Node.js
- Express.js
- React
- Redux
- Mongodb
- Node.js must be installed on the system.
- You should have a MongoDB database.
- You should have a code editor (preferred: VS Code)
-
Install all the dependencies on frontend and backend folder
npm install
-
Create a file named ".env" inside the backend folder. Add data from .env.example file and substitute your credentials there.
-
Start the application from directory frontend
npm start
-
Go to http://localhost:3000
- POST /api/auth/signup - POST /api/auth/login - GET /api/tasks - GET /api/tasks/:taskId - POST /api/tasks - PUT /api/tasks/:taskId - DELETE /api/tasks/:taskId - GET /api/profile
- / Home Screen (Public home page for guests and private dashboard (tasks) for logged-in users) - /signup Signup page - /login Login page - /tasks/add Add new task - /tasks/:taskId Edit a task