Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

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

Build out and style the profile page

This page is a preview of Build a Spotify Connected App

Previous Lesson:

How to Build a Login Page in React

Next Lesson:

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

Start a new discussion. All notification go to the author.

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)