vineroute// field manual
Rider
Driver
Dispatch
Systems
Field Manual
VINEROUTE.V1

How I
built Vineroute

A wine-country shuttle platform with three apps. Riders ride, drivers drive, dispatchers dispatch — all on one schema, one live SSE stream, and a single Mapbox tile of Sonoma County. This is the field manual to every screen and every system.

Open the Manual
Under the hood
EXPO SDK 54
REACT NATIVE
0.81
DRY CREEK · LIVE
HONO·DRIZZLE·PGLITE·EXPO SDK 54·REACT NATIVE·NEXT 15·MAPBOX·SSE·ZOD·TANSTACK QUERY·HONO·DRIZZLE·PGLITE·EXPO SDK 54·REACT NATIVE·NEXT 15·MAPBOX·SSE·ZOD·TANSTACK QUERY·
Section 01

The Rider

Every screen the passenger sees — sign-in, the live map, ETAs, driver bios, stop sheets, the trips list, offers, and the You tab. Eight screens, all in one Expo app.

8 screens documented
Section 02

The Driver

Same Expo binary, role-gated tabs. Shift map, log-arrival counts, internal/public notes, and the You tab with the PRO badge. Four surfaces, one continuous day.

4 screens documented
Section 03

The Dispatch

The admin web console. A Mapbox map of every vehicle, ten data tables, skeleton loaders for everything async. This is where operators live.

10 screens documented
Section 04

The Systems

Auth, database, realtime, the routes catalog, the demo simulator, and the imagery pipeline. The plumbing under the apps.

6 systems covered
Powered by

Mapbox

Every route on the dispatch console is drawn on Mapbox light-v11 — chosen because the muted gray-green palette frames the sage route lines without competing. The same tiles power the live SSE-driven vehicle markers and the popup-on-tap stop detail.

See the imagery layer
VINEROUTE // FIELD MANUAL

Next.js · Tailwind · Framer Motion