SchoolTrack
Parents see their child's bus come closer, drivers run the trip from their phone, and the operator watches the whole fleet.
- Live demo
- 2026
- Interface: French
At a glance
- Why it matters
- Parents, drivers and the operator see the same bus position and arrival time, from one simulated fleet.
- My role
- Solo, end to end
- Stack
- React, TypeScript, Vite, Tailwind CSS, Zustand, Leaflet
The problem
A parent waiting at a bus stop has one question: how long. The school transport company has another: which bus is late and why. Usually both are answered by phone calls.
I wanted one source of truth about each bus, shown three ways: to a parent who cares about one stop, to a driver who cares about the next stop, and to an operator who cares about all of them.
What it does
Three buses drive their morning routes. The parent screen follows one child's bus and shows the time and distance to the child's stop, with alerts at one kilometre, 300 metres and 100 metres. The driver screen shows the next stop, who is on board, and buttons to start the trip, arrive at a stop, board a student and finish.
The operator console shows the fleet, delays, routes, students and notifications. A control bar starts, pauses and resets the simulation and plays it at 1, 5 or 10 times speed. The interface is in French.
Captures
How it works
One number per bus
Data
- data/*.tsRoutes, stops, students, drivers, the fictional town
Simulation
- engine.tsRoute geometry and stop positions
- store.tsA 200 ms tick moves each bus along its route
- derive.tsDistance travelled to position, speed, ETA
Services
- gpsService.tsToday the simulation, later real GPS
- tripService.tsStart, stop, board, finish
- notificationService.tsProximity alerts
Screens
- ParentDashboardOne child's bus
- DriverModeOne bus, its next stop
- AdminDashboardThe whole fleet
Drawn from src/simulation, src/services and src/pages.
Decisions
Everything follows from one number
For each bus the store keeps the distance it has travelled along its route. Position, heading, speed, distance and time to any stop, progress and alerts are all derived from that number.
A seam for real GPS
Screens read through small services, never from the store directly. Real positions from drivers' phones would replace the inside of gpsService and the simulation, not the screens.
Notifications only for who needs them
A parent sees alerts about their own child's stop, a driver about their own bus, the operator about everything. At most two pop up at once; the rest wait in the list.
A town drawn by the app
The first version used a public map service. For the public demo I removed it and drew a fictional town, Belvédère, as a street grid the routes follow. Nothing loads from another server, no key is needed, and no real address appears.