Course Introduction

How to Setup a React Developer Environment with nvm

Intro & Dev Environment Setup

Module 1 Introduction

What is an API?

Okay, but what is a REST API?

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

The Basics of Express Router - Requests and Responses

Getting Started with REST APIs & Express

Module 2 Introduction

Getting Started with the Spotify Developer Dashboard

Add nodemon to an Express App to Restart Node Automatically

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

How to Implement OAuth Flow in Express and Node.js

Authentication & Authorization with Spotify

Module 3 Introduction

How to Pass OAuth Tokens to a React App

Optimize React and Express.js code with npm concurrently

Setting Up a React Front-End

Module 4 Introduction

Using Local Storage to Persist Login State

How to Fetch Spotify API Data with Credentials with Axios

How to Setup and Scaffold React Router

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

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

How to Build a Spotify Playlists Page in React

How to Build a Spotify Individual Playlist Page in React

How to Build a React Loading Animation Component

Building & Styling the UI

Module 6 Introduction

How to Change Your React Favicon and Social Preview Images

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

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

The next part of the app that we're going to work on is the Top Artists page. This is going to be an expanded version of the top artists section on the Profile page, with some buttons at the top for the user to toggle between time ranges. Let's get started!

 page component we'll work on building out in the following sections.

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

 and export it, like all the other pages.

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

import { useState, useEffect } from 'react';
import { getTopArtists } from '../spotify';
import { catchErrors } from '../utils';
import { ArtistsGrid, SectionWrapper, TimeRangeButtons } from '../components';

const TopArtists = () => {
  const [topArtists, setTopArtists] = useState(null);
  const [activeRange, setActiveRange] = useState('short');

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getTopArtists(`${activeRange}_term`);
      setTopArtists(data);
    };

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

  return (
    <main>
      <SectionWrapper title="Top Artists" breadcrumb={true}>
        <TimeRangeButtons
          activeRange={activeRange}
          setActiveRange={setActiveRange}
        />

        {topArtists && topArtists.items && (
          <ArtistsGrid artists={topArtists.items} />
        )}
      </SectionWrapper>
    </main>
  );
};

export default TopArtists;

 component is quite simple — it calls the 

 as an argument. This is what controls the time range toggle buttons.

 component to make the styles visually consistent with the rest of the site, and uses an 

 component just like on the Profile page. The only difference is that it has a 

 component at the top. We'll add this component next.

export { default as ArtistsGrid } from './ArtistsGrid';
export { default as PlaylistsGrid } from './PlaylistsGrid';
export { default as SectionWrapper } from './SectionWrapper';
export { default as TimeRangeButtons } from './TimeRangeButtons';
export { default as TrackList } from './TrackList';

import { StyledRangeButtons } from '../styles';

const TimeRangeButtons = ({ activeRange, setActiveRange }) => {
  return (
    <StyledRangeButtons>
      <li>
        <button
          className={activeRange === 'short' ? 'active' : ''}
          onClick={() => setActiveRange('short')}>
          This Month
        </button>
      </li>
      <li>
        <button
          className={activeRange === 'medium' ? 'active' : ''}
          onClick={() => setActiveRange('medium')}>
          Last 6 Months
        </button>
      </li>
      <li>
        <button
          className={activeRange === 'long' ? 'active' : ''}
          onClick={() => setActiveRange('long')}>
          All Time
        </button>
      </li>
    </StyledRangeButtons>
  );
};

export default TimeRangeButtons;

 that we'll use to set the active button and fetch the right data from the Spotify API. 

 is the function that we'll use to update the 

 state variable when users click the buttons.

export { default as GlobalStyle } from './GlobalStyle';
export { default as StyledGrid } from './StyledGrid';
export { default as StyledHeader } from './StyledHeader';
export { default as StyledRangeButtons } from './StyledRangeButtons';
export { default as StyledSection } from './StyledSection';
export { default as StyledTrackList } from './StyledTrackList';

import styled from 'styled-components/macro';

const StyledRangeButtons = styled.ul`
  display: flex;
  list-style: none;
  margin: 0 0 var(--spacing-lg) 0;
  padding: 0;

  @media (min-width: 768px) {
    position: absolute;
    top: 0;
    right: var(--spacing-xxl);
    margin-bottom: 0;
  }

  li {
    margin-right: var(--spacing-xs);

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

  button {
    background-color: var(--dark-grey);

    &:hover,
    &:focus {
      background-color: var(--grey);
    }

    &.active {
      background-color: var(--green);
    }
  }
`;

