Overview of what this course is, who this course is for, and what we'll be building

Course Introduction

Getting our local development environments set up with nvm

How to Setup a React Developer Environment with nvm

Intro & Dev Environment Setup

Module 1 Introduction

An introduction to APIs in web development

What is an API?

Learn the basics of REST principles and HTTP requests & responses

Okay, but what is a REST API?

What is Express? The Basics of the Node.js web framework

Learn the basics of writing Express route handlers

The Basics of Express Router - Requests and Responses

Getting Started with REST APIs & Express

Module 2 Introduction

Get your app set up in the Spotify developer dashboard

Getting Started with the Spotify Developer Dashboard

Set up nodemon to streamline our Node.js development workflow

Add nodemon to an Express App to Restart Node Automatically

Learn how OAuth works and how it will work with the Spotify API

What is OAuth and How Does it Work? [with examples]

Build out Spotify's Authorization Code OAuth flow with Express

How to Implement OAuth Flow in Express and Node.js

Authentication & Authorization with Spotify

Module 3 Introduction

Use Create React App to quickly spin up a React front end and pass OAuth tokens from server to client

How to Pass OAuth Tokens to a React App

Streamline development in a client/server architecture with Concurrently

Optimize React and Express.js code with npm concurrently

Setting Up a React Front-End

Module 4 Introduction

Learn how to use local storage to let users log in and log out

Using Local Storage to Persist Login State

Use axios to send a request to the Spotify Web API and render response data on the front end

How to Fetch Spotify API Data with Credentials with Axios

Scaffold out our app's pages with React Router

How to Setup and Scaffold React Router

Install and configure Styled Components in our React app

Beginner's Guide to Styled Components in React [with examples]

Login State & Front-End Scaffolding

Module 5 Introduction

How to Build a Login Page in React

How to Build a Profile Page in React with Spotify API Data

Build out and style the top artists & top tracks pages

How to Build a Spotify Top Artists & Top Tracks Page in React

How to Build a Spotify Playlists Page in React

Build out and style a page for each playlist and let users sort tracks by audio features

How to Build a Spotify Individual Playlist Page in React

Add a loading state for our React components

How to Build a React Loading Animation Component

Building & Styling the UI

Module 6 Introduction

Add a custom favicon and share image to our app

How to Change Your React Favicon and Social Preview Images

Deploy our app to the internet with Heroku

How to Deploy React to Heroku With a Node.js Server

Add a descriptive and helpful README to our project

How to Add a README.md File to React

Deploying to the Internet

Wrapping Up What We’ve Learned

Course Wrap Up

node.js

express

axios

dotenv

Have you ever been curious to see what your Spotify data looks like? How a round-up of your listening habits gets compiled every year? Or even wanted to see metadata of your favorite tracks? Luckily, Spotify makes a ton of interesting data like this accessible via the Spotify API. For example, there is data available for every users’ [top tracks and artists](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-users-top-artists-and-tracks) of all time and [audio features](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-several-audio-features) like danceability and tempo for every single track.

## Why this course

If you're interested in accessing personalized Spotify data like we mentioned above, Spotify requires your app to be authorized. And to get authorization, you'll need to implement something called OAuth. This course will walk you through every step of the OAuth flow in a concise, easy to follow way. Unlike YouTube tutorials that only cover a few concepts and leave you with half-baked GitHub repositories, we'll cover everything from explaining what REST APIs are to implementing Spotify's OAuth flow to fetching data from the Spotify API in React hooks. Split into seven modules, each lesson includes clear, detailed explanations and complete code examples. By the end of the course, you'll have an app deployed to the internet that you can share with your friends and add to your portfolio.

## What we’ll build

