Mixtape-me | Spotify App Integration

Throwback to the 90s! Mixtape-me lets you log into Spotify and generate a retro-styled mixtape of your top 5 most-played tracks โ€” then download and share it.

Mixtape cover preview User mixtape UI

๐ŸŽถ Mixtape-me is a nostalgic twist on modern music streaming. Inspired by the days of physical CD shops and handmade playlists, this app revives the joy of curating and sharing your favorite tracks โ€” but with Spotify's real-time data magic.


๐Ÿš€ Try It Out


๐Ÿ” Requirements

Mixtape-me uses the Spotify Web API. To generate your mixtape:

  • You must log in with Spotify and authorize the app
  • Mixtape-me does not store or collect any user data
  • It fetches your top 5 most-played tracks and visualizes them โ€” that's it!

๐Ÿ›  Built With

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

๐Ÿ—บ๏ธ User Guide

  • Log in with your Spotify account
  • Choose between top songs from:
    • The past month
    • Last 6 months
    • The past year
  • View and download your custom mixtape as an image
  • Share it with your friends!

๐Ÿง  How It Works

Mixtape-me taps into Spotifyโ€™s Web API to access your listening history. Once authorized:

  • It pulls your top 5 most-played tracks
  • Creates a retro mixtape-style UI using your song titles, artist names, and cover art
  • You can then download the mixtape image or take a screenshot for sharing

๐Ÿงช Troubleshooting

Q: The image wonโ€™t download. A: Try a different browser or take a screenshot instead.

Q: The app isnโ€™t working. A: Clear cookies or site data for mixtape-me.herokuapp.com, or try again on a new device.


๐Ÿ“š Spotify Developer Dashboard

The project is powered by Spotifyโ€™s official Web API. Hereโ€™s what I did:

  • Registered my app on the Spotify Developer Console
  • Explored available endpoints for tracks, users, and listening history
  • Fetched data in JSON format following RESTful principles
  • Used that data to design and render mixtape layouts in the app

Spotify stats dashboard


๐Ÿ“Š Launch Results

Mixtape-me was met with early user excitement! Many users enjoyed generating and sharing their nostalgic playlists.

๐ŸŽฏ My personal goal: 100 mixtapes shared โ€” and counting! User feedback helped refine the UI and highlight unexpected use cases.


๐Ÿ“Ž App Access

Try it here โ†’ https://mixtape-me.herokuapp.com/