SuperHi FM

Search:

Catalog Cart About Sign in

Search:

Catalog Cart About Sign in

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

INTERMEDIATECOURSE

Intro to Full Stack Javascript

An intermediate-level, 12 hour JavaScript and React.js course designed for budding full stack developers and folks who want to build big things.

Taught by

Sam Nixon

Create full stack applications using JavaScript and React.js. This project-based, 12 hour course takes you through the development of complex web experiences using JavaScript and React.js.

Learn how to use and combine different parts of the JavaScript and React ecosystems to turn your ideas into dynamic, fully-fledged applications.

In this course, Sam Nixon teaches you the skills needed to make full stack Javascript applications using React, Node.js, Vite, Typescript and databases like AWS, MySQL and MongoDB. You'll build your own frontends and backends, construct APIs, authenticate users into your applications, and persist data in databases.

Chapter 01

Chapter 1 - Brut

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!

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?

Go to chapter

Chapter 02

Chapter 2A - Notes

In our second project, we’ll be building a full stack, wallet-style notes app that will allows us to store text. This project is a big undertaking, so we’ll split the task into two parts. In part A, we’ll use starter code to get a head start on the frontend of our application then experiment with animation using react-spring, forms using Formik and we’ll explore how we can organise our workflow and code to make it easier for others to work with us.

Welcome to Chapter 2! Let’s see what’s in store in this part of the course.

Lesson 01

Intro

Welcome to Chapter 2! Let’s see what’s in store in this part of the course.

What do we look for when we’re developing a full stack application? How do we critically review a design from an engineering point of view?

Lesson 02

Starting with the design and making some development choices

What do we look for when we’re developing a full stack application? How do we critically review a design from an engineering point of view?

This time around, some code has been written for us so we can dive into the juicier elements of designing our Notes app. Let’s take a look around to familiarise ourselves.

Lesson 03

Finding your way around the starter files

This time around, some code has been written for us so we can dive into the juicier elements of designing our Notes app. Let’s take a look around to familiarise ourselves.

Go to chapter

Chapter 03

Chapter 2B - Notes

Picking up where we left off at the end of Chapter 2A, in this Chapter we’ll finish our wallet-style notes app. We’ll build a backend that persists data, stores it in a cloud database and exposes that data via an API. To do that, we’ll be learning about MongoDB, Node.js and Express. Then we’ll connect our frontend and backend together using custom React hooks to create a fully-fledged notes app.

We start the backend section of this chapter with a blank page! But where do we begin? What do we need to decide upon at this point?

Lesson 01

Where do we begin with the backend?

We start the backend section of this chapter with a blank page! But where do we begin? What do we need to decide upon at this point?

Let’s get started with Node and Express - a ubiquitous combination that you’ll often find in full stack JavaScript applications.

Lesson 02

Setting up our server using Node and Express

Let’s get started with Node and Express - a ubiquitous combination that you’ll often find in full stack JavaScript applications.

Our server files aren’t really cleanly separated and may soon get fairly bloated. One common pattern may help us here.

Lesson 03

Separating application and index files

Our server files aren’t really cleanly separated and may soon get fairly bloated. One common pattern may help us here.

Go to chapter

Chapter 04

Chapter 3 - Careful

In the final project of this course, we’ll build Careful - an application that lets healthcare workers view detailed records of the patients they are looking after. We’ll pull data from an Amazon Web Services (AWS) database, build out a Node.js backend and connect it to that database using Sequelize, then dive into building our own authenticated API to protect that data. Last but not least, we’ll refactor our code to use the Zustand state management library to ensure that the applications state is clear and well-handled.

Welcome to Chapter 3, the final project! Let’s see what’s in store in this part of the course.

Lesson 01

Intro

Welcome to Chapter 3, the final project! Let’s see what’s in store in this part of the course.

Where do we start when we approach an application that has been written by someone else and when our domain has been constrained? How do we make sure we have an impact on the areas that we’re meant to be concerned about, without neglecting areas where we feel we can make improvements?

Lesson 02

Where do we begin?

Where do we start when we approach an application that has been written by someone else and when our domain has been constrained? How do we make sure we have an impact on the areas that we’re meant to be concerned about, without neglecting areas where we feel we can make improvements?

What are the key pieces we’ll need to think about when interacting with an AWS database? What is it written in? How do you access it?

Lesson 03

Getting our heads around AWS, MySQL, and ORMs

What are the key pieces we’ll need to think about when interacting with an AWS database? What is it written in? How do you access it?

Go to chapter

Get access to Intro to Full Stack Javascript

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Sam Nixon

Full Stack Engineer + Product Manager

Sam is a Full Stack Engineer and Product Manager who has built products that reach millions and taught web development and product management to people around the world. In this course, he will show you the wide world of React and JavaScript and build your confidence with making complex applications.

With support from...

Louise Bishop

Senior Learning Designer

Paras Memon

Senior Learning Designer

Course structure

Chapter 01

