Often times when we are out driving with friends or family, we typically have to use the driver's phone to control the music through Spotify. This proved to be very tedious as the driver would have to unlock their phone and hand it over to whoever wanted to change the song. Hence, we came up with Syncro, a Spotify session app allowing users to make rooms/sessions where everyone can control the music.
We realized that Spotify does not allow users to interact with each other through the app live. For example, if a group of friends were in a car, they keep passing around the phone connected to the car to change the song. We thought it would be very convenient if anyone was able to play or queue a song from their own phones in a session with friends.
What it does
Syncro allows Spotify users to create a session with their friends and allow them to queue or play a track on the host's phone. The host's Spotify account will be the only one playing the song, but our app allows other users to add a track from their phone which will later play on the host's phone.
We are currently working on adding functionality to change the host in order to play music from a designated member's phone. Also, we are implementing features to also have synchronous playing so that everyone's phone can play the song in real-time.
How we built it
The front-end was built by utilizing expo, react-native, react-native elements, and native base. The back-end server was built using socket.io, node.js, express.js.
We leveraged expo-auth-session for the authorization using Spotify's OAuth provider. In addition, we leveraged socket.io to handle real-time event handling between the mobile app and our server.
For Socket.io, we used the room functionality to create channels and mapped each room with a custom Room class containing all our functionality for adding members, queuing songs, and playing songs.
Challenges we ran into
We ran into some issues using Spotify's web API when it came to storing the authorization and expiration tokens for each individual member in the session. OAuth was difficult since we had to ensure that the authorization tokens were being stored properly so we could make Spotify API calls in later components.
Also, we struggled a little bit with handling state management between parent and child components in react-native and eventually figured out that we needed to use bind and callbacks between the parent and child according to React documentation.
Accomplishments that we're proud of
We were able to complete what we set out to do for this project by taking advantage of these frameworks and APIs for the first time. We are proud to be able to come this far with the time we were given and by building a fully functional app that could be used by anyone.
We also kept our codebase modular so that it's easier to update components and functions, particularly for the server. This ensures that there's lower coupling and higher cohesion amongst the modules that make this app.
What we learned
We learned how to create a react-native application that could be run in both android and IOS. We also learned how to handle real-time server events and handle these events among the client and server. Lastly, we learned how OAuth works and the different flows that are available for it.
What's next for Syncro
Syncro will be having more features, such as synchronous playing amongst all phones and changing hosts, and an improved UI experience for users of the platform in the nearby future. We plan on hosting the node.js server on Heroku or GCP for people to use this app and it will be downloadable on Google Play and the Apple App Store after completion. Lastly, we will be implementing database functionality so that rooms aren't stored locally on a server but rather on a DB.