the-missing-block

Main map
The simulation feature to play around and fix a artificial city's problems.
The proposal feature where you vote on real changes to a real city.

Inspiration

SYNCS Hack 2026 asked about the blocks that make up the world. We took that literally and then pushed on it: a city really is blocks, but the interesting part isn't the buildings, it's that every block changes what happens to everyone else. Move a clinic three squares and someone's 12-minute trip becomes 40.

Two things bothered us about how those decisions get made. The trade-offs are invisible until someone is already stranded by them, and the people who live with the outcome are usually the last ones asked. So we built the map that makes the trade-off visible, and then handed the decision to the community instead of keeping it.

What it does

The Missing Block is one city map with two modes layered on it.

Simulation is the teaching sandbox. You place housing, healthcare, transport, parks, community hubs, technology and heritage on a 2.5D grid against a block budget, hit Run, and the city tells on itself: journeys are walked from every home to every service, failures come back in plain language ("225 houses cannot reach culture heritage; the best route takes 96 min"), and six qualities — accessibility, sustainability, efficiency, community, resilience, inclusion — are scored 0–100. A flood and a technology outage stress-test resilience and inclusion. Houses are then washed red-to-green by how many of their trips actually succeed, so you see the pain zones at a glance instead of reading a list. The engine drafts fixes and rates them from the metric deltas, and a City Advisor explains the run in prose.

Proposal is the actual product: a decision platform. Someone states an issue, expresses the fix by editing the map, and the community rates it on each quality separately. The map previews exactly what the change would do — ghosted additions, dimmed removals. The outcome is arithmetic on real vote rows. Not ours, and not an AI's.

A third popup, Access, answers the question underneath both: pick a home, pick a service, and see the actual route and what it costs that resident.

Three rules hold it together:

Outcomes come only from votes.
The Advisor explains and never judges.
Anything simulated stays in the browser and never touches a real ballot.

How we built it

Spec-first. Four OpenAPI files were written before either half existed, a shared Zod package mirrors them, and the React app ships a stateful in-browser mock of all four services — so five people worked in parallel from hour zero and the frontend was never blocked on the backend.

Frontend: React + Phaser 4 + Tailwind, with the simulation engine as pure TypeScript functions (no React, no network) so it stays testable and deterministic. Backend: Fastify 5 + Prisma 7 + SQLite, four route-group modules under /api/v1, argon2 + JWT, seeded with 3000 voter accounts so the vote counts look like a real community. The city renderer: every pixel is drawn at runtime through Phaser Graphics. No sprites, no tilesets, no art assets. Nine building archetypes composed from isometric primitives, facade patterns per archetype, district colour palettes, a real road network with pavements, kerbs, crosswalks and traffic, and a countryside backdrop of fields, woodland, clouds and mountains. Advisor: a server-side Claude call with tool-forced structured output, Zod-validated with one retry and a ~10s timeout, backed by a canned fallback computed from the sim so a dead API key never breaks the demo.

Challenges we ran into

Making a procedural city not look procedural. The first renderer was honest and completely lifeless, a grid of near-identical boxes with the same window grid on every facade, roads that were just the gaps between tiles. Fixing it meant rebuilding around silhouette: distinct archetypes, sparse windows as accents rather than structure, streets with actual width hierarchy. Several attempts failed in instructive ways: a bus canopy that read as a plate laid over the tile because a wide flat roof hides everything under it, and pitched roofs that looked broken because an isometric roof diamond has four corners and we filled three.

Accomplishments that we're proud of

we managed to submit lol

What we learned

AI will replace us all

What's next for syncs-hack-2026-the-missing-block

Keyboard navigation inside the grid — click-to-place works, cell focus doesn't yet. On a project about accessibility, that's the gap that matters most. The live Advisor — the wiring, guardrails and fallback are all in place; it needs a key and prompt tuning. The audience moment — a QR code to the room, phones voting on the same proposal, counts moving on the projector. The polling already exists; it's mostly presentation. Performance polish — lazy-load the map workspace to cut the ~1.8MB bundle, and finish converting the emoji service pins to the vector icon set.