export default StyledRangeButtons;

 styled component is pretty straightforward as well. It displays a list of buttons, and adds a green background to the active button.

Voilà! We have a working Top Artists page. Next, we'll do the same song and dance for the top tracks.

Just like Top Artists, the Top Tracks page will be an expanded version of our top tracks section on the Profile page with some buttons at the top for the user to toggle between time ranges.

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

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

import { useState, useEffect } from 'react';
import { getTopTracks } from '../spotify';
import { catchErrors } from '../utils';
import { SectionWrapper, TrackList, TimeRangeButtons } from '../components';

const TopTracks = () => {
  const [topTracks, setTopTracks] = useState(null);
  const [activeRange, setActiveRange] = useState('short');

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getTopTracks(`${activeRange}_term`);
      setTopTracks(data);
    };

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

  return (
    <main>
      <SectionWrapper title="Top Tracks" breadcrumb={true}>
        <TimeRangeButtons
          activeRange={activeRange}
          setActiveRange={setActiveRange}
        />

        {topTracks && topTracks.items && (
          <TrackList tracks={topTracks.items} />
        )}
      </SectionWrapper>
    </main>
  );
};

export default TopTracks;

Boom! That's all we need to do! We've already done all of the hard work to get this page up and running, like setting up the 

 component, except for the fact that we're calling 

---
title: Top Artists & Top Tracks Pages
description: Build out and style the top artists & top tracks pages
privateVideoUrl: https://fullstack.wistia.com/medias/8bamvplq1n
isPublicLesson: true
---

## Top Artists page

The next part of the app that we're going to work on is the Top Artists page. This is going to be an expanded version of the top artists section on the Profile page, with some buttons at the top for the user to toggle between time ranges. Let's get started!

### Update Route in `Profile.js`

First, we'll update our router in our `App.js` file to use the `<TopArtists />` page component we'll work on building out in the following sections.

```js { actualFilename=./protected/src/01/App.js endLine=9 startLine=9 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/App.js#L9 }
import { Login, Profile, TopArtists } from './pages';
```

```js { actualFilename=./protected/src/01/App.js endLine=64 startLine=61 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/App.js#L61 }
            <Switch>
              <Route path="/top-artists">
                <TopArtists />
              </Route>
```

### Add `TopArtists.js` file

Now, we'll add a `TopArtists.js` file under `client/src/pages` and export it, like all the other pages.

```js { actualFilename=./protected/src/01/pages/index.js endChar=146 endLine=4 startChar=0 startLine=1 statedFilename=client/src/pages/index.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/pages/index.js }
export { default as Login } from './Login';
export { default as Profile } from './Profile';
export { default as TopArtists } from './TopArtists';
```

```js { actualFilename=./protected/src/01/pages/TopArtists.js endChar=940 endLine=36 startChar=0 startLine=1 statedFilename=client/src/pages/TopArtists.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/pages/TopArtists.js }
import { useState, useEffect } from 'react';
import { getTopArtists } from '../spotify';
import { catchErrors } from '../utils';
import { ArtistsGrid, SectionWrapper, TimeRangeButtons } from '../components';

const TopArtists = () => {
  const [topArtists, setTopArtists] = useState(null);
  const [activeRange, setActiveRange] = useState('short');

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getTopArtists(`${activeRange}_term`);
      setTopArtists(data);
    };

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

  return (
    <main>
      <SectionWrapper title="Top Artists" breadcrumb={true}>
        <TimeRangeButtons
          activeRange={activeRange}
          setActiveRange={setActiveRange}
        />

        {topArtists && topArtists.items && (
          <ArtistsGrid artists={topArtists.items} />
        )}
      </SectionWrapper>
    </main>
  );
};

export default TopArtists;
```

Our `<TopArtists />` component is quite simple — it calls the `getTopArtists()` function from our `spotify.js` file, and passes `${activeRange}_term` as an argument. This is what controls the time range toggle buttons.

In the template, it has a `<SectionWrapper>` component to make the styles visually consistent with the rest of the site, and uses an `<ArtistsGrid>` component just like on the Profile page. The only difference is that it has a `<TimeRangeButtons />` component at the top. We'll add this component next.

### Add `TimeRangeButtons` component

