/spotify-github-profile

Show your Spotify playing on your Github profile

Primary LanguagePythonMIT LicenseMIT

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

spotify-github-profile

  • Compact theme

spotify-github-profile

  • Natemoo-re theme

spotify-github-profile

  • Novatorem theme

spotify-github-profile

  • Karaoke theme

spotify-github-profile

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

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

Credit

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