🎶 Mixtape-me takes your Spotify listening data and turns it into a 90s-style mixtape. It was inspired by CD shops, handmade playlists, and the joy of showing someone what you've been listening to.
🚀 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
📊 Launch Results
People enjoyed making and sharing their playlists in the early days of the project.
🎯 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.vercel.app/