A Google-powered web platform that enables campuses and communities to report, visualize, and resolve local infrastructure issues with real-time location intelligence.
Campus and community issues (broken roads, garbage overflow, water leaks, electrical hazards) are often:
- Hard to report
- Poorly tracked
- Lacking transparency
This project solves that by combining Google Maps, auto-location, AI-ready vision analysis, and real-time visual tracking into a single, user-friendly platform.
🔗 https://community-issue-reporting.vercel.app/ Fully functional preview with Google Maps, auto-location, and issue tracking.
Users can:
- 📸 Report issues with photos
- 📍 Auto-detect exact location
- 🗺️ View all issues on an interactive map
- 🔄 Track resolution progress visually
- 📊 Measure real community impact
All without requiring a backend — making it fast, accessible, and demo-ready.
👉 Interactive & Animated Prototype 🔗 https://glide-mock-40777286.figma.site/
This Figma prototype visually demonstrates:
- Application architecture
- Component hierarchy
- Data flow (User → Storage → Map → Stats)
- Google technology integrations
- Animated transitions for clarity
- Interactive Google Map with color-coded issue markers
- Auto-detect location using Google Geolocation
- AI Vision (simulation) for issue detection from images
- Live status updates (Reported → Resolved)
- Impact dashboard with success rate analytics
- Clean, accessible, mobile-friendly UI
- Google Maps JavaScript API – Interactive maps & visualization
- Google Geolocation API – Auto-detect user location
- Google Places API (Simulated) – Location search & autocomplete
- Google Vision API (Simulated) – AI-powered image analysis (future-ready)
- Google reCAPTCHA v3 – Spam & abuse protection
- Google Fonts – Consistent, accessible typography
- Google Lighthouse – Performance & accessibility optimization
Designed to be fully compatible with Google Cloud backend services when scaled.
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript |
| Routing | React Router |
| Styling | Tailwind CSS + Radix UI |
| Maps | Google Maps API |
| Build Tool | Vite |
| Storage | Browser localStorage |
npm install
npm run devCreate .env:
VITE_GOOGLE_MAPS_API_KEY=YOUR_KEY
VITE_RECAPTCHA_SITE_KEY=YOUR_KEY- Transparent issue tracking
- Faster reporting & resolution
- Visual accountability
- Scalable for colleges, hostels, societies, and cities
MIT License