civicAId

• 

  Homepage of our site. Contains topbar with streaks + points and also tasks and timers + grid which contains virtual city and Anthro.

• 

  This is Anthro, our mascot and the mayor of our viritual town. Everything is checked by him (Claude API request)

Civic participation is broken — not because people don't care, but because there's no on-ramp. Most people have never contacted an elected official, attended a town hall, or even know who represents them locally. We wanted to build something that lowered that barrier by making civic engagement feel rewarding, tangible, and fun.

civicAId gamifies real-world civic participation. Users receive tiered challenges — from signing a petition to speaking at a city council meeting — complete them in real life, and submit evidence. Claude AI verifies the submission and awards points based on difficulty. Those points are redeemed to place pixel-art buildings on a virtual community grid that grows alongside the user's real-world civic involvement. Streaks, ranks, neighborhood leaderboards, and group challenges keep users engaged and coming back.

We built civicAId in 90 minutes using React and Vite for the frontend. All Claude AI verification flows through a single Gemini API service file, with point and grid state managed in React.

The hardest parts were tuning Gemini's evidence verification prompt to be encouraging but not exploitable, managing grid and point state in sync without race conditions, and making a deliberate call to keep the API client-side for the demo while knowing exactly how we'd harden it in production.

We're proud that in 90 minutes we built a working AI verification loop, a functional pixel community grid, and a product that actually makes civic participation feel like something worth doing.

We learned that the hardest UX problem isn't the interface — it's motivation. Gamification only works when the underlying action means something. Tying virtual rewards to real-world civic acts creates a loop that feels genuinely meaningful, not hollow.

With more time and resources, civicAId gets a proper backend with Convex as the primary data layer — a local-first reactive database that minimizes redundant Claude API calls and cuts token costs at scale. Supabase handles authentication and row-level security. Redis serves leaderboards and neighborhood aggregates at speed. The goal is a platform that becomes the civic habit layer for an entire generation — where showing up for your community becomes as satisfying as leveling up a character.r civicAId

Built With

• claude
• css
• gemini
• javascript
• react