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
- add
- 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 inFIREBASE
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
Inspired by https://github.com/natemoo-re