Disclaimer: this blog is not just for sports fans
The vast majority of the Super Bowl’s approximately 100 million annual viewers aren’t actually fans of the teams taking the field. They’re just people who are just looking for an excuse to get together with friends, eat healthy amounts of seriously unhealthy food, and watch commercials.
But if congeniality and carbohydrates aren’t enough to hold your interest, a little action can make the “Big Game” a bit more interesting.
Historically, most of the wagering on Super Bowl Sunday happens not at the big Vegas sportsbooks like Caesar’s or MGM, but instead in people’s homes, with friendly, informal wagers. The reigning champion of gambling games is a simple-to-learn, no-sports-knowledge-needed game commonly called “Super Bowl Squares.”
With many in-person party plans getting sidelined these past few years, we had an idea:
Create a “Roacher Bowl Squares” app to help distributed gamblers get their Big Game betting fix.
Don’t worry. This blog isn’t for sports fans or even gambling fans. In fact, before I started building this app, I couldn’t name more than two NFL teams (…there’s the Indianapolis Colts because I lived in Indianapolis and supporting them was a requirement. I might have shed a tear when Peyton Manning left. The other is the Patriots, because again, I lived in Indianapolis and we hate them).
This blog is about my experience building an interactive serverless application with Prisma, Remix, Netlify, Pusher Channels, and CockroachDB serverless. Why did I choose Remix over Next.js? Was that even a good decision? Do I regret it? Read on dear reader….let’s find out.
First, a quick README on how the game typically works:
It’s conceptually pretty simple, but presents a handful of interesting challenges to solve when attempting to replicate this traditional, in-person version as a serverless application.
Below I’ll walk through some of the highlights, but if you’d prefer to just view the code, you can do that as well.
Before getting into the complicated gymnastics of gambling application architecture let’s take a look at the players on the field (not sorry!). One of the first decisions I made was to use Remix instead of Next.js. I usually use Next.js for web applications but I decided to give Remix a try for two reasons:
• It’s the new hotness and I love shiny things
• The people behind Remix are amazing (Kent C. Dodds, so glad he’s okay)
I immediately regretted my decision. And I spent a few hours cursing into the ether because I put myself in position to learn a brand new framework from scratch in order to build a sample app in a matter of days.
The rest of my tech stack looks like this:
This application is far from stateless. We need a database to hold information about users, and the different games that are happening concurrently. CockroachDB serverless is a great choice because of the nature of this application. A lot of the action takes place during The Big Game. Outside of that, the applications could be dormant only waking when participants are claiming their squares. This app takes advantage of CockroachDB serverless’s elastic scale to provide compute when needed and be cost-effective when the demand recedes.
Now that we have our database, we need a way to talk to it. Prisma is a typesafe ORM and my preferred way to work with CockroachDB. Prisma recently released preview support for CockroachDB. My dog and I actually appeared on the Prisma livestream to talk about a different sample app I built with the Prisma support for CockroachDB. I’ll link you straight to the good part (me):
Remix can be deployed to many different platforms and lets you select which to use when starting a new project. I chose Netlify because I’m most familiar with it. During the build process, Remix will package up the static assets and create a Netlify function to handle the server-side rendering of your application. Don’t want to use Netlify? You’re just a small change away from using Vercel, Fly.io, and many others. I like Netlify. Sue me.
Just like with the Ugly Sweater app, we are using Pusher Channels to keep the game boards in sync while changes are being made. Before the game starts, this helps make sure no one tries to claim a square that was recently claimed by another participant. During the game, we get live updates of winning squares as the score changes.
For the users:
For the games:
Ex. [[0,0], [0,0], [0,0], [0,0]]
For the claims:
The sample app is up, running, and waiting for you to host your own Roacher Bowl Squares game when the Big Game rolls around.
Try it out, share screenshots of your game, and let us know what you think by tagging #RoacherBowlSquares or @CockroachDB on Twitter.
We have lots more sample apps in our Resources library as well. I hope you’ll check them out.
Foreign keys are an important element of any relational database. But when you’re setting up your database schema, it’s …Read More
A request came across my desk the other day asking whether I had any experience with Django and could I get it to work …Read More
To help people get outdoors and improve their physical well-being, we’ll create an outdoor activity tracker. Although we …Read More