Inspiration

As avid music enjoyers, our team eagerly looks forward to Spotify Wrapped at the end of every year, which is a summary of the past year based on the music we listened to. It shows statistics like our favorite artists, songs, moods, genres, etc. While Spotify Wrapped is certainly worth waiting for, sometimes we would just like a sneak peek into our favorite music at that moment. This is why we came up with Instant Wrapped: Spotify Wrapped, but available any time.

What it does

Instant Wrapped displays your top 10 songs and artists of the last 6 months. Along with that, it shows how popular your favorite songs or artists are, on a scale of 0 to 100. The higher the number, the more popular it is.

How we built it

We used the Spotify API to get the user's data once they log in. On getting the data, we sorted the raw data from dictionaries into easily readable lists. For the front end, we used HTML, CSS and JavaScript to make an interactive, visually appealing interface.

Challenges we ran into

All of us were very unfamiliar with HTML, CSS and JavaScript and had to learn them all from scratch within half a day. Trying to get a lasting authentication token in order to continually access the Spotify API was a challenge as well.

Accomplishments that we're proud of

We are very satisfied with the way the GUI turned out. It is accurately able to extract both user-specific and worldwide users' data from Spotify and display it in a clean and aesthetic format.

What we learned

We got our first introductions to HTML, CSS, and JavaScript, which are going to be extremely useful for us in the future. We were able to understand and learn enough to get a working website (with credit where its due to Ryan, our unofficial mentor).

What's next for Instant Wrapped

We would love to display more data such as top genres, moods, etc. We can add a feature which recommends songs based on your current taste. To expand even more, the website can get the Spotify data of UCI students and get the statistics for the whole school. Then, the site can be made social by connecting students if they have similar tastes in music.

Built With

Share this project:

Updates