Inspiration

At Bar Nights and events, and including IC Hack, catering a playlist for the event attendees can be hard. Using a slack channel like we do in ICHack or having a single person control the music is extremely primitive and unreliable.

We thought we could harness the power of the technologies available to us to make forming event playlists a democratic process.

What it does

A Swift App and a React JS frontend, both capable of providing users live information about the current playlist and the order of the upcoming music.

There are voting buttons at each song so that users can vote for their favour song. The playlist is then actively sorted by the number of votes, and the Spotify Playlist of the host is updated accordingly.

The host has access to a simple NodeJS server where he is provided with a randomized party_id, upon authenticating with his Spotify account. Users on their web or mobile clients can use this id to join the session and view the playlist and vote accordingly, with no other authorization required.

How we built it

Node JS Express server (for host), React JS Frontend, Swift Mobile Client, Heroku for hosting both Node JS and React clients and to route all incoming requests from clients to the server appropriately.

Challenges we ran into

Authorization Code Flow for Spotify was particularly challenging, and it was particularly difficult to enable users on their clients to carry out playlist changes without any specific Spotify authentication.

It was also all our team members' first time with all the above technologies, so there was plenty of learning on the way.

Accomplishments that we're proud of

We're extremely proud of our Node JS server which is able to receive requests for the following functions

  • getting logged in to Spotify
  • adding songs to playlist
  • voting for songs and ranking them accordingly
  • changing order of songs based on the voting numbers
  • session management using party_ids

We're also extremely proud of our Swift Frontend application as it is a robust and useful client that was particularly challenging to build, given our team's relative inexperience with Swift and iOS development.

What we learned

We learnt a lot about choosing the right technologies, and especially about picking a particular frontend client from the very beginning.

What's next for CrowdBeats

Search and add new songs to playlist functionality is already available and ready to use in the Node JS Server (through HTTP GET Requests), but has not been exposed in the web client or iOS app due to time constraints. Exposing these 2 features would make CrowdBeats a complete crowdsourced DJ tool, and would be able to manage several users' across platforms due to it's relatively robust deployment setup (considering that it is a hackathon).

Extensions would definitely be auto-complete search on frontend clients, style improvements to both frontend clients as well as the host client.

Host a session here: crowdbeats-host.herokuapp.com/ Join the session using the party_id given above here: crowdbeats-client.herokuapp.com/ Swift app available in git repository.

Built With

Share this project:

Updates

Submission history