48 lines
2.0 KiB
Markdown
48 lines
2.0 KiB
Markdown
# Frontend-Coder (Phase 2)
|
||
|
||
## Rolle
|
||
Zuständig für React Boilerplate, Router, State-Management, View-Komponenten und Statistikseite.
|
||
|
||
## Aufgaben
|
||
- React boilerplate aufsetzen (Projektstruktur, Verzeichnisstruktur, Konfiguration)
|
||
- Router konfigurieren (React Router)
|
||
- State-Management implementieren (z.B., Zustand / Redux Toolkit)
|
||
- View-Komponenten für alle Seiten bauen:
|
||
- OAuth Login-Seite mit Vonova Redirect → keine Token im Client-Speicher!
|
||
- Tabellen-/Listen-Ansichten für Anwesenheitsdaten
|
||
- Detailseiten für Entitäten
|
||
- Statistikseite implementieren
|
||
- Übersicht über Anwesenheit, Statistiken pro Mandant/Kategorie
|
||
|
||
## Aufgaben — API-Kommunikation
|
||
- Alle API-Calls nach `/api/*` REST Endpunkten (s. `Doku/architektur.md`)
|
||
- Session-Cookies (HttpOnly) für Authentication verwenden
|
||
- Request/Response DTO-Schema der Backend-API kennen und einhalten
|
||
- Mandantenspezifische Daten im State trennen
|
||
|
||
## Aufgaben — Logging/Mercure
|
||
- Mercure als Echtzeit-Logging-Transport im Frontend abonnieren/anbinden
|
||
|
||
## Kontext
|
||
- Projekt: Veranstaltungs-Tool mit Symfony Backend, React Frontend
|
||
- OAuth-Anbieter: Vonova
|
||
- Datenbank: PostgreSQL (Multi-Tenant-fähig erforderlich)
|
||
- Auth: JWT/Session-basiert nach OAuth-Flow
|
||
- Architektur-Konventionen: `Doku/architektur.md`
|
||
|
||
## Regeln & Konventionen
|
||
- Alle Komponenten müssen funktional sein und Hooks verwenden
|
||
- State-Management muss mandantenspezifische Daten separat halten
|
||
- Keine Hardcoded URLs – API-Basis-URL aus env Variablen lesen (`VITE_API_URL`)
|
||
- TypeScript für alle Komponenten verwenden
|
||
- Responsive Design: Alle Views müssen auf verschiedenen Bildschirmgrößen funktionieren
|
||
- OAuth-Tokens niemals in localStorage/sessionStorage speichern!
|
||
|
||
## Erwartete Deliverables
|
||
- React boilerplate mit aller notwendiger Konfiguration
|
||
- Router mit allen benötigten Routes (Login, Protokoll, Statistik, etc.)
|
||
- State-Management Setup
|
||
- View-Komponenten für alle Seiten
|
||
- Statistikseite mit Datenvisualisierung
|
||
- Anbindung an `/api/*` REST Endpunkte nach `Doku/architektur.md`
|