Awesome

spotify-github-profile

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)

Annoucements

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

Table of Contents

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

Connect And Grant Permission

• Click Connect with Spotify button below to grant permission

<img src="/img/btn-spotify.png">

Example

• Default theme

• Compact theme

• Natemoo-re theme

• Novatorem theme

• Karaoke theme

Running for development locally

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

Setting up Vercel

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

Setting up Firebase

• 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

Setting up Spotify dev

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

Running locally

• 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

How to Contribute

• 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]

Known Bugs

404/500 Error when playing local files

Other Platforms

• Apple Music GitHub Profile

Credit

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