Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kittinan/spotify-github-profile

Show your Spotify playing on your Github profile
https://github.com/kittinan/spotify-github-profile

github github-pages hacktoberfest hacktoberfest2020 hacktoberfest2021 hacktoberfest2022 hacktoberfest2024 spotify

Last synced: 5 days ago
JSON representation

Show your Spotify playing on your Github profile

Host: GitHub
URL: https://github.com/kittinan/spotify-github-profile
Owner: kittinan
License: mit
Created: 2020-07-19T14:03:10.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-10-25T21:24:40.000Z (4 months ago)
Last Synced: 2024-10-29T15:33:48.190Z (4 months ago)
Topics: github, github-pages, hacktoberfest, hacktoberfest2020, hacktoberfest2021, hacktoberfest2022, hacktoberfest2024, spotify
Language: Python
Homepage: https://spotify-github-profile.kittinanx.com/api/login
Size: 175 KB
Stars: 1,598
Watchers: 19
Forks: 647
Open Issues: 20
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

Awesome-GithubProfile-README - Spotify-github-profile
awesome-github-profile - Spotify now playing card generator - Generate your Spotify now playing card for your GitHub profile (Tools)
fucking-awesome-github-profile-readme - Spotify now playing card generator - Generate your Spotify now playing card for your GitHub profile (Tools)
AwesomeGithubProfileTemplates - Spotify now playing card generator - Generate your Spotify now playing card for your GitHub profile (Resources / Tools)
awesome-readme-tools - Spotify GitHub Profile - Show your Spotify playing on your github profile. (Miscellaneous)
awesome-github-profile-readme - Spotify now playing card generator - Generate your Spotify now playing card for your GitHub profile (Tools)
awesome-ubc-profile-readme - Spotify now playing card generator - Generate your Spotify now playing card for your GitHub profile (Tools)
project-awesome - kittinan/spotify-github-profile - Show your Spotify playing on your Github profile (Python)
awesome-starred - kittinan/spotify-github-profile - Show your Spotify playing on your Github profile (Python)
awesome-starred - kittinan/spotify-github-profile - Show your Spotify playing on your Github profile (Python)
awesome-github-profile - Spotify Github Profile

README

        # 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](#connect-and-grant-permission)  

[Example](#example)  

[Running for development locally](#running-for-development-locally)  

[Setting up Vercel](#setting-up-vercel)  

[Setting up Firebase](#setting-up-firebase)  

[Setting up Spotify dev](#setting-up-spotify-dev)  

[Running locally](#running-locally)  

[How to Contribute](#how-to-contribute)  

[Known Bugs](#known-bugs)  

[Features in Progress](#features-in-progress)  

[Credit](#credit)  

## Connect And Grant Permission

- Click `Connect with Spotify` button below to grant permission

[](https://spotify-github-profile.kittinanx.com/api/login)

## Example

- Default theme

![spotify-github-profile](/img/default.svg)

- Compact theme

![spotify-github-profile](/img/compact.svg)

- Natemoo-re theme

![spotify-github-profile](/img/natemoo-re.svg)

- Novatorem theme

![spotify-github-profile](/img/novatorem.svg)

- Karaoke theme

![spotify-github-profile](/img/karaoke.svg)

## 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](https://vercel.com/import) the forked project on GitHub

### Setting up Firebase

- Create [a new Firebase project](https://console.firebase.google.com/u/0/)

- 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](https://developer.spotify.com/dashboard/applications)

- Create a new project

- Edit settings to add _Redirect URIs_

  - add `http://localhost:3000/api/callback`

### Running locally

- Install [Vercel command line](https://vercel.com/download) 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`

```sh

BASE_URL='http://localhost:3000/api'

SPOTIFY_CLIENT_ID='____'

SPOTIFY_SECRET_ID='____'

FIREBASE='__BASE64_FIREBASE_JSON_FILE__'

```

- Run `vercel dev`

```sh

$ 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

## How to Contribute

- Develop locally and submit a pull request!

- Submit newly encountered bugs to the [Issues](https://github.com/kittinan/spotify-github-profile/issues) page

- Submit feature suggestions to the [Issues](https://github.com/kittinan/spotify-github-profile/issues) page, with the label [Feature Suggestion]

## Known Bugs

[404/500 Error when playing local files](https://github.com/kittinan/spotify-github-profile/issues/19)

## Other Platforms

- [Apple Music GitHub Profile](https://github.com/rayriffy/apple-music-github-profile)

## Credit

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