SuperHi FM

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.

Assets

https://github.com/samnixon87/careful-starter

https://github.com/samnixon87/careful-final

Videos

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?

How do we make sure our AWS credentials are accurate and functional?

Lesson 04

Connecting to AWS using a database client

How do we make sure our AWS credentials are accurate and functional?

Now that we’ve tested our credentials, how can we use them inside our application? And where do we store our database connection logic?

Lesson 05

Connecting to AWS using Sequelize inside our application using db.ts

Now that we’ve tested our credentials, how can we use them inside our application? And where do we store our database connection logic?

In the past we’ve simply written models and informed our application and our database what they were. This time around though, we’re not in control. How do we generate models for a database that we didn’t author?

Lesson 06

Generating models from AWS using sequelize-typescript-generator

In the past we’ve simply written models and informed our application and our database what they were. This time around though, we’re not in control. How do we generate models for a database that we didn’t author?

Now that we have models, how do we pass them to our Sequelize connection in order to use them?

Lesson 07

Connecting our models to our Sequelize connection

Now that we have models, how do we pass them to our Sequelize connection in order to use them?

We have models, but we need controllers. How do we write them for our simpler models?

Lesson 08

Creating our caregivers and care recipient controllers

We have models, but we need controllers. How do we write them for our simpler models?

Next, we connect our controllers to routes in order to create API endpoints and expose our data from AWS to frontend clients.

Lesson 09

Creating our API with caregiver and care recipient routes

Next, we connect our controllers to routes in order to create API endpoints and expose our data from AWS to frontend clients.

Time for a _slightly_ more complex model. The `events` table in the AWS database contains the bulk of the data and the lions share of complexity. How do we create a controller for it?

Lesson 10

Creating our events controller

Time for a slightly more complex model. The events table in the AWS database contains the bulk of the data and the lions share of complexity. How do we create a controller for it?

Now that we have a controller, let’s build out our final route in order to expose data from the `events` table via our API.

Lesson 11

Exposing our event data via our API

Now that we have a controller, let’s build out our final route in order to expose data from the events table via our API.

Our API could be faster - the speed we’re returning data at may impact the user experience. How might we improve it?

Lesson 12

Optimising our database calls

Our API could be faster - the speed we’re returning data at may impact the user experience. How might we improve it?

It’s always good to pause after such a major piece of work and check to see whether we’ve been successful or not before we get too carried away. Time for a quick check.

Lesson 13

API check and CORS policy

It’s always good to pause after such a major piece of work and check to see whether we’ve been successful or not before we get too carried away. Time for a quick check.

We’ve created our API, but at the moment we’re not protecting it. As we’re exposing healthcare data, it’s high time we thought about how to do that.

Lesson 14

Protecting our API with authentication

We’ve created our API, but at the moment we’re not protecting it. As we’re exposing healthcare data, it’s high time we thought about how to do that.

Time to setup an Auth0 account and register our application with Auth0 in order to use the authentication platform for our app.

Lesson 15

Auth0 setup

Time to setup an Auth0 account and register our application with Auth0 in order to use the authentication platform for our app.

In Chapter 1 we _consumed_ an API that used bearer tokens. Now it’s time for us to _create_ an API that does just that.

Lesson 16

Wrapping our API in tokens

In Chapter 1 we consumed an API that used bearer tokens. Now it’s time for us to create an API that does just that.

Our backend is protected but now our frontend doesn’t have the features it needs to grab data. What do we need to do to add authentication and authorisation to our frontend?

Lesson 17

What do we need to do to add authentication to our frontend?

Our backend is protected but now our frontend doesn’t have the features it needs to grab data. What do we need to do to add authentication and authorisation to our frontend?

In order for us to use authentication on our frontend we need to notify auth0 we’ll be doing just that. It’s Config Time.

Lesson 18

Setting up our frontend authentication application on Auth0

In order for us to use authentication on our frontend we need to notify auth0 we’ll be doing just that. It’s Config Time.

What’s a provider? Auth0 uses a provider pattern but we’ve not touched on it so far. In this video we’ll take a quick look at the pattern in general then implement it for our application.

Lesson 19

Creating our Auth0 authentication provider

What’s a provider? Auth0 uses a provider pattern but we’ve not touched on it so far. In this video we’ll take a quick look at the pattern in general then implement it for our application.

We want a login but we don’t have login components! Oh no! Time to build them out.

Lesson 20

Creating our login components

We want a login but we don’t have login components! Oh no! Time to build them out.

Our login components should only render when a user hasn’t logged in. Time to add some conditional logic to our application.

Lesson 21

Adding conditional logic to our login components (and fixing Auth0s callback error)

Our login components should only render when a user hasn’t logged in. Time to add some conditional logic to our application.

We need to grab tokens for our API to work, then we need to call our API using them. Luckily, Axios can help.

Lesson 22

Grabbing bearer tokens and calling our APIs

We need to grab tokens for our API to work, then we need to call our API using them. Luckily, Axios can help.

Now that we’ve done with the bulk of our backend work, we can take a look at the frontend. State management is a bit _messy_. How do we improve it?

Lesson 23

Improving state management

Now that we’ve done with the bulk of our backend work, we can take a look at the frontend. State management is a bit messy. How do we improve it?

We’ll be using zustand to improve state management. We want a clean and transparent state. In this video we’ll establish a state store and then run through the key types you’ll want to include in your stores, before handing over for a Challenge: can you complete the rest of the store on your own?

Lesson 24

Challenge: Creating a zustand store for our application state

We’ll be using zustand to improve state management. We want a clean and transparent state. In this video we’ll establish a state store and then run through the key types you’ll want to include in your stores, before handing over for a Challenge: can you complete the rest of the store on your own?

A Walkthrough of our previous Challenge so that we’re all on the same page.

Lesson 25

Walkthrough: Creating our Zustand store

A Walkthrough of our previous Challenge so that we’re all on the same page.

Time to use our new state store to (radically) refactor our application. In the video we’ll run through a few different components before the Challenge: can you complete the refactor and clean up Careful?

Lesson 26

Challenge: Refactoring using our new state store

Time to use our new state store to (radically) refactor our application. In the video we’ll run through a few different components before the Challenge: can you complete the refactor and clean up Careful?

Lesson 27

Walkthrough: Refactoring using our new state store

A Walkthrough of our previous Challenge so that we’re all on the same page.

Congratulations!! You made it to the end of the Intro to Full Stack JavaScript!

Lesson 28

Congratulations on finishing React+

Congratulations!! You made it to the end of the Intro to Full Stack JavaScript!

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!