Felicia Fel

Mixtape-me | Spotify App Integration

Throwback to the 90's with Mixtape-me! Share your top 5 songs in a mixtape form.

In today’s modern era, music is readily available online. You can play whatever you want whenever you want it. In the 90s, before platforms like Spotify were invented, music enthusiasts had to make their way to a record store or a CD store. There’s a sense of nostalgia with heading to a store and flicking through rows of CDs. Driven by post-pandemic angst, retro entertainment options are coming back on trend.

Mixtape-me aims to recreate that experience of walking through the doors of a record store looking at CD covers and store walls with colourful albums, memorabilia, and photos, transferring the same experience into digital form. With Spotify's technology, it's easier than ever to find out who you listen to most all year long, in the last 6 months, or even right now.

Expertise

Full Stack Web Developer

Year

2022

Mixtape-me CoverMixtape-me Cover

Links:

Requirements:

For Mixtape-me to work, users must log in and allow the app to access their most-played track data. Mixtape-me is an open-source app developed individually, and by using this app, users agree to the use of their Spotify account username and top 5 track data. Mixtape-me simply displays your top 5 tracks from Spotify and does not store or collect any data.

Built With:

• Bootstrap • CSS • Figma • GitHub • Heroku • HTML • JavaScript • Spotify Web API • Visual Studio Code

App:

Visit https://mixtape-me.herokuapp.com to access the web application.

User Guide:

  1. Log in to your Spotify account.

  2. Access your top 5 mixtapes.

  3. Choose from 'Last month', 'Last 6 months', or 'This year' top tracks.

  4. Download mixtape images.

How It Works:

Mixtape-me is an open-source app that allows you to make mixtapes of your top 5 tracks by logging into Spotify. It sorts your top tracks based on your listening history. Share your mixtapes by saving the image!


How are the top tracks determined?

Mixtape-me uses your Spotify listening history, with all data provided by Spotify.

How to save my mixtape?

Click the download button on top of the mixtapes. If the image doesn't download properly, redownload or take a screenshot.

The app isn't working.

Try clearing cookies or site data for mixtape-me.herokuapp.com, or use a different device.

Spotify Developer Dashboard:

Spotify has comprehensive Web API documentation. The first step was registering my app with Spotify Developer's account, using their Web API Console for exploring endpoints and accessing metadata. Based on REST principles, Spotify Web API endpoints return JSON metadata about music artists, albums, and tracks from the Spotify Data Catalogue.

Stats Image

Results:

On launch day, there was a surge of users signing in and using Mixtape-me. My goal is to reach 100 users! Involving users early in the project provided insights into real-world use cases and improved app design.