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 Customization Running for development locally Setting up Vercel Setting up Firebase Setting up Spotify dev Running locally How to Contribute Known Bugs 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

• Spotify Embed theme (NEW!)

Customization

You can customize the appearance by adding query parameters to your URL:

Parameter	Description	Default
theme	Theme to use (default, compact, natemoo-re, novatorem, karaoke, spotify-embed, apple)	default
background_color	Background color (hex without #)	121212
border_radius	Border radius in pixels	10
bar_color	Equalizer bar color (hex without #)	53b14f
bar_color_cover	Extract bar color from album cover (true/false)	false
cover_image	Show album cover image (true/false)	true
show_offline	Show offline status when not playing (true/false)	false
interchange	Swap artist and song name positions (true/false)	false
mode	Color mode for supported themes (light/dark)	light

Example

https://spotify-github-profile.kittinanx.com/api/view?uid=YOUR_UID&cover_image=true&theme=default&border_radius=15&bar_color=53b14f

Running for development locally without Vercel

To run the application locally without Vercel:

1. Copy .env.example to .env in the root directory and replace the placeholder values with your actual configuration.

2. Install the required dependencies:

   pip install -r api/requirements.txt

3. Run the application:

   python api/app.py

4. Access the login page at http://localhost:3000/api/login

Note: Ensure your Spotify app's redirect URI is set to http://localhost:3000/api/callback and BASE_URL in .env is set to http://localhost:3000/api.

Running for development locally with Vercel

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

Run unittest

• Run all tests

pytest tests/ -v

• Run tests with coverage

pytest tests/ --cov=api --cov-report=html

• Run specific test file

pytest tests/test_api_view.py -v

• Run with maxfail (like CI)

pytest tests/ --maxfail=5 --disable-warnings -v

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