This Task Management Application enables users to efficiently manage tasks through a clean, minimalistic, and responsive interface. Users can add, edit, delete, and reorder tasks within three categories: To-Do, In Progress, and Done. The application ensures real-time synchronization and persistence by saving changes instantly to the database.
Authentication: Secure user authentication via Firebase Authentication with Google sign-in. User details (User ID, email, and display name) are stored in the database upon first login.
Add, edit, delete, and reorder tasks. Categorize tasks into To-Do, In Progress, and Done. Drag and drop tasks between categories and reorder within categories. Each task includes a title (max 50 characters), an optional description (max 200 characters), a timestamp, and a category. Database & Persistence:
Tasks are stored in a MongoDB database via an Express.js server. Real-time updates ensure tasks remain in their last known order after a refresh or reopening. Deleted tasks are permanently removed from the database. Frontend UI:
Utilizes a drag-and-drop library (e.g., react-beautiful-dnd) for task management. Modern, clean, and responsive design with a maximum of four colors. Responsiveness: Smooth operation on both desktop and mobile devices, ensuring a mobile-friendly drag-and-drop experience.
This is a full-stack web application built as part of the hiring process for the Frontend Developer position at Airepro Solution Pvt Ltd.
The application allows users to:
- Register and log in securely (JWT-based authentication)
- Add, edit, delete, and mark daily tasks as complete
- Set and manage weekly/monthly goals
- View motivational quotes from a public API
- (Bonus) Reorder tasks using drag-and-drop
- (Bonus) Toggle between dark and light mode
Frontend: Live on Vercel/Netlify
Backend API: Live on Render
Watch the explanation of how the project works here: Watch on YouTube
- React.js
- React Router
- Context API / Redux (if used)
- Tailwind CSS / CSS Modules / Styled Components
- JWT-based authentication
- Axios for API requests
- Node.js
- Express.js
- MongoDB with Mongoose
- JSON Web Tokens (JWT)
- bcrypt for password hashing
- CORS, dotenv, etc.
- User Registration & Login
- JWT-based protected routes
- Create, edit, delete, and complete daily tasks
- Optional: Drag-and-drop for reordering tasks
- Fetched from public APIs such as zenquotes.io or quotable.io