steffnay/workshop

Workshop code for Spotify playlist clone.

Shamira's Workshop

How to use the Spotify API and libraries.

Getting Started

Fork and Clone Repository

1. Fork and clone this repository.
2. In cloned project directory for song-select-client and song-select-server run npm i.

Setup Spotify Developer account

1. Go to developer.spotify.com and create an account or login with your existing Spotify account information.
2. Navigate to the Dashboard and click on CREATE AN APP
3. Important: Once the app is created click on the app settings and set the redirect url to http://localhost:3000

Client Id and Client Secret

1. Copy your client id and client secret.
2. Replace {CLIENT_ID} placeholders with your client id.

• CLIENT_ID placeholders in Login.js, Home.js, and Server.js
• CLIENT_SECRET placeholder in Server.js
• Replace REDIRECT_URI in Server.js with http://localhost:3000

Workshop Goals!

By the end of this workshop you will know:

• The purpose of React Hooks
• How to query the Spotify API

Authorization

This app uses the Authorization Code Flow for Authentication.

1. Create an authorization URL with specified parameters.

• Ex. - https://accounts.spotify.com/authorize?client_id={CLIENT_ID}&response_type=code&redirect_uri=http://localhost:3000&scope=streaming%20playlist-modify-private

Query Param	Value
client_id	{YOUR_CLIENT_ID}
response_type	code
redirect_uri	http://localhost:3000
scope	streaming%20playlist-modify-private%20playlist-modify-public%20playlist-read-private%20playlist-read-collaborative%20user-read-email%20user-read-private%20user-library-modify%20user-read-playback-state%20user-modify-playback-state

Are you an overachiever?

• Add a song to your personal Spotify playlist!
  • replace the current PLAYLIST_ID with your own.
  • To get your playlist id, login to Spotify.com and click on your playlist. The playlist id will be in the url after /playlist/
  • Search for a song you want to add on Spotify.com and add copy the song id.

• Uncomment the last function in Home.js and insert your playlist id in the first parameter and your song id in the second parameter after track:
• Refresh the app and login again.

Troubleshooting

• Do you have Node installed?
  • If not try brew install node
• Do you have an older version of Node?
  • Try running, nvm install v14.16.1 or npm install -g n, and sudo n 14.16.1
  • If you have Homebrew, run brew install node@14.16.1