- Workshop Goals
- Getting Started
- Spotify Authorization
- React Hooks
- Running Your App
- Bonus
- Troubleshooting
- Resources
- Overview of React Hooks
useState()
anduseEffect()
- How to query the Spotify API
- Fork and clone this repository.
- In cloned project directory for
song-select-client
andsong-select-server
runnpm i
.
- make sure you have node installed. Check by running
node -v
in the terminal. Ideal version is 14.16.1, runbrew install node@14.16.1
- Go to developer.spotify.com and create an account or login with your existing Spotify account information.
- Navigate to the Dashboard and click on
CREATE AN APP
- Important: Once the app is created click on the app settings and set the
redirect url
to http://localhost:3000
- Copy your client id and client secret.
- Create two .env files. One in the
song-select-client
directory and one in thesong-select-server
directory.
Your song-select-server
.env
files should look like this:
REDIRECT_URI=http://localhost:3000
CLIENT_ID=INSERT_CLIENT_ID_HERE
CLIENT_SECRET=INSERT_CLIENT_SECRET_HERE
Your song-select-client
.env
files should look like this:
CLIENT_ID=INSERT_CLIENT_ID_HERE
- Replace {CLIENT_ID} placeholder in
Login.js
with your actual client id.
This app uses the Authorization Code Flow for Authentication.
- 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 |
React Hooks are a set of functions that let you use features in functional components. For this workshop, we'll be focusing on how hooks allow us to get and update state.
The useState() and useEffect() hooks are used throughout this application.
useState() Explained
The useState() hook is used to get and update the state in a function component. It is a function that takes in the initial state and returns an array with two variables; the current state, and the updated state.
- State declaration without hooks
import React, {Component} from 'react';
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0;
}
}
render() {
return (
<div></div>
)
}
}
- State declaration with hooks
import { useState } from 'react';
export default function Home() {
const [count, setCount] = useState(0);
return (
<div></div>
)
}
useEffect() Explained
The useEffect() hook is a function that takes two arguments; the first argument is a function, and the second argument is an array. The second argument is optional.
This hook will run on the initial render of the component and whenever the component is updated. For more control over when useEffect() is called, you can utilize the optional second argument in the form of an array that tells the code to run only when the specified data or resource changes.
import { useEffect } from 'react';
useEffect(() => {
console.log('Hello!');
}, [data]); // this code will run when the data changes
Once you've created your .env
files and replaced the {CLIENT_ID} placeholder with your credentials, Client Id and Client Secret Section you're ready to start your app!
- In the
song-select-client
directory, run the terminal commandnpm run start
- In the
song-select-server
directory, run the terminal commandnpm run server
- 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.
- replace the current
- Uncomment the last function in
Home.js
and insert your playlist id in the first parameter and your song id in the second parameter aftertrack:
- Refresh the app and login again.
- Do you have Node installed?
- If not try
brew install node
- If not try
- Do you have an older version of Node?
- Try running,
nvm install v14.16.1
ornpm install -g n
, andsudo n 14.16.1
- If you have Homebrew, run
brew install node@14.16.1
- Try running,
Documentation
Libraries