how it works
demo
'report an issue ' page
the problem
open dashboard button
City dashboard, the reports submitted are shown here
recent reports shown
features
locations that a citizen can select so far, will add more further
map of the locations that'll be reported regarding the issue , highlighted in colour by their severity level
header / landing page

Inspiration

Lahore generates thousands of civic complaints every single day — overflowing garbage, potholes, sewer leaks, broken streetlights — but almost none of them reach a decision. They're scattered across WhatsApp groups, phone calls, and social media posts, with no way for city authorities to see the full picture, let alone prioritize what to fix first.

We didn't want to build "another complaint app." Lahore already has plenty of places to file a complaint. What it doesn't have is a way to turn thousands of individual voices into a single, structured signal that a city department can actually act on. That gap between collecting complaints and understanding them is what CivicLens AI is built to close.

What it does

CivicLens AI lets any citizen report a civic issue in seconds, with no account, no login, no signup, just a photo, a short description, and a location. From there, an AI vision-and-language pipeline (Google Gemini) does the heavy lifting automatically:

Classifies the issue into one of seven categories (garbage overflow, road damage, sewer overflow, water leakage, broken streetlight, illegal dumping, fallen tree)
Estimates severity (critical / high / medium / low)
Routes it to the correct city department — LWMC, WASA, LDA, or PHA — and surfaces that department's real contact info right on the report
Assigns a confidence score, so authorities know how much to trust the auto-classification

Every submitted report feeds a "live city dashboard" : category and severity breakdowns, department distribution, a searchable/filterable report table, and an interactive map with color-coded pins. Nearby reports of the same issue type cluster into "hotspots" , so eighteen separate "garbage" reports on one street become one prioritized zone instead of eighteen open tickets — turning noise into an actual decision-support signal for the city.

How we built it

Next.js + TypeScript for the full-stack app
Tailwind CSS
react-three-fiber for a rotating 3D globe on the landing page — glowing data points pulsing over Lahore, styled as a live satellite feed
Supabase for the database and photo storage, using Row Level Security policies so citizens can submit and read reports with zero authentication, while still preventing anonymous tampering or deletion
Google Gemini (Flash) for the AI classification pipeline — photo and description go in, structured JSON (issue type, severity, department, confidence, summary) comes out
Recharts for dashboard analytics and Leaflet for the live map

The whole flow -- upload photo → AI analysis → structured report → dashboard — mirrors the pipeline we originally sketched out on paper before writing a single line of code, because getting that "citizen submits, AI structures, authority decides" loop right was the actual point of the project.

Challenges we ran into

Choosing and switching AI providers under real constraints. We initially built the analysis pipeline around Grok, but hit a hard wall: brand-new API teams need purchased credits before any requests go through, with no free tier. Rather than block the whole project on billing, we migrated the entire /api/analyze route to Google Gemini's Flash model, which has a genuinely free tier.
Designing "no accounts, but still trustworthy." The brief was clear: citizens shouldn't need to sign up to report an issue. That meant leaning entirely on Supabase's Row Level Security instead of authentication to keep the system safe — anonymous users can insert and read, but never update or delete, so the public-facing simplicity doesn't come at the cost of data integrity.

Accomplishments that we're proud of

A fully working end-to-end pipeline: real photo upload, real AI classification, real structured storage, real live dashboard — not a mockup with static data.
A no-login submission flow that still resists tampering, thanks to carefully scoped database policies instead of user accounts.
A department-routing system with real, verified contact information for Lahore's actual civic authorities (LWMC, WASA, LDA, PHA), so a report isn't just "structured data" — it points a citizen toward a real next step.
A visual identity that doesn't feel like a generic dashboard template — the 3D rotating globe and HUD-style interface were built to make the "city intelligence" pitch feel real rather than aspirational.

What we learned

Building this taught us as much about infrastructure decisions as it did about AI integration — vendor lock-in risk, the importance of normalizing untrusted model output before it touches a database, and how much Postgres Row Level Security can do in place of a full auth system when the goal is genuinely public, frictionless access. It also reinforced that a lot of "AI product" work is really just disciplined software engineering with an API call in the middle.

What's next for CivicLens AI

A lightweight admin view so department staff can mark reports in_progress / resolved, closing the loop the dashboard currently only shows half of
Smarter duplicate detection at submission time — warning a citizen in real time if their report likely matches one already filed nearby
Real historical trend data once report volume builds up, replacing the current placeholder weekly trend chart
Exploring a WhatsApp-based submission channel, since that's genuinely where a lot of Lahore's civic complaints already live today
Making different admin Panels for different authorities in Pakistan such as, LWMC, WASA etc, so that they can login to their account and remove the complaint once it is resolved.
Partnership with Pakistani government to make Pakistan a pollution free country.