Creating A Spotify Playlist For Your Internet Crush In Support Of Jeremy Zucker

Oh the nervousness of navigating the Spotify Platform app approval process... Sarah Gaupel, Republic Records, and I received an approval on our Valentine’s Day inspired build for Jeremy Zucker the day of... "Valentine’s Day." 🥲 This little app allows you to create a lovely mixtape for your “internet crush” using Jeremy’s music or whatever else you have in mind. Simply login with Spotify and choose a couple of tracks.

What held up approval? As it turns out, I was being too cute. First, I thought it would be a nice idea to make the search result artwork images heart shaped and colored like little Sweethearts candy. However, it is against Spotify terms to manipulate album artwork in any way. Makes sense. Oh and don’t you dare try to round those corners or stroke those images with cute borders. Just serve them as straight up full color squares. Next, I thought I could sneak a pink Spotify logo through but their logo must only be white, black, or, you guessed it, green. I went with white. Everytime I build on this platform, I learn a little something new. This time? Try not to be too cute.

Jeremy Zucker’s new single “internet crush” is out everywhere now. Read on to learn how we built an app that can create new playlists on Spotify.

Create a Playlist

The first thing I do when interacting with the Spotify Platform is authenticate the user. For this app, we'll need the following scoped perrmissions: playlist-modify-public, playlist-modify-private, and ugc-image-upload. Once authenticated, I then have an access token which I can use to initialize a Spotify client. I like to use Axios for this.

const spotify = axios.create({
  baseURL: 'https://api.spotify.com/v1/',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${ state.token }`
  }
})

Now, we can interact with the Spotify API on our user's behalf (given the permissions we were granted.)

Create New Playlist

Let's create a new playlist on Spotify. First, we'll need to get the user's profile as we'll need their user id to create the playlist.

// Get current user
let { data: me } = await spotify.get('/me')

We can then create a playlist, passing a playlist name and description. The playlist name was dynamic for this app.

// Create playlist
let { data: playlist } = await spotify.post(`/users/${ me.id }/playlists`, {
  name: PLAYLIST_NAME,
  description: 'Internet Crush Mixtape'
})

The playlist is now created on a user's account but it's empty. Let's search for some songs to add to it.

Search For Songs

Spotify provides a powerful search endpoint in their API that allows you to search for, among other things, songs. For our purposes, we just need 10 tracks based on the user's query. We'll just pass the text input query to the search params.

// Search Spotify for tracks
let { data: { tracks: { items: tracks } } } = await spotify.get('/search', {
  params: {
    q: query,
    type: 'track',
    limit: 10
  }
})

At this point, the user will select a few of these tracks to be a part of their playlist. You can store these tracks temporarily in an array and when you're ready, add all of them to the playlist.

Add Songs to Playlist

To add songs to the playlist, I take that temporary array of tracks a user selected, and map out just the URIs from Spotify. These URIs are then passed to the add items endpoint.

// Add songs to playlist
await spotify.post(`/playlists/${ playlist.id }/tracks`, {
  uris: URIS
})

Update Playlist Artwork

The final step in a truly custom playlist is updating the artwork. When I create dynamic images in my apps, I'll typically use HTML Canvas to do so. Once the image is ready on canvas, I can convert it to a JPEG data URL (removing the file header.)

let cover = canvas.toDataURL('image/jpeg').replace('data:blog-image/jpeg;base64,', '')

This data url can then be passed to the playlist cover update method and the playlist cover image will be updated on Spotify.

// Add artwork to playlist
await spotify.put(`/playlists/${ playlist.id }/images`, cover, {
  headers: {
    'Content-Type': 'image/jpeg'
  }
})

Design

The main design inspiration for this Valentine's app is the Sweethearts box design. (Jeremy also created custom candies for this particular release.) In addition to borrowing the color scheme, I thought it would be cute to create an animated version of the candy box window using PIXI. Here's a CodePen preview of that below. Head to the imported component for the full source.

Thanks

Thanks again to Sarah Gaupel and Republic Records for the opportunity to help Jeremy Zucker with this new release. Special thanks to the Spotify Platform approval team for enlightening me on the rules of the platform.