Todo App

📌 - Description

With this ToDo App you can create and Manage your ToDos. When creating the ToDo you can specify the Label of the Todo and the Priority. Once created The ToDos are shown in a Ordered List in the Application. With the Drag and Drop feature you can rearrange the ToDos. Double Clicking on the Label/Priority of the ToDo, enables the edit mode. All changes gets saved automatically on the Database. When a ToDo gets checked of as done it moves to the Marked as Done ToDo list in the Application.

⚙️ - Installation

1. Clone the Git-Repository.

git clone https://github.com/FreakeyPlays/todo-app.git

2. Install Docker, Docker-Compose and WSL2.
   Docker Desktop

3. If make is not provided in your OS, install a custom make like GNUmake.
   GNUmake

4. Create the .env File in the Base Directory accoringly to the .env.sample File.
   Read more at: 🧰 - Environment variables

5. Make sure you are in the Root Directory of the Repository, then build and run the Project using make.

make build

make run

5. Now you can visit the Application via http://localhost:8080.

🛠️ - Tech Stack

• Client
  • Agular
  • Dragula
  • yargs
• Server
  • NestJS
  • Swagger
  • TypeORM

📚 - Structure

.
│   # The Angular Frontend
├── /client
│   ├── /src
│   │   ├── /app
|   |   |   |   # Interfaces of different Objects
│   │   |   ├── /_interface
|   |   |   |   └── ...
|   |   |   |
|   |   |   |   # Connection to the Database
│   │   |   ├── /_service
|   |   |   |   └── ...
|   |   |   |
|   |   |   |   # Components witch get used more than once
│   │   |   ├── /_template
|   |   |   |   └── ...
|   |   |   |
|   |   |   |   # Bigger Components like whole sites
|   |   |   ├── /...(components)
|   |   |   |   └── ...
|   |   |   |
|   |   |   |   # App Component Files
|   |   |   └── ...
|   |   |
│   │   ├── /assets
|   |   |   |   # All fonts files
│   │   |   ├── /font
|   |   |   |   └── ...
|   |   |   |
|   |   |   |   # All svg Images
│   │   |   └── /svg
|   |   |       └── ...
|   |   |   |
|   |   |   # Different Environment files
│   │   ├── /environment
│   │   │   └── ...
|   |   |
|   |   |   # Sass Files (e.g. _var, _font, ...)
│   │   ├── /sass
|   |   |   └──...
|   |   |
|   |   |   # Angular starter Files and setEnv.ts
|   |   └── ...
|   |
|   |   # Config Files for Angular
|   └── ...
│
│   # The NestJS Backend
├── /server
│   ├── /src
│   │   ├── /todo
│   │   |   ├── /controller
|   │   │   |   └── ...
|   │   │   |
│   │   |   ├── /models
|   │   │   |   └── ...
|   │   │   |
│   │   |   ├── /service
|   │   │   |   └── ...
|   │   │   |
|   |   |   └── todo.module.ts
|   │   │
│   │   ├── app.module.ts
│   │   └── main.ts
|   │
│   ├── /test
|   |   └── ...
│   └── ...
│
│   # Config Files for Editor and Application
├── .configFiles
│
│   # Project Description
└── README.md

🧰 - Environment variables

Name	Type	Description	Default
NG_APP_DATABASE_URI	string	The Base URI String to the Database. Example: http://localhost:5000	http://localhost:8081
SERVER_PORT	number	The Port of the Server Application. Example: 5000	3000
PGDB_HOST	string	The Hostname of the Database Container. Example: postgres-db	postgres-db
POSTGRES_PORT	number	The Port of the PostgresSQL Database. Example: 4321	5432
POSTGRES_USER	string	The Username of the PostgresSQL Database. Example: user	postgres
POSTGRES_PASSWORD	string	The Password of the PostgresSQL Database. Example: root	password
POSTGRES_DB	string	The Name of the PostgresSQL Database. Example: todo_db	postgres
NGINX_PORT	number	The Port of the NGINX server Environment. Example: 480	80
DOCKER_CLIENT_PORT	number	The Port of the Client Container server Environment. Example: 7200	8080
DOCKER_SERVER_PORT	number	The Port of the Server Container server Environment. Example: 6800	8081
DOCKER_POSTGRES_PORT	number	The Port of the PostgresDB Container server Environment. Example: 39200	35000
NODE_ENV	string	The Name of the NodeJS Environment. Example: development

⛓️ - API

To read more about the Todo API, run the Project and visit /api at port 8081, to see the swagger documentation.

🔗 - createOneTodo

📥 - Reqest

POST /todo Content-Type: application/json {"label": "new ToDo", ...}

Parameter	Type	Description
label	string	Required. The Label of the ToDo.
position	number	Required. The Position of the ToDo.
priority	number	Optional. Default: 5. The Priority of the ToDo (0-10).
done	boolean	Optional. Default: false. The status of the ToDo.

📤 - Response

{
  id:          number,
  label:       string,
  priority:    number,
  done:        boolean,
  position:    number
}

🔗 - getAllTodos

📥 - Reqest

GET /todo

📤 - Response

[
  {
    id:        number,
    label:     string,
    priority:  number,
    done:      boolean,
    position:  number
  },
  ...
]

🔗 - getOneTodo

📥 - Reqest

GET /todo/{id}

Parameter	Type	Description
id	number	Required. The id of the ToDo.

📤 - Response

{
  id:          number,
  label:       string,
  priority:    number,
  done:        boolean,
  position:    number
}

🔗 - updateOneTodo

📥 - Reqest

PUT /todo/{id} Content-Type: application/json {"label": "updated ToDo", ...}

Parameter	Type	Description
id	number	Required. The ID of the ToDo.
label	string	Required. The Label of the ToDo.
position	number	Required. The Position of the ToDo.
priority	number	Required. The Priority of the ToDo (0-10).
done	boolean	Required. The status of the ToDo.

📤 - Response

{
  generatedMaps:  array,
  raw:            array,
  affected:       number
}

🔗 - deleteOneTodo

📥 - Reqest

DELETE /todo/{id}

Parameter	Type	Description
id	number	Required. The id of the ToDo.

📤 - Response

{
  raw:      array,
  affected: number
}

🔗 - deleteAllTodos

📥 - Reqest

DELETE /todo/remove/all

📤 - Response

{
}