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.
Walkthrough
A closer look, screen by screen.
01 / 04
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.
02 / 04
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.
03 / 04
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.
04 / 04
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.
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
- 01
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.
- 02
Pre-computed routes across 100+ city pairs and interpolated between points for smooth motion and believable headings.
- 03
Used an LLM to manufacture a plausible fleet — the data-generation step is what makes a demo with no real trucks feel populated.
- 04
Tuned marker size and color to vehicle type and status so the map reads at a glance.