SnapFix

💡 Inspiration

Cities across developing regions (like South Asia, Sub-Saharan Africa, and the Caribbean) are facing extreme infrastructural breakdowns—from open garbage dumps and severe waterlogging to frequent power grid failures. While researching global utility crises highlighted by the World Population Review, we realized a critical gap: Citizens lack a streamlined, accountable way to report these issues, and municipal bodies lack structured, verified data to act upon. We wanted to build a bridge. We created SnapFix to empower citizens in Tier-2 and Tier-3 cities to seamlessly report civic hazards, while providing authorities with a verified, AI-assessed enterprise dashboard.

🚀 What it does

SnapFix is an AI-powered geospatial civic reporting platform that turns citizens into active problem-solvers.

• Vision-First AI Verification: Users upload an image of a civic issue. Our Gemini Vision AI acts as a strict gatekeeper, analyzing the pixels to verify if it's a real-world infrastructural hazard, completely ignoring misleading text inputs.
• ETA Prediction & Global Radar: The AI predicts a resolution timeframe (ETA), while the geospatial dashboard highlights global vulnerability hotspots.
• Action Engine 2.0: Instead of just mapping issues, SnapFix solves them. It automatically drafts professional, legal grievances targeting specific municipal Twitter/X handles.
• SMS Fallback: For areas with low connectivity, it generates deep-linked SMS alerts containing precise coordinates to dispatch to local authorities.
• Civic Karma: Users are rewarded with "Hero Points" via GSAP-powered micro-interactions for escalating verified issues.

🛠️ How we built it

We built the frontend using Next.js and React, styled beautifully with Tailwind CSS to achieve a dark-mode, glassmorphism UI suited for an enterprise command center. We integrated React-Leaflet with Esri Satellite imagery and OpenStreetMap's Nominatim API for a cinematic, fly-to search experience. The core brain of the platform runs on the Gemini 1.5 Flash Vision API, which handles image verification, ETA predictions, and dynamic grievance drafting. We used GSAP for smooth UI micro-interactions.

⚠️ Challenges we ran into

• The "Yes-Man" AI Bug: Initially, the AI was blindly trusting user text prompts over the uploaded image (e.g., classifying a dummy sci-fi graphic as a "Water Pipe Burst" just because the user typed it). We engineered a strict "Vision-First, Zero-Trust" system prompt that forces the API to evaluate the image pixels first, instantly rejecting digital graphics or irrelevant photos with a 400 Bad Request.
• Geospatial State Collisions: We faced severe map snap-back bugs and infinite re-render crashes when zooming into max capacity (Zoom Level 20+). We had to completely isolate Leaflet's internal DOM state from React's render cycle using maxNativeZoom limits and strict pointer-event overrides.

🏆 Accomplishments that we're proud of

We are incredibly proud of building the Action Engine 2.0. Transitioning the app from a simple "reporting" tool to an "escalation" tool that automatically drafts emails, tags correct government handles, and features an offline-friendly SMS deep-linking protocol. Seeing the entire flow—from photo upload to an auto-generated official tweet—working flawlessly is our biggest win.

📚 What we learned

We learned the intricacies of prompt engineering for Vision models, specifically how to prevent AI hallucinations and enforce strict JSON output schemas. We also gained deep experience in mapping libraries, specifically managing React states alongside imperative DOM libraries like Leaflet.

⏭️ 🚀 What's Next for SnapFix: The Road to Smart Cities

Building the core of SnapFix during this hackathon sprint was just the beginning. To truly bridge the gap between citizen reporting and government action, here is the strategic roadmap for the next phase of development:

1. 🧠 The "Backend Brain" (Deep Image Verification) To ensure 100% data integrity and prevent system abuse, we are upgrading our Vision AI to act as a definitive gatekeeper. This 'Backend Brain' will automatically filter out manipulated images, internet memes, and non-civic issues in milliseconds, ensuring that municipal dashboards only receive verified, real-world hazards.

2. 🎙️ Multilingual Voice Reporting (Bharat-First Accessibility) Infrastructure issues affect everyone, regardless of their tech-literacy. We are integrating localized voice-to-text AI models. A user in a Tier-2 or Tier-3 city will simply be able to tap a microphone and describe the issue in their native language (Hindi, Urdu, etc.), and SnapFix will automatically translate, categorize, and log it for the authorities.

3. ⚖️ Advanced AI Grievance Drafting & Auto-Escalation Right now, we automate the alert. Next, we automate the legal workflow. The Action Engine will generate highly detailed, legally formatted official grievances based on the AI's hazard analysis. It will automatically route these drafts to the correct municipal inbox and escalate unaddressed issues by tagging relevant authorities on social media.

4. 🔮 Predictive Infrastructure Maintenance (AI Forecasting) Moving from reactive to proactive: By analyzing historical reporting data, seasonal weather patterns (like monsoons), and vulnerability hotspots on our Global Radar, SnapFix will utilize machine learning to predict which areas are at the highest risk of infrastructure failure before a citizen even needs to report it.

5. 🌐 IoT & Smart City Integration The ultimate vision is to connect SnapFix with existing municipal IoT sensors (e.g., smart water meters, traffic cameras). This will create a centralized, automated command center where crowdsourced citizen reports and hardware sensor data validate each other in real-time.

Built With

• gemini-api
• gsap
• leaflet.js
• next.js
• openstreetmap-api
• react
• tailwind-css