Under `client/src/components`, we'll now add a `TimeRangeButtons.js` file and export it.

```js { actualFilename=./protected/src/01/components/index.js endChar=296 endLine=6 startChar=0 startLine=1 statedFilename=client/src/components/index.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/components/index.js }
export { default as ArtistsGrid } from './ArtistsGrid';
export { default as PlaylistsGrid } from './PlaylistsGrid';
export { default as SectionWrapper } from './SectionWrapper';
export { default as TimeRangeButtons } from './TimeRangeButtons';
export { default as TrackList } from './TrackList';
```

```js { actualFilename=./protected/src/01/components/TimeRangeButtons.js endChar=791 endLine=32 startChar=0 startLine=1 statedFilename=client/src/components/TimeRangeButtons.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/components/TimeRangeButtons.js }
import { StyledRangeButtons } from '../styles';

const TimeRangeButtons = ({ activeRange, setActiveRange }) => {
  return (
    <StyledRangeButtons>
      <li>
        <button
          className={activeRange === 'short' ? 'active' : ''}
          onClick={() => setActiveRange('short')}>
          This Month
        </button>
      </li>
      <li>
        <button
          className={activeRange === 'medium' ? 'active' : ''}
          onClick={() => setActiveRange('medium')}>
          Last 6 Months
        </button>
      </li>
      <li>
        <button
          className={activeRange === 'long' ? 'active' : ''}
          onClick={() => setActiveRange('long')}>
          All Time
        </button>
      </li>
    </StyledRangeButtons>
  );
};

export default TimeRangeButtons;
```

This component takes two props: `activeRange` and `setActiveRange`. `activeRange` is a string that's either `short`, `medium`, or `long` that we'll use to set the active button and fetch the right data from the Spotify API. `setActiveRange` is the function that we'll use to update the `activeRange` state variable when users click the buttons.

### Add button styles

Next, we'll add the corresponding `StyledRangeButtons` Styled Component under `client/src/styles`.

```js { actualFilename=./protected/src/01/styles/index.js endChar=362 endLine=7 startChar=0 startLine=1 statedFilename=client/src/styles/index.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/styles/index.js }
export { default as GlobalStyle } from './GlobalStyle';
export { default as StyledGrid } from './StyledGrid';
export { default as StyledHeader } from './StyledHeader';
export { default as StyledRangeButtons } from './StyledRangeButtons';
export { default as StyledSection } from './StyledSection';
export { default as StyledTrackList } from './StyledTrackList';
```

