Prototype

https://www.figma.com/file/VSrEytzo7wvEdnnqe9wkMg/My-playlist?node-id=0%3A1

Before you start

You need to subscribe Spotify premium for using player in this website.

In .env.local

CLIENT_ID = Spotify web api's ID in dashboard.

CLIENT_SECRET = Spotify web api account's password in dashboard.

SPOTIFY_ID = Your spotify ID.

Get Client ID and secret in dashboard

https://developer.spotify.com/documentation/web-api/

After get ID and secret

Add http://localhost:3000 and http://localhost:3000/playlist in your dashboard for redirecting.

What I learned

Responsive page with Material UI
Load specific datas by using intersection observer
How to use Spotify API
Refresh token when it expires
SSR by using getServerSideProps of Next.js

Other previews

Player
Liked songs ( If you didn't subscribe Spotify Premium, then you will see this message in player)
My Profile (fetches info from Spotify)
About me