At the end of each year, we send gifts to our clients to show them some love for the holidays. Usually, it’s a goodie bag filled with candy and other winter essentials.
But this year we realized what a big carbon footprint this operation leaves behind. International shipping, not-all-recyclable packaging — plus, our clients tipped us off that they’re kinda sick of all the stuff companies send them.
So last month, we went in the totally opposite direction. We sent our clients on a tree hunt in a Webflow mini-game. The higher they score, the more trees we plant IRL.
They loved it — we’ve planted 920 trees (watch out, Mr. Beast)! To celebrate, I thought I’d show you the behind-the-scenes of how I built the game in Webflow.
And if you haven’t already, go ahead and try to find all the 10 trees yourself! (We’re not gonna be able to plant them too, though.)
What we’re building
Fabian and Szymon designed a 90s-themed desktop operating system — with lo-fi UI, pixelated fonts and poor-quality GIFs playing in the background. Besides looking old-school, the system ships with a few features.
A collecting of our all-time favorite Xmas songs, curated by Patryk (our Project Manager). But instead of just putting a link to the Spotify playlist, it’s playing from a custom audio player.
Domi (our Memelord Shitposter) shot video wishes for our clients with a 90s compression filter to match the vibe of the OS. Like the playlist, it plays in a custom video player. A transcript is also attached for those who prefer to read.
Clients can share their wishes to everyone using holidayOS. After publishing, they’re publicly visible in the Guest Book.
And finally, the main attraction! We hid 10 trees all around the system. Some are easy to spot — they’re directly on the desktop. But others require you to really squint your eyes and explore all the nooks and crannies. We’re not gonna tell you where they are — don’t want to spoil the fun!
This shouldn’t surprise anyone. Webflow is our favorite no-code tool and it’s perfect for projects like these. It’s fast, easy to use and it generates an efficient code.
I used it not only to build the UI, but also to develop the back-end part of the website. That was possible because, luckily, I got into the beta of Webflow Logic. This allowed me to connect holidayOS with Posadzimy.pl API and send emails with a certificate using the same tool.
Posadzimy.pl is a Polish organization that plants trees on behalf of the companies that donated the money. I used their API to automate the process. Their team was super helpful — they even agreed to customize the look & feel of the certificate they issue so that it matches the design of holidayOS.
In order to check if someone is trying to resubmit their trees, I set up a database. At first, I wanted to use Supabase, but unfortunately, I couldn’t connect it to Webflow. Therefore, I settled for Airtable.
I used Sendgrid to send the confirmations and certificates. The configuration was super simple, but I had to use Zapier to unlock some use cases.
With Zapier I created 2 automations. One for transferring data from Webflow to Sendgrid and the other for uploading clients’ wishes from the Guest Book to tonik’s Slack. Call it an extra, but it felt so wholesome to see their wishes right before we were off for the holidays.
It was when I was working on holidayOS when the ChatGPT was the only thing people were talking about (at least on Twitter). I used it (occasionally) when I felt stuck or wanted to see if there’s a better alternative to my code.
The most notable example of my collaboration with the AI is when I already wrote the function for handling the video player, but someone suggested adding the option to rewind the video by dragging the progress bar. It was a good idea, but I didn’t have enough time to recreate the function from scratch. So I asked ChatGPT to expand it with the additional feature — and it worked first time!
Imagine not using Stack Overflow at work.
I used CodeSandbox not necessarily to get others’ snippets, but to host my scripts and import them to Webflow from there. This way, I didn’t have to publish the website to preview the changes I’ve done in the code.
Thoughts on the process
The hardest part of the job was figuring out how to count the trees that the hunters found. Eventually, I managed to keep the counter in the memory so that the number persisted even if the user closed the browser, but it was challenging — especially in Webflow.
It was the first time I’ve used this feature and I didn’t fully know its limits at first. I had high hopes, and it did allow me to build the back-end, but I think there’s a lot to improve. Mainly, around connecting to other APIs. I couldn’t get the responses from some tools because Webflow didn’t yet support their format. Hope they’ll catch up soon!
But all in all, Webflow Logic saved me so much time and worked good enough for this use case — I’m relieved that I didn’t have to figure it all out in another tool.
Even though holidayOS doesn’t look like a typical website, it wasn’t so difficult to build its front-end. Sure, the UI doesn’t look remotely similar to the typical SaaS websites I develop on my daily basis, but it still works like one. And, wow — I said that already and I’m gonna say that again — Webflow is so good at what it does.
If you know the basics and can google things, writing your own scripts to build more advanced interactions is not as scary as it sounds. With just a little hacking, you can overcome the limits of no-code tools and achieve similar results as if you were coding in React all along. Go watch Ryszard’s talk about what it means to be a no-code developer to get a more holistic perspective on that topic.