About the work
“We focused on building a working prototype where the UI, charts, and AI chatbot already run on live deployment. Some features like advanced leaderboards and full automation are still ‘coming soon,’ but the foundations are solid and functional.”
Inspiration
We were inspired by a simple question: What if everyday citizens could experience the trade-offs governments face when creating budgets? Economics and democracy often feel abstract, locked behind jargon or spreadsheets. We wanted to gamify these systems so people could learn by playing with choices instead of reading long reports. Just like games teach teamwork or strategy, CivicSim teaches civic responsibility, financial literacy, and the art of compromise.
What it does
CivicSim is a participatory budgeting simulator:
Users start with a $100M city budget.
They allocate funds across categories like healthcare, education, infrastructure, and environment.
Live charts update instantly to show consequences on happiness, literacy, health, and sustainability.
An AI explainer chatbot translates your choices into plain English:
“By cutting education by 20%, literacy rates fall while unemployment rises.”
A leaderboard lets players compare their “city happiness score” with others.
How we built it
Frontend: React + TailwindCSS + Framer Motion for smooth animations and responsive design.
Charts: Recharts for dynamic budget visualization and projections.
AI Integration: OpenRouter API (OpenAI-compatible) for natural language explanations of budget impacts.
Assets: Unsplash API for high-quality civic imagery.
Team workflow: GitHub for version control, GitHub Actions for CI, and a clear 48-hour sprint plan.
Challenges we ran into
Designing a realistic scoring system that balances trade-offs without overwhelming users.
Integrating AI smoothly — handling missing API keys and ensuring fallback explanations.
Making the UI both aesthetic and educational under time pressure.
Keeping all buttons “alive” (every click either works or shows a polished Coming Soon modal).
Ensuring accessibility (contrast, keyboard navigation, screen reader support).
Accomplishments that we're proud of
Built a working simulator in under 48 hours with sign-in, dashboard, charts, and AI explainer.
Created a gamified experience that makes economics fun, not intimidating.
Designed a stunning homepage + dashboard that feels like a professional MNC product.
Added an AI civic chatbot — a unique edge compared to typical hackathon demos.
Delivered a clear README, demo script, and deployment guide so others can extend it.
What we learned
Simplicity wins: users engage more with sliders and charts than with complex dashboards.
The importance of UI/UX polish — people trust and enjoy tools that look modern and approachable.
How to integrate public APIs (Supabase, Unsplash, OpenRouter) quickly and effectively.
Collaboration under deadlines: breaking tasks into small, testable chunks was key.
That math underlies everything:
Total Budget
∑
𝑖
1 𝑛 Allocations
𝑖
$ 100 𝑀 Total Budget=∑ i=1 n
Allocations i
=$100M …and every choice is a zero-sum game.
What's next for CivicSim — The People’s Budget
School edition: A classroom-friendly version for teaching economics and civics.
Policy translator: Use AI to break down real government bills in plain language.
Collaborative budgets: Multiple users allocate funds together in real time.
Open data integration: Pull real city/national budgets from World Bank or OECD APIs.
Gamified rewards: Badges for creating balanced, sustainable, or innovative city plans.
Mobile app: Bring CivicSim to phones so anyone can play democracy on the go.
Log in or sign up for Devpost to join the conversation.