# To-do list application documentation

## Build
The application was dockerized for your convenience and can thus be simply run with a docker command.   
Clone the repository and run `sudo docker-compose up --build` to pull all dependencies and build the containers in the docker-compose file.

You should be greeted with a message of all containers booting up in the console, that looks like this:   
![Boot](https://i.imgur.com/cWtz9ej.png)   

## Architecture
Following you see the architecture of the whole application which can help you to understand how to navigate it.      
![Architecture](https://i.imgur.com/D2Ir6zl.png)   

## Management
There are a few mechanics on how to manage and monitor the application.   
The most obvious one is the console in which you just started the docker containers, it will keep you updated with any information that is logged by the running containers.   

The second important way to manage the application is to connect to the port `localhost:8080`.   
This allows you to reach the traefik web dashboard, that shows the most important information about the frontend load balancing system.      
![Dashboard](https://i.imgur.com/5TRtZLs.png)   
## Use 

### Access 
To access the application you can simply access the locally ran container via `localhost:80`.   
Traefik will automatically forward you to one of the (currently) two frontend instances.   
You will then be greeted by the login page.

### Login 
The login is currently done with hard coded users, as there is no functionality implemented to add users via the web interface or in any form of registration process.

Please pass in the following parameters for the login:
- username : `admin`
- password : `admin`
   
![login](https://i.imgur.com/dLzvFAe.png)   

Very creative, we know.  (^_^)'>

The login will return a JWT that will be stored with you client side.   
That means that you will not need to authenticate you anymore when changing pages.   
(This is more a sidenote for you and should not change any of your expected application behavior)

### Use

Now you are at the point where you can fully use our to-do list application.   
It has the same features as known from other application similar to ours:
- Create and delete to-do list
- Name those lists
- Add and remove entries to that list

Once you log in your screen will be empty, since the local instance of your database is simply empty.   
The page will display a message to inform you of that state:   

![empty](https://i.imgur.com/VEQMIDf.png)   

To add a new list you can press the button in the lower right corner with a plus:   
![Button](https://i.imgur.com/j71k49P.png)   

The system will now ask you to name your new to-do list:   
![new List](https://i.imgur.com/wR4FcGe.png)   
Press the save button, and you will be greeted by the overview showing you your new list.   
You can always edit or delete it by pressing the corresponding buttons.   
![Edit List](https://i.imgur.com/Awp2GdU.png)   
You can now also access your list by pressing `Liste Anzeigen`

You will now be greeted by a similar message as before, telling you that your list is still empty.   
The only difference this time is that you have a "back" button that allows you to go back to your list of lists.   
![EmptyList](https://i.imgur.com/Yrfv2KX.png)   
Now you can go ahead and add your entries to the list by pressing the add button in the lower right corner.   
![Button](https://i.imgur.com/j71k49P.png)   
You will once more be prompted with a form that lets you set a title.

You are also able to edit and delete these tasks once you created them, by using the corresponding buttons.   
![List items](https://i.imgur.com/noIs51R.png)   

This was the overview of the functionality of our application.

## Turning it off
To turn off the application you can close the webpage and then go to the console in which you first started the docker-compose container.   
It can then be simply turned off by entering the stop command specific to your system (`Ctrl + C` for windows and Linux).   
The container will then tell you that it is being shut down:   
![Stopping the container](https://i.imgur.com/5CuTuX2.png)   

## Checklist for our DS1 Challenge Task:

- Load balancing
    - As seen in the architecture diagram the load balancing takes places from user to frontend and from the frontend to the backend.
- Scalable service
    - It is possible to increase the amount of frontend and backend services easily without much change to the configuration.
- JWT authentication
    - The login process return a JWT that gets stored and allows for easier access.
- Dockerized
    - Everything is dockerized and can be run by using docker-compose.
- Use latest stable releases of chosen libraries and frameworks
    - We used React and Spring for our main components. That means that some libraries might be slightly behind the latest releases in order to work properly. But whenever possible the newest versions were implemented.

## Glossary
Following we have a little list with the most important technologies used by us in this project:
- [Caddy](https://caddyserver.com) Our load balancer at the back.
- [Docker](https://www.docker.com) The docker technology documentation.
- [Docker compose](https://docs.docker.com/compose/) The docker-compose technology documentation.
- [PostgreSQL](https://www.postgresql.org) Our database of choice.
- [React](https://reactjs.org) Our frontend of choice.
- [Redux](https://redux.js.org) A state container often used with React.
- [Spring](https://spring.io) Our backend of choice.
- [Traefik](https://traefik.io) Our load balancer at the front.
