Spotify playing README
A really easy way to display your spotify listening status on READMEs and Websites too!
Here's the embed from the site.
Customized card, with theming
NOTE: As a security notice, We declare that, we're not storing the sensitive tokens, We just store the access tokens securely, used for generating temporary refresh tokens, and getting just the status data, with only read permissions and scopes. You can check it in the configuration file for the scopes.
id: Your spotify ID
theme: The card theme
image: If cover image to be included
color_theme: The color theme for the Card
bars_when_not_listening: If bars should be shown when not listening
bg_color: The BG color for the card
title_color: The title color for the card
text_color: The text color for the card
hide_status: If the status for song should be shown.
NOTE: You can generate the card easily by visiting the panel. Check the repo description link for it.
Setting up the development environment
Install the dependencies
The project uses pipenv for dependencies. Here's how to install the dependencies.
pipenv sync -d
Setting up spotify
- Go to the developer panel at spotify. Panel URL
- Make an APP, Specify the name, and description.
http://localhost:5000/callbackto the URLs
- Take a note of the Client ID, and Client Secret for setting up
Setting up Firebase
- Go to the firebase panel.
- Make a new project, and setup as a Web SDK and enable it.
- Go to Settings, and the web apps section, and copy the config, and keep a note.
- Then go to the
Services accounttab, then the
Database secrets, select the Database we're using and copy the API.
- Copy the domain from Realtime Database section in left, after initializing it.
Setting up .env
Configure the environmental variables by renaming the
.env.example file to
.env with the respective values for it.
Here's the info about the variables
BASE_URL: This is the basic URL for local dev, set it to
SPOTIFY_CLIENT_ID: This is the spotify client ID.
SPOTIFY_SECRET_ID: This is the Spotify Secret.
FB_API_KEY: This is the API key for firebase, from Database secrets.
FB_DOMAIN: This is the domain from
FB_PROJECT_ID: This is the Project ID from normal firebase config.
FB_STORAGE_BUCKET: The storage bucket from the normal firebase config.
FB_MESSAGING_ID: The messaging ID from normal firebase config.
FB_DATABASE_URL: The database URL from firebase config.
Once done, Run the server using
pipenv run start! It should boot up at
There are several things planned for this project. Here are the TODOs, Kept public for reference, and transparent-ness.
- How to contribute
- How to add a theme
- How to work with options
- Adding more features
- Improve the current themes
- Add more themes
- Add more customization options
- Previews when customizing the card
- Allow customizing Background and font color ( Will be redeveloped, with all security issues fixed )
- Marquee show
- Display bars when not listening.
- Allow linking to your profile along with the link.
- Color Theme
- Abiltiy to Hide status
- HTML Image tag generation
- Add same color to either of the text / title, if either of them is left empty, so the color pallet is fine.
Contributions, issues and feature requests are welcome. After cloning & setting up project locally, you can just submit a PR to this repo and it will be deployed once it's accepted.
Get in touch
If you have various suggestions, questions or want to discuss things wit our community, Join our discord server!
Show your support
We love people's support in growing and improving. Be sure to leave a
Inspired by Novatorem