Want some ambient music in the background? Play our radio station!
Don’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
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.
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.
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.
A quick run-through of the basics of TypeScript and why it has grown in popularity over the last few years.
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.
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.]
[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.
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?
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?
A quick aside to tidy up as we go.
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.
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.
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.
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.
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?
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.
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.
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.
A place for you to post notes about anything on this page. Only you can view your notes.
![[An optional couple of videos on testing. Feel free to skip if you already know a lot about testing.]](/_next/image?url=https%3A%2F%2Fimage.mux.com%2FiH02U6itG9LQLbZSZlBE52NhkwJVTGdji%2Fthumbnail.jpg&w=828&q=75)
![[An optional couple of videos on testing. Feel free to skip if you already know a lot about testing.]](/_next/image?url=https%3A%2F%2Fimage.mux.com%2FXtjxJ5ZF02Xc00VNeFosvpPHEi3jhYOo56%2Fthumbnail.jpg&w=828&q=75)
