{"id":15110073,"url":"https://github.com/razak571/mern_task_manager_app","last_synced_at":"2025-10-26T08:31:34.065Z","repository":{"id":256199751,"uuid":"854547218","full_name":"razak571/mern_task_manager_app","owner":"razak571","description":"mern stack task management application","archived":false,"fork":false,"pushed_at":"2025-01-05T15:14:46.000Z","size":547,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-05T16:24:26.838Z","etag":null,"topics":["expressjs","full-stack","http-only-cookies","jwt-token","mern-stack","mongodb","mongoose","nodejs","react-beautiful-dnd","react-hook-form","react-query","react-router","react-router-dom","react-toastify","reactjs","redux","redux-toolkit"],"latest_commit_sha":null,"homepage":"https://taskmanger-4sy5.onrender.com","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/razak571.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":"2024-09-09T11:22:40.000Z","updated_at":"2025-01-05T15:14:50.000Z","dependencies_parsed_at":"2024-09-09T15:15:51.683Z","dependency_job_id":"547c8d04-8516-4911-8f92-a507598eb307","html_url":"https://github.com/razak571/mern_task_manager_app","commit_stats":null,"previous_names":["razak571/mern_task_manager_app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razak571%2Fmern_task_manager_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razak571%2Fmern_task_manager_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razak571%2Fmern_task_manager_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/razak571%2Fmern_task_manager_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/razak571","download_url":"https://codeload.github.com/razak571/mern_task_manager_app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238298693,"owners_count":19448979,"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":["expressjs","full-stack","http-only-cookies","jwt-token","mern-stack","mongodb","mongoose","nodejs","react-beautiful-dnd","react-hook-form","react-query","react-router","react-router-dom","react-toastify","reactjs","redux","redux-toolkit"],"created_at":"2024-09-25T23:40:38.024Z","updated_at":"2025-10-26T08:31:33.717Z","avatar_url":"https://github.com/razak571.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERN Task Manager App\n\n![MERN Stack](https://img.shields.io/badge/MERN-Stack-blue?style=for-the-badge)\n![License](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)\n\nA functional task management application built using the MERN (MongoDB, Express, React, Node.js) stack. The app allows users to manage tasks with features like user authentication (JWT \u0026 Google OAuth), task creation, task arrangement using drag-and-drop, and much more.\n\n![Task Manager App home](/images/home.png)\n![Task Manager App signup](/images/singup.png)\n![Task Manager App login](/images/login.png)\n![Task Manager App taskdetail](/images/taskdetails.png)\n![Task Manager App edittask](/images/taskedit.png)\n\n## 🌟 Features\n\n- **User Authentication**: Secure login, registration, and logout using JWT (HttpOnly cookies) for protection against XSS attacks. Google OAuth is also integrated.\n- **Task Management**: Users can create, search, update, and delete tasks.\n- **Drag-and-Drop**: Easily manage tasks between \"To Do\", \"In Progress\", and \"Done\" columns.\n- **Protected Routes**: Only authenticated users can access protected pages, and already logged-in users cannot access login or signup pages.\n- **Optimistic Updates**: React Query is used for server-side caching and optimistic UI updates.\n- **Responsive UI**: Developed with React Beautiful DnD and customized UI components.\n\n## 🛠️ Technologies Used\n\n### Frontend:\n\n- **React** (v18.3.1)\n- **Redux Toolkit** for global state management\n- **React Router** for routing\n- **React Query** for handling server data and caching\n- **React Hook Form** (with Zod validation)\n- **React Beautiful DnD** for drag-and-drop interactions\n- **Axios** for HTTP requests\n- **Flowbite-React** for UI components\n- **React Toastify** for user notifications\n\n### Backend:\n\n- **Node.js** (v18.x)\n- **Express.js** (v4.19.2) for the API\n- **MongoDB** with **Mongoose** for the database\n- **JWT** for user authentication\n- **Bcrypt.js** for password hashing\n- **Cookie-Parser** for handling JWT cookies\n\n## 🚀 Live Demo\n\nCheck out the live deployed version [here](https://taskmanger-4sy5.onrender.com).\n\n## 🏁 Getting Started Locally\n\nTo get this project running on your local machine, follow these steps:\n\n### Prerequisites\n\n- **Node.js** (v18.x or later)\n- **MongoDB** (local installation or MongoDB Atlas)\n\n### Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/razak571/mern_task_manager_app.git\n   ```\n\n2. Navigate into the project directory:\n   ```bash\n   cd mern_task_manager_app\n   ```\n\n### Backend Setup\n\n1. Navigate to the backend folder:\n\n   ```bash\n   cd backend\n   ```\n\n2. Install backend dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Create a `.env` file in the `backend` folder and set the following environment variables:\n\n   ```env\n   MONGO_URI=your_mongodb_connection_string\n   JWT_SECRET=your_jwt_secret\n   ```\n\n4. Start the backend server:\n   ```bash\n   npm start\n   ```\n\nThe backend server will start at `http://localhost:5000`.\n\n### Frontend Setup\n\n1. Navigate to the frontend folder:\n\n   ```bash\n   cd ../frontend\n   ```\n\n2. Install frontend dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Create a `.env` file in the `frontend` folder and add the backend URL:\n\n   ```env\n   REACT_APP_API_URL=http://localhost:5000\n   ```\n\n4. Start the frontend development server:\n   ```bash\n   npm start\n   ```\n\nThe app will be running at `http://localhost:3000`.\n\n## 🧪 Testing Locally\n\nOnce both servers (backend and frontend) are running, you can test the application by navigating to `http://localhost:3000` in your browser.\n\n## 📜 Available Scripts\n\nIn the project directories, you can run:\n\n- `npm start`: Starts the development server.\n- `npm build`: Builds the app for production.\n\n## 🚀 Future Enhancements\n\n- **User Avatar**: Implement profile avatars for users.\n- **Notifications**: Add real-time notifications for task updates.\n- **Improved UI**: Align UI elements like search button and filters with a more polished design.\n\n## 🐛 Known Issues\n\n- Minor alignment issues with the search button and add task button.\n- A small bug with cookies in production when using JWT (will be fixed soon).\n\n## 🤝 Contributing\n\nFeel free to fork the repository, submit issues, or make pull requests. Any contributions are welcome!\n\n## 📄 License\n\nThis project is licensed under the MIT License.\n\n## 👨‍💻 Author\n\n**Razak** - [GitHub](https://github.com/razak571)\n\n---\n\n⭐️ If you found this project helpful, please give it a star on GitHub! ⭐️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazak571%2Fmern_task_manager_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazak571%2Fmern_task_manager_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazak571%2Fmern_task_manager_app/lists"}