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

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

Now that we've set up local storage, to keep our users "logged in" to Spotify in our app, let's try using the access token from local storage to fetch data from the Spotify API, and display it on the front end.

In this lesson, we'll update our React app to asynchronously fetch Spotify data in a 

 hook and display that data in our template.

Adding a function to fetch Spotify profile data

First, let's add some global axios defaults to our 

/**
 * Axios global request headers
 * https://github.com/axios/axios#global-axios-defaults
 */
axios.defaults.baseURL = 'https://api.spotify.com/v1';
axios.defaults.headers['Authorization'] = `Bearer ${accessToken}`;
axios.defaults.headers['Content-Type'] = 'application/json';

In the snippet above, we set the base URL and the HTTP request headers for every HTTP request we make with axios. These configs are super convenient for keeping our code clean — we won't have to worry about including them each time we make a request with axios. Note that the 

 in the Authorization header is the OAuth access token we retrieved from local storage.

 endpoint to get the current logged-in user's profile.

/**
 * Get Current User's Profile
 * https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-current-users-profile
 * @returns {Promise}
 */
export const getCurrentUserProfile = () => axios.get('/me');

Note that since we set the base URL globally, the URL we use for our axios request only needs to be 

Fetching and setting async data in useEffect

 function from our spotify.js file and add a 

 hook to keep track of the data it returns.

import { useState, useEffect } from 'react';
import { accessToken, logout, getCurrentUserProfile } from './spotify';
import './App.css';

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

  useEffect(() => {
    setToken(accessToken);

    const fetchData = async () => {
      try {
        const { data } = await getCurrentUserProfile();
        setProfile(data);
      } catch(e) {
        console.error(e);
      }
    };

    fetchData();
  }, []);

---
title: How to Fetch Spotify API Data with Credentials with Axios
description: Use axios to send a request to the Spotify Web API and render response data on the front end
privateVideoUrl: https://fullstack.wistia.com/medias/5se3ognr4s
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/brittany-chiang-build-a-spotify-connected-app-app/-/tree/main/code/module_05/lesson_05.02/protected/src
---

Now that we've set up local storage, to keep our users "logged in" to Spotify in our app, let's try using the access token from local storage to fetch data from the Spotify API, and display it on the front end.

In this lesson, we'll update our React app to asynchronously fetch Spotify data in a `useEffect` hook and display that data in our template.

## Adding a function to fetch Spotify profile data

First, let's add some global axios defaults to our `spotify.js` file.

```js { actualFilename=./protected/src/client/spotify.js endLine=126 startLine=120 statedFilename=client/src/spotify.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.02/protected/src/client/spotify.js#L120 }
/**
 * Axios global request headers
 * https://github.com/axios/axios#global-axios-defaults
 */
axios.defaults.baseURL = 'https://api.spotify.com/v1';
axios.defaults.headers['Authorization'] = `Bearer ${accessToken}`;
axios.defaults.headers['Content-Type'] = 'application/json';
```

In the snippet above, we set the base URL and the HTTP request headers for every HTTP request we make with axios. These configs are super convenient for keeping our code clean — we won't have to worry about including them each time we make a request with axios. Note that the `accessToken` in the Authorization header is the OAuth access token we retrieved from local storage.

Next, we'll add a function that makes a `GET` request to the `https://api.spotify.com/v1/me` endpoint to get the current logged-in user's profile.

```js { actualFilename=./protected/src/client/spotify.js endLine=133 startLine=128 statedFilename=client/src/spotify.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.02/protected/src/client/spotify.js#L128 }
/**
 * Get Current User's Profile
 * https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-current-users-profile
 * @returns {Promise}
 */
export const getCurrentUserProfile = () => axios.get('/me');
```

Note that since we set the base URL globally, the URL we use for our axios request only needs to be `/me`, not `https://api.spotify.com/v1/me`.

## Fetching and setting async data in useEffect

In our `App.js` file, we can then import the `getCurrentUserProfile()` function from our spotify.js file and add a `useState` hook to keep track of the data it returns.

```js { actualFilename=./protected/src/client/01/App.js endLine=22 startLine=1 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.02/protected/src/client/01/App.js }
import { useState, useEffect } from 'react';
import { accessToken, logout, getCurrentUserProfile } from './spotify';
import './App.css';

Brittany Chiang

Okay, so now that we've set up local storage to keep our users logged in to

let's try using the access token we have in local storage to fetch data from

the Spotify API and display it on the front end.

In this lesson, we're going to update our React app to asynchronously fetch

Spotify data and a use effect hook and display that data in our template.

First, let's add some global Axios defaults to our Spotify.js file.

We'll scroll down below our get access token function and add the following.

Here, we set the base URL and HTTP request headers for every HTTP request we

These configs are super convenient for keeping our code clean. We won't have to

worry about including them each time we make a request with Axios.

Note that the access token in the authorization header is the OAuth access

Next, we'll add a function that makes a get request to Spotify's /me endpoint

So, note that since we set the base URL globally, we don't need to spell out

Next, we can head back on over to our app.js file and import this getCurrent

Then, we can add another useState hook to keep track of the data it returns.

Next, in the use effect hook, I want to call the getCurrentUserProfile function

and set that to our profile state variable.

So here, I will create an asynchronous function called fetchData.

And in here, since getCurrentUserProfile returns a promise, I want to use a try

And in the try block here, I want to await the getCurrentUserProfile function.

And since we're using Axios, remember that the JSON data that is returned from

the Spotify API endpoint is a property called data on the response object.

So I can just destructure that here. And then I will set the data to our

Alright, so if we hit log into Spotify, and we can see we're logged in now, and

then the data we get back is the JSON data that we want.

Let's go ahead and use this data to display some information in our template.

So if we take a look at our JSON data here, we have things called display name,

we have an email, we have images, which is the profile image of my Spotify

And we have a bunch of other things. So let's head down to our logged in state,

and under our button, we can do a ternary and say profile and an.

So once the profile state variable is not null, we will render the following.

Maybe we'll have an H1, say profile.displayName.

After that, maybe we'll have the number of followers we have.

So here you can see I have a total of 25 followers.

And if we take a look at the error here, it says we have to make sure there's

So we can go here and just wrap this in a div.

And then maybe after this, I can make sure that we render a profile image as

And if the first item in the images array has a URL, we'll render an image tag

And it looks like all of the data came through.

So if we scroll back up to our use effect hook here, you may notice that we're

wrapping our async function in a try catch block.

And that's because we want to make sure if there's any errors when awaiting

And turns out there's a way we can dry this up a bit and we can do that with a

So higher order functions are functions that operate on other functions either

by taking them as arguments or by returning them.

And in our case, our higher order function is going to take an asynchronous

function, in this case fetch data, as an argument and wrap our asynchronous

So if we head on over to our client directory and we create a utils.js file.

And in here, we'll add our catch errors, higher order function, which takes a

function as an argument and returns a function, which returns a function that

Then in our app.js file, we can import this catch errors function and wrap our

So first we'll go up here and say import catch errors from utils.

And then down here in our use effect hook, we can get rid of this try catch

And instead wrap this fetch data invocation in a catch errors, our order

Cool, so this is a pattern we're going to be using frequently as we build out

the other parts of our app. So keep it in mind.