Inspiration
We were inspired by the everyday civic problems people encounter, such as overflowing garbage bins, potholes, broken streetlights, and poor sanitation. Many of these issues go unreported or take a long time to be resolved. We wanted to build a simple platform that empowers citizens to report these issues quickly and helps create cleaner, safer, and more responsive communities.
What it does
Civic Sense is a web application that enables users to report civic issues by uploading a photo, providing a description, selecting the issue type, and sharing the location. Users can view submitted reports, track reported issues, and raise awareness about problems in their locality. The platform demonstrates how citizens and local authorities can collaborate to improve public infrastructure.
How we built it
We built Civic Sense using React, HTML, CSS, and JavaScript. To keep the application lightweight and easy to deploy, we used Local Storage as a client-side database to store user reports and application data. Images, issue details, and other information are saved locally, allowing the application to function without a backend server while showcasing the complete reporting workflow.
Challenges we ran into
One of the biggest challenges was designing a smooth user experience while working without a backend database. Managing data persistence using Local Storage, handling image uploads, and ensuring reports were displayed correctly required careful planning. We also had to optimize the interface and complete the project within the limited hackathon timeframe.
Accomplishments that we're proud of
We successfully built a functional prototype that allows users to report civic issues with images and descriptions. We are proud of creating an intuitive interface, implementing client-side data persistence using Local Storage, and delivering a practical solution that demonstrates how technology can encourage community participation and civic responsibility.
What we learned
This project helped us gain hands-on experience in React development, state management, Local Storage, responsive UI design, and collaborative development. We also learned how to rapidly prototype a real-world application while balancing functionality, usability, and development time.
What's next for Civic Sense
- Integrate a backend database for secure and scalable data storage.
- Add user authentication and role-based access.
- Implement AI-powered issue classification from uploaded images.
- Automatically route complaints to the appropriate government departments.
- Add real-time status updates and notifications.
- Launch Android and iOS mobile applications.
- Provide analytics dashboards for municipalities to identify civic issue hotspots and improve public services.
Built With
- css3
- html5
- javascript
- local
- react
- router
- storage
Log in or sign up for Devpost to join the conversation.