MAJIDNISAR / Spotify-Status-Vercel

Spotify Status (README)

View what you listen at spotify.

Demo

Spotify for Developers

• Create a Spotify for Developers account
• Get Credentials
  • Client ID
  • Client Secret
• Go to Edit Settings
• Find Redirect URIs:
  • Add http://localhost/callback/

Get the Refresh Token from Spotify

• Navigate to the following URL:
  Note: copy your Client ID and paste in {SPOTIFY_CLIENT_ID} below.

https://accounts.spotify.com/authorize?client_id={PUT_YOUR_SPOTIFY_CLIENT_ID_HERE}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/

• After logging in, get the {GET_THE_TOKEN} portion of: http://localhost/callback/?code={GET_THE_TOKEN}

• Create a string combining {SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET} (e.g. 5n7o4v5a3t7o5r2e3m1:5a8n7d3r4e2w5n8o2v3a7c5) and encode into Base64.

• Then run a curl command:

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic {YOUR_BASE64}" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={YOUR_TOKEN}" https://accounts.spotify.com/api/token

• Then save the Refresh token

Configure Vercel Application

• Fork this Spotify Status

• Register on Vercel

• Create project linked to your forked respository

• Add Project Name and Environment Variables:

  • SPOTIFY_REFRESH_TOKEN
  • SPOTIFY_CLIENT_ID
  • SPOTIFY_SECRET_ID
  • SPOTIFY_BAR_COLOR
    • Hex Color Don't Include #
  • SPOTIFY_ENABLE_DURATION => `Not Working properly, set to False
    • True or False
  • 🆕SPOTIFY_BADGE_COLOR
    • Hex Color

  

• Deploy

Put this in your README.md

Small

[<img src="https://{DOMAIN_OF_YOUR_VERCEL_APP}/api/run-spotify-status" alt="Your alt what" width="350" />](LINK_TO_YOUR_ACCOUNT)

Medium

[<img src="https://{DOMAIN_OF_YOUR_VERCEL_APP}/api/run-spotify-status" alt="Your alt what" width="400" />](LINK_TO_YOUR_ACCOUNT)

Large

[<img src="https://{DOMAIN_OF_YOUR_VERCEL_APP}/api/run-spotify-status" alt="Your alt what" width="500" />](LINK_TO_YOUR_ACCOUNT)

Contribution

Feel Free to contribute, PR are the most welcome :)

License

Copyright (c) 2021 Majid Nisar | Spotify Status