Spotify Web APi for ADLink & ADPortfolio
(Extends from spotify-github-profile inspire by Natemoo-re).

• Example code to callback the APi using .tsx: Spotify.tsx. But you can also use MDX or HTML format, read the documentation or Live Version.
• Example code for the frontend using .tsx: music.tsx.
• Example web: ADTify-Web.

---

Running on Vercel serverless function, store data in Firebase (store only access_token, refresh_token, token_expired_timestamp)

Live Version

Example

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 this repository.

Setting up Firebase

• Create a new Firebase project
• 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
• Create a new project
• Edit settings to add Redirect URIs
  • add http://localhost:3000/api/callback

Running locally

• Install Vercel command line with npm i -g vercel
• Create .env file at the root of the project and paste your keys in SPOTIFY_CLIENT_ID, SPOTIFY_SECRET_ID, and FIREBASE

BASE_URL='http://localhost:3000/api'
SPOTIFY_CLIENT_ID='____'
SPOTIFY_SECRET_ID='____'
FIREBASE='__BASE64_FIREBASE_JSON_FILE__'

• Run vercel dev

$ 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