MrBeast

It was a hot summer day in Mar del Plata, Argentina. AC running full steam at the basement HQ.

We got a call from MrBeast. It was big, they said, they were to lead a new merchandising campaign, and we were to design and develop the storefront where his immense fanbase would shop.

We knew we could handle traffic, but we had never handled as much as MrBeast would bring.

Of course, keeping the site up was not an accomplishment in itself. We needed to give every visitor a delightful shopping experience. An experience that was top-notch in terms of design and performance, with fun mini-games to make it feels like a MrBeast video, and most importantly, direct users to buy.

While designing the site, we had both concrete requirements and more abstract ones. The client proposed us a sitemap and content structure., but we had to come up with fun stuff: “we want people to have fun on the site”, they said.

After sessions of brainstorming, Lambo Jump was born: an infinite runner with similar mechanics to Google’s famous "No Internet Connection T-REX Game", but with MrBeast style.

We also knew that we couldn’t compromise the site’s performance because of this, so we loaded Lambo Jump’s JavaScript right when the user pressed the “PLAY” button.

The game was a huge success, with MrBeast fans sharing their scores on Twitter, and some of them even shooting YouTube videos about their experience playing it. What’s your high score, btw?

While Lambo Jump was a good idea, we wanted something more. Inspired by the “Cookie Clicker” game, we came up with “Slap to Win”: a game where visitors would “slap” members of the MrBeast crew. They loved it; in fact, they suggested the rewards could be actual products! This was a perfect way to engage visitors: a fun little game that had real rewards to redeem.

We had a big concern: tech-savvy folks could hack it (which they did), but we were giving away real products! We couldn’t just give away real stuff to hackers. We raised this issue to the MrBeast team and suggested putting in some rules to the game: prizes would only be redeemable alongside other purchases, and you would be able to redeem only one prize per purchase.

We solved the game’s logic server-side. With the help of Shopify’s Admin API, we created discount codes for the products that users redeemed, and luckily for our developers, Shopify’s Discounts API has fine-grain controls that allowed us to set rules exactly as we wanted to.

Vercel, Shopify, Axiom. These tools were the heroes of this story.

Vercel not only helped us iterate faster and deliver the site to all of our users; their Customer Success team worked alongside us to make sure everything was set up correctly from our side and theirs. MrBeast's team asked us if we’d be able to keep the site up despite all the traffic (and the unpredictability of it), and we relied on Vercel to do so. We actually set a record on the Vercel platform for the most requested site in the span of a week. Scary stuff, but still, a great achievement!

Shopify is our go-to e-commerce provider, and their wide range suite of features covered all our needs. We leveraged their Storefront API, with a library built by us to connect to it in a type-safe manner: react-dropify. They served all of MrBeast’s traffic just fine!

Axiom is a newcomer to “the basement stack” ™. They provide observability at scale, which allowed us to monitor everything that was happening on the site at all times. We created a “Launch Dashboard” which observed different metrics and errors and gave us the confidence to know everything was fine.

Nerves? Nah, we’ve got nerves of steel. Remember that thing we say about making cool sh*t that performs? This wasn’t any different; we were ready, but let's not talk too much and allow our work to speak for itself.