**On the front end**, we’ll build out a professional, responsive user interface with [React](https://reactjs.org/), React Hooks, and the popular CSS-in-JS library, [Styled Components](https://styled-components.com/). We’ll pull in data from the Spotify API using modern ES6 [async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) methods and display that data in an engaging way.

**On the back end**, we’ll learn the basics of [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer), [HTTP requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods), and [OAuth](https://oauth.net/). We'll lift the veil on how to [authorize an app with Spotify](https://developer.spotify.com/documentation/general/guides/authorization-guide/), and then build a Node server with the [Express framework](https://expressjs.com/) to handle our authentication requests. Finally, we’ll deploy our app to the internet using [Heroku](https://www.heroku.com/).

![Top Artists](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-1.png)

![Top Tracks](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-2.png)

![Playlist tracks sorted by tempo](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-3.png)

Learn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.

Build a Spotify Connected App

Principles of REST APIs and how they relate to the Spotify API

How to implement the Spotify OAuth flow with JavaScript

How to use local storage to store auth tokens

How to fetch data from the Spotify API in a React app

How to handle async code with React hooks and async/await

How to efficiently style an app with Styled Components

How to deploy an app with a React front-end and Node.js back-end to Heroku

Next, we'll work on building out our Profile page. This is what will be displayed on our homepage (

When we're done, our Profile page will look something like this:

Just like with the Login page, we'll create a file called 

 for our Profile page and move the fetch logic that we currently have in 

import { useState, useEffect } from 'react';
import { catchErrors } from '../utils';
import { getCurrentUserProfile } from '../spotify';

const Profile = () => {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getCurrentUserProfile();
      setProfile(data);
    };

    catchErrors(fetchData());
  }, []);

  return (
    <>
      {profile && (
        <div>
          <h1>{profile.display_name}</h1>
          <p>{profile.followers.total} Followers</p>
          {profile.images.length && profile.images[0].url && (
            <img src={profile.images[0].url} alt="Avatar"/>
          )}
        </div>
      )}
    </>
  )
};

export default Profile;

export { default as Login } from './Login';
export { default as Profile } from './Profile';

import { Login, Profile } from './pages';

We'll also go ahead and move our logout button out of the 

 since we want it to be rendered for every route — it can simply be a part of the root 

      {!token ? (
        <Login />
      ) : (
        <>
          <StyledLogoutButton onClick={logout}>Log Out</StyledLogoutButton>

          <Router>

We can then spruce it up a bit with some styles using the 

import { GlobalStyle } from './styles';
import styled from 'styled-components/macro';

const StyledLogoutButton = styled.button`
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: rgba(0,0,0,.7);
  color: var(--white);
  font-size: var(--fz-sm);
  font-weight: 700;
  border-radius: var(--border-radius-pill);
  z-index: 10;
  @media (min-width: 768px) {
    right: var(--spacing-lg);
  }
`;

 file should end up looking something like this:

import { useState, useEffect } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation,
} from 'react-router-dom';
import { accessToken, logout } from './spotify';
import { Login, Profile } from './pages';
import { GlobalStyle } from './styles';
import styled from 'styled-components/macro';

const StyledLogoutButton = styled.button`
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: rgba(0,0,0,.7);
  color: var(--white);
  font-size: var(--fz-sm);
  font-weight: 700;
  border-radius: var(--border-radius-pill);
  z-index: 10;
  @media (min-width: 768px) {
    right: var(--spacing-lg);
  }
`;

// Scroll to top of page when changing routes
// https://reactrouter.com/web/guides/scroll-restoration/scroll-to-top
function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

function App() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    setToken(accessToken);
  }, []);

  return (
    <div className="app">
      <GlobalStyle />

      {!token ? (
        <Login />
      ) : (
        <>
          <StyledLogoutButton onClick={logout}>Log Out</StyledLogoutButton>

          <Router>
            <ScrollToTop />

            <Switch>
              <Route path="/top-artists">
                <h1>Top Artists</h1>
              </Route>
              <Route path="/top-tracks">
                <h1>Top Tracks</h1>
              </Route>
              <Route path="/playlists/:id">
                <h1>Playlist</h1>
              </Route>
              <Route path="/playlists">
                <h1>Playlists</h1>
              </Route>
              <Route path="/">
                <Profile />
              </Route>
            </Switch>
          </Router>
        </>
      )}
    </div>
  );
}

export default App;

 file. Our goal is for the header to look something like this.

If we take a look at the information being displayed in this screenshot, we can see that there are five pieces of data we'll need from the Spotify API. These are the current user's:

 function, so let's use that data and give it some styles.

We're going to create a Styled Component for this, so let's create a file called 

import styled from 'styled-components/macro';

