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