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

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

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 and paste your keys in SPOTIFY_CLIENT_ID, SPOTIFY_SECRET_ID, and 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

kimpuro/spotify-github-profile