{"id":25952086,"url":"https://github.com/mahdihasan333/task-manager-client","last_synced_at":"2026-04-11T06:43:51.190Z","repository":{"id":278531076,"uuid":"935770947","full_name":"mahdihasan333/task-manager-client","owner":"mahdihasan333","description":"A Task Management App built with React, Express.js, and MongoDB. Users can add, edit, delete, and reorder tasks with real-time sync and Firebase Authentication. The app features a responsive, minimalistic UI","archived":false,"fork":false,"pushed_at":"2025-02-20T09:15:31.000Z","size":40,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T09:37:29.881Z","etag":null,"topics":["daisyui","firebase","react","react-router-dom","tailwindcss"],"latest_commit_sha":null,"homepage":"https://task-manager-d91ea.web.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mahdihasan333.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-20T01:50:58.000Z","updated_at":"2025-02-20T09:21:26.000Z","dependencies_parsed_at":"2025-02-20T09:47:34.918Z","dependency_job_id":null,"html_url":"https://github.com/mahdihasan333/task-manager-client","commit_stats":null,"previous_names":["mahdihasan333/task-manager-client"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahdihasan333%2Ftask-manager-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahdihasan333%2Ftask-manager-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahdihasan333%2Ftask-manager-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahdihasan333%2Ftask-manager-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mahdihasan333","download_url":"https://codeload.github.com/mahdihasan333/task-manager-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241865208,"owners_count":20033312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["daisyui","firebase","react","react-router-dom","tailwindcss"],"created_at":"2025-03-04T14:32:56.293Z","updated_at":"2025-12-31T01:00:56.590Z","avatar_url":"https://github.com/mahdihasan333.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Task Management Application\n\n## Overview\nThis is a **Task Management Application** where users can add, edit, delete, and reorder tasks using a **drag-and-drop** interface. Tasks are categorized into three sections:\n- **To-Do**\n- **In Progress**\n- **Done**\n\nChanges are saved instantly to the database, ensuring real-time synchronization and persistence.\n\n## Live Demo\n[Live Application](https://task-manager-d91ea.web.app/) \n\n## Features\n### 1. Authentication\n- Only authenticated users can access the app.\n- Uses **Firebase Authentication** (Google sign-in).\n- Stores user details (User ID, email, and display name) upon first login.\n\n### 2. Task Management System\n- Users can **add, edit, delete, and reorder** tasks.\n- Tasks belong to one of three categories:\n  - To-Do\n  - In Progress\n  - Done\n- Users can **drag** a task to different categories.\n- **Real-time** updates ensure data persistence.\n- Each task includes:\n  - **Title** (Required, max 50 characters)\n  - **Description** (Optional, max 200 characters)\n  - **Timestamp** (Auto-generated upon creation)\n  - **Category**\n\n### 3. Database \u0026 Persistence\n- Uses **MongoDB + Express.js** for storing tasks.\n- **Real-time updates** are achieved using:\n  - MongoDB Change Streams\n  - WebSockets\n  - Optimistic UI Updates\n- Users' tasks remain in their last known order after refresh.\n- Deleted tasks are permanently removed from the database.\n\n### 4. Frontend\n- Built with **Vite.js + React**.\n- Uses **drag-and-drop library** (e.g., `react-beautiful-dnd`).\n- Modern, clean, and **fully responsive** UI.\n- Uses a **maximum of four colors** to maintain a simple look.\n\n### 5. Responsiveness\n- Fully responsive for **both desktop and mobile users**.\n- Mobile-friendly **drag-and-drop** experience.\n\n### 6. Backend API\n- **Express.js API** handles CRUD operations.\n- **Endpoints:**\n  - `POST /tasks` – Add a new task\n  - `GET /tasks` – Retrieve all tasks for the logged-in user\n  - `PUT /tasks/:id` – Update task details\n  - `DELETE /tasks/:id` – Delete a task\n\n### 7. Bonus Features (Optional)\n- **Dark mode toggle**.\n- **Task due dates** with color indicators (e.g., overdue tasks appear red).\n- **Activity log** to track task changes.\n\n---\n\n## Installation \u0026 Setup\n### Prerequisites\nMake sure you have the following installed:\n- **Node.js**\n- **MongoDB**\n- **Firebase Project** (for authentication)\n\n### 1. Clone the Repositories\n```bash\ngit clone https://github.com/mahdihasan333/task-manager-client\ncd task-manager-client\n\n# Clone the backend repository as well\ngit clone https://github.com/mahdihasan333/task-manager-server\ncd task-manager-server\n\n\n### 2. Backend Setup\n```bash\ncd backend\nnpm install\nnpm start\n```\n- Create a `.env` file in the `backend` folder and add MongoDB connection details.\n\n### 3. Frontend Setup\n```bash\ncd frontend\nnpm install\nnpm run dev\n```\n- Create a `.env` file in the `frontend` folder and add Firebase config details.\n\n---\n## Technologies Used\n### Frontend:\n- **React.js** (Vite)\n- **Firebase Authentication**\n- **@hello-pangea/dnd** (Drag-and-Drop)\n- **Tailwind CSS** (UI Styling)\n\n### Backend:\n- **Node.js \u0026 Express.js**\n- **MongoDB** (Mongoose ORM)\n- **WebSockets / Change Streams** (Real-time updates)\n\n### Deployment:\n- **Frontend:** firebase\n- **Backend:** vercel\n- **Database:** MongoDB Atlas\n\n\n---\n## Contributing\nFeel free to fork this repository and submit pull requests for any improvements!\n\n---\n## Contact\nFor any issues, contact me at: [mahdioffi333@gmail.com](mailto:mahdioffi333@gmail.com)\n\n\n\n---\nHappy Coding😃😃","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahdihasan333%2Ftask-manager-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahdihasan333%2Ftask-manager-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahdihasan333%2Ftask-manager-client/lists"}