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 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.
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?
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?
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?
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.
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.
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.
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.
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?
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.
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.
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?
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.
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?
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!
A place for you to post notes about anything on this page. Only you can view your notes.
