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 PermissionExampleCustomizationRunning for development locallySetting up VercelSetting up FirebaseSetting up Spotify devRunning locallyHow to ContributeKnown BugsCredit

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