Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day 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 (about 2 months ago)
- Last Synced: 2024-10-29T15:33:48.190Z (about 1 month 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-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