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

The other part of the tech stack we need to set up is styling. In this course, we'll be using a CSS-in-JS library called 

We could certainly use plain CSS or Sass to write styles, but the advantage of Styled Components is that it meshes well with React and provides an easy way for us to control styles with our React code if we need to. It also conveniently provides a few key features out-of-the-box for free, such as automatic critical CSS and automatic vendor prefixing.

So what exactly does CSS-in-JS mean? It's pretty self-explanatory — you can write CSS in your JavaScript files! With Styled Components, we can do something like this:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

const MyComponent = () => {
  return (
    <StyledButton>I’m Blue</StyledButton>
  );
};

export default MyComponent;

It lets us create React components with styles automatically scoped to each component. The styles for these components are written using tagged template literals (the backticks), and there's no special syntax required — simply write plain CSS or SCSS just like you would in a 

) with a blue background and white text. We can add the 

 component directly in our JSX like any other React component.

Adapting Styled Components based on props

Since Styled Components are just React components with styles attached to them, we can pass them props, and adapt our styles based on the value of those props.

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.isActive ? 'red' : 'blue'};
  color: white;
  padding: 10px;
`;

const MyComponent = () => {
  return (
    <StyledButton isActive={true}>I’m Red</StyledButton>
  );
};

export default MyComponent;

As you can see, since this is technically all JavaScript, we can take advantage of the template literal to access the 

 and change the background color to red when the prop is truthy. There are a ton of different things you can do with Styled Components, and I'd encourage you to poke around the 

 to see the different possibilities before moving on.

Before we dive into installing and using Styled Components in our app, there are a few things you should keep in mind.

First, Styled Components is not an "all-or-nothing" styling library. You can use it a little, or use it a lot. For example, you 

 wrap your whole app in one giant styled component and write all of your styles in that one component, but that would kind of defeat the purpose. You could also be on the opposite end of the spectrum and have every single element in your templates as a Styled Component, but that would also become hard to manage very quickly.

I've found that there can be a happy medium — creating Styled Components for styles that are frequently repeated, and targeting classes within them. We'll use our best judgment on whether or not to keep those Styled Component declarations within a React component's file, or split it out into a separate file. At the end of the day, it's up to us developers to make the right judgment call on how to organize our styles in a way that is both maintainable and easy for others to understand.

Second, I've found that Styled Components can get quite confusing for those who aren't familiar with them. Writing JSX in React is already funky as-is, and adding Styled Components on top of that can make a codebase hard to read very quickly. So, to easily distinguish between actual React components and Styled Components, we'll be prefixing all Styled Component names with 

. For example, instead of naming a Styled Component 

Let's get Styled Components installed and configured in our app! In the 

cd client && npm install --save styled-components

, which gives us some nice development benefits like more legible class names, server-side rendering compatibility, smaller bundles, and more.

npm install --save-dev babel-plugin-styled-components

To activate the Babel plugin, create a Babel config at the root of the 

{
  "plugins": ["babel-plugin-styled-components"]
}

 to make sure the Babel plugin works with our Create React App setup.

npm install --save-dev babel-plugin-macros

 back to the root of the project and restart the server.

Now, let's try creating our first Styled Component! At the top of the 

import styled from 'styled-components/macro';

const StyledLoginButton = styled.a`
  background-color: green;
  color: white;
  padding: 10px 20px;
  margin: 20px auto;
  border-radius: 30px;
  display: inline-block;
`;

 so that our button will technically be an anchor link.

 statement, we'll replace our plain login 

  return (
    <div className="App">
      <header className="App-header">
        {!token ? (
          <StyledLoginButton href="http://localhost:8888/login">
            Log in to Spotify
          </StyledLoginButton>
        ) : (

---
title: Beginner's Guide to Styled Components in React [with examples]
description: Install and configure Styled Components in our React app
privateVideoUrl: https://fullstack.wistia.com/medias/olu6cgjjrc
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.04/protected/src
---



The other part of the tech stack we need to set up is styling. In this course, we'll be using a CSS-in-JS library called [Styled Components](https://styled-components.com/) to style our UI.

We could certainly use plain CSS or Sass to write styles, but the advantage of Styled Components is that it meshes well with React and provides an easy way for us to control styles with our React code if we need to. It also conveniently provides a few key features out-of-the-box for free, such as automatic critical CSS and automatic vendor prefixing.

## How does Styled Components work?

So what exactly does CSS-in-JS mean? It's pretty self-explanatory — you can write CSS in your JavaScript files! With Styled Components, we can do something like this:

```jsx
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

const MyComponent = () => {
  return (
    <StyledButton>I’m Blue</StyledButton>
  );
};

export default MyComponent;
```

It lets us create React components with styles automatically scoped to each component. The styles for these components are written using tagged template literals (the backticks), and there's no special syntax required — simply write plain CSS or SCSS just like you would in a `.css` or `.scss` file.

In the example above, the `<StyledButton>` component renders a `<button>` HTML element (declared with `styled.button`) with a blue background and white text. We can add the `<StyledButton>` component directly in our JSX like any other React component.

### Adapting Styled Components based on props

Since Styled Components are just React components with styles attached to them, we can pass them props, and adapt our styles based on the value of those props.

```jsx
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.isActive ? 'red' : 'blue'};
  color: white;
  padding: 10px;