Chapter 1 - Brut

Lesson 01
Welcome to the course
Lesson 02
Project intro
Lesson 03
Choosing a lightweight framework to use for our application
Lesson 04
Scaffolding out our application using Vite
Lesson 05
What is TypeScript and why should we use it?
Lesson 06
TypeScript playground
Lesson 07
How should we structure our application?
Lesson 08
Sketching out a skeleton of our application and its components
Lesson 09
Testing a component using vitest
Lesson 10
Testing a component that includes conditionally rendering
Lesson 11
How does authorisation work with the Spotify API?
Lesson 12
Creating an app inside the Spotify platform
Lesson 13
Why should we use .env & gitignore?
Lesson 14
How does authentication work and what is PKCE?
Lesson 15
Utilising API querying tools like Postman
Lesson 16
Mini-refactor
Lesson 17
An aside on temperature
Lesson 18
Calling an API using Axios
Lesson 19
Declaring type interfaces and using TypeScript
Lesson 20
Styling our application using Styled-components
Lesson 21
Typescript undefined vs null errors
Lesson 22
Styling our player
Lesson 23
Exploring dropdowns with react-select
Lesson 24
Grabbing tracks from the Spotify API
Lesson 25
Utilising the react-spotify-web-player to help us interact with the Spotify SDK
Lesson 26
Manipulating local and global Track state
Lesson 27
Grabbing track images from the Spotify API and displaying them in our player
Lesson 28
Pulling track name from our Spotify API data
Lesson 29
Creating a ticker to crawl across our screen
Lesson 30
How do we make text rotate using CSS?
Lesson 31
A rapid roundup of all our hanging UI threads

Chapter 02

Chapter 2A - Notes

Lesson 01
Intro
Lesson 02
Starting with the design and making some development choices
Lesson 03
Finding your way around the starter files
Lesson 04
Thinking about extensibility
Lesson 05
Modular extensibility in the starter
Lesson 06
Opening and closing a component
Lesson 07
Animation in React
Lesson 08
Adding physics to folders with react-spring
Lesson 09
Forms in React
Lesson 10
Adding our AddFolder form with Formik
Lesson 11
Challenge: Adding a form and animating our AddNote component
Lesson 12
Walkthrough: Adding a form and animating our AddNote component
Lesson 13
Iterating through our wallet

Chapter 03

Chapter 2B - Notes

Lesson 01
Where do we begin with the backend?
Lesson 02
Setting up our server using Node and Express
Lesson 03
Separating application and index files
Lesson 04
Using Middleware
Lesson 05
Picking a database: aka SQL vs NoSQL
Lesson 06
Setting up MongoDB Atlas
Lesson 07
Using a database client
Lesson 08
Using MongoDB in our application
Lesson 09
Safely storing environment variables in .env and .gitignore
Lesson 10
The MVC Pattern
Lesson 11
Establishing our models
Lesson 12
Establishing our Folder controller
Lesson 13
Challenge: Establishing our Notes controller
Lesson 14
Walkthrough: Establishing our Notes controller
Lesson 15
Creating our API using routes
Lesson 16
Testing our API with Postman in VSCode
Lesson 17
Writing a custom hook to access our API
Lesson 18
Challenge: Writing the notes functions in the useApi hook
Lesson 19
Walkthrough: Writing the notes functions in the useApi hook
Lesson 20
Connecting the backend and frontend using a custom hook

Chapter 04

Chapter 3 - Careful

Lesson 01
Intro
Lesson 02
Where do we begin?
Lesson 03
Getting our heads around AWS, MySQL, and ORMs
Lesson 04
Connecting to AWS using a database client
Lesson 05
Connecting to AWS using Sequelize inside our application using db.ts
Lesson 06
Generating models from AWS using sequelize-typescript-generator
Lesson 07
Connecting our models to our Sequelize connection
Lesson 08
Creating our caregivers and care recipient controllers
Lesson 09
Creating our API with caregiver and care recipient routes
Lesson 10
Creating our events controller
Lesson 11
Exposing our event data via our API
Lesson 12
Optimising our database calls
Lesson 13
API check and CORS policy
Lesson 14
Protecting our API with authentication
Lesson 15
Auth0 setup
Lesson 16
Wrapping our API in tokens
Lesson 17
What do we need to do to add authentication to our frontend?
Lesson 18
Setting up our frontend authentication application on Auth0
Lesson 19
Creating our Auth0 authentication provider
Lesson 20
Creating our login components
Lesson 21
Adding conditional logic to our login components (and fixing Auth0s callback error)
Lesson 22
Grabbing bearer tokens and calling our APIs
Lesson 23
Improving state management
Lesson 24
Challenge: Creating a zustand store for our application state
Lesson 25
Walkthrough: Creating our Zustand store
Lesson 26
Challenge: Refactoring using our new state store
Lesson 27
Walkthrough: Refactoring using our new state store
Lesson 28
Congratulations on finishing React+