8000 GitHub - FreakeyPlays/todo-app: A simple web based todo app built with Angular and NestJS.
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
/ todo-app Public

A simple web based todo app built with Angular and NestJS.

todo.chrismerck.dev
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

FreakeyPlays/todo-app

BranchesTags

Repository files navigation

Todo App

Preview Image of the 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

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

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

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

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

make build

make run
  1. Now you can visit the Application via http://localhost:8080.

🛠️ - Tech Stack

📚 - 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