56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
# Technisches Architekturkonzept
|
|
|
|
## Leitplanken
|
|
|
|
* Frontend: React + TypeScript, statisch gebaut.
|
|
* Server: Minimaler Node/Express-Server im selben Docker-Image.
|
|
* Liefert statische Assets aus.
|
|
* Stellt genau eine API für Kontaktformular bereit.
|
|
* Deployment: Docker auf Hetzner.
|
|
|
|
## Komponenten
|
|
|
|
### Frontend
|
|
|
|
* Build: Vite
|
|
* Routing: react-router (Client-Side)
|
|
* UI: eigene Komponenten, kein UI-Framework (um Stil strikt zu halten)
|
|
|
|
Seiten:
|
|
|
|
* Startseite
|
|
* Über uns
|
|
* Kontakt
|
|
* Impressum
|
|
* Datenschutz
|
|
* AGB optional
|
|
|
|
### Backend
|
|
|
|
* Express-Server
|
|
* Eine API: Kontaktformular
|
|
* SMTP Versand via nodemailer
|
|
* Konfiguration via Environment-Variablen
|
|
|
|
## Runtime-Flow
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
U[Browser] -->|GET Seiten und Assets| S[Node Server]
|
|
S -->|statische Dateien| U
|
|
U -->|POST Kontakt| A[API Endpoint]
|
|
A -->|SMTP| M[Mail Server]
|
|
M -->|E-Mail| R[Empfaenger Inbox]
|
|
```
|
|
|
|
## Clean Architecture Perspektive
|
|
|
|
Auch wenn die App klein ist, bleiben die Grenzen klar:
|
|
|
|
* UI-Layer: React Komponenten und Form-Handling
|
|
* Application: Use-Case Kontaktformular senden (Validierung, Mapping)
|
|
* Infrastructure: SMTP Versand, Express Adapter
|
|
|
|
Ziel: Testbarkeit und minimale Kopplung, ohne Overengineering.
|
|
|