diff --git a/README.md b/README.md index 8dc37472..bc1cef46 100644 --- a/README.md +++ b/README.md @@ -23,28 +23,31 @@ en lessen kunnen samenstellen hun leerlingen en hun vooruitgang kunnen opvolgen. ### Quick start -1. Installeer Docker en Docker Compose op je systeem (zie [Docker](https://docs.docker.com/get-docker/)). -2. Clone de repository. -3. Voer `docker-compose up` uit in de root van de repository. +1. Installeer Docker en Docker Compose op je systeem (zie [Docker](https://docs.docker.com/get-docker/) en [Docker Compose](https://docs.docker.com/compose/)). +2. Clone deze repository. +3. Voer `docker compose up` uit in de root van de repository. ```bash docker compose version git clone https://github.com/SELab-2/Dwengo-1.git cd Dwengo-1 -docker-compose up +docker compose up ``` ### Handmatige installatie -Zie de submappen voor de installatie-instructies van de verschillende services. +Zie de submappen voor de installatie-instructies van de [frontend](./frontend/README.md) en [backend](./backend/README.md). ## Architectuur -``` -hier overzichtsdiagram invoegen -``` +![Architectuur](./docs/architecture/schema.png) -We maken gebruik van ... Meer informatie over deze ontwerpsbeslissingen kan je vinden in de [architectuurdocumentatie](./architectuur). +De tech-stack bestaat uit: + +- **Frontend**: TypeScript + Vue.js + Vuetify +- **Backend**: TypeScript + Node.js + Express.js + TypeORM + PostgreSQL + +Voor meer informatie over de keuze van deze tech-stack, zie [designkeuzes](https://github.com/SELab-2/Dwengo-1/wiki/Design-keuzes). ## Bijdragen aan Dwengo-1 diff --git a/assets/img/dwengo-groen-zwart.png b/assets/img/dwengo-groen-zwart.png new file mode 100644 index 00000000..9d83c92f Binary files /dev/null and b/assets/img/dwengo-groen-zwart.png differ diff --git a/assets/img/dwengo-groen-zwart.svg b/assets/img/dwengo-groen-zwart.svg new file mode 100644 index 00000000..0da7a37d --- /dev/null +++ b/assets/img/dwengo-groen-zwart.svg @@ -0,0 +1,61 @@ + +image/svg+xml diff --git a/backend/README.md b/backend/README.md new file mode 100644 index 00000000..76bc8eae --- /dev/null +++ b/backend/README.md @@ -0,0 +1,22 @@ +# dwengo-1-backend + +## Project setup + +```shell +npm install +``` + +Setup the environment variables in a `.env` file in the root of the project. You can use the `.env.example` file as a template. + +### Development + +```shell +npm run dev +``` + +### Production + +```shell +npm run build +npm run start +``` diff --git a/docs/architecture/schema.png b/docs/architecture/schema.png new file mode 100644 index 00000000..616d896c Binary files /dev/null and b/docs/architecture/schema.png differ diff --git a/docs/architecture/schema.py b/docs/architecture/schema.py new file mode 100644 index 00000000..87a59f9a --- /dev/null +++ b/docs/architecture/schema.py @@ -0,0 +1,30 @@ +from diagrams import Cluster, Diagram +from diagrams.custom import Custom +from diagrams.onprem.certificates import LetsEncrypt +from diagrams.onprem.container import Docker +from diagrams.onprem.database import PostgreSQL +from diagrams.onprem.logging import Loki +from diagrams.onprem.monitoring import Grafana +from diagrams.onprem.network import Nginx +from diagrams.programming.framework import Vue +from diagrams.programming.language import Nodejs +from diagrams.programming.flowchart import InputOutput + +with Diagram("Dwengo-1 architectuur", filename="docs/architecture/schema", show=False): + reverse_proxy = Nginx("reverse proxy") + reverse_proxy >> LetsEncrypt("SSL") + + with Cluster("Docker"): + Docker() + + frontend = Vue("/") + backend = Nodejs("/api") + reverse_proxy >> frontend + frontend >> backend >> InputOutput("MikroORM") >> PostgreSQL() + + backend >> Loki("logging") >> Grafana("monitoring") + + with Cluster("Dwengo"): + dwengo = Custom("Dwengo", "../../assets/img/dwengo-groen-zwart.png") + + backend >> dwengo diff --git a/docs/requirements.txt b/docs/requirements.txt new file mode 100644 index 00000000..76c7036b --- /dev/null +++ b/docs/requirements.txt @@ -0,0 +1 @@ +diagrams==0.24.1 diff --git a/frontend/README.md b/frontend/README.md index 6714b3a7..f798f404 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -6,6 +6,8 @@ This template should help get you started developing with Vue 3 in Vite. [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). +Webstorm should work out of the box. + ## Type Support for `.vue` Imports in TS TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. diff --git a/package.json b/package.json index 59a2e01d..db7f5ba3 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build": "npm run build --ws", "format": "npm run format --ws", "format-check": "npm run format-check --ws", + "generate-docs": "python3 -m venv .venv && source .venv/bin/activate && pip install -r docs/requirements.txt && python docs/architecture/schema.py", "lint": "npm run lint --ws", "test:unit": "npm run test:unit --ws" },