Magic Mixtape

React, JavaScript, SCSS, HTML, Illustrations


Magic Mixtape is a React app that allow users to create fun mixtapes and explore new genres.  The app makes use of Spotify’s recommendations endpoint, which receives seed data in the form of genres, songs, and song attributes, and returns a mixtape.

Magic Mixtape integrates with the Spotify API to:

  • Display song genres
  • Search Spotify by song, artist, or album
  • Play song previews
  • Create playlists based on seed data selected by the user
  • Save playlists to the user’s Spotify account


Only five genres are displayed at a time, allowing the user to explore and experiment with genres that may be unfamiliar.  Each selected genre will affect the style of the generated mixtape.

Magic Items

There are currently 20 magic items from which the user can select, each of which affects the track attribute targets.  For example, the Lucky Kitty item increases both energy and danceability, while the Hour Glass affects track length.  Each item is unique, and the user may select up to two items — while some item pairs may work together to increase or decrease a particular attribute, others items may counteract one another.


The user can search for songs by title, artist, or album and view a list of search results.  Many songs include a 30-second song sample that the user can preview.  The user can select songs, which will affect the sound and style of the generated mixtape.


Songs, genres, and track attribute targets are passed to Spotify’s recommendation endpoint as seed data and a mixtape is returned.  The user can view the returned mixtape, play track previews, name the mixtape, and save it to their Spotify account.