CampfireQueue

Ever tired of listening to bad songs at a socially distanced outdoor gathering or online? CampfireQueue is a website that allows people to add songs to a queue and vote on which song to play next.

Comment

Inspiration

The members of team Panic! at the Pinto all have an affinity towards music, so our goal from the start was to create a music-based application. Also inspired by the theme of Camp Hackbeanpot, we wanted to create something that brought people together. One thing that people love to do at camps is sit together and sing/play songs, and our website allows people to play songs together by adding songs to a queue and voting on the next song.

What it does

  • The user is greeted by a landing page, where they have the options to enter a username and a room name to create a room
  • Once the user creates a room, they are sent to their very own room page with a unique ID and a shareable link they can send to their friends to join
  • Users in the room can search for whatever song they would like and the song will be put in the queue
  • Once there are three songs in the queue, a voting session will start, and the song that wins will be the next song that plays.

How we built it

  • Frontend: -The website was built using React, with Material-ui for help with styling and react-router to navigate between the pages. -The room creation was done using get and post requests to our backend, which is set up as an API -The music player is done using spotify html embedding, and adding songs to the queue is done by making requests to the spotify API and updating the URL so it could be used in an embed.

-Backend:

  • This was created using springboot Java
  • The backend has endpoints that can be called by the frontend, which either add information to the database (this information includes room number, the songs, the songs to be used in the votes, and the votes for the songs) or give information to be used in the app.

Both portions of the application were built and deployed to heroku.

Challenges we ran into

  • Connecting the frontend to the backend and integrating the frontend with the spotify API was very finnicky, and a lot of errors happened that were hard to debug in that respect. Examples of this were GET requests that did not return the information we were looking for (sometimes a get request to the backend only returned the room code and not the other information), results from the spotify API that we were not expecting (for example, part of the JSON file returning undefined), and the sharable URL returning undefined instead of having the correct URL.
  • The spotify API also presented the challenge of needing an authentication token every hour in order to search for songs, which caused a lot of problems on the debugging end
  • There were a number of challenges with React itself, some of them being in the setup (we were initially looking to use a tool called expo to work together on the project in React native, but could not get that to work and had to default back to vanilla react), and some of them being simply due to the nature of react (for example, trying to setup react-router and connecting the onClick actions of buttons to page navigation took our team quite a bit of time)
  • The biggest challenge, as with any hackathon, was time. While we were eventually able to get most things we wanted in our minimum viable product implemented, there was not enough time to perfect some areas of our site and possibly build on to what we wanted.

Accomplishments that we're proud of

  • The room creation works flawlessly, and users can enter a link and be updated on the current song, the songs in the queue and the votes!
  • The spotify player works, and searching up for songs in spotify is very accurate and also works without a hitch
  • Despite there being a couple of bugs in the style, the website looks very nice for the two days of work put into it.

What we learned

  • A TON about React, Javascript, and libraries/tools used to create a website.
  • How a backend can be created, deployed, and used as an API
  • How to integrate the spotify API and the challenges surrounding it
  • How to deploy applications to Heroku

What's next for CampfireQueue

  • The first step of continuation would be to implement the voting system in full (about half of the logic is there and working, the missing piece is having the voted song play next and what to do with the other two songs in the queue)
  • After that, something we wanted to do if we had extra time was to add the ability for users in the room to connect with their spotify and for the website to give recommendations of songs based on what the group's collective interests were -Probably more debugging!

Our slack handles: @[Hacker] Hayden DeAngelis @[Hacker] Esteban D. Espinoza @Ashwin Ashok @Ben 'Bean-derson' Henderson @Danish Farooq

Built With

Share this project:

Updates