# 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.