Display your recent Last.fm and Spotify listening activity on your GitHub profile README

jeffreyca

Jeffrey

Posted on September 7, 2020

Display your recent Last.fm and Spotify listening activity on your GitHub profile README

GitHub recently introduced profile READMEs as a way to enhance your personal GitHub profile with Markdown and HTML.

I was inspired by the creativity of the open-source community - through various widgets like github-readme-stats and spotify-github-profile - to create something for all the music lovers out there.

I created two tools (hosted on Vercel) that lets you display your recent Last.fm and Spotify listening activity as a card so they can be embedded into your profile README.

Last.fm Recently Played README

My scrobbles

To get started, just add the following to your README and set the user query parameter to your Last.fm username.

![My scrobbles](https://lastfm-recently-played.vercel.app/api?user=JeffreyCA01)
Enter fullscreen mode Exit fullscreen mode

For more configuration options, see the GitHub repo README.

The Vercel app uses the Last.fm API (unauthenticated) to get your recent scrobbles, since it's all public information.

Spotify Recently Played README

Spotify recently played

First, you'll need to connect your Spotify account with the tool by clicking the button below.

Authorize app

Why is this needed?

Since your Spotify recent listening activity is not public, the Spotify API requires you (the account owner) to authorize the app to be able to access that information.

Your Spotify username, access token, and refresh token will then be stored on a secure Firebase database, so that access tokens can be automatically refreshed in the background after they expire (in 1 hour).

Continuing on

After granting permission, just add the following to your README and set the user query parameter to your Spotify username.

![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)
Enter fullscreen mode Exit fullscreen mode

For more configuration options, see the GitHub repo README.

Final thoughts

This was a fun little project I developed using TypeScript, Next.js/Vercel, and React. I also learned a lot about OAuth 2 authorization while working with the Spotify Web API.

Everything is open-source, you can check it out on GitHub:

https://github.com/JeffreyCA/lastfm-recently-played-readme
https://github.com/JeffreyCA/spotify-recently-played-readme

Bug reports, feature requests, and code contributions are welcome!

💖 💪 🙅 🚩
jeffreyca
Jeffrey

Posted on September 7, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related