Hackathon Vote

A tiny mobile-first voting page for live demo rounds.

The organizer keeps one host tab open. Every phone sends its vote to that browser, and the totals live only there. No database, no accounts.

People tap A / B / C / D / E (Other). One vote per browser per round; they can change it until the host starts a new round. Connected phones update as soon as the host receives a vote.

How it works

1. Organizer opens admin.html and leaves that tab in the foreground.
2. Host shows a QR code for the join URL (index.html?room=…).
3. Voters scan it, tap a letter, and the host stores { voterId: letter } in localStorage.
4. The host pushes the new totals back to every connected phone.

If the host tab closes, voting stops. Refreshing the host tab keeps the current round (it is saved locally) and the same join QR.

Local preview

You need a local web server. Opening the HTML files directly (file://) will not connect phones.

npx --yes serve public

Then:

1. On the organizer computer, open /admin.html.
2. On phones, scan the QR (same Wi-Fi), or open the printed URL with ?room=….

Phones cannot join a localhost QR. For a real room, deploy to Netlify and open admin.html on the public HTTPS URL.

Deploy on Netlify

The site is static files in public/. netlify.toml already points Netlify at that folder.

Option A: Drag and drop

1. Open Netlify Drop.
2. Drop the public folder.
3. Open the given URL, then go to /admin.html.

Option B: Netlify CLI

npx --yes netlify-cli login
npx --yes netlify-cli init
npx --yes netlify-cli deploy --prod

init is only needed the first time. Later deploys:

npx --yes netlify-cli deploy --prod

Open https://<site>.netlify.app/admin.html on the organizer device, then share that page’s QR.

Try it

1. Open admin.html on a laptop (best) or a dedicated organizer phone.
2. Scan Scan to join. Totals should jump on the host and on every voter phone.
3. Tap a different letter on the same phone: that vote is replaced, not added.
4. Refresh a voter phone: it still has its vote for this round and sends it again when it reconnects.
5. On the host, tap New round. Counts go to zero and everyone can vote again.

Keep only one admin.html tab open. A second host tab gets a new room ID, and the old QR will not reach it.

Files

File	Role
public/admin.html	Organizer page: stores votes, QR, reset
public/index.html	Voter page
public/host.js	Host logic
public/app.js	Voter logic
public/shared.js	Shared tally / UI helpers
public/styles.css	Mobile-first layout
netlify.toml	Netlify publish directory