{"id":22085496,"url":"https://github.com/d4niee/mern-todo-app","last_synced_at":"2025-08-13T11:45:05.372Z","repository":{"id":153614062,"uuid":"622233654","full_name":"d4niee/MERN-Todo-App","owner":"d4niee","description":"React.js Todo List Application using MERN Stack (MongoDB, Express.js, React, Node.js)","archived":false,"fork":false,"pushed_at":"2023-04-15T16:13:34.000Z","size":401,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-23T21:47:12.020Z","etag":null,"topics":["bootstrap","bootstrap5","css","docker","docker-compose","express","expressjs","html5","mern-stack","mongodb","mongoose","nodejs","react","react-bootstrap","reactjs","todo","typerscript","web","webdevelopment","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d4niee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-04-01T14:13:50.000Z","updated_at":"2025-03-03T02:20:36.000Z","dependencies_parsed_at":"2023-05-20T14:30:30.403Z","dependency_job_id":null,"html_url":"https://github.com/d4niee/MERN-Todo-App","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/d4niee/MERN-Todo-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4niee%2FMERN-Todo-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4niee%2FMERN-Todo-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4niee%2FMERN-Todo-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4niee%2FMERN-Todo-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d4niee","download_url":"https://codeload.github.com/d4niee/MERN-Todo-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4niee%2FMERN-Todo-App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265560948,"owners_count":23788281,"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":["bootstrap","bootstrap5","css","docker","docker-compose","express","expressjs","html5","mern-stack","mongodb","mongoose","nodejs","react","react-bootstrap","reactjs","todo","typerscript","web","webdevelopment","webpack"],"created_at":"2024-12-01T01:14:41.907Z","updated_at":"2025-07-17T02:41:03.597Z","avatar_url":"https://github.com/d4niee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERN-Todo-App \nTodo List Application using MERN Stack (MongoDB, Express.js, React, Node.js) and bootstrap with Typescript React. The Application also uses password hashing and salting for the user accounts by using \u003ca href=\"https://www.npmjs.com/package/bcryptjs\"\u003ebcryptjs\u003c/a\u003e. \n\n⚠️ as this is only a demo Application, login data will not be saved. When reloading the browser you have to log in again. maybe in future releases this feature is also available.\n\n\u003cimg src=\"screenshots/v1.3.0/TodoList.png\"\u003e\n\n## Getting started\n\nℹ️ This Application runs on all common platforms: macOS, Windows 10/11, Linux (tested on Ubuntu 22.04 LTS)\n\nYou can either run this application by setting up your local MongoDB database, or you can run the Application\nwith Docker Compose \n\n### 🖥️ Run Application Locally\n\n#### Step 1 - Setting up Database\nFirst you need to install MongoDB, I recommend also to install MongoDB Compass.\n- \u003ca href=\"https://www.mongodb.com/try/download/compass\"\u003eMongoDB Compass Download Link\u003c/a\u003e\n- \u003ca href=\"https://www.mongodb.com/try/download/community\"\u003eMongoDB Download\u003c/a\u003e\n\n- After you installed MongoDB run the local Database \u003ca href=\"https://www.mongodb.com/basics/get-started\"\u003ehere you can find how to get started with mongoDB\u003c/a\u003e\n- Setting up Database\n  - create a new db called ``todo``\n  - in this db create two new collections called ``todos`` and ``users``\n\n#### Step 2 - Setting up Backend\n- run in the directory ``todo-backend`` **yarn install**\n- edit the /todo-backend/.env: paste into the ``SERVICE_IP_ADDRESS`` field the value ``localhost``\n- after installing all dependencies you can run the server with ``yarn start`` or with the development mode ``yarn dev``\n\n#### Step 3 - Setting up Frontend\n- run in the directory ``todo-client`` **yarn install**\n- edit ``/todo-client/services/loginService`` and ``/todo-client/services/todosService`` and replace \n  the base url ``http://todo-backend:8080/`` with ``http://localhost:8080/``\n- after installing all dependencies you can run the frontend with ``yarn serve``\n- **(optional)** you can generate a production build of the Application with ``yarn build``\n\nNow you are Ready to use the Application 🎉\n\n- \u003ca href=\"https://github.com/d4niee/MERN-Todo-App/blob/main/todo-client/README.md\"\u003ehow to start the frontend\u003c/a\u003e\n- \u003ca href=\"https://github.com/d4niee/MERN-Todo-App/blob/main/todo-backend/README.md\"\u003ehow to start the backend\u003c/a\u003e\n\n### 🐋 Run Application with Docker (recommend)\n\n⚠️ Make sure you have Docker installed and running on your Machine. \u003ca href=\"https://docs.docker.com/desktop/\"\u003eHere you can find an Installation Link\u003c/a\u003e\n\nin the root directory of the project run \n```shell\ndocker-compose up -d --build\n```\n\nAfter the build process you can view the compose with\n```shell\ndocker-compose ps\n```\nIt should look similar to the following screenshot:\n\u003cimg src=\"screenshots/dockerps.png\"\u003e\n\nYou can now open the Application with \n\u003ca href=\"http://localhost:3000\"\u003e**http://localhost:3000**\u003c/a\u003e\n\n## Screenshots\n\nCreate a new Todo\n\u003cimg src=\"screenshots/v1.3.0/newTodo.png\"\u003e\n\nEdit an existing Todo\n\u003cimg src=\"screenshots/v1.3.0/UpdateTodo.png\"\u003e\n\nLogin Page\n\n\u003cimg src=\"screenshots/v1.3.0/loginPage.png\"\u003e\n\nRegister Page\n\n\u003cimg src=\"screenshots/v1.3.0/SignUp.png\"\u003e\n\n\u003chr/\u003e\n\nIf you find any errors or have any other suggestions for improvements i am happy about feedback! :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd4niee%2Fmern-todo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd4niee%2Fmern-todo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd4niee%2Fmern-todo-app/lists"}