Homepage of CivicLens
Report section/making a report.
Community map with reports.
Recent reports of users.

Inspiration

Each day, people encounter problems such as potholes, malfunctioning streetlights, graffiti, illegal dumping, fallen trees, and more. However, filing complaints is often complex. We needed to design a system that makes it easy for people to report community problems by simply taking a picture and identifying the location. We also needed to motivate people to participate in the community and help local organizations spot and solve problems effectively.

What it does

CivicLens is a reporting tool for communities that enables people to file complaints about any problem in public space through a series of simple actions. Users can take a picture of the problem, write a description, add additional information, and pinpoint the exact location using an interactive map or their own location. Complaints are displayed on the community map so residents and organizations can see the problem and its location.

How we built it

The CivicLens app has been developed using the following technologies for the frontend: Next.js, React, TypeScript, and Tailwind CSS. The interactive maps have been implemented using React Leaflet and OpenStreetMap, allowing users to select their exact location on the map and find nearby streets using reverse geocoding. Reports are saved locally during development; however, this approach is designed to connect to a cloud database like Firebase for synchronization.

Challenges we ran into

We faced an issue implementing the interactive maps into a Next.js application without problems related to server-side rendering of Leaflet. We also had to change the initial idea of the project and completely redesign it to build an app based on community reporting.

Accomplishments that we're proud of

We are proud of having created a slick reporting tool that looks intuitive and easy to use. Users will be able to file a report with photos, pinpoint their exact location on a map, and see all community reports on one page.

What we learned

Through this project, we have gained valuable insight into current practices in web development using React and Next.js. We have learned how to implement interactive mapping and geolocation services. We also learned about the significance of user interface design, debugging client-side code, and being adaptable throughout the whole process of building something new.

What's next for CivicLens

Our next step is to turn CivicLens into a fully integrated civic reporting platform. Our future plans include implementing real-time cloud storage with Firebase, user accounts, monitoring the status of reports, organization dashboards, comments and voting, push notifications, and automatic routing of reports to the right local government department.