SuperHi FM

In our first project, we’ll create Brut - a brutalistic web music player that uses the Spotify API. Through Brut we’ll explore Typescript as a new way of writing JavaScript, Axios and authentication for accessing APIs, Styled Components for our CSS, and React Select as a way of creating dropdown components. Additionally, we will quickly review some of the key elements of JavaScript and React.js that we’ll be using throughout the rest of this course.

Assets

https://github.com/samnixon87/brut

Videos

Welcome to Introduction to Full Stack Javascript!

Lesson 01

Welcome to the course

Welcome to Introduction to Full Stack Javascript!

Welcome to Chapter 1, our first project! Let’s see what’s in store in this part of the course.

Lesson 02

Project intro

Welcome to Chapter 1, our first project! Let’s see what’s in store in this part of the course.

What are the options available to us when we want to quickly spin up a React.js application, and how do we choose one that will work for us?

Lesson 03

Choosing a lightweight framework to use for our application

What are the options available to us when we want to quickly spin up a React.js application, and how do we choose one that will work for us?

Navigating the various files and folders that Vite has created for us.

Lesson 04

Scaffolding out our application using Vite

Navigating the various files and folders that Vite has created for us.

A quick run-through of the basics of TypeScript and why it has grown in popularity over the last few years.

Lesson 05

What is TypeScript and why should we use it?

A quick run-through of the basics of TypeScript and why it has grown in popularity over the last few years.

Lesson 06

TypeScript playground

How can we explore the nature of TypeScript in a safe, flexible space (without having to already know how it works)? Well, TypeScript playground might help.

Thinking about the structure of our work early and often helps us create an application that others can understand. This helps with collaboration (even when we’re collaborating with our future selves) and speed of development.

Lesson 07

How should we structure our application?

Thinking about the structure of our work early and often helps us create an application that others can understand. This helps with collaboration (even when we’re collaborating with our future selves) and speed of development.

What are the components that we need and how can we map them out quickly?

Lesson 08

Sketching out a skeleton of our application and its components

What are the components that we need and how can we map them out quickly?

[An optional couple of videos on testing. Feel free to skip if you already know a lot about testing.]

Lesson 09

Testing a component using vitest

[An optional couple of videos on testing. Feel free to skip if you already know a lot about testing.]

Lesson 10

Testing a component that includes conditionally rendering

[An optional couple of videos on testing. Feel free to skip if you already know a lot about testing.]

That we have the structure for our application in place, let’s take a look at the Spotify API. How does it work? And how does Spotify know that we are trustworthy recipients of their users data? Enter: authorisation.

Lesson 11

How does authorisation work with the Spotify API?

That we have the structure for our application in place, let’s take a look at the Spotify API. How does it work? And how does Spotify know that we are trustworthy recipients of their users data? Enter: authorisation.

In order for us to access Spotify services, we’ll need to register our application in Spotify’s portal.

Lesson 12

Creating an app inside the Spotify platform

In order for us to access Spotify services, we’ll need to register our application in Spotify’s portal.

How do we protect our passwords and secrets in an application? And what’s truly secret when it’s stored on our frontend?

Lesson 13

Why should we use .env & gitignore?

How do we protect our passwords and secrets in an application? And what’s truly secret when it’s stored on our frontend?

What really goes on under the hood with authentication? And what is PKCE?

Lesson 14

How does authentication work and what is PKCE?

What really goes on under the hood with authentication? And what is PKCE?

We often need to explore our APIs or the APIs we want to use, but how can we do that without writing any code?

Lesson 15

Utilising API querying tools like Postman

We often need to explore our APIs or the APIs we want to use, but how can we do that without writing any code?

Lesson 16

Mini-refactor

A quick aside to tidy up as we go.

My profuse apologies for my profuse sweating.

Lesson 17

An aside on temperature

My profuse apologies for my profuse sweating.

How do we call an API? Axios is one (pretty nice) option for us to use, and provides an alternative to `fetch`.

Lesson 18

