Skip to content
technology

Building SquareOff: A Football Squares App

· 4 MIN READ

I recently built a web application to help people host and play football squares.

Disclaimer: I don’t support gambling, including sports betting, in any way, shape, or form.

How is this game played?

You have a 10x10 grid of boxes, with each box coordinating to a row number and a column number. The row number and column number are in a randomized order and correspond to the last digit of each team’s score. Boxes generally have a price on them, so the more boxes you buy the more you’ll pay. The score at the end of each quarter will deem a winner, with the final quarter generally having a larger prize.

For more information, see this link.

Why did I decide to do this?

Each year, my friend Kevin would set up football squares through a Google sheet template. It worked well: people booked boxes, payment was tracked, and there were formulas to determine the winner. But there were definitely improvements that could be made.

At the same time, I had just started a new role at my current company, IMG. We were developing an iOS app, but needed a web app as well. The obvious choice was to use React. React was the industry standard for building single page applications (SPAs). On the contrary, I’ve always built SPAs through another framework1, Angular. But Angular, however, was slowly declining in support and developer usage. I had to get with the times.

So I decided to create this with a few goals in mind:

  1. Make our lives, primarily Kevin’s, much easier when it comes to playing football squares.
  2. Learn more about React, so that I can contribute adequately to my team at IMG.

Plan

At a high level, the requirements were clear. I was building an application that did what the Google sheet template did and more.

  • Players should be able to register and log into the website easily.
  • Players should be able to host boards, and book boxes.
  • The rows/columns should be randomized once the board is filled. This randomization must be fair.
  • Winners of each game should be automatically calculated.
  • Keep track of payments from players and winnings to players.

Technical Implementation

  • Authentication: Firebase auth. This was ultimately the fastest and easiest way to get auth going. In addition to email/password, I also added Google OAuth. I do have worries about vendor lock-in, but that’s a problem future Ricky can deal with.

  • Backend: Node (v16) using Koa (web framework) & Prisma (ORM). This is the same setup that I have at work, so it was another opportunity to get better at using it.

  • Database: PostgreSQL.

  • Frontend: React, with no css libraries. I’ve always ended up using CSS libraries in the past, but I thought this would be an opportunity to just go plain.

Hosting Services

I needed my hosting to be free, especially since I was still in a beta-testing phase.

Back-end

Initially, I hosted the server on Heroku. It came with a free database add-on. Unfortunately towards the end of 2022, Heroku no longer had free dynos. Thats when I found fly.io.

To my surprise, fly.io was very easy to use. Their documentation was clean, and their CLI was easy to use. On top of that, I was able to provision a free postgres database too! During the migration to heroku -> fly.io, I did lose all of my data. I could’ve done work to migrate it but since it was only a staging environment, I didn’t care.

Front-end

As for the frontend, I deployed the React app to Netlify. Nothing much here to say other than the fact that it works!

Updates

January 2023

I ran a test board for a game. There wasn’t any buy-in involved, but just wanted to get some user feedback. Some things came out of this:

  • Bug: the feature to determine winners wasn’t working correctly. I realized it was due to my matrix logic.
  • Feature request: Players wanted an easier way to book more squares, rather than just one-by-one. To satisfy this request, I added a button (“Grab 5 boxes”) that randomly chooses 5 boxes for you and books it.
  • Feature request: Hosts wanted a way to edit the attributes of the board, such as title and description. This wasn’t a priority to me at first, but it made sense that people would make mistakes or want to edit board details after creation. To satisfy this request, I simply reused some form components to make the fields editable.
  • We ultimately made the decision to forego the payments aspect of this app. This is to ensure that we didn’t cross the line and into sports gambling territory.
February 2023

As of 2/11/2023, everything has been good. Tomorrow is the Super Bowl, so we’ll see how that goes!

Footnotes

  1. italicized, because Angular is definitely a framework. React, on the other hand, is more of a library. Interested in the differences? I am planning on writing my review on both, having used them both in the wild. ↩