CivicBounty

A filler AI checks how well the area was cleaned
Payment statement for the cleanup if verified
Login Page
Verification for location of the cleanup
Shows how a new bounty can be posted by the government
Verification image of the cleanup
Government's point of view for the pending clean-up reviews
Potential cleanups for citizens

What Inspired Us

Urban litter and neglected public spaces are issues that go unaddressed in many areas around the world, including in some of our own communities. This is primarily due to a lack of community engagement and reporting tools. The inspiration behind CivicBounty was to bridge the gap between community improvement and citizen participation. By introducing this reward system where users earn bounties for cleaning up verified community hotspots, we wanted to transform civic duty into an engaging, collaborative experience that empowers residents to directly improve their local neighborhoods.

How We Built Our Project

CivicBounty was engineered as a modern full-stack web application using a robust technology stack:

Framework & Frontend: Built with Next.js, leveraging React components and Tailwind CSS for a responsive, clean user interface and smooth multi-step workflows.

Backend & API Routes: Utilized Next.js API endpoints to handle secure data submissions, user authentication states, and location validation logic.

Geospatial & AI Helpers: Implemented custom utility functions (lib/citizen/geo.ts and lib/citizen/ai.ts) to calculate GPS proximity and validate before-and-after cleanup verification photos.

Data Management: Structured relational data models using an integrated database layer to track hotspots, active cleanup bounties, and user submission records seamlessly.

What We Learned

Building this application provided deep practical insights into modern web development workflows:

Hydration and State Management: Managing server-side rendering (SSR) alongside client-side interactivity taught us how to handle React hydration errors gracefully and deal with browser extension DOM modifications.

Multi-Step Wizards: Designing the submission flow (ranging from GPS location checks to dual photo uploads) reinforced the importance of step-by-step state validation to ensure users provide complete data before final submission.

Modular Task Integration: Breaking down development into distinct sequential tasks (Tasks 0 through 6) highlighted the power of modular architecture, making it easier to isolate bugs, run typechecks, and verify features step-by-step.

Challenges We Faced

Environment Configuration & Hydration: Initial mismatches between server-rendered HTML and browser-injected attributes required careful configuration adjustments and debugging.

Strict Validation Flow: Ensuring that the submission backend properly validated simulated GPS coordinates against hotspot locations while preventing duplicate claims on already-completed cleanups demanded rigorous error handling and state checks.

Managing Incremental Builds: Coordinating incremental feature updates via task patches required strict adherence to file structures, ensuring that database connections and styling rules remained intact across updates.