const StyledHeader = styled.header`
  display: flex;
  align-items: flex-end;
  position: relative;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  background-color: var(--grey);
  height: 30vh;
  max-height: 500px;
  min-height: 250px;

  @media (min-width: 768px) {
    min-height: 340px;
  }

  &:after {
    content: '';
    display: block;
    width: 100%;
    height: 20vh;
    background-color: var(--grey);
    background-image: linear-gradient(rgba(0,0,0,0.6), var(--black));
    position: absolute;
    top: 100%;
    z-index: -1;
  }

  .header__inner {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);

    @media (min-width: 768px) {
      padding: var(--spacing-xl) var(--spacing-xxl);
    }
  }

  img.header__img {
    width: 20%;
    max-width: 250px;
    min-width: 120px;
    margin-right: var(--spacing-lg);
    box-shadow: 0 4px 60px rgb(0 0 0 / 50%);
    background-color: var(--dark-grey);
    border-radius: ${props => props.type === 'user' ? '50%' : '0'};

    @media (min-width: 768px) {
      margin-right: var(--spacing-xl);
    }
  }

  .header__overline {
    text-transform: uppercase;
    font-size: var(--fz-xxs);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
  }

  h1.header__name {
    font-size: clamp(2.5rem, 10vw, 6rem);
    font-weight: 900;
    line-height: 1;
    margin: 0 0 var(--spacing-xs) 0;

    @media (min-width: 768px) {
      margin: 0 0 var(--spacing-xs) -5px;
    }
  }

  .header__meta {
    display: flex;
    align-items: center;
    font-size: var(--fz-sm);
    color: var(--light-grey);
    margin: 0;

    span {
      display: flex;
      align-items: center;

      &:not(:last-of-type)::after {
        content: '•';
        display: block;
        margin: 0 var(--spacing-xs);
        color: var(--light-grey);
        font-size: 8px;
      }
    }
  }
`;

export default StyledHeader;

There's nothing too fancy going on here, just some flexbox action to properly display our information and some gradients. The one notable thing you might notice is in the 

  img.header__img {
    width: 20%;
    max-width: 250px;
    min-width: 120px;
    margin-right: var(--spacing-lg);
    box-shadow: 0 4px 60px rgb(0 0 0 / 50%);
    background-color: var(--dark-grey);
    border-radius: ${props => props.type === 'user' ? '50%' : '0'};

    @media (min-width: 768px) {
      margin-right: var(--spacing-xl);
    }
  }

 property, we check if the component has a 

The reason we're doing this is because we're going to reuse this 

 component for playlist pages, and we don't want the playlist cover images to have a border radius.

export { default as GlobalStyle } from './GlobalStyle';
export { default as StyledHeader } from './StyledHeader';

import { useState, useEffect } from 'react';
import { catchErrors } from '../utils';
import { getCurrentUserProfile } from '../spotify';
import { StyledHeader } from '../styles';

const Profile = () => {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getCurrentUserProfile();
      setProfile(data);
    };

    catchErrors(fetchData());
  }, []);

  return (
    <>
      {profile && (
        <>
          <StyledHeader type="user">
            <div className="header__inner">
              {profile.images.length && profile.images[0].url && (
                <img className="header__img" src={profile.images[0].url} alt="Avatar"/>
              )}
              <div>
                <div className="header__overline">Profile</div>
                <h1 className="header__name">{profile.display_name}</h1>
                <p className="header__meta">
                  <span>
                    {profile.followers.total} Follower{profile.followers.total !== 1 ? 's' : ''}
                  </span>
                </p>
              </div>
            </div>
          </StyledHeader>
        </>
      )}
    </>
  )
};

export default Profile;

At this point, our header should look like this. Sweet! The only piece of data missing now is the number of playlists.

Unfortunately, a user's total number of playlists isn't data that is available with the 

 endpoint, so we'll have to make another API call.

 file, we'll add another function to hit the 

/**
 * Get a List of Current User's Playlists
 * https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-a-list-of-current-users-playlists
 * @returns {Promise}
 */
export const getCurrentUserPlaylists = (limit = 20) => {
  return axios.get(`/me/playlists?limit=${limit}`);
};

Then, we'll import the function into our 

import { useState, useEffect } from 'react';
import { catchErrors } from '../utils';
import { getCurrentUserProfile, getCurrentUserPlaylists } from '../spotify';
import { StyledHeader } from '../styles';

const Profile = () => {
  const [profile, setProfile] = useState(null);
  const [playlists, setPlaylists] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const userProfile = await getCurrentUserProfile();
      setProfile(userProfile.data);

      const userPlaylists = await getCurrentUserPlaylists();
      setPlaylists(userPlaylists.data);
    };

    catchErrors(fetchData());
  }, []);

Note that we've refactored the code in our 

 to accommodate handling the response of 

 property on it, which we can use to display the figure in our header. We'll add that to our JSX.

                <p className="header__meta">
                  {playlists && (
                    <span>{playlists.total} Playlist{playlists.total !== 1 ? 's' : ''}</span>
                  )}
                  <span>
                    {profile.followers.total} Follower{profile.followers.total !== 1 ? 's' : ''}
                  </span>
                </p>