Calling an API using Axios

How do we call an API? Axios is one (pretty nice) option for us to use, and provides an alternative to fetch.

Getting to the meat of TypeScript, we start to want to declare interfaces and use TypeScript in a way that really starts to differentiate it from vanilla JavaScript.

Lesson 19

Declaring type interfaces and using TypeScript

Getting to the meat of TypeScript, we start to want to declare interfaces and use TypeScript in a way that really starts to differentiate it from vanilla JavaScript.

How do we write CSS-in-JS? In this lesson we’ll dive into Styled Components - one (particularly common) way to do just that in order to style our application.

Lesson 20

Styling our application using Styled-components

How do we write CSS-in-JS? In this lesson we’ll dive into Styled Components - one (particularly common) way to do just that in order to style our application.

A quick aside on one of the most common (and least descriptive) error messages you’ll come across if you’re not declaring types correctly.

Lesson 21

Typescript undefined vs null errors

A quick aside on one of the most common (and least descriptive) error messages you’ll come across if you’re not declaring types correctly.

Time to style our player and use Styled Components to start to really shape our UI.

Lesson 22

Styling our player

Time to style our player and use Styled Components to start to really shape our UI.

We want some UI that will allow users to select one of their playlists, but how do we do that? One option is to use a library like react-select to quickly get going with the a styled dropdown.

Lesson 23

Exploring dropdowns with react-select

We want some UI that will allow users to select one of their playlists, but how do we do that? One option is to use a library like react-select to quickly get going with the a styled dropdown.

Time to grab some tracks! We need to grab and store information from the Spotify API and start to feed some music data into our application.

Lesson 24

Grabbing tracks from the Spotify API

Time to grab some tracks! We need to grab and store information from the Spotify API and start to feed some music data into our application.

The Spotify SDK can be a little tricky to navigate and style, but luckily for us there are packages and libraries out there that can help. We’ll be using react-spotify-web-player to accelerate our development speed and give us some fully functioning controls.

Lesson 25

Utilising the react-spotify-web-player to help us interact with the Spotify SDK

The Spotify SDK can be a little tricky to navigate and style, but luckily for us there are packages and libraries out there that can help. We’ll be using react-spotify-web-player to accelerate our development speed and give us some fully functioning controls.

The music player has a sense of its own state and our application has a global state, so how do the two interact? And what happens when they do?

Lesson 26

Manipulating local and global Track state

The music player has a sense of its own state and our application has a global state, so how do the two interact? And what happens when they do?

Tracks, Images and the Spotify API - it was never going to be entirely straightforwards… We’re going to need to manipulate some data coming back from Spotify, but how do we do it? And how do we make sure are application has the data it needs?

Lesson 27

Grabbing track images from the Spotify API and displaying them in our player

Tracks, Images and the Spotify API - it was never going to be entirely straightforwards… We’re going to need to manipulate some data coming back from Spotify, but how do we do it? And how do we make sure are application has the data it needs?

Time to grab another piece of data from the Spotify API and plop it into our application. This time: track name.

Lesson 28

Pulling track name from our Spotify API data

Time to grab another piece of data from the Spotify API and plop it into our application. This time: track name.

Time for some dumb-fun: let’s build a ticker.

Lesson 29

Creating a ticker to crawl across our screen

Time for some dumb-fun: let’s build a ticker.

More dumb-fun! This time we’ll make a piece of text rotate using CSS and a bit of maths.

Lesson 30

How do we make text rotate using CSS?

More dumb-fun! This time we’ll make a piece of text rotate using CSS and a bit of maths.

Time to wrap-up Brut and complete our application. We left a lot of threads hanging throughout this Chapter so time to hunt them all down and make sure we leave our player in a state that will make sense to us in 6 months time.

Lesson 31

A rapid roundup of all our hanging UI threads

Time to wrap-up Brut and complete our application. We left a lot of threads hanging throughout this Chapter so time to hunt them all down and make sure we leave our player in a state that will make sense to us in 6 months time.

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!