Motive is a live fleet-tracking dashboard. Trucks and vans move smoothly along real Mapbox routes between cities while a sidebar lists the fleet and a detail panel shows each vehicle's telemetry — position, speed, heading, fuel, engine hours — updating in real time. Around the map sits the unglamorous scaffolding fleets really run on: hours-of-service logs, ELD events, inspections, and fuel records.
The fun was making 'live' actually feel live without a real fleet behind it. The app generates realistic logistics data with an LLM, writes telemetry to Postgres on a tick, and streams it to the browser over Server-Sent Events using Postgres LISTEN/NOTIFY — so the trucks on screen are following rows in a database, not a front-end animation pretending to be data.
Role
Solo build — designed and vibe-coded end to end with AI pair-programming. Next.js 15 + React 19, Prisma/Postgres, Mapbox with Turf.js for geospatial math, OpenAI for synthetic data.
What shipped
- Vehicles move along pre-computed Mapbox routes at type-appropriate speeds, with interpolated position and heading.
- Telemetry — position, speed, heading, fuel, engine hours — written to Postgres on a roughly 1.5-second tick.
- Real-time streaming to connected clients via Postgres LISTEN/NOTIFY piped to Server-Sent Events.
- One-click AI generation of realistic drivers, vehicles, trips, and telemetry profiles.
- Compliance records — HOS logs, ELD events, inspection reports, fuel logs — with seed scripts that boot roughly 100 vehicles and 110 drivers.
Selected decisions
- Streamed movement from the database (LISTEN/NOTIFY → SSE) instead of animating on the client, so the UI reflects real state a backend could just as easily be writing.
- Pre-computed routes across 100+ city pairs and interpolated between points for smooth motion and believable headings.
- Used an LLM to manufacture a plausible fleet — the data-generation step is what makes a demo with no real trucks feel populated.
- Tuned marker size and color to vehicle type and status so the map reads at a glance.
Walkthrough
A closer look
A map that moves from the database
Postgres LISTEN/NOTIFY pushes each telemetry write out over Server-Sent Events, so a moving truck on the map is literally following new rows. The realtime layer is the spine of the whole thing.
Smooth motion from sparse data
Routes are pre-computed across a hundred-plus city pairs and the app interpolates between points to derive both position and heading, turning a coarse tick into motion that looks continuous.
A fleet conjured by an LLM
A generation step asks OpenAI for realistic drivers, vehicles, trips, and telemetry profiles, and seed scripts stand the whole fleet up in a command or two — the difference between an empty map and a believable operation.
The boring-but-real parts
Behind the map sit the records a real fleet lives or dies by — hours-of-service, ELD events, inspections, fuel logs — so the demo gestures at an actual product, not just a moving-dots toy.