Skip to content

metarex21/Showtify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Showtify

Shows your recently streamed song on spotify as a web embed! To refresh the embed, reload the page!

Spotify API

  • Create a Spotify Application
  • Take note of:
    • Client ID
    • Client Secret
  • Click on Edit Settings
  • In Redirect URIs:
    • Add http://localhost/callback/

Refresh Token

  • Navigate to the following URL:
https://accounts.spotify.com/authorize?client_id={SPOTIFY_CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/
  • After logging in, save the {CODE} portion of: http://localhost/callback/?code={CODE}

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

  • Then run a curl command in the form of:

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

Deployment

Deploy to Vercel

  • Register on Vercel

  • Fork this repo, then create a vercel project linked to it

  • Add Environment Variables:

    • https://vercel.com/<YourName>/<ProjectName>/settings/environment-variables
      • SPOTIFY_REFRESH_TOKEN
      • SPOTIFY_CLIENT_ID
      • SPOTIFY_SECRET_ID
  • Deploy!

Customization

follow the markdown file here!

Readme

You can now use the following in your readme:

[![Spotify](https://USER_NAME.vercel.app/api/spotify)](https://open.spotify.com/user/USER_NAME)

Example

Spotify

About

Shows your recently streamed song on spotify as a web embed. Refreshes on every request.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published