Architectuur
Dataflow
Een complete route door de stack, van kaartklik tot databaserij.
Een route-aanmaak stap voor stap:
- De gebruiker klikt op de kaart. Mapbox stuurt een klik uit met lng/lat. De kaartcomponent van de webapp roept
addWaypoint(coords)aan op de routing-Zustand-store uit@routess/core. - Store werkt bij. De store voegt het waypoint toe, herberekent de totale afstand/duur lokaal en stelt subscribers op de hoogte. De sidebar rendert opnieuw.
- Persistentie als side-effect. Een subscriber in
apps/webroeptapiClient.routes.upsertCurrent(state)aan, gedebouncet op ~500ms. - HTTP-request.
@routess/api-clientdoetPATCH /api/v1/routes/:idmet de JWT-cookie eraan gehecht. - API ontvangt. NestJS authenticeert de cookie, valideert de body via DTO's en persisteert via MikroORM.
- Response. De API geeft de canonieke route terug. De store verzoent (als de server iets genormaliseerd heeft).
Waarom client-first state?
routess kiest voor snelle lokale state met uiteindelijke serververzoening. De kaart moet onmiddellijk aanvoelen; bij elke klik heen en weer naar de server zou traag aanvoelen.
Faalmodi
- Server onbereikbaar: lokale bewerkingen blijven werken; de persistentielaag plaatst ze in de wachtrij en probeert opnieuw met exponentiële backoff.
- Auth verlopen: de server geeft 401; web stuurt door naar aanmelden.
- Validatiefout: de server geeft 422 met fouten op veldniveau; web toont een toast en behoudt de lokale bewerking.