CF

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 the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.

The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.

The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.

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

Related courses

Frequently asked questions

What is Build a Spotify Connected App about?
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…
Who teaches this course?
It is taught by Fullstack.io. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 32 lessons with a total runtime of 3 hours 47 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/build-a-spotify-connected-app. The page hosts every lesson with the integrated video player; no download is required.