Building a Spotify Wrapped Game For My Friends
For the past couple years, my friends and I have been playing a drinking game we simply dubbed "Spotify Game".
The rules are simple. Each person adds their top 5 songs from Spotify Wrapped to a collaborative playlist.
We then shuffle the playlist, play 30 seconds of each song, and all vote who we think it belonged to. All incorrect votes drink.
The fun of the game is the thrill of being unsure if you truly know your friends’ music tastes. What do they listen to while at the gym? While studying? Do they have a completely different playlist for trying to impress their date vs when they’re getting over a breakup?
This year (and the last), this particular friend group has been spread out due to Covid, work, and general life moves.
The Solution
My friend Ben and I decided to remake Spotify Game on the web.
Easy, right? A shared playlist and some kind of frontend to display the currently playing song while everyone votes on their phone.
Well, as any developer will tell you, things rarely go according to plan in the world of software.
We tried building an experience as close to real life version as possible, but we failed.
Why We Failed
We greatly underestimated the tasks of creating a distributed, synced version of a voting system and playing music UI.
A few problems we faced:
getting webhooks working for client <-> room logic
figuring out how to get a group of 20-somethings on the phone long enough and sober enough to make it work
Host vs player logic. How much power does the host have over the flow of the game? when does the game end?
Spotify API key management and user data
These problems all have subproblems inside of them that all take time and energy to solve.
Some tasks are too entangled.
So, we decided to pivot.
The societal perceived value of being an expert is the ability to do something perfectly. To me, the value of an expert is knowing when to not do.
The Pivot
During our first development sprint, we did three things correctly.
We figured out how create unique human readable URLs and store them in Firebase
We created a UI where users could use the Spotify Web Player to play songs in real time and search for songs in realtime
We used NextJS, which made made development super fast, and deployment even faster
With these tools a more simple web-first experience revealed itself.
We decided to create a version of the game where people added their 5 real songs, and 5 fake songs to throw people off.
This reinforces the real value of Spotify Game, do you know your friends music taste or not?
This experience is more async as well, since a person can share their link at any time with their friends (bye bye scheduling!).
And, we were able to drastically cut our development time since we had already built the core components of the experience.
Results
Creating Your List
Playing Someone Else’s WrapBattle
Scoring
This project was a lot of fun, and its pretty cool to see what vibe people create, and more importantly, the “on the edge of your seat” feeling of trying to suss out your friends favorite songs.
80/20 strikes again. You just need to know where to look.
ars longa, vita brevis
Bram