Now we should see the number of playlists we have showing up in our header!

Next up, we'll build out the top artists section. Our goal is for it to look something like this.

https://api.spotify.com/v1/me/top/artists

 endpoint, which fetches the current user's top artists.

/**
 * Get a User's Top Artists and Tracks
 * https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-users-top-artists-and-tracks
 * @param {string} time_range - 'short_term' (last 4 weeks) 'medium_term' (last 6 months) or 'long_term' (calculated from several years of data and including all new data as it becomes available). Defaults to 'short_term'
 * @returns {Promise}
 */
export const getTopArtists = (time_range = 'short_term') => {
  return axios.get(`/me/top/artists?time_range=${time_range}`);
};

You'll notice that this endpoint has an optional 

 query parameter. The value of this query parameter determines the time frames in which the data is computed. According to the documentation, 

 is your entire Spotify history. We'll leverage this feature when we build out the Top Artists page!

Then, just like we did for playlists, we'll import the 

 hook. To see if our API call was successful, we'll 

Brittany Chiang

All right, so just like with the login page, we're going to create a file

called profile.js in our pages directory.

So we can use that component and render it in our home page or index route.

So if we go on over to pages and we create a profile.js file.

And then in here, it's going to look something like this.

And again, these codes and the bits are going to be available in the manuscript

But as you can see, it basically does the same thing we were doing here with

and having a useState hook with a useEffect hook here where we fetch the data.

We await it and then we set it to our state variable.

And then in here, we just render the JSX.

So once we have that, we can go on over to our pages index.js file and make

And then in our app.js file, we can add it to our list of imports from our

And then down here, all we need to do is replace this fragment with our profile

Give that a save and you can see it basically looks the same.

But one thing we're missing is that logout button we just got rid of.

So since we want the logout button to render on every single route, not just

and add that button back above our router.

And we'll make sure it has an onClick handler that calls our logout function

And while we're in here, we're going to give our logout button a few more

And we're going to create a style component for it called styled logout button.

So I'll go ahead and replace this button tag with it.

And then up here, I can just import our style components and add that styled

We can see our absolute positioning in the top right corner is being applied

and the rest kind of just looks the same.

So now let's pay attention to our profile.js file.

So if we take a look at the Spotify web player, we're basically going to be

So if we take a look at this header, there's five pieces of information that we

So that's the profile image, that's the current user's name, the number of play

lists they have, the number of followers they have,

and the number of people that are following them.

And unfortunately, we're not going to be able to display the number of people

because that data is not available on the Spotify API.

If we take a look at our current profile page, we already have the name, the

So let's head over to our styles directory and we're going to create a style

And again, feel free to copy and paste this snippet from the manuscript below.

There's Flexbox being applied to properly align and space things.

There is a header image tag that we can take a look at.

And basically, the special thing that this selector is doing is for the border

it's looking at the type prop that's being passed to the styled header style

And if that prop is equal to user, then we set the border radius to 50%,

basically making sure that the profile image is a circle.

But if the type prop is not user, then we just set it to zero.

And the reason we're doing this here is because we're going to be reusing the

styled header style component on different pages,

like for artists and playlists, and on those pages, we don't want the image to

So next, we can go to our styles in next.js file and export style header.

And then we can go back to our profile.js file and import that styled header

And then down in our return statement, we can replace this div with our styled

And as you can see, I updated the templates a little bit to conform to the

class names that we are targeting in the styled header style component.

Give that a save. And now our header should look something like this.

Cool. So now the only piece of data that we're missing in our header is the

So unfortunately, that data doesn't come back from the /me endpoint from the

So we're going to have to add another function to hit another API endpoint to

So under getCurrentUserProfile, we can add this getCurrentUserPlaylists

function, which hits the /me/playlists/spotify API endpoint.

And this endpoint gets a list of the current user's playlists.

And in the JSON response, it basically just returns a array of playlists

And as you can see, one of the query parameters on this API endpoint is a limit

So our getCurrentUserPlaylist function has a default argument of 20 for this

And then we just pass that in a query parameter in our get request.

Next, we can import this getCurrentUserPlaylists function to our profile.js

And then in our profile function, we can add another useState hook.

And we'll call this playlists and set playlists.

And then down in our use effect hook, we can just add another await function