MERN-Todo-App

Todo 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 bcryptjs.

⚠️ 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.

Getting started

ℹ️ This Application runs on all common platforms: macOS, Windows 10/11, Linux (tested on Ubuntu 22.04 LTS)

You can either run this application by setting up your local MongoDB database, or you can run the Application with Docker Compose

🖥️ Run Application Locally

Step 1 - Setting up Database

First you need to install MongoDB, I recommend also to install MongoDB Compass.

• MongoDB Compass Download Link

• MongoDB Download

• After you installed MongoDB run the local Database here you can find how to get started with mongoDB

• Setting up Database

  • create a new db called todo
  • in this db create two new collections called todos and users

Step 2 - Setting up Backend

• run in the directory todo-backend yarn install
• edit the /todo-backend/.env: paste into the SERVICE_IP_ADDRESS field the value localhost
• after installing all dependencies you can run the server with yarn start or with the development mode yarn dev

Step 3 - Setting up Frontend

• run in the directory todo-client yarn install
• edit /todo-client/services/loginService and /todo-client/services/todosService and replace the base url http://todo-backend:8080/ with http://localhost:8080/
• after installing all dependencies you can run the frontend with yarn serve
• (optional) you can generate a production build of the Application with yarn build

Now you are Ready to use the Application 🎉

• how to start the frontend
• how to start the backend

🐋 Run Application with Docker (recommend)

⚠️ Make sure you have Docker installed and running on your Machine. Here you can find an Installation Link

in the root directory of the project run

docker-compose up -d --build

After the build process you can view the compose with

docker-compose ps

It should look similar to the following screenshot:

You can now open the Application with http://localhost:3000

Screenshots

Create a new Todo

Edit an existing Todo

Login Page

Register Page

---

If you find any errors or have any other suggestions for improvements i am happy about feedback! :)