Screen Map
Every screen, flow and edge case in the mobile app and the dashboard, with real screenshots.
The screen map is the UX picture of both apps: each journey as a storyboard of frames, then every screen with each state the code can render and the file and line that triggers it.
How to read it
- Flows run left to right. Arrows carry the action that moves the user on. Branches below a flow are the edge cases: errors, empty results, gates.
- Frames are real screenshots from the dev deployment with QA accounts. Mobile pages have an iOS and Android switch. Dashboard tables are captured with names, emails and phone numbers blurred.
- Wireframe cards stand in where a state needs backend data or conditions a device run cannot produce (a refunded order, a network failure). The card says what is missing.
Card kind
- ScreenFull route
- SheetBottom sheet or drawer
- ModalModal route or full-screen overlay
- DialogAlert, confirm or popover
- InlineInline state or shared component
- GateBlocks access until a condition holds
- RedirectNo UI of its own, routes elsewhere
State kind
- LoadingSkeleton or spinner while data loads
- EmptyQuery returned nothing
- ErrorNetwork, server or validation failure
- EdgeUnusual but valid: out of stock, expired, refunded, rate limited
- SuccessToast, confirmation or completed action
- GateSign-in, permission, role or update gate
- OfflineNo network or a request that never returns
Mobile app
14
Areas
85
Screens and overlays
600
States
35
Flows
203 of 330
Frames with a real screenshot
Start at Mobile app.
Dashboard
14
Areas
170
Screens and overlays
771
States
23
Flows
209 of 490
Frames with a real screenshot
Start at Dashboard.
Updating
Screen data lives in apps/docs/data/screen-map. Screenshots go in apps/docs/public/images/screen-map/<app>/<platform>/, named <screen>--<state>.webp by the capture scripts. Run bun run docs:screen-map from apps/docs to rebuild these pages; it fails if a flow points at a screen or state that no longer exists.