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
To get started, just add the following to your README and set the user query parameter to your Last.fm username.
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
First, you'll need to connect your Spotify account with the tool by clicking the button below.
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.
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)