QuickFix QR

Inspiration

Every day we see leaking taps, overflowing bins, and small hazards around campus and the city. Most of us ignore them because reporting is too hard — websites are hidden, forms are long, and people don’t know who to contact. That gap between noticing and acting inspired us to build QuickFix QR: a system that makes reporting so simple that anyone can do it in seconds.

What it does

QuickFix QR turns every public asset — taps, bins, benches, or lights — into a reporting endpoint using a QR code. A citizen scans the code, a lightweight form opens prefilled with the asset’s ID and zone, and with just two taps the issue is logged. On the other side, a live dashboard shows new reports instantly on a map and in a list, so facility teams can triage and act faster. The wow moment is watching a dot pulse on the dashboard the second someone scans and reports.

How we built it

We built the frontend with Next.js and TypeScript, using Leaflet to render maps and live markers. For the backend, we used Supabase (Postgres + Realtime) to store reports and broadcast changes. We generated QR codes using a Node.js script that embeds asset IDs into links pointing to our /report page. To keep it safe, we implemented Row Level Security policies and, for privileged actions, added Next.js Route Handlers running on Vercel with the Supabase service role key. The workflow is fully serverless, which let us move fast under hackathon time pressure.

Challenges we ran into

The biggest hurdle was Supabase Realtime. Our inserts weren’t appearing live at first, until we discovered we had to enable replica identity and re-add the issues table to the realtime publication. We also wrestled with Row Level Security (RLS): one policy mistake blocked all inserts from the client until we fixed it. On the frontend, we had to prepare a fallback because map tiles can fail or rate-limit — so we kept a static PNG map as a backup. Finally, the tight 12–14 hour sprint meant ruthless prioritization: we had to cut stretch features like photo uploads to nail the core demo.

Accomplishments that we're proud of

We’re proud that we got a fully working scan → report → live map update flow in such a short time. Our demo moment — scanning a sticker and watching a dot appear instantly — feels magical and shows the impact clearly. We’re also happy with how we split roles (frontend, backend, product/UX) and stayed aligned, which made the build smooth. And finally, we’re proud of how lightweight the system is: you only need printed QR stickers and a web app to deploy it.

What we learned

We learned how to use Supabase Realtime effectively and configure Postgres for change data capture. We deepened our understanding of RLS policies and how to balance security with usability. We saw firsthand that user experience is king — a two-tap flow will always beat a long form, no matter how many features you add. And on a teamwork level, we learned how powerful it is to divide responsibilities early and trust each other’s domains while syncing at key checkpoints.

What's next for QuickFix QR

Next, we want to expand beyond the demo into a pilot. That means deploying 20–30 QR stickers around campus, collecting reports, and measuring time-to-triage and hotspot frequency. We’d also add stretch features like photo uploads, duplicate detection, and status workflows (new → triaged → fixed). Longer term, QuickFix QR could integrate with council or facility management systems via Open311 or Slack/Teams webhooks. The vision is to empower citizens to co-maintain their cities, making reporting effortless and maintenance measurable.

Built With

• css
• leaflet.js
• nextjs
• node.js
• realtime
• supabase