Web (PWA/Browser) – Übersicht

Was ist das?

Der Touchpoint "Web" ist eine React-basierte Progressive Web App (PWA), die als zentrales UI der Plattform alle Services bündelt. Es wird als statisches Build über Nginx in einem Docker-Container betrieben und ist über die Plattform-Domain erreichbar. "PWA" (installiert) und normaler Browser-Zugriff sind dieselbe Anwendung, kein separater zweiter Touchpoint.

Technologie-Stack

Technologie	Zweck
React 18	UI-Framework
Vite	Build-Tool und Dev-Server
Nginx	Statisches Hosting im Container
Docker	Containerisierung

Architektur

Die App ist eine Single-Page Application mit kollabierender Sidebar-Navigation. Der aktive Tab wird in localStorage persistiert und beim nächsten Aufruf wiederhergestellt.

Frontend (React SPA)
├── Sidebar (Hauptnavigation, kollabierbar)
├── Topbar (Markenzeichen, Nutzername, Logout)
└── Content-Bereich
    ├── Startseite         – Service-Karten Übersicht
    ├── Notizen            – Persönliche Notizen
    ├── Mittagessen        – Wochenübersicht Mittagessen
    ├── Trading (Gruppe)
    │   ├── Trading Journal
    │   ├── Analyse & Bewertung
    │   ├── Trend-Analyse
    │   └── Fundamental-Analyse
    ├── Alerts             – Push-Benachrichtigungen
    ├── Dokumentation      – Eingebettete Doku (iframe)
    └── Admin (nur Rolle: admin)
        ├── Benutzerverwaltung
        ├── Log-Anzeige
        └── Systemverwaltung

Zugriffskontrolle

Die Sichtbarkeit einzelner Tabs wird durch zwei Mechanismen gesteuert:

Mechanismus	Beschreibung
`adminOnly: true`	Tab nur für Nutzer mit Rolle `admin` sichtbar
`service: <name>`	Tab nur wenn Nutzer Zugriff auf den Service hat
`service: null`	Tab immer sichtbar (nach Anmeldung)

Die Prüfung erfolgt clientseitig auf Basis der /api/auth/me-Antwort. Serverseitig sind alle API-Endpunkte zusätzlich abgesichert.

Die Sidebar enthält direkte Tabs und Gruppen mit Unter-Tabs. Gruppen sind kollabierbar. Beim Öffnen eines Unter-Tabs wird die Gruppe automatisch expandiert.

Ein Klick auf einen Service-Tab schließt die Sidebar auf mobilen Geräten automatisch.

Build & Deploy

# Im myapps-Verzeichnis
docker compose build frontend
docker compose up -d frontend

Der Build-Prozess (vite build) erzeugt statische Dateien in dist/, die von Nginx ausgeliefert werden.

Changelog

Version	Datum	Änderungen
1.1	2026-07-13	Verschoben von platform/frontend/ nach touchpoint/web/ – inhaltlich unverändert. Grund: Dieser Touchpoint bündelt Service-UIs und konsumiert Plattform-/Service-APIs, stellt aber selbst keine Fähigkeit bereit, die andere Services nutzen – gehört damit strukturell zu touchpoint, nicht zu platform (siehe platform/overview.md, Zielbild). Sibling: touchpoint/trading-companion-app/.

1.0	2026-06-25	Initiale Version