CivicConnect

Inspiration

In many regions across the 38 districts of Tamil Nadu, citizens frequently face unresolved civic infrastructure issues such as hazardous road potholes, overflowing garbage bins, broken streetlights, and leaking water mains. Traditional grievance portals suffer from manual routing delays, zero status visibility, and lack of verified resolution proof.

We were inspired to build CivicConnect—an enterprise-grade, AI-powered civic governance platform that seamlessly connects Citizens, District Department Heads, and Field Workers through a transparent, 13-step real-time tracking workflow.

What it does

CivicConnect transforms civic issue management into an automated, transparent ecosystem:

🎙️ AI Real-Time Voice Complaint Assistant: Citizens can report issues simply by speaking in English or Tamil. Web Speech API converts audio to text while AI extracts categories, location landmarks, and urgency.
📍GPS Location & Image Upload: Integrated HTML5 Geolocation detection and optional photo evidence upload.
🤖 Smart District Auto-Routing: Automatically routes complaints to the specific Department Head for that district, enforcing district-wise department isolation across all 38 districts of Tamil Nadu.
🔄13-Step Real-Time Lifecycle Stepper: Live tracking from Complaint Submitted → AI Categorization → Worker Assigned → Work in Progress → Before & After Proof Upload → Dept Head Verification→ Citizen Feedback & Closed.
📸 Visual Proof Inspection: Field workers upload Before-Repair and After-Repair photos; Department Heads inspect side-by-side visual comparisons before approving resolution.
📊 Excel & CSV Export Reports: Super Admins and District Admins can generate instant .xlsx and .csv analytical reports.

The priority score is calculated dynamically using our AI scoring formula:

$$P_{\text{civic}} = \alpha \cdot S_{\text{AI}} + \beta \cdot D_{\text{pop}} + \gamma \cdot \log(1 + \Delta t)$$

Where $S_{\text{AI}}$ is the AI severity score, $D_{\text{pop}}$ is the location density factor, and $\Delta t$ is elapsed hours.

How we built it

Frontend: ReactJS (.jsx components) with Vite, Redux Toolkit (@reduxjs/toolkit, react-redux), Material UI (@mui/material), Tailwind CSS, Axios, and Web Speech API.
Backend: Spring Boot 3 with Java 21, Maven, Spring Security (JWT authentication), Spring Data JPA, Hibernate, and Apache POI (Excel export).
Real-Time Communication: Spring WebSocket (WebSocketConfig.java STOMP message broker).
Database: Oracle Database 21c / Oracle XE 21c schema DDL (soft_delete, audit columns) with H2 embedded in-memory fallback for local dev.
Storage: Cloudinary SDK for multi-image upload management.

Challenges we ran into

Horizontal 13-Step Stepper UX: Designing a responsive 13-step workflow tracker without heavy browser scrollbars. We solved this by creating custom CSS scroll-hide rules and smooth left/right scroll controls.
Fuzzy Status Normalization: Handling variations in database and API status strings (RESOLVED, Resolved, closed, WORKER_COMPLETED). We implemented a case-insensitive regex matcher in ProgressTracker.jsx to map any status to its exact step index (1–13).
District-Wise Department Head Constraints: Enforcing that each Tamil Nadu district has dedicated Department Heads for each core department required configuring database-level UNIQUE(district_id, department_id) constraints and custom JPA queries.

Accomplishments that we're proud of

Successfully built a complete, working enterprise architecture combining ReactJS, Redux Toolkit, Spring Boot 3, Java 21, and Oracle 21c.
Implemented live speech-to-text AI extraction for instant voice complaint filing.
Seeded and supported all 38 Districts of Tamil Nadu with core civic departments (Road Maintenance, Sanitation, Water Board, Electricity, Traffic, Drainage).
Created 1-click instant demo logins for Citizens, District Dept Heads, Field Workers, and Super Admins.

What we learned

Designing enterprise Spring Boot 3 + Oracle 21c JPA relational schemas with soft delete patterns.
Setting up STOMP WebSocket message brokers for live real-time state broadcasting across client roles.
Managing global state cleanly using Redux Toolkit slices (authSlice, complaintSlice).
Crafting accessible, mobile-responsive UI/UX for civic governance platforms.

What's next for CivicConnect

📱 Mobile Native App: Building a React Native app for field workers with offline photo upload caching for remote areas.
🗺️ GIS Interactive Heatmaps: Integrating Leaflet/Mapbox heatmaps for District Collectors to visualize issue density clusters.
🤖 Automated WhatsApp / SMS Bot: Integrating WhatsApp/SMS bots for citizens without smartphone internet access.