mb-grid-solutions.com/docs/ARCHITECTURE.md

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

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.