About the Project

Inspiration

We were inspired by the growing movement of participatory budgeting in cities around the world, where residents get a direct say in how public funds are allocated. Seeing how hard it can be for everyday people to engage with municipal budgets—often hidden behind dense spreadsheets or technical jargon—sparked the idea for Budget the Block: a playful, map-based interface that makes budgeting tangible and democratic.

What it does

• Proposal Submission: Residents submit ideas (e.g. “new park benches,” “bike lane lighting”) with a title, description, photo, and map location.
  
• Real-time Voting: Each user casts one vote per proposal; everyone sees live vote counts.
  
• Interactive Map: Projects are pinned on a map; marker size/color reflects vote tallies.
  
• Budget Simulation: Allocates a notional budget (B) proportionally by vote share: math b_i = B \times \frac{v_i}{\sum_j v_j} where (v_i) is votes for project (i).

How we built it

1. Frontend (React + Tailwind)
   
   • Created components for forms, lists, and a React-Leaflet map.
     
   • Used React Hooks for state and useEffect to subscribe to realtime updates.
     
2. Backend & Database (Supabase)
   
   • Auth: Supabase Auth for email/password sign-in.
     
   • Postgres: projects and votes tables with Row-Level Security (RLS) policies: sql CREATE POLICY "users can vote" ON votes FOR INSERT USING (auth.uid() IS NOT NULL);
   • Realtime: Subscribed to votes changes so UI updates instantly.
     
   • Storage: Hosted proposal images in Supabase Storage.

Challenges we ran into

• RLS Configuration: Crafting strict yet flexible policies to ensure only authenticated users could insert into projects and votes, while still allowing admins to moderate.
  
• Geolocation UX: Building a smooth map-pin picker—balancing ease of use with accurate lat/lng capture.
  
• Realtime Consistency: Ensuring vote counts updated correctly across multiple browser tabs without UI flicker or race conditions.

Accomplishments that we're proud of

• 🚀 MVP in 48 hours: From zero to a fully functional participatory budgeting prototype.
  
• 📊 Live Budget Simulation: Implemented on-the-fly budget allocation using simple, transparent math:
  math \text{vote_share}_i = \frac{v_i}{\sum_j v_j} \times 100\%
  
• 🌍 Intuitive Map UI: Users can immediately see which neighborhoods are rallying around which projects.

What we learned

• Row-Level Security is powerful for enforcing data permissions directly in the database.
  
• React-Leaflet integrates smoothly with React’s state model for interactive maps.
  
• Supabase Realtime subscriptions let you build live-update features without custom WebSocket code.

What's next for Budget the Block

• Comments & Discussion: Add threaded comments under each proposal for richer community dialogue.
  
• Gamification: Introduce badges and levels based on participation (submissions, votes).
  
• Export & Reporting: Generate PDF summaries of top-voted projects with map snapshots.
  
• Mobile PWA: Full offline support and installable experience.
  
• Scaling to Real Budgets: Integrate actual municipal budget data via open-data APIs to turn this prototype into a tool cities can deploy in production.

Built With

• react
• supabase