Inspiration
When I heard that Polymarket was going to be a sponsor, I immediately thought "game". I've always loved the simple genius behind things like GeoGuessr, and I thought I could apply the same basic idea to Polymarket, thanks to their API being easily available!
What it does
PolyGuessr is a simple turn based web game compatable with all platforms with realtime online multiplayer. Like a mashup of Geoguessr, Polymarket, and Kahoot. Each round you and your friends get a random prediction event, whoever most accurately picks gets the highest score. Each round is timed, currently this is hardcoded to 15s but is subject to change.
How we built it
I started by building the core replication system around Postgres and Ably Livesync. In short, Livesync is a service (which in alpha so a LOT of bugs lol) that allows for fanning out DB changes in real time to an unlimited number of clients in realtime. This system is awesome when it works, but unfortunately it has its quirks since it's in alpha.
The frontend is all implemented with Nextjs, tailwind, shadcn, and drizzle. Pretty standard stuff, this is what I am most familiar with. Drizzle makes iteration extremely quick, so props to them for that.
I decided to use Neon for the DB provider since it is super easy to use+setup, has a free tier, and supports everything needed for Ably Livesync.
So after building out the game logic through nextjs server actions for mutations and TRPC for read accesses, I set my sights on making the realtime system more robust. Since Ably Livesync is just replicating my DB state with little atomic ops that get sent over the wire, I could achieve equal functionality by just polling the DB. This proved to be an effective fallback (after optimizing some React memoization), and I currently can switch between the 2. Ably livesync's logs suck so I can't say exactly what is going wrong, but for some reason after an amount of activity on one IP it seems to just stop sending messages. I've just assumed this is some sort of rate limit and added a feature flag withh Vercel Edge Config to quickly switch between the 2 at runtime.
Challenges we ran into
Ably Livesync being flaky was the biggest issue. Adding a fallback polling based replication model behind a feature flag solves this problem almost completely. The onyl caveat is how scalable it is, since polling puts a lot of stress on the DB. To reduce this added strain, I simply moved the polling to a read replica. This adds a little more latency, but for the added robustness it is worth the trade off, since this is just a fallback option.
Accomplishments that we're proud of
Implementing a robust realtime online multiplayer replication system in under 24 hrs is a feat I am very proud of. I love how technical the solution is, but more importantly how much is adds to the experience. Playing with friends makes ANY game more fun.
Also I got the polyguesser.com domain for 15$! Not usually that easy to get a .com TLD...
What we learned
I learned that Ably Livesync is not production ready, but I really like the product. It makes a notoriously complex concept very simple to implement once you understand their offering.
What's next for PolyGuessr
Right now the game is pretty basic. A lot of small additions (like procedural music Kahoot style, more satisfying animations, etc.) would go a long way in making the game as a whole more engaging. Who doesn't like a satisfying button animation??
Also a more complete authentication system with game history, potentially ranked modes (could do anti cheat with proctor tech like how proctorio does it in browser), better leaderboard visualization (like a graph of scores over the game)
Built With
- ably
- bun
- drizzle
- neon
- nextjs
- postgresql
- shadcn
- vercel
Log in or sign up for Devpost to join the conversation.