```js { actualFilename=./protected/src/01/styles/StyledRangeButtons.js endChar=670 endLine=40 startChar=0 startLine=1 statedFilename=client/src/styles/StyledRangeButtons.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/01/styles/StyledRangeButtons.js }
import styled from 'styled-components/macro';

const StyledRangeButtons = styled.ul`
  display: flex;
  list-style: none;
  margin: 0 0 var(--spacing-lg) 0;
  padding: 0;

  @media (min-width: 768px) {
    position: absolute;
    top: 0;
    right: var(--spacing-xxl);
    margin-bottom: 0;
  }

  li {
    margin-right: var(--spacing-xs);

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

  button {
    background-color: var(--dark-grey);

    &:hover,
    &:focus {
      background-color: var(--grey);
    }

    &.active {
      background-color: var(--green);
    }
  }
`;

export default StyledRangeButtons;
```

The `StyledRangeButtons` styled component is pretty straightforward as well. It displays a list of buttons, and adds a green background to the active button.

Voilà! We have a working Top Artists page. Next, we'll do the same song and dance for the top tracks.

## Top Tracks page

Just like Top Artists, the Top Tracks page will be an expanded version of our top tracks section on the Profile page with some buttons at the top for the user to toggle between time ranges.

### Update Route in `Profile.js`

First, we'll update our router in our `App.js` file to use the `<TopTracks />` page component we'll work on building out in the following sections.

```js { actualFilename=./protected/src/02/App.js endLine=9 startLine=9 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/02/App.js#L9 }
import { Login, Profile, TopArtists, TopTracks } from './pages';
```

```js { actualFilename=./protected/src/02/App.js endLine=67 startLine=61 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/02/App.js#L61 }
            <Switch>
              <Route path="/top-artists">
                <TopArtists />
              </Route>
              <Route path="/top-tracks">
                <TopTracks />
              </Route>
```

### Add `TopTracks.js` file

Now, we'll add a `TopTracks.js` file under `client/src/pages` and export it from the `index.js` file like all of the other pages.

```js { actualFilename=./protected/src/02/pages/index.js endChar=198 endLine=5 startChar=0 startLine=1 statedFilename=client/src/pages/index.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/02/pages/index.js }
export { default as Login } from './Login';
export { default as Profile } from './Profile';
export { default as TopArtists } from './TopArtists';
export { default as TopTracks } from './TopTracks';
```

```js { actualFilename=./protected/src/02/pages/TopTracks.js endChar=924 endLine=36 startChar=0 startLine=1 statedFilename=client/src/pages/TopTracks.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.03/protected/src/02/pages/TopTracks.js }
import { useState, useEffect } from 'react';
import { getTopTracks } from '../spotify';
import { catchErrors } from '../utils';
import { SectionWrapper, TrackList, TimeRangeButtons } from '../components';

const TopTracks = () => {
  const [topTracks, setTopTracks] = useState(null);
  const [activeRange, setActiveRange] = useState('short');

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getTopTracks(`${activeRange}_term`);
      setTopTracks(data);
    };

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

  return (
    <main>
      <SectionWrapper title="Top Tracks" breadcrumb={true}>
        <TimeRangeButtons
          activeRange={activeRange}
          setActiveRange={setActiveRange}
        />

        {topTracks && topTracks.items && (
          <TrackList tracks={topTracks.items} />
        )}
      </SectionWrapper>
    </main>
  );
};

export default TopTracks;
```

Boom! That's all we need to do! We've already done all of the hard work to get this page up and running, like setting up the `<TrackList>` and `<TimeRangeButtons />` components.

The `<TopTracks>` component is nearly identical to the `<TopArtists>` component, except for the fact that we're calling `getTopTracks()` instead of `getTopArtists()` and displaying each track with the `<TrackList>` component.


Build out and style the top artists & top tracks pages

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Build a Spotify Connected App

Module 1: Intro & Dev Environment Setup

Introduction:

Start Here

Introduction: (6:46)

Course Introduction

Lesson 1: (6:19)

How to Setup a React Developer Environment with nvm

Module 2: Getting Started with REST APIs & Express

Introduction: (1:04)

Module 1 Introduction

Lesson 1: (4:09)

What is an API?

Lesson 2: (9:38)

Okay, but what is a REST API?

Lesson 3: (3:57)

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

Lesson 4: (5:27)

The Basics of Express Router - Requests and Responses

Module 3: Authentication & Authorization with Spotify

Introduction: (0:55)

Module 2 Introduction

Lesson 1: (3:16)

Getting Started with the Spotify Developer Dashboard

Lesson 2: (2:54)

Add nodemon to an Express App to Restart Node Automatically

Lesson 3: (8:56)

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

Lesson 4: (20:00)

How to Implement OAuth Flow in Express and Node.js

Module 4: Setting Up a React Front-End

Introduction: (0:57)

Module 3 Introduction

Lesson 1: (7:59)

How to Pass OAuth Tokens to a React App

Lesson 2: (6:32)

Optimize React and Express.js code with npm concurrently

Module 5: Login State & Front-End Scaffolding

Introduction: (1:18)

Module 4 Introduction

Lesson 1: (13:10)

Using Local Storage to Persist Login State

Lesson 2: (7:11)

How to Fetch Spotify API Data with Credentials with Axios

Lesson 3: (4:18)

How to Setup and Scaffold React Router

Lesson 4: (14:43)

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

Module 6: Building & Styling the UI

Introduction: (1:12)

Module 5 Introduction

Lesson 1: (2:03)

How to Build a Login Page in React

Lesson 2: (24:33)

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

Lesson 3: (14:59)

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

Lesson 4: (11:11)

How to Build a Spotify Playlists Page in React

Lesson 5: (16:50)

How to Build a Spotify Individual Playlist Page in React

Lesson 6: (3:49)

How to Build a React Loading Animation Component

Module 7: Deploying to the Internet

Introduction: (0:39)

Module 6 Introduction

Lesson 1: (5:52)

How to Change Your React Favicon and Social Preview Images

Lesson 2: (12:36)

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

Lesson 3: (1:43)

How to Add a README.md File to React

Module 8: Course Wrap Up

Lesson 1: (1:59)