CivicLens

• 

  Creating a report

• 

  Spatial Studio

• 

  Home Page

• 

  How to create a report and use the app

• 

  3D live map

Inspiration

Local problems are often easy to notice but difficult to prioritize. A broken streetlight, unsafe intersection, damaged sidewalk, or accessibility issue might affect a community every day, yet reports can become scattered across different channels with little indication of which problems need attention first.

I built CivicLens to explore a better approach: turn individual community reports into a live, shared picture of what a community needs most.

What it does

CivicLens is a community issue reporting and prioritization platform.

Residents can submit a local issue with a title, description, location, and position on an interactive map. CivicLens automatically analyzes the report using a rule-based classification system to assign a category and initial priority.

From there, the report becomes part of a live community dashboard.

Other community members can confirm an issue, strengthening the signal that the problem is affecting more than one person. CivicLens combines the report's priority with community confirmations to generate an urgency score, allowing higher-impact issues to rise in the priority feed.

CivicLens includes:

• Interactive community issue reporting
• Automatic category and priority classification
• Geographic issue placement using latitude and longitude
• A live OpenStreetMap-based community map
• Community confirmations
• Dynamic urgency scoring and prioritization
• Issue status tracking
• Live dashboard statistics
• A 3D Spatial Intelligence experience for exploring community issues geographically

The goal is simple: instead of treating every report as an isolated complaint, CivicLens turns community input into actionable civic intelligence.

How I built it

CivicLens uses a full-stack architecture.

The frontend was built with React, TypeScript, and Vite, with Framer Motion powering interface animations and Lucide React for icons.

For geographic visualization, CivicLens uses Leaflet and React Leaflet with OpenStreetMap data. I also developed a separate Spatial Intelligence experience that explores a more immersive geographic representation of community reports.

The backend is built with FastAPI and Python. SQLAlchemy handles database operations, while SQLite stores reports, locations, confirmations, priorities, and statuses.

When a report is submitted, the backend classifies its title and description using a keyword/rule-based classifier. The issue is stored in the database and immediately appears across the dashboard and map.

Community confirmations are sent back to the API. The dashboard then reloads the updated data, recalculating confirmation totals, urgency scores, and the ordering of the priority feed.

Challenges I faced

One of the biggest challenges was making every part of CivicLens feel connected rather than building separate demo features.

A submitted report needed to move seamlessly from the form to classification, geographic selection, database storage, the map, dashboard statistics, community confirmations, and urgency ranking.

Geographic visualization was another challenge. I wanted the map to communicate useful information while still creating a polished, modern interface.

I also had to carefully manage frontend state so actions such as confirming an issue immediately update the relevant statistics and rankings without disrupting the rest of the application.

Accomplishments that I'm proud of

I'm especially proud that CivicLens became a functioning end-to-end system rather than just a UI concept.

A user can submit a real report, select its location, receive automatic classification, publish it to the backend, see it appear geographically, and have other users confirm it. Those confirmations then directly influence how urgently the issue is presented.

I'm also proud of the visual experience. I wanted CivicLens to feel less like a traditional government form and more like a modern civic intelligence platform that people would actually want to explore.

What I learned

This project taught me a lot about connecting a React frontend to a FastAPI backend, designing REST API interactions, database persistence with SQLAlchemy, geographic interfaces, TypeScript state management, and building interactions that respond to live backend data.

More importantly, I learned that adding more technology does not automatically make a product better. Each visualization and interaction needs to communicate something meaningful to the user.

What's next for CivicLens

The next step would be moving from a prototype toward a platform that municipalities and communities could use at larger scale.

Future improvements could include:

• User accounts and stronger verification for confirmations
• Photo evidence for reports
• Duplicate-report detection
• More advanced classification and prioritization
• Notifications when an issue changes status
• Municipal dashboards and administrative tools
• Historical issue and response analytics
• Integration with existing municipal service-request systems
• More advanced geospatial and 3D visualization

Ultimately, CivicLens could help create a clearer feedback loop between residents and the organizations responsible for maintaining their communities.

Built With

• fastapi
• framer
• motion
• openstreetmap
• pydantic
• python
• sqlalchemy
• sqlite
• typescript
• vite