“Hey There Nostalgia”

Building a Playlist Generator for Plain White T’s

Last night, the Plain White T’s performed on The Bachelor spin-off Listen to Your Heart. (Yes, that sentence just came out of my mouth.) Among the songs performed was their 2006 mega-hit “Hey There Delilah.” In an effort to capitalize on the uptick of interest in the song, the artist asked if I could help develop a 2000’s inspired mixtape creator. I sorta alluded to the fact that I don’t believe we were still making tapes then, more like compact discs 💿, but I gladly agreed to help out. The outcome was a simple little app which allows fans to build a personalized Apple Music or Spotify playlist for someone out of 2000’s tracks, including “Hey There Delilah.”

Try the app out now at www.heythereplaylist.com. It should only take one minute to create a playlist for someone. If you want to know a bit more about developing playlist generator apps, check out my case studies for Tycho and Billie Eilish. I just wanted to talk a bit about my highlight: the 2000’s search input.

In order to play up the nostalgia factor of creating a mix cd for your friend, we brought in all the usual suspects: custom cd designs, sharpie typography, and some visual distress. However, it’s the Spotify powered search that really did it for me. Spotify provides a single powered endpoint for searching in their API. In addition to being able to filter by type and market, they also provide some powerful search operators and field filters. One of these field filters allows you to limit results to a particular year or date range. Since we wanted this campaign to transport you back to that moment in time, we decided to limit search results to the years of 2000–2010.

The one prerequisite for calling the Spotify API is authenticating the user. This is also necessary for the playlist creation step. I like to use Implicit Grant Flow for this. Check out the following article for a bit of info on that.

Once you have the user’s access token, calling the search API is simple.

let url = "https://api.spotify.com/v1/search";
let response = await fetch(`${url}?q=delilah%20year:2000-2010&type=track`, {
  headers: {
    'Authorization': `Bearer ${USER_ACCESS_TOKEN}`
  }
});
let data = await response.json();
console.log(data.tracks);

Now I didn’t expect much when I programmed this but the results are pretty damn nostalgic. It’s fun to type in phrases which should pull up mega hits from before or after this decade but instead bring up other results within the decade. For example, when I search “Toosie,” I only get a result for Larry Franklin’s Wah-Toosie. Sorry, Drake.

Thanks to Kay Anderson and Plain White T’s for allowing me to help out.