Gallery
The challenge
A tracking engine is not a product. Traccar, the open-source GPS server, already knows how to talk to trackers, store positions and raise events. What a fleet team needs sits on top: a map they can read at a glance, the state of each vehicle in one card, geofences they can manage, trips they can look back on, alerts when the ignition goes on or a vehicle enters a zone, and reports that answer "how far, how much fuel". And they need it on the phone, not only at a desk. ProGPS is that product. We built it for a client in Romania on Traccar's standard tracking APIs.
Architecture
- Trackers → Traccar. A standard Traccar server provides the tracking APIs: devices, positions and events. No server, API or protocol changes were made. - ProGPS web app (Laravel) ↔ Traccar APIs. The web app reads device state, trips and events through Traccar's standard APIs and adds the ProGPS interface: live map, device panel, geofences, trips, notifications and reports. - ProGPS mobile app (Flutter, Android and iOS) ↔ Traccar APIs. The same tracking data in one Flutter codebase for both platforms: dashboard, trips and live tracking. - Maps. Google map controls with Map, Satellite and OpenStreetMap layers on the web; Google Maps in the Android and iOS app.
Solution
What the fleet team gets in the ProGPS web app: - Live map and device panel. A floating panel over a full-screen map, with device search, groups and an Add Device button. Each device card shows live and geofence status, the address, fuel consumption, speed limit, time since the last update, speed, signal, voltage and ignition state. - Geofences. Geofences drawn on the map, such as a circle around a site, and a geofence list with search, type and remove. - Trips. Pick several vehicles and a date range to get their trips, each with start and end time, start and end address, duration, average and maximum speed and distance, plus a replay button. - Notifications. A searchable feed of events such as ignition on, ignition off, device stopped and geofence enter. - Reports. A reports window with report type, device and date filters, total distance and total fuel, a summary table (distance, speeds, start and end odometer, engine hours, fuel spent) and PDF and Excel export. - Device onboarding. New trackers are added by their unique identifier. - Branded access. A ProGPS sign-in page with password reset and sign-up. And in the ProGPS mobile app (Flutter, for Android and iOS): - Dashboard. Fleet-state tiles: online, offline, stationary, stationary with ignition on, moving, located by cell tower (LBS), no actual state and no messages, plus the geofence list. - Trips. A trip screen with the route on the map, a day picker and a timeline of stops and moves. - Live Track. A live map with clustered vehicles.
Results
- The client's fleet team works in one ProGPS product on the web and on Android and iOS, instead of a raw tracking server UI. - Ignition, stop and geofence events reach them as notifications they can act on. - Distance and fuel questions are answered by a report and exported to PDF or Excel. - Traccar's standard APIs stay untouched, so the effort went into the product layer the client's users see. Tech stack - Laravel (web app) - Flutter (mobile app for Android and iOS) - Traccar (standard tracking APIs: devices, positions, events) - Google Maps and OpenStreetMap layers Next step Building a tracking product on Traccar and need the web app and the mobile app your fleet team will use? https://techmania.solutions
Related project
ProGPS
ProGPS: Laravel web and Flutter iOS/Android apps we built for a client in Romania on Traccar's standard APIs: live tracking, geofences, trips, fuel reports.
View project in portfolio