Jamie Turner

2 years ago

Introducing Fast5

At Convex, we're creating a platform for managing global state for web developers. Unsurprisingly, we've found one of the best ways to improve our platform is to actually build stuff with it!

So, over the next few months, we have a series of demo apps we'll be releasing that showcase a variety of ways to build on Convex. Along the way, we'll talk through how we solved certain kinds of global state problems, how we modeled our app's data, and various lessons we've learned along the way. We'll also be pretty honest about Convex's current limitations, and what we intend to do about them.

And today, we're starting with a fun one... Fast5!

Fast5

A heated game of my-personal-gmail vs. my-work-gmail

Fast5 is a wordle-inspired web game in which two players are racing to be the first to guess the secret word. Each time you uncover new letters, you queue up points, and if you guess the word first, you get to add those points to your game score. After five rounds, the person with the most points wins.

We decided to introduce one extra game mechanic called "spying." As you see your opponent make progress, you may start to get worried that you're going to lose. (Actually, I guarantee you will. Fast5 is surprisingly stressful!) If you want to try to rescue the round, you can hit the space bar and all of their letters will be revealed. However, your award will be cut in half if you manage to guess the word first using the combined information each of you have revealed. So spying is a gambit!

Check it out here if you want to play

A game like Fast5 felt like a great early demo app for Convex because it is highly reactive, and it requires a lot of the transactional and secure properties that our platform makes quite easy.

The other tools we used to build fast5 are Next.js and Vercel. In our experience, Next, Vercel, and Convex together provide a really powerful platform that lets you build very interesting apps quite easily.

If you're a web developer who is excited about this stuff, check out the source code, and come join us in our slack to discuss!

About the Developer

Fast5 was built by myself with a ton of help from the very talented Mike Wheaton. The awesome team at Merge helped out with the visual design.

Even though most of my professional work in the last 10 years has been building big infrastructure systems and databases, the truth is my first love was the web. I came of age as a young technologist right as the web was getting started, and I was obsessed with it. I literally made about 12 different web frameworks between 1999 and 2013, and (embarassingly) some of them you can still find online.

But the web has changed a lot in the last 10 years while I was buried in distributed systems. Everything has taken a huge step forward, and I feel like an excited newbie again. So re-learning web development while making Convex has been a ton of fun.

And while I'm proud of Fast5 as a quickly-built example of the capabilities of Convex, I won't necessarily claim all of my code in there is polished or idiomatic. It's an honest depiction of a web amateur working their way back to proficiency!

Coming soon: Lessons learned and problems solved

So over a series of blog posts I'll walk through various kinds of global state management needs I ran into while building Fast5, and how I solved them.

My current plan is to dig in to these topics:

• Local vs. remote state, optimistic updates, and how to have everything coexist in a way that doesn't get too complex and drive you crazy
• Why the concept of the backend sometimes still matters. Hint: we need the secret word to be truly hidden from the player's browser until guessed!
• Why transactionality matters. In Fast5's case, only one player can win each word.
• How to drive a "game flow" on the web, or faking a backend game engine without really having one.
• How to build basic matchmaking, and managing match lifecycle

Stay tuned as over the next few weeks I provide some detail on how I tackled each of these. And in the meantime, get racing!