(so you can listen to the same song over and over)

TL;DR

I built the repeatone.club using a webtask as the single serving backend.

webtask.io gives you the ability to run some arbitray code with any HTTP call. One of the features of this that I love is the ability to pass secret parameters to your code, such as auth tokens. In the end this gives you the ability to call authenticated APIs that you couldn’t from your browser without shipping your API client/secret. Think of them as partially applied functions that can be accessed via a simple GET request.

This perfectly fits the bill for any small single page application that has only a few API calls. This is where one of my favorite bands, The National, comes into play.

Sorrow

On May 5, 2013 The National played a concert at MoMA PS1 in New York, and created one of the greatest setlists of all time. It even got a 7.2 from Pitchfork, and the review kinda captures why something like this appeals to me:

No naysayer will be converted by this completely absurd artifact, but it’s a moving manifestation of the relationship that fans have with any band that means anything to them, playing their songs over and over to tempt the point where the magic fades away.

I’ve always been that person who could listen to a song on repeat for hours. So I wanted to build a site that could at least capture how many times I did listen to something in a row.

Last.fm API and Webtasks

This functionality was pretty easy to get using the Last.fm API. But without shipping my API Key along with my website, I couldn’t make the site without spinning up a server somewhere. This is getting easier and easier to do, but it still wasn’t something I wanted to do just to show you how many times I can listen to Sorrow in a row.

Then I found webtask.io built by Auth0. With the ability to easily obscure secrets when creating the webtask, it fit well with the goal of the project.

Creating one is pretty straightforward. As a prerequisite, you need to install the CLI. Once that is done, it’s a simple command to deploy any file as a webtask with a secret parameter:

// repeatone.js
"use latest" // Allows ES6 stuff
module.exports = (ctx, cb) => {
  const { data } = ctx
  // API_KEY comes from the CLI and user comes from the request
  const { API_KEY, user } = data
  makeSomeRequest({ key: API_KEY, user }, cb)
}

# This will output the url to your webtask
wt create repeatone.js --secret API_KEY=$YOUR_LAST_FM_API_KEY
# Call your webtask with a user parameter
curl -s https://webtask.it.auth0.com/api/run/{CONTAINER_NAME}/repeatone?user=$USER

In this simple case, when the webtask is created it has an API_KEY and then each request supplies the user to look up on Last.fm. You can see the full source of my webtask on GitHub.

Check out the getting started guide and documentation on the webtask programming model for more information on what webtasks can do.

Repeat One Club

Using this single function backend, I was able to deploy the website completely statically to Surge. If you’re interested in how that’s done, you can also see that project on GitHub

If you have a Last.fm account, you can go to repeatone.club and type in your username (it might help if you listen to Sorrow by The National a bunch of times first).

If you’re lucky, I might even be listening to something on repeat right now! If I’m not, you can take solace in this screenshot of when I listened to Open Book 100 times: