Know exactly when the truck is coming. No more waiting. No more missing it.
A real-time GPS tracking system that tells residents when the garbage truck is approaching their street — built as a proof-of-concept for a genuine everyday problem across urban and semi-urban India.
Live Demo → truck.html · user.html
In most neighborhoods across India, the garbage truck arrives without any warning. Residents either miss it entirely, or spend their morning listening for the horn. There is no system, no schedule, no notification — just luck.
This project is a working prototype that proves a simple idea: a phone, a free database, and a browser are all you need to fix this.
The first version was a minimal proof-of-concept. A webpage on the driver's phone sent GPS coordinates to Firebase, and a Python script on the resident's laptop watched the database and printed a terminal alert when the truck came within range.
How it worked:
truck.html— opened on phone, sent live GPS to Firestoretracker.py— ran on laptop, watched Firestore, printed*** ALERT: TRUCK IS NEARBY ***in terminal- Location was hardcoded in the Python script — no user input
Limitation: The resident had to keep a terminal open and manually enter their own coordinates. Not practical for real users.
Version 2 completely rethinks the resident experience. Everything now happens inside the browser — no Python, no terminal, no installation required. Any resident can open the page on their phone and have the full system running in seconds.
| Feature | V1 | V2 |
|---|---|---|
| Resident interface | Python terminal | Web dashboard |
| User location | Hardcoded in script | GPS from browser, saved to Firebase |
| Distance display | Terminal print | Live updating card, every 3 seconds |
| Alert | Terminal text | Animated banner + browser notification + sound |
| Map | None | Live OpenStreetMap with both markers |
| ETA prediction | None | ML linear regression on GPS trajectory |
| Sound alert | None | 3-beep audio alert via Web Audio API |
| Stop sharing | None | One tap to remove location from database |
| Setup required | Python + pip install | Just open the URL |
📱 Driver's Phone ☁️ Firebase 💻 Resident's Browser
truck.html → Firestore DB ← user.html
(sends GPS live) (stores coords) (reads + shows dashboard)
No backend server. No app install. Everything runs directly in the browser using Firebase's REST API.
Designed to run on the garbage truck driver's phone.
- Captures live GPS using the browser's Geolocation API
- Sends coordinates to Firebase Firestore every few seconds
- Shows a radar pulse animation while transmitting
- Displays live latitude/longitude on screen
- Simple Stop/Start toggle button
- Mobile optimized, works on any phone browser
Everything the resident needs, in one page.
Location Setup (top section)
- One tap to share GPS and save home location to Firebase
- Location stored in database — persists across sessions
- Update button to re-share if moved
Live Tracker (bottom section, unlocks after location is set)
- 🔔 Alert Banner — pulses amber when truck is within 500m, green when safe
- 📏 Distance Card — live distance in meters or km, updates every 3 seconds
- 🚛 Truck GPS Card — live coordinates from the truck with a LIVE indicator
- 🗺️ Interactive Map — dark-themed OpenStreetMap showing both locations, connected by a dashed line, auto-zooms to fit
- 🤖 ML ETA Prediction — linear regression on last 6 GPS readings predicts truck arrival time in minutes
- 🔊 Sound Alert — 3 loud beeps via Web Audio API the moment truck enters 500m radius
- 🛑 Stop Sharing — removes location from database and resets dashboard with one tap
| Layer | Technology |
|---|---|
| Frontend | HTML5, CSS3, Vanilla JavaScript |
| Database | Google Firebase Firestore (REST API) |
| Maps | Leaflet.js + OpenStreetMap |
| GPS | Browser Geolocation API |
| Hosting | GitHub Pages |
| ML algorithm | Linear Regression (JavaScript, client-side) |
| Sound | Web Audio API |
| Legacy backend | Python 3, google-cloud-firestore, geopy |
- A Google account (for Firebase)
- A phone with GPS and a browser
- Create a project at firebase.google.com
- Enable Firestore Database in test mode
- Update Firestore rules to allow read/write:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /truck/location { allow read, write: if true; }
match /user/location { allow read, write: if true; }
}
}
In both truck.html and user.html, replace the firebaseConfig block with your own project's config (found in Firebase Console → Project Settings → Web App).
Push to GitHub and enable GitHub Pages from Settings → Pages → main branch. Both pages will be live at your GitHub Pages URL.
- Open
truck.htmlon the driver's phone → tap Start Transmitting - Open
user.htmlon the resident's device → tap Share My Location - The dashboard activates automatically and begins tracking
If you want to run the original terminal-based version:
pip install google-cloud-firestore geopy
python tracker.pyMake sure your Firebase service account JSON key file is in the same folder and the filename matches SERVICE_ACCOUNT_KEY_FILE in the script.
Note: The Python script requires
ngrokto servetruck.htmlover HTTPS so the phone's browser grants GPS access. Runpython -m http.server 8000andngrok http 8000in separate terminals, then open the ngrok URL on your phone.
- GPS variance: Consumer GPS chips have a natural accuracy range of 50–150 meters. The 500m alert radius is intentionally designed to compensate for device-level variance, ensuring residents receive timely alerts regardless of minor GPS drift.
- Single resident: The current prototype stores one user location at a time. Multi-resident support with individual user IDs is a planned future enhancement.
- No backend: All real-time communication is handled client-side via Firestore's REST API, keeping the system serverless and free to host.
- 👥 Multi-resident support with unique user registration
- 📱 SMS/push notifications when browser is closed
- 🗺️ Truck route history and path visualization
- 📱 SMS notifications when browser is closed (Twilio)
- 🔐 Driver authentication to prevent spoofing
- 👥 Multi-resident support with individual user registration
Firebase · Leaflet.js · OpenStreetMap · GitHub Pages · Python
GarbageTrack — Built as a BTech Mini Project, CSE, 3rd Year