QR code doorbells

The problem #

The Austin JavaScript Meetup is hosted at Cloudflare, where there are pretty strict policies requiring that the doors not be held open. This means we need one of the organizers to let people in as they arrive and usher them to the space where we hold the Meetup — which is fine except that once the talk starts we need to either stop letting people in, or someone needs to hang out by the door for a bit and miss a chunk of the talk.

To solve this, we printed out a piece of paper with instructions and a QR code for people to scan letting us know they are outside. When scanned, a message is posted to the AustinJS Discord server, and they see a message that lets them know we’re on our way to let them in!

Whipping up a digital doorbell 👨🏻‍🍳 #

The first iteration of this was hacked together in about 15 minutes — we’ll walk through the quick and dirty way this was thrown together step by step, and save a walkthrough of the proper improved version for another post.

Run the following to create the project, and select Cloudflare Workers as the deploy target:

npx create-remix@latest

Open the project in the editor of your choice and run the following to start up the dev server:

npm run dev

Open app/routes/_index.tsx. We’re going to add a message here telling people that the doorbell has been rung.

export default function Index() {
	return (
		<h1>
			Someone is on the way to let you
			in!
		</h1>
	);
}

Next we need to add a loader that will post a message to a Discord Channel. First let’s create a webhook within Discord so we have a URL to send a URL to post the message to. It should look something like this:

https://discord.com/api/webhooks/NUMS/RANDOM_NUMS_AND_CHARS

Then we can update app/routes/_index.tsx with the loader:

const webhookUrl =
	"https://discord.com/api/webhooks/NUMS/RANDOM_NUMS_AND_CHARS";

export const loader = async () => {
	const time =
		new Date().toLocaleTimeString(
			"en-US",
			{
				timeZone: "America/Chicago",
			},
		);
	await fetch(webhookUrl, {
		method: "post",
		body: JSON.stringify({
			content: `Someone is at the door: ${time}`,
		}),
		headers: {
			"Content-Type":
				"application/json",
		},
	});
	return null;
};

export default function Index() {
	return (
		<h1>
			Someone is on the way to let you
			in!
		</h1>
	);
}

Let’s deploy it! Make sure you’re already logged in with wrangler

npx wrangler whoami

If you’re not logged in, log in with:

npx wrangler login

Now deploy!

npm run deploy

Visiting the URL should post a message to your Discord webhook! Almost done!

Let’s head over to 10015.io for their QR code generator. Paste in the URL of the freshly deployed worker to generate one. Now we just need to print it out on a piece of paper with instructions to scan to page us to let you in!