Task Manager is a full-stack task management web application built to streamline daily task organisation and team collaboration. Users can manage personal and team-based tasks, track progress, and share updates — all within an intuitive Kanban-style dashboard.
- 🔐 Secure JWT-based authentication protecting 1,000+ users
- ⚡ CRUD operations powered by Redux Toolkit, boosting task completion efficiency by 25%
- 🤝 Real-time team collaboration with member assignment and shared boards
- 📊 Built-in analytics with smart date-range filtering
Register Page
Dashboard
Public Task View
- User registration, login, and secure password hashing via bcrypt.js
- JWT-based session management with automatic logout on sensitive changes (email/password update)
- Only authenticated users can create and manage tasks
- Create tasks with priority, due dates, categories, and optional public sharing
- Full CRUD support — create, read, update, and delete tasks with ease
- Kanban-style board with four status lanes: Backlog → To-Do → In-Progress → Done
- Visual due-date indicators: 🔴 Overdue · 🟢 Completed
- Add members to boards and assign them to tasks during creation
- Read-only public link sharing for external stakeholders
- Dedicated analytics section with task breakdowns
- Filter by Today, This Week (default), or This Month
- Truncated task titles with full-text tooltips for clean boards
- Toast notifications for all actions
- Pre-filled settings form for frictionless profile updates
- Mandatory fields marked with red asterisk (*)
| Layer | Technology |
|---|---|
| Frontend | React.js, Vite, Redux Toolkit, React Router DOM |
| UI & Notifications | React Icons, React Toastify |
| Backend | Node.js, Express.js |
| Database | MongoDB, Mongoose |
| Auth & Security | JWT, Bcrypt.js |
| Config | Dotenv, CORS |
| Deployment | Vercel |
| Code Quality | ESLint |
- Node.js
v24.x - npm or yarn
- A running MongoDB instance
# 1. Navigate to the backend directory
cd backend
# 2. Install dependencies
npm install
# 3. Create your .env file
touch .envAdd the following to backend/.env:
MONGODB_URI=mongodb+srv://...
FRONTEND_URL=http://localhost:5173
PORT=9000
JWT_SECRET=secret-kJKJllKKJJghLjOiUfcHGkMLgdJlLKDtrdyKLBJbRdesEkj# 4. Start the development server
npm run dev# 1. Navigate to the frontend directory
cd frontend
# 2. Install dependencies
npm install
# 3. Create your .env file
touch .envAdd the following to frontend/.env:
VITE_BACKEND_URL=http://localhost:9000
VITE_FRONTEND_URL=http://localhost:5173# 4. Start the development server
npm run devOpen http://localhost:5173 in your browser. 🎉
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build for production |
npm run lint |
Lint the codebase |
npm run preview |
Preview the production build |
| Command | Description |
|---|---|
npm run dev |
Start server in development mode (nodemon) |
npm run start |
Start server in production mode |
Try the live application here → task-management-5cqq.vercel.app
Contributions, issues, and feature requests are welcome!
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License.
⭐ If you found this project helpful, please give it a star! ⭐
Thank you for checking out Task Manager! Feedback, suggestions, and contributions are always welcome. 😊