Shamira's Workshop

How to use the Spotify API and libraries.

Overview

Workshop Goals!

Overview of React Hooks
- useState() and useEffect()
How to query the Spotify API

`Getting Started`

Fork and Clone Repository

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

make sure you have node installed. Check by running node -v in the terminal. Ideal version is 14.16.1, run brew install node@14.16.1

Setup Spotify Developer account

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

Client Id and Client Secret

Copy your client id and client secret.
Create two .env files. One in the song-select-client directory and one in the song-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.

`Authorization`

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

Learn more about scopes here

`Using React Hooks`

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

`Running Your App`

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 command npm run start
In the song-select-server directory, run the terminal command npm run server

`Bonus`

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

`Resources`

Documentation

Libraries

Whatthefoxsays / workshop