CivicEcho

• 

  Complaint Raising page

• 

  Categorization

• 

  CivicEcho Control system

• 

  Home Page

Inspiration

Civic issues like potholes, broken streetlights, garbage overflow, and water leaks often go unreported because existing systems are confusing, text-heavy, and not accessible to everyone. We were inspired to build CivicEcho to make civic reporting as easy as speaking—simple, inclusive, and engaging for all citizens.

What it does

CivicEcho is a voice-first civic issue reporting platform that allows users to:

Report civic problems by speaking naturally

Automatically classify the issue (roads, water, electricity, sanitation, etc.)

Geo-tag the complaint using map integration

Track complaints through a central control room dashboard

Route complaints to the correct department

View issue status updates in a visual and intuitive way

The platform makes public participation in governance simple, fun, and effective.

How we built it

Figma → Designed a full interactive prototype (user app + control room)

React + TypeScript (TSX) → Frontend implementation

Vite → Fast build and development

Tailwind CSS + UI libraries → Clean, modern UI

Voice-first design approach (future-ready for speech-to-text APIs)

Netlify → Deployed the live prototype

Challenges we ran into

Managing dependency conflicts while setting up the React environment

Structuring the app for both citizen-side and admin control room

Designing a system that feels fun and vibey while still solving a serious civic problem

Mapping complaints clearly without overwhelming the UI

Accomplishments that we're proud of

Successfully built and deployed a fully working prototype

Created a control room dashboard concept for departments

Designed an inclusive voice-first experience

Hosted the app live using Netlify

Converted a Figma design into a real, runnable application

What we learned

How to take a real-world problem and convert it into a usable product

Working with modern frontend tools (React, Vite, TypeScript)

Handling real deployment workflows

Importance of UX in civic-tech applications

How voice-based interfaces can improve accessibility

What’s next for CivicEcho

Integrate speech-to-text AI

Add real-time complaint status updates

Enable department-level authentication

Implement government API integration

Add citizen reward points / gamification

Scale CivicEcho for smart cities and municipalities

Built With

• css
• figma
• leaflet.js
• maps)
• netlify
• node.js
• react.js
• tailwind
• tsx)
• typescript
• vite