https://github.com/d4niee/mern-todo-app

React.js Todo List Application using MERN Stack (MongoDB, Express.js, React, Node.js)
https://github.com/d4niee/mern-todo-app

bootstrap bootstrap5 css docker docker-compose express expressjs html5 mern-stack mongodb mongoose nodejs react react-bootstrap reactjs todo typerscript web webdevelopment webpack

Last synced: 10 months ago
JSON representation

React.js Todo List Application using MERN Stack (MongoDB, Express.js, React, Node.js)

Host: GitHub
URL: https://github.com/d4niee/mern-todo-app
Owner: d4niee
License: mit
Created: 2023-04-01T14:13:50.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2023-04-15T16:13:34.000Z (about 3 years ago)
Last Synced: 2025-03-23T21:47:12.020Z (about 1 year ago)
Topics: bootstrap, bootstrap5, css, docker, docker-compose, express, expressjs, html5, mern-stack, mongodb, mongoose, nodejs, react, react-bootstrap, reactjs, todo, typerscript, web, webdevelopment, webpack
Language: TypeScript
Homepage:
Size: 392 KB
Stars: 4
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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
```shell
docker-compose up -d --build
```

After the build process you can view the compose with
```shell
docker-compose ps
```
It should look similar to the following screenshot: