Inspiration
Cities ask residents what they think about a bike lane or a new crosswalk, but all people get to look at is a flat diagram or a paragraph of text. It's hard to have an opinion about something you can't picture. We wanted anyone to be able to point at their own street, say "put trees here", and show their neighbours and the city exactly what that would look like before anything is built.
What it does
CivicSim lets residents propose physical changes to their city and see them in the real street.
- Works anywhere in the world. The map is split into 200 m zones. Open any zone and its streets and buildings load from OpenStreetMap.
- Eight kinds of change: bike lanes, bus lanes, wider sidewalks, removing parking, street trees, parks, crosswalks, and rebuilding a lot as housing, a school or a clinic.
- See it before it happens. Each request is built into the actual Google Street View photos of that block. You can look around, walk down the street, and drag a slider between before and after.
- A real civic process. Neighbours confirm or deny a request, authors can start a petition, and taking part earns points and ranks.
- People decide, AI only suggests. City staff review requests in a separate admin panel, and a human makes every final decision. AI can suggest ideas, but each one opens as a draft someone has to confirm.
- Costs the AI can't make up. Every request gets an estimate measured from the map and a fixed unit-cost table.
How we built it
- Phone app and admin panel: Expo and React Native, sharing one TypeScript package for the change formats, the zone grid and the rules about which changes fit which streets.
- Server: Node and Fastify. It loads map data from OpenStreetMap, builds a 3D model of each requested change, and queues the rendering work.
- Photo-real views: the 3D model is rendered from the exact camera position of a Street View photo and used as a placement guide. Gemini (on Vertex AI) then edits the photo to build the change where the guide shows it. We keep only the pixels that changed, so everything else is still Google's original photo.
- Supabase: accounts, requests, votes, petitions, the leaderboard, a durable job queue and storage for finished views.
- Background rendering: when a request is submitted, a laptop picks the job up, prepares its views in a hidden browser, and uploads them, so they're ready before anyone opens the request.
Challenges we ran into
- Lining a 3D model up with a photo. Google's documented field-of-view formula was only right at one zoom level, so we measured the real one, then corrected for the camera car's tilt and the ground's slope.
- Keeping the AI honest. Left alone, Gemini invented extra lanes, moved cars, changed the season of trees, and once redrew an entire street. We fixed this with an exact brief, a placement guide, a check that rejects edits that redraw the photo, and a second attempt when the change lands in the wrong place.
- Cost. Editing every Street View spot in one zone would have been about 400 edits per request. We prepare only the viewpoints where the change is clearly visible.
- Unreliable free data. The public OpenStreetMap servers are slow and sometimes fail, so we query mirrors in parallel and cache every zone.
- Phones talking to a laptop. We moved submissions into a cloud queue so a request is never lost when the laptop is asleep.
Accomplishments that we're proud of
- You can pick a street in almost any city and see a believable "after" view of it about a minute later.
- You can walk along the street in Street View and the change stays in place.
- Admin-only actions (decisions, AI spending) are enforced on the server and in the database, not just hidden in the app.
- More than 100 automated tests, covering everything from street geometry to the voting rules.
What we learned
- A generative model is far more reliable when it is given an exact plan to follow than when it is asked to be creative.
- Showing only what changed, and leaving the rest of the photo untouched, matters as much for trust as for image quality.
- Open map data is uneven: building heights and street widths are often missing, and you have to design for "unknown".
- Queues, caching and spending limits are what make an AI feature affordable enough to actually run.
What's next for CivicSim
- Hosting the server so it doesn't depend on one laptop.
- Real, sourced construction costs for each city instead of placeholder figures.
- Smoother walking between viewpoints, and smaller image files for phones.
- Letting residents use their own photos of a street.
- Push notifications when a request you voted on is decided.
- Piloting it with a real neighbourhood group or city office.
Built With
- css
- gemini-api
- html
- react
- typescript
Log in or sign up for Devpost to join the conversation.