{"id":26371562,"url":"https://github.com/frontend-code20/task-manager","last_synced_at":"2025-03-17T00:39:29.397Z","repository":{"id":274343492,"uuid":"922293015","full_name":"Frontend-Code20/task-manager","owner":"Frontend-Code20","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-26T17:46:08.000Z","size":1573,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T18:32:05.894Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Frontend-Code20.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-01-25T20:21:16.000Z","updated_at":"2025-01-26T17:46:12.000Z","dependencies_parsed_at":"2025-01-26T18:43:06.446Z","dependency_job_id":null,"html_url":"https://github.com/Frontend-Code20/task-manager","commit_stats":null,"previous_names":["frontend-code20/task-manager"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Code20%2Ftask-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Code20%2Ftask-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Code20%2Ftask-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Frontend-Code20%2Ftask-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Frontend-Code20","download_url":"https://codeload.github.com/Frontend-Code20/task-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243955731,"owners_count":20374372,"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":[],"created_at":"2025-03-17T00:39:28.976Z","updated_at":"2025-03-17T00:39:29.388Z","avatar_url":"https://github.com/Frontend-Code20.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Task Manager Using React, Bootstrap and Node.Js**\n\nThis is an online task manager web app using React, Bootstrap, and Node.js.By creating an account, the user can create tasks, and by just logging in, the user can create new tasks, modify, and delete existing tasks from everywhere. In addition, the user can create, update, and delete custom lists to organize tasks.\n\n## **1. Features**\n- Online (Access task by login)\n- Create tasks\n- Update tasks\n- Delete tasks\n- Create, update , delete custom lists\n\n## **2. Technologies Used**\n- JavaScript\n- React\n- Bootstrap\n- NodeJS\n- MongoDB Atlas\n\n## **3. Get Started (Installation)**\n\nThe project directory structure is organized in two sub directories `Frontend` and `Backend`, which makes it easy to use. All frontend logic and configuration will be in `Frontend` directory, and all backend logic and configuration will be in `backend` directory.\n\n\u003e **Important Notes:**\n\u003e - You must have installed `Node.Js` on your device.\n\n\n\u003e **Important Nots:**\n\u003e - You must have installed `Node.Js` on your device.\n\n\n**Root Directory:**\n``` \nTask-Manager\n ├── backend\n └── frontend\n```\n\nDownload the root directory and open it in a code editor (e.g., VS Code).\n\nThis directory contains the frontend code (components, helpers, modals, utils) and the backend code (routes, controllers, models, etc.). We need to install some important libraries to run the app.\n\n\u003e **Important Notes:** \n\u003e - The libraries for the frontend must be installed in the Frontend directory. \n\u003e - The libraries for the backend must be installed in the Backend directory. \n\u003e - Installing libraries in the root directory may cause unexpected errors.\n\n### Let's set up the root directory step by step.\n\n- #### **Step #01:**\n   + Create a new root folder for your project, named `Task-Manager`.\n\n- #### **Step #02:**\n  \n    + Copy the `backend` folder from the downloaded code and paste it into the root folder. \n\n- #### **Step #03:**\n\n    + Switch to the `backend` folder by running `cd backend`, and install these libraries: \n        ```bash\n        -\u003e npm install express\n        -\u003e npm install mongoose\n        -\u003e npm install dotenv\n        -\u003e npm install body-parser\n        -\u003e npm install cookie-parser\n        -\u003e npm install uuid\n        -\u003e npm install cors\n        -\u003e npm install jsonwebtoken\n        -\u003e npm install bcryptjs\n\n- #### **Step #04:**\n    + In the `backend` folder, open the `package.json` file and add the type module:\n    ```json\n        {\n            \"type\": \"module\",\n            \"dependencies\": {\n                \"bcryptjs\": \"^2.4.3\",\n                \"body-parser\": \"^1.20.3\",\n                \"cookie-parser\": \"^1.4.7\",\n                \"cors\": \"^2.8.5\",\n                \"dotenv\": \"^16.4.7\",\n                \"express\": \"^4.21.2\",\n                \"jsonwebtoken\": \"^9.0.2\",\n                \"mongoose\": \"^8.9.5\",\n                \"uuid\": \"^11.0.5\"\n            }\n        }\n    ```\n    + Switch back to the root folder by running `cd ../`.\n\n- #### **Step #05:**\n    + In the root folder, now configure the `frontend` folder.\n    + Run the following command:\n        ``` \n        -\u003e npx create-react-app frontend\n\n    + This will create a folder called `frontend` in the root directory. \n\n- #### **Step #06:**    \n    + Now, install libraries in the `frontend` folder by running these commands:\n        ```bash\n        -\u003e npm install bootstrap\n        -\u003e npm install react-router\n        -\u003e npm install react-redux\n        -\u003e npm install @reduxjs/toolkit\n        -\u003e npm install quill\n        -\u003e npm install web-vitals (Optional, if error occur)\n\n- #### **Step #07:**\n    + Now, replace the default files of the `frontend` folder with the files from the downloaded code.\n    + Delete `public` and `src` folders from `frontend`.\n    + Copy `public` and `src` folders  from the downloaded `frontend` folder (which is in `Task-Manager`) and paste them into this folder\n\n### Database Configuration\nThere is a file `.env` in the `backend` folder that contains the database connection string.\n\nMake sure to replace the database string with your MongoDB database string.\n\nIf you're new to MongoDB, I recommend using `MongoDB Atlas`, which is easy to set up and use.\n\n### Run the Application\n- **Backend**: To run the server, switch to the `backend` folder by running `cd backend`, and then run:\n    ```\n    -\u003e node server.js\n- **Frontend:** To run the React app, switch to the frontend folder by running cd frontend, and then run:\n    ```\n    -\u003e npm start\n\n### **Project View:**\n\n![Image 1](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/loginView.png) ![Image 2](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/signupView.png)\n\n![Image 3](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/Dashboard.png) ![Image 4](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/createList.png)\n\n![Image 1](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/emptyList.png) ![Image 2](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/newTask.png)\n\n![Image 3](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/taskView.png) ![Image 4](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/newlist.png)\n\n![Image 1](https://github.com/Frontend-Code20/task-manager/blob/main/frontend/public/assets/ReadMEImage/createList.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-code20%2Ftask-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontend-code20%2Ftask-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-code20%2Ftask-manager/lists"}