yennanliu / spotify-github-profile

Show your Spotify playing on your Github profile

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)

Connect & 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

Credit

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