Casual (App) Friday: SpotDJ

Sean Grove
Sean GroveFeb 15th, 2019

Building products makes me happy. From interacting with our customers and partners, to sitting down and writing about our work, I’m lucky OneGraph offers the chance to traverse the gamut of the product stack. One of my favorite parts of OneGraph however is how we’re constantly flooded with new app ideas.

Some small, others quite a bit larger, but sometimes the apps are just the right-size: our goldilocks apps. They don’t have to do much, just be a fun, casual app that exercises our imaginations a bit so that we can do a deep dive for their own sake. The perfect apps to play around with on Friday.

Today we’re releasing one of those apps, SpotDJ! [source]

SpotDJ: A Collaborative Spotify DJ Experience

SpotDJ really is for Fridays, where you want to relax a bit more with your colleagues or friends. When you first visit the SpotDJ page and log into Spotify, you’ll become a DJ. SpotDJ will show you what song you’re currently listening to on Spotify, and offer you a link to share for others to join your DJ room.

For your followers who join you in the room, SpotDJ takes control of their Spotify player to synchronize it with yours - anything you listen to on Spotify, your followers will hear! And if you scrub through the song, they’ll scrub along with you, all through the magic of the internet.

To be office DJ for today, go to SpotDJ to grab your sharing link, and spread it far and wide for anyone you want to give the change to bask in your musical

It’s a really simple idea, but there’s just something about simultaneously listening to the same music as others, even over remote distances, that makes me happy. And it’s a great way to learn things about your friends and colleagues you didn’t know before!

How We Built SpotDJ

We were talking to our friends at ReasonTown about GraphQL, ideas started flowing, and since we can build apps so quickly on top of OneGraph, we decided to launch an app written entirely in ReasonML (it only seemed appropriate) to go along with one of their episodes. And thus, SpotDJ was born!

SpotDJ is built on top of Spotify, which is a wonderful service with an impressive API underlying it. It started from a small experiment, where I saw how our GraphQL Spotify integration and tooling came together, and a basic-but-complete music player UI materialized out of nothing. I played with the API visually using our explorer (as we talked about before), and wound up controlling every aspect of the player programmatically. It was a giddy feeling, like when I first wrote QBasic and was able to PUT pixels to the screen - I knew there was something powerful here1.

Want to play with Spotify control? Try out these mutations to play a song, pause your player, skip to the next, and set the volume!

With our beta Spotify integration in place, we can control every aspect of our Spotify players programmatically. Now we could set up a server for users to visit, and the server could take care of shuffling messages between the DJ and the listeners. But I’m obsessed with making app building as instantaneous as possible, and I knew we could take it further. This is a casual, fun app for people to listen to and to hack on - setting up servers is work! Instead, let’s just have the browsers pass messages between themselves, and if a user is in listener mode, their browser can choose to keep the Spotify instance in sync with the DJ.

It’s a cutting edge group of technology:

  • GraphQL and OneGraph for querying and controlling Spotify without setting up a server
  • ReasonML compiling down to some really efficient JavaScript
  • WebRTC for peer-to-peer communication between browser instances
  • Spring-based animation alongside css-animations with 3d transforms for a fluid, fun overall aesthetic

Create your own SpotDJ app on OneGraph to avoid the rush!

SpotDJ is just meant to be a fun example of a useful app you can put together quickly with OneGraph while focusing on the more interesting challenges - be it refining animation or synchronizing browsers without a server.

All queries in the default production instance are sharing a single Spotify OAuth client id, and will likely get rate limited at the most popular times. But that's ok, because SpotDJ is meant to be cloned and hacked on!

It's easy to set up your own for you and your friends though, and we really encourage you to try it out!

  1. Simply create an app on OneGraph
  2. Visit the Spotify Developer Portal and create a new Spotify app to get your own client_id/client_secret
  3. Add your new Spotify OAuth client information into the OneGraph dashboard for you app under Custom OAuth Credentials
  4. Add http://localhost:8000 to the CORS Origins section

View the app at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.

SpotDJ is an open-source labor of love, come hack with us!

Take a look at the issues on the GitHub repository tagged with spotdj for ways you can help contribute to SpotDJ - it's a great way to learn GraphQL, Reason, CSS-in-js, or even some fun animation techniques!

Special Thanks

A special thanks to Yuki Li, who built nearly the entire app, with obvious love and care. Yuki dove fearlessly into the dark parts of BuckleScript bindings, and tried a dozen different animation techniques to make the coverflow-like approach work.

And to Xavier Cazalot (who built another great text-to-blogging app on top of OneGraph), whose mentorship on designing and implementing the animations, and the overall aesthetic brought SpotDJ to life.

ReasonTown hosts Murphy Randle and Jared Forsyth for having me on their podcast to talk about OneGraph and building large production systems in Reason!