CivicPulse

Inspiration

Neighbourhood improvements can feel distant when residents must choose between technical descriptions and numbers without seeing what those choices mean on their streets.

We wanted to make participatory budgeting easier to understand. CivicPulse treats a neighbourhood as something residents can tend together, using a planting metaphor and a limited token budget to make choices and trade-offs visible.

What it does

CivicPulse is an interactive frontend prototype where residents explore neighbourhood improvements and distribute 100 Civic Tokens.

Visitors can search four sample neighbourhoods or explore an illustrated map, browse 12 proposals across five categories, and compare illustrated before-and-after street scenes with explanatory annotations.

They can place or withdraw tokens, review their allocation, and confirm a demo ballot. Confirmation produces a Community Impact Passport showing their choices, budget distribution, remaining tokens, and reference. The passport supports text and JSON downloads, plus printing. Visitors can also amend their choices or start a fresh round.

All neighbourhoods, proposals, costs, and impact figures are fictional. Tokens are simulated budget units, and confirmation happens entirely inside the demo. No official vote is transmitted or counted.

How we built it

We built CivicPulse with React, TypeScript, and Vite. Tailwind CSS v4 provides reusable design tokens, Framer Motion handles transitions, and Lucide React supplies interface icons.

The neighbourhood map and transformation scenes use SVG components. Discovery state connects search, map selection, proposal cards, and category filters. A shared allocation reducer powers the token controls, budget panel, review, and passport.

Warm paper surfaces, sage and forest colours, and Fraunces and Plus Jakarta Sans typography establish the visual direction. Plant illustrations progress from seed to bloom as allocations grow.

Accessibility considerations include visible focus states, labelled controls, live status messages, reduced-motion preferences, and keyboard controls for the comparison slider.

Challenges we ran into

Keeping decisions consistent across several views was a central challenge. Adding tokens must update the budget and review immediately, while the passport must preserve exactly what was confirmed. Shared state and derived totals keep those views aligned.

We also needed visual interactions to work alongside direct controls. Search offers an alternative to map exploration, and the comparison slider supports keyboard input alongside dragging.

Another challenge was clearly communicating the prototype’s boundaries. The interface and receipts identify confirmation as a demonstration rather than an official civic submission.

Accomplishments that we're proud of

We connected the complete journey from discovering a neighbourhood to keeping a record of a decision. Proposal exploration, visual comparison, token allocation, confirmation, amendment, and receipt exports work together.

We are particularly proud of the transformation views and Community Impact Passport: one helps explain a possible change, while the other makes the visitor’s choices visible after they finish.

What we learned

Civic UX depends on clarity. People need to understand what a proposal changes, what their budget allows, whether choices can be revised, and what confirmation means.

Plain-language cards, visible remaining tokens, reversible allocation, and a receipt derived from confirmed choices all support that understanding.

What's next for CivicPulse

We want to test the experience with residents and community organizers, including keyboard and screen-reader users, and improve it based on their feedback.

A real pilot would need validated local proposals, real costs, resident eligibility checks, persistent storage, an auditable allocation process, privacy controls, and organizer tools. We would also explore multilingual content and updates showing what happens after a budgeting round ends.

Built With

• css
• framer-motion
• lucide-react
• react
• svg
• tailwind-css
• typescript
• vite