Appearance
๐ The Architect's Ledger: BikeTrack Project Reference โ
This document serves as a high-signal reference for the current architecture, critical use cases, and regression testing checklist. Use this to ensure every commit maintains the project's high standards.
๐ Core Architecture (FSD + Clean Arch) โ
- Frontend (
apps/web): Follows Feature-Sliced Design (FSD).- Entities:
route,poi,user,track(Domain data and basic state). - Features:
build-route(User scenarios, interaction between entities and API). - Widgets:
map-canvas,planner-sidebar,elevation-chart,auth(Complex standalone UI blocks). - Shared: Common API clients, types, geo-logic, firebase-lib.
- Entities:
- Backend (
apps/api): Powered by Encore.dev.- Dependency Inversion: Use factories (
makeCalculateRouteHandler) to inject providers. - Adapters: External APIs (BRouter) are isolated behind interfaces (
IRoutingProvider). - Services:
poi,track(Encore services with PostgreSQL/PostGIS).
- Dependency Inversion: Use factories (
- Shared Package (
packages/shared): Single source of truth for:- Types:
Coord,BikeProfile,Poi,Route. - Validation: Zod schemas for external/internal boundaries.
- Logic:
haversineKm,pathDistanceKm,gpx-utils,calculateElevationStats. - Config:
SURFACE_COLORS,BROUTER_PROFILE_MAP.
- Types:
๐ฒ Critical Use Cases (Regression Checklist) โ
1. Routing & Planning โ
- [ ] Map Interaction: Clicking the map adds waypoints and displays a blue marker.
- [ ] Calculation: >= 2 waypoints triggers a POST to
/routing/calculate. - [ ] Surface Coloring: The route line must be colored according to the
surfaceproperty (Green=Asphalt, Amber=Gravel, Red=Dirt). - [ ] Resilience: If the routing server is slow, the 10s timeout triggers a
RoutingError. New clicks during calculation mustabortthe previous request.
2. Point of Interest (POI) โ
- [ ] Creation: Right-click (context menu) on the map opens the "Add POI" popup.
- [ ] Persistence: Saving a POI adds it to the
poiStoreand renders an emoji on the map. - [ ] Filtering: Changing filters in the sidebar/state correctly hides/shows POIs via
selectVisiblePois.
3. Map-Chart Synchronization โ
- [ ] Hover Sync: Hovering over the
ElevationChartmust show a highlighted marker on theMapCanvasat the exact geographic location. - [ ] Surface breakdown: The
ElevationChartmust display a color-coded bar matchingSURFACE_COLORSdefined in shared config.
4. Performance & Stability โ
- [ ] Marker Diffing: Adding a waypoint should NOT remove and re-add all existing markers (check
MapCanvas.tsxreconciliation logic). - [ ] Stale Closures: Map event handlers must use
store.getState()to access the latest waypoints/profile without re-mounting the map. - [ ] Types: No
anytypes on boundaries; all API responses must pass through Zod validation.
5. Data Export & Persistence โ
- [ ] GPX Generation: Exported GPX must contain both the track segments and all user-created POIs as
wptnodes. - [ ] Save Track: Users can save their planned route and POIs to the backend database (requires Auth).
๐งช Testing Strategy โ
- Unit: Test all logic in
packages/shared. - Integration: Test Zustand stores, complex hooks (
useBuildRoute), and widgets. - Visual/UI: Use Playwright for layout stability and end-to-end "Happy Path" verification.
- Boundary: Always test the
BRouterPublicAdapterwith mock 500/timeout responses.
Last Updated: April 2026 by Senior Architect Agent