2.0 KiB
2.0 KiB
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 nachDoku/architektur.md