docs: Details in README

Signed-off-by: Tibo De Peuter <tibo.depeuter@ugent.be>

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
 

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
+```

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

docs/requirements.txt

@@ -0,0 +1 @@
+diagrams==0.24.1

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.

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"
     },