SpotiGroups

Did you ever want to listen to your favorite tunes with your friends? Do you want to judge your friends' music tastes or song choices? Spotify Groups lets you rate songs and turn them into playlists!

Comment

SpotiGroups

Inspiration

We were inspired to make an app that would bring people together, and what is one of the most important things that brings people, fans, and family together? It's music of course! We wanted to create an app that would somehow let people listen to music together. We wanted to use one of the most popular music streaming services out there, so we set our sights on Spotify. After learning about Spotify's API, we wanted to use the API in a web app of some sort so that anyone online could access it and listen to music together as a group. We also wanted to make it unique from all the other Spotify web apps, so we set our sights on our rendition of a Spotify web-app that lets you listen together while also letting you decide on your music.

What SpotiGroups Does

SpotiGroups lets users log into Spotify and listen to their favorite songs together in a listening party. Users can queue up music and play/pause current music as well as skip the current song if the majority vote it out. When a song is playing, users can vote on it, by either upvoting it or downvoting it. The score for that song is saved to a leaderboard along with the song. After or during your session, you can see what songs are rated the highest on your list as well as the lowest on your list (you can shame those people), and you can choose to make a playlist out of it. As of right now, SpotiGroups is not fully functional. The User Interface is fully laid out and it looks great! But the backend is not fully connected or functional to parts such as the login or parts of the Spotify API. This is what we have to show for now.

What We Used

  • Software: Visual Studio Code and PyCharm as standard powerful IDEs to develop JavaScript in. Figma was used as a powerful way to chart out systems and User Interface.
  • Front End : React JS was used to build our Interfaces, as it allows us to update and render seamlessly onto the server. HTML and CSS used to build up the website and to format the layout and styles.
  • Back End: Flask, a Python module that lets you develop web applications easily and Socket. io, a JavaScript library for web applications that allows the server and client to communicate with each other. MongoDB was used to store our user data we get which we use to query their playlists.

Problems We Ran Into

We ran into a lot of problems off the bat figuring out what software and libraries to use in order to put our back end together. After we figured out the general idea for that, we had a lot of problems figuring out the JavaScript and API from Spotify, as it was causing a lot of issues for us that persisted until we finished. Figuring out how to model and set up the front-end with UI/UX was tough as well, although we were fairly successful on fixing the text and layout. Problems understanding the complex nature of JavaScript also held us back, as well as running out of time. Most of these issues led us to not fully finishing the project.

What we're Proud of

The changing colors of the UI/UX that make it look really visually appealing. We're also proud that we were able to figure out a way to assemble a whole web stack through mostly Javascript the way most websites are built.

What did we Learn

We learned a lot about the individual Front-End and Back-End development process, as well how to tie them both together. We mostly used the Javascript language and libraries, so we were able to learn a lot about the most important web-Dev languages out right now. We also learned how to properly set and format UI/UX elements as well as how to mix colors to present a beautiful looking display.

What's Next?

While a lot of the User Interface is done, the back-end was fairly difficult and we hope to finish the rest of it in the future in order to make the app fully operational. We hopefully plan to add functionality for voting for songs as well as creating or cloning playlists that are made from the ranking of the songs on the leaderboard, all of which we had in our current designs. In the future, we'd like to develop enough features to make this the go-to for people looking for an interesting place to listen and share music tastes with friends.

Share this project:

Updates