Skip to main content

Build a Spotify Connected App

3h 47m 28s
English
Paid

Unlock the power of Spotify data by learning how to build a full-stack web app using Node.js, React, Styled Components, and the Spotify Web API. Visualize your personalized Spotify data like never before!

Dive into Your Spotify Data

Have you ever wondered what your Spotify data looks like? How your annual listening habits summary is compiled? Or have you wished for a look at the metadata of your favorite tracks? Spotify provides access to a wealth of fascinating data via the Spotify API. You can explore data on users’ top tracks and artists as well as audio features like danceability and tempo for every track.

Why Choose This Course

To access personalized Spotify data, your app must be authorized by Spotify, requiring the implementation of OAuth. This course provides a comprehensive guide through the OAuth flow in a way that is easy to follow. While other online tutorials might leave gaps, this course offers full explanations from the basics of REST APIs to implementing Spotify's OAuth flow and fetching data using React hooks. Organized into seven modules, each lesson is filled with clear instructions and complete code examples. By the course's end, you'll have a fully deployed app you can share and add to your portfolio.

What We'll Build Together

Front-End Development

On the front end, we’ll create a professional, responsive user interface using React, React Hooks, and the popular CSS-in-JS library, Styled Components. We will utilize modern ES6 async/await methods to fetch data from the Spotify API and present it in an engaging format.

Back-End Development

On the back end, you will learn about REST APIs, HTTP requests, and OAuth. We will demystify the process of authorizing an app with Spotify, and subsequently build a Node server using the Express framework to manage authentication requests. The course culminates with deploying your app to the internet using Heroku.

About the Author: fullstack.io

fullstack.io thumbnail
Fullstack.io is a resource with good books on js frameworks Angular, React.js, React and Vue.js. The high quality of material presentation distinguishes Fullstack.io among many others on the Internet.

Watch Online 32 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 32 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (32)
#Lesson TitleDurationAccess
1
Course Introduction Demo
06:47
2
Development Environment Setup
06:20
3
Module 1 Introduction
01:05
4
What is an API?
04:10
5
Okay, but what is a REST API?
09:39
6
Getting Started with Express
03:58
7
Basics of Express Route Handling
05:28
8
Module 2 Introduction
00:56
9
Getting Started with the Spotify Developer Dashboard
03:17
10
Adding nodemon
02:55
11
Understanding OAuth
08:57
12
Implementing the Authorization Code Flow
20:01
13
Module 3 Introduction
00:58
14
Create React App & Passing Tokens
08:00
15
Optimizing Client/Server Development Workflow
06:33
16
Module 4 Introduction
01:19
17
Using Local Storage to Persist Login State
13:11
18
Fetching & Displaying Data From Spotify
07:12
19
Setting Up React Router
04:20
20
Setting Up Styled Components
14:44
21
Module 5 Introduction
01:13
22
Login Page
02:04
23
Profile Page
24:34
24
Top Artists & Top Tracks Pages
15:00
25
Playlists Page
11:12
26
Individual Playlist Page
16:51
27
Loading Animation
03:50
28
Module 6 Introduction
00:40
29
Updating Favicons & Share Image
05:53
30
Deploying With Heroku
12:37
31
Adding a README
01:44
32
Wrapping Up What We’ve Learned
02:00
Unlock unlimited learning

Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription