DEV Community 👩‍đŸ’ģ👨‍đŸ’ģ

DEV Community 👩‍đŸ’ģ👨‍đŸ’ģ is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Jeffrey
Jeffrey

Posted on

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)

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)

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!

Top comments (0)

🌚 Life is too short to browse without dark mode