Avishkar Shinde
UX Designer
How I brought Spotify's listening history to Framer, and how you can too!
How I brought Spotify's listening history to Framer, and how you can too!
Published on
Published on
7th July, 2025
7th July, 2025
Topic
Topic
Spotify API, Framer
Spotify API, Framer
Overview
Overview
I’m always listening to music while I design and I wanted my portfolio to show this side of me. I tried using Framer’s built-in Spotify component but it negatively affected my site's performance and didn’t let me customize much. Currently it only allows you to add a single song or album, which isn't enough for me.
I had previously iterated on bringing the Spotify's Friend Activity from Desktop to Mobile, so naturally my next step should be to bring this feature to my site (and yours too!). And while I am at it, why not make it animated.
So, I built a Spotify widget that fetches my recently played tracks and displays them in a slick, animated carousel, all inside Framer. Here's a preview.
I’m always listening to music while I design and I wanted my portfolio to show this side of me. I tried using Framer’s built-in Spotify component but it negatively affected my site's performance and didn’t let me customize much. Currently it only allows you to add a single song or album, which isn't enough for me.
I had previously iterated on bringing the Spotify's Friend Activity from Desktop to Mobile, so naturally my next step should be to bring this feature to my site (and yours too!). And while I am at it, why not make it animated.
So, I built a Spotify widget that fetches my recently played tracks and displays them in a slick, animated carousel, all inside Framer. Here's a preview.
THe Easy way
THe Easy way
Join my app
Join my app
Click the button below and fill out my contact form. I’ll add you as an authorized user to the app.
Click the button below and fill out my contact form. I’ll add you as an authorized user to the app.
Once you get a confirmation mail from me that you're in, come back to this form and click on Authorize.
After authorizing, just copy the Framer code snippet I provide, paste it into a code file in Framer, and drag the component onto your canvas. And that’s it, your music, live on your site. You can customize the layout using the property panel.
Once you get a confirmation mail from me that you're in, come back to this form and click on Authorize.
After authorizing, just copy the Framer code snippet I provide, paste it into a code file in Framer, and drag the component onto your canvas. And that’s it, your music, live on your site. You can customize the layout using the property panel.
If you want to deploy your own instance, read my setup guide below.
If you want to deploy your own instance, read my setup guide below.
My goal
My goal
I wanted to:
I wanted to:
Pull in user's Recently Played Spotify tracks.
Pull in user's Recently Played Spotify tracks.
Extract and show the album art, track name, artist and how long ago it was played.
Extract and show the album art, track name, artist and how long ago it was played.
Animate this data in a smooth scroll carousel in Framer.
Animate this data in a smooth scroll carousel in Framer.
Make this component customizable so that others can use it easily.
Make this component customizable so that others can use it easily.
And I wanted it without relying on embeds. Everything should feel native and lightweight.
And I wanted it without relying on embeds. Everything should feel native and lightweight.
How it actually works
How it actually works
Instead of making users authenticate every time, I built a flow where:
Instead of making users authenticate every time, I built a flow where:
Users authorize once.
Users authorize once.
Their access + refresh tokens are securely stored on Firebase.
Their access + refresh tokens are securely stored on Firebase.
My component fetches your recent tracks anytime using this stored token.
My component fetches your recent tracks anytime using this stored token.
This way, it's convenient and lightweight. All the heavy-work is done by Vercel and stored on Firebase. This component will just render that data into a presentable format. And you can revoke it's access anytime.
This way, it's convenient and lightweight. All the heavy-work is done by Vercel and stored on Firebase. This component will just render that data into a presentable format. And you can revoke it's access anytime.
The setup
The setup
What you will need
What you will need
A Spotify Account
A Github Account
A Vercel Account
A Firebase Account
A Framer Website
A Spotify Account
A Spotify Account
A Spotify Account
A Github Account
A Github Account
A Github Account
A Vercel Account
A Vercel Account
A Vercel Account
A Firebase Account
A Firebase Account
A Firebase Account
A Framer Website
A Framer Website
A Framer Website
step 1
step 1
Set up Spotify
Set up Spotify
Go to Spotify Developer Dashboard.
Log in with your Spotify account.
Click "Create an App".
Name it anything you like (eg. Spotify Recently Played)
For now, set your Redirect URI to:
Go to Spotify Developer Dashboard.
Log in with your Spotify account.
Click "Create an App".
Name it anything you like (eg. Spotify Recently Played)
For now, set your Redirect URI to:
https://localhost:3000/callback
https://localhost:3000/callback
Copy
Copied
Copied
Copy
Copied
Save your Client ID and Client Secret for later.
Save your Client ID and Client Secret for later.
step 2
Set up Firebase
Set up Firebase
Go to Firebase Console and create a new project.
In the left menu, go to Build → Realtime Database and click Create Database.
Choose Start in test mode (you can update rules later).
In the left menu, go to Project Settings → Service Accounts tab.
Click Generate new private key and download the JSON file.
From the JSON, note down the following values for your environment variables:
Go to Firebase Console and create a new project.
In the left menu, go to Build → Realtime Database and click Create Database.
Choose Start in test mode (you can update rules later).
In the left menu, go to Project Settings → Service Accounts tab.
Click Generate new private key and download the JSON file.
From the JSON, note down the following values for your environment variables:
FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY_B64 (you’ll need to base64 encode the private key string)
FIREBASE_DATABASE_URL
FIREBASE_PROJECT_ID
FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY_B64 (you’ll need to base64 encode the private key string)
FIREBASE_DATABASE_URL
FIREBASE_PROJECT_ID
To base64 encode the private key (on macOS or Linux terminal):
To base64 encode the private key (on macOS or Linux terminal):
cat your-firebase-key.json | jq -r '.private_key' | base64
Copy
Copied
Copied
Copy
Copied
Or just copy the key from the JSON and encode it here: https://www.base64encode.org/
Or just copy the key from the JSON and encode it here: https://www.base64encode.org/
step 3
Set up Vercel
Set up Vercel
Clone my repo → Deploy.
Name your project to your liking (e.g. Spotify Recently Played Vercel.)
Set the following environment variables:
Clone my repo → Deploy.
Name your project to your liking (e.g. Spotify Recently Played Vercel.)
Set the following environment variables:
SPOTIFY_CLIENT_ID = Spotify app Client ID we got in Step 1
SPOTIFY_CLIENT_SECRET = Spotify App Secret ID we got in Step 1
FIREBASE_CLIENT_EMAIL = Firebase client email from Step 2
FIREBASE_PRIVATE_KEY_B64 = Base64-encoded string of Firebase private key from Step 2
FIREBASE_DATABASE_URL = Firebase database URL from Step 2
FIREBASE_PROJECT_ID = Firebase project ID from Step 2
NEXT_PUBLIC_BASE_URL = https://localhost:3000
NEXT_PUBLIC_REDIRECT_URI = https://localhost:3000/callback
step 4
Update Redirect URL
Update Redirect URL
Once deployed, Vercel will give you a live URL like:
Once deployed, Vercel will give you a live URL like:
https://your-app-name.vercel.app
Copy
Copied
Copied
Copy
Copied
Go to your Vercel dashboard → Your Project → Settings → Environment Variables.
Update the following environment variables.
Go to your Vercel dashboard → Your Project → Settings → Environment Variables.
Update the following environment variables.
NEXT_PUBLIC_BASE_URL = https://your-app-name.vercel.app
NEXT_PUBLIC_REDIRECT_URI = https://your-app-name.vercel.app/api/callback
Go back to Spotify Developer Dashboard.
Open your App → Edit Settings.
Under Redirect URIs, replace '
http://localhost:3000/callback'with:
Go back to Spotify Developer Dashboard.
Open your App → Edit Settings.
Under Redirect URIs, replace '
http://localhost:3000/callback'with:
https://your-app-name.vercel.app/api/callback
Copy
Copied
Copied
Copy
Copied
Finally in User Management, add your Name and Email ID used to register with Spotify.
Finally in User Management, add your Name and Email ID used to register with Spotify.
And Done! Now just go to your deployed Vercel site, click on Authorize, and copy my Code component to your Framer.
And Done! Now just go to your deployed Vercel site, click on Authorize, and copy my Code component to your Framer.
Reflection
Why I did this
Why I did this
I love building things that make my portfolio feel more personal. I have a few self-coded components like my 'Scroll Menu' in the bottom right and since music is such a big part of my workflow, it just made sense to make this too.
By coding it myself, I could also ease the burden on my website by keeping my code lightweight.
It’s a small component, but it says something about who I am beyond just projects.
Feel free to ask any questions and I’ll be in touch. Happy Building.
I love building things that make my portfolio feel more personal. I have a few self-coded components like my 'Scroll Menu' in the bottom right and since music is such a big part of my workflow, it just made sense to make this too.
By coding it myself, I could also ease the burden on my website by keeping my code lightweight.
It’s a small component, but it says something about who I am beyond just projects.
Feel free to ask any questions and I’ll be in touch. Happy Building.
Pssst, you've reached the end… but how about one more read?