Create Spotify now playing card on your github profile

Running on Vercel serverless function, store data in Firebase (store only access_token, refresh_token, token_expired_timestamp)

2024-06-21

Vercel change the package the free tier is not enough for our usage. I moved service to self-host at Digital Ocean.

Please replace your old endpoint https://spotify-github-profile.vercel.app to https://spotify-github-profile.kittinanx.com

Connect And Grant Permission
Example
Running for development locally
Setting up Vercel
Setting up Firebase
Setting up Spotify dev
Running locally
How to Contribute
Known Bugs
Features in Progress
Credit

• Click Connect with Spotify button below to grant permission

• Default theme

• Compact theme

• Natemoo-re theme

• Novatorem theme

• Karaoke theme

To develop locally, you need:

• A fork of this project as your repository
• A Vercel project connected with the forked repository
• A Firebase project with Cloud Firestore setup
• A Spotify developer account

• Create a new Vercel project by importing the forked project on GitHub

• Create a new Firebase project
• Create a new Cloud Firestore in the project
• Download configuration JSON file from Project settings > Service accounts > Generate new private key
• Convert private key content as BASE64
  • You can use Encode/Decode extension in VSCode to do so
  • This key will be used in step explained below

• Login to developer.spotify.com
• Create a new project
• Edit settings to add Redirect URIs
  • add http://localhost:3000/api/callback

• Install Vercel command line with npm i -g vercel
• Create .env file at the root of the project
• Paste your keys in SPOTIFY_CLIENT_ID, SPOTIFY_SECRET_ID, and insert the name of your downloaded JSON file in FIREBASE

BASE_URL='http://localhost:3000/api'
SPOTIFY_CLIENT_ID='____'
SPOTIFY_SECRET_ID='____'
FIREBASE='__BASE64_FIREBASE_JSON_FILE__'

• Run vercel dev

$ vercel dev
Vercel CLI 20.1.2 dev (beta) — https://vercel.com/feedback
> Ready! Available at http://localhost:3000

• Now try to access http://localhost:3000/api/login

• Develop locally and submit a pull request!
• Submit newly encountered bugs to the Issues page
• Submit feature suggestions to the Issues page, with the label [Feature Suggestion]

404/500 Error when playing local files

• Apple Music GitHub Profile

Inspired by https://github.com/natemoo-re