Architektur
Datenfluss
Ein vollständiger Weg durch den Stack, vom Kartenklick bis zur Datenbankzeile.
Ein Durchlauf beim Erstellen einer Route:
- Der Nutzer klickt auf die Karte. Mapbox emittiert einen Klick mit lng/lat. Die Map-Komponente der Web-App ruft
addWaypoint(coords)auf dem Routing-Zustand-Store aus@routess/coreauf. - Der Store aktualisiert sich. Der Store hängt den Wegpunkt an, berechnet Gesamtdistanz/-dauer lokal neu und benachrichtigt die Subscriber. Die Sidebar rendert neu.
- Persistenz-Seiteneffekt. Ein Subscriber in
apps/webruftapiClient.routes.upsertCurrent(state)auf, debounced ~500 ms. - HTTP-Request.
@routess/api-clientsetzt einenPATCH /api/v1/routes/:idmit angehängtem JWT-Cookie ab. - API empfängt. NestJS authentifiziert das Cookie, validiert den Body über DTOs und persistiert über MikroORM.
- Response. Die API gibt die kanonische Route zurück. Der Store gleicht ab (falls der Server etwas normalisiert hat).
Warum Client-First-State?
routess bevorzugt schnellen lokalen State mit eventueller Server-Abgleichung. Die Karte muss sich augenblicklich anfühlen; ein Roundtrip bei jedem Klick würde träge wirken.
Fehlerfälle
- Server nicht erreichbar: lokale Bearbeitungen funktionieren weiter; die Persistenzschicht stellt in eine Queue und wiederholt mit exponentiellem Backoff.
- Auth abgelaufen: Server gibt 401 zurück; Web leitet zur Anmeldung um.
- Validierungsfehler: Server gibt 422 mit feldspezifischen Fehlern zurück; Web zeigt einen Toast und behält die lokale Bearbeitung.