`;

const MyComponent = () => {
  return (
    <StyledButton isActive={true}>I’m Red</StyledButton>
  );
};

export default MyComponent;
```

As you can see, since this is technically all JavaScript, we can take advantage of the template literal to access the `isActive` prop on the `<StyledButton>` and change the background color to red when the prop is truthy. There are a ton of different things you can do with Styled Components, and I'd encourage you to poke around the [documentation](https://styled-components.com/docs) to see the different possibilities before moving on.

### A few things to note

Before we dive into installing and using Styled Components in our app, there are a few things you should keep in mind.

First, Styled Components is not an "all-or-nothing" styling library. You can use it a little, or use it a lot. For example, you _could_ wrap your whole app in one giant styled component and write all of your styles in that one component, but that would kind of defeat the purpose. You could also be on the opposite end of the spectrum and have every single element in your templates as a Styled Component, but that would also become hard to manage very quickly.

I've found that there can be a happy medium — creating Styled Components for styles that are frequently repeated, and targeting classes within them. We'll use our best judgment on whether or not to keep those Styled Component declarations within a React component's file, or split it out into a separate file. At the end of the day, it's up to us developers to make the right judgment call on how to organize our styles in a way that is both maintainable and easy for others to understand.

Second, I've found that Styled Components can get quite confusing for those who aren't familiar with them. Writing JSX in React is already funky as-is, and adding Styled Components on top of that can make a codebase hard to read very quickly. So, to easily distinguish between actual React components and Styled Components, we'll be prefixing all Styled Component names with `Styled`. For example, instead of naming a Styled Component `<Button>`, we'll name it `<StyledButton>`.

## Installing Styled Components

Let's get Styled Components installed and configured in our app! In the `client` directory, install the npm module.

```shell
cd client && npm install --save styled-components
```

Then, also install the [Styled Components Babel plugin](https://github.com/styled-components/babel-plugin-styled-components), which gives us some nice development benefits like more legible class names, server-side rendering compatibility, smaller bundles, and more.

```shell
npm install --save-dev babel-plugin-styled-components
```

To activate the Babel plugin, create a Babel config at the root of the `client` directory and add a `.babelrc` file and add the following:

```json { actualFilename=./protected/src/client/.babelrc endChar=52 endLine=4 startChar=0 startLine=1 statedFilename=client/.babelrc url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.04/protected/src/client/.babelrc }
{
  "plugins": ["babel-plugin-styled-components"]
}
```

Then, let's also install the [Babel macro](https://styled-components.com/docs/tooling#babel-macro) to make sure the Babel plugin works with our Create React App setup.

```shell
npm install --save-dev babel-plugin-macros
```

After all of that, make sure to `cd` back to the root of the project and restart the server.

```shell
cd ../
npm start
```

## Our first Styled Component

Now, let's try creating our first Styled Component! At the top of the `App.js` file, remove the `App.css` import and import `styled-components` instead.

```js { actualFilename=./protected/src/client/01/App.js endLine=10 startLine=10 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.04/protected/src/client/01/App.js#L10 }
import styled from 'styled-components/macro';
```

Note that we're importing from `styled-components/macro` instead of just `styled-components`, to take advantage of the Babel plugin.

After that, we'll create a simple `StyledLoginButton` Styled Component for our login button.

```js { actualFilename=./protected/src/client/01/App.js endLine=19 startLine=12 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.04/protected/src/client/01/App.js#L12 }
const StyledLoginButton = styled.a`
  background-color: green;
  color: white;
  padding: 10px 20px;
  margin: 20px auto;
  border-radius: 30px;
  display: inline-block;
`;
```

Note that we're using a `styled.a` so that our button will technically be an anchor link.

Down in our `return()` statement, we'll replace our plain login `<a>` tag with our new `<StyledLoginButton>`.

```js { actualFilename=./protected/src/client/01/App.js endLine=55 startLine=48 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.04/protected/src/client/01/App.js#L48 }
  return (
    <div className="App">
      <header className="App-header">
        {!token ? (
          <StyledLoginButton href="http://localhost:8888/login">
            Log in to Spotify
          </StyledLoginButton>
        ) : (
```

To see the `<StyledLoginButton>` in action, simply log out by clicking the logout button. If you see something like this, we're in business!

![Styled Login Button](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_05/lesson_05.04/public/assets/login-button.png)

If you pop open the dev tools, you should also be able to see the anchor link with the `StyledLoginButton` name in the class, prefixed by the React component it was declared in (`App`).

![Styled Component in DOM](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_05/lesson_05.04/public/assets/dev-tools.png)

:::tip

If you're using VSCode, make sure to add the [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components) extension for syntax highlighting.

:::

## Global styles

At this point, you might be asking yourself, "If styles are scoped to each component, how do we apply styles globally? Do we have a styled component for the `<body>` tag"? The answer is no — Styled Components has something called [`createGlobalStyle`](https://styled-components.com/docs/api#createglobalstyle) for this, that generates a special Styled Component that handles global styles.