Recently, a friend of mine who works for The Alinea Group told me about a project they wanted to run for the restaurant’s 20th anniversary popup event. Their CEO had posted the following:

Chef Achatz and I are looking to build a sleek site with a few requirements:

Store contact information

Several splash pages with a single image, music playing

If/then flow to unlock information

Admin view (can be in Google Sheets) to see where people are on the workflow

Very tight turnaround

In return:

This site will go viral. I expect tens of thousands of users within hours.

I will give you the best meal of your life at The Alinea Group (must be in Chicago).

We can credit you or your firm in our social posts.

Now, normally I would just keep scrolling past a post like this, because I think you should get paid for your work and getting a shout-out on social media is not getting paid.

That being said… I wanted fancy food.

So, I told my friend I’d build their site for two meals at Alinea! Ha HA!

The specs

At first, this seemed like a pretty dang easy project. The website was supposed to be for a real-life scavenger hunt, where people would get a clue from a social media post to find the website URL itself, and then after solving certain puzzles in real life (like finding clues in books and around the city where it was based) they would insert their solutions and get more clues over time. There would be three total puzzles, with their own sets of clues and winners, and winners would get a fancy meal at one of the restaurant popups they were promoting.

The pages would take in a user’s email and their solutions. Clues were combos of text, images, and sounds, and once they got answers done correctly, they would move on to the next clue.

Building the site

I actually used GitHub Spark at first to put together a prototype, and it worked pretty well. It generated a small React app that took in the clues and rendered the next relatively quickly. I built a more “real” version in React and Astro soon after.

But, I quickly ran into complexity beyond accepting emails and solutions. The people running the scavenger hunt wanted:

To be able to see how far along people were getting (in case they needed to reveal more clues)
To be able to stop people from skipping clues as much as possible/cheating
To make quick copy edits and image swaps as often as possible

Adding in an Airtable or Google Sheets backend was not awful, but making it quick for anyone non-technical to make edits was going to be a pain (though it WAS fun teaching them what GitHub was and seeing their minds blown when they learned what open source software is).

So, I went a bit more no-code, with Tally! I really like Tally for forms and surveys. And what is a scavenger hunt, if not a series of forms?

Tally lets you enable conditional routing in forms, add custom CSS, add whatever media you want, enable partial responses, and also embed forms into partial or full page views on a website. It satisfied my requirements for collecting and tracking responses, and for the actual logic of the hunt itself!

Combining Tally with Astro, hosted on Netlify, was a great solution:

Netlify DNS and Netlify Redirects allowed me to configure the multiple domains each puzzle had (for example, one URL was named after a phone number that you had to call, one was named after a menu item, etc), and add fallback domains to redirect people who might cheat or make mistakes.
- I was also able to quickly toggle “off” a given URL with the redirects, too, when certain puzzle “phases” were finished.
For any clue submissions, I had a Tally form set up per puzzle.
Astro handled all routing, with a Page component hosting each Tally form and various other fallback URLs for incorrect answers.
Astro also let me build plain static pages where scavenger hunters had to find physical clues, rather than submit something digitally.
Tally’s custom CSS let me copy the CSS across both Tally and Astro, so everything looked uniform.
I was able to add analytics to the Astro page base layout to see visitor counts across the site.

This is generally what the architecture looked like, if you’re a more visual person:

Architecture diagram combining Netlify DNS and redirects, Astro, and Tally, as described in the bullets above

How it went

Overall, it was really cool to see how hard folks worked to solve these puzzles to win a meal. The world of fancy food to me is neat, but outside of watching The Bear, I don’t know a lot about it.

People were so excited about the puzzles that they actually traveled and rented cars to go around NYC and look for clues, and there was actual sabotage (!) involved when people tried to stop others from advancing in the games. The attempted cheating was wild to see, too, and I had to obfuscate more on the frontend than I expected to. Some people just wanted to get face time with Chef Achatz, to see if they could learn certain techniques from him.

I admit, if I weren’t doing this as a favor to my friend, I wouldn’t have taken on this project, even though I’m very excited about the fancy meals coming my way. I probably could have gotten paid real money and just bought the meals, and then some. But, it was neat playing with these technologies, and getting to know a niche community!