FleetView

Why I built it

I got curious about how fleet-tracking companies follow vehicles and flag events in real time (the backstory), so I built a small one on real data. FleetView reads live vehicle positions from the TTC's public NextBus (umoiq) feed, which needs no API key.

How it works

• A FastAPI backend polls the feed every 10 seconds, normalizes each vehicle and pushes the update to every connected browser over a WebSocket.
• Geofencing is a ray-casting point-in-polygon check against two zones, Downtown Core and Pearson Airport. The tracker remembers each vehicle's last inside/outside state, so it alerts once on entry or exit instead of on every tick.
• Speeding alerts fire above a configurable threshold (50 km/h by default). Tick rate, routes, vehicle cap and CORS are all environment variables.
• The feed is capped at 12 vehicles on streetcar routes 501, 504, 505, 506 and 510, which actually cross downtown, so geofence events fire for real.
• The React 19 frontend draws the map with MapLibre GL, lists vehicles as moving, idle or offline, and filters the alert log to the selected vehicle.

Decisions and trade-offs

• No database. It's a live view, so vehicle state lives in memory and the alert log keeps the latest 50 entries.
• The backend accepts up to 50 WebSocket clients and closes extra connections with code 1013 (try again later); the client reconnects every 3 seconds.
• The camera feeds are placeholders. TTC vehicles don't expose dashcams, so each vehicle gets a stable public HLS test stream, played with HLS.js (native HLS on Safari).
• Map tiles default to OpenFreeMap so it runs without an account. A MapTiler key can be added in settings and stays in localStorage.

Stack

React 19 (React Compiler) · TypeScript · Vite · Tailwind CSS 4 · MapLibre GL · HLS.js · FastAPI · WebSockets · httpx