React and Serverless - Fullstack Web Development

Tired of building Todo apps? Want to know what it's like to build a real-world application from start to finish?

In this course, you will build a secure and production-ready fullstack typing application from start to finish. Along the way, you will learn core concepts of developing modern web applications like modern React, authentication and authorization, API creation with Serverless Functions, and continuous integration. By then end of this course, you will have the knowledge you need to build amazing applications to share with the world!

Here's what you will learn.

Modern React including Hooks and the Context API
Source Control with Git/Github
CSS in JSS using Styled Components
Store Data using the Airtable API
Secure applications using JSON Web Tokens
Build and Deploy Serverless Functions in Netlify
Create a Light/Dark Mode
Deploy to Netlify using Continuous Integration

1. Course Overview and Project Setup

1.1 Course Overview and Resources

welcome to the course
what we will cover
links to resources used in the class

1.2 Create Starter React Project

use create-react-app to generate starter project
remove unnecessary boilerplate code
create repository in Github
connect local code to Github repo

1.3 Add routing with React Router

install React Router
create page components for Home, Game, Game Over, and High Scores

1.4 Create the Navbar

create the Navbar component

2. Styled Components

2.1 Introduction to Styled Components

what are styled components
benefits vs downsides to styled components

2.2 Create Base Styled Components

create global CSS
create Main and Container components

2.3 Style the Navbar

create Styled Copmonents for Navbar
create StyledLink component
create Accent component

2.4 Style the Home Page

create Styled Components for title
create Styled Component for CTA

2.5 Style the Game Layout

position Heads Up Display (HUD) for score and timer
style HUD and random character
add bold styled in global styled

3. Game Functionality with React Hooks

3.1 Introduction to React Hooks

what are React Hooks
why are they useful

3.2 Track Score with Your First React Hook

use useState to track the user's score
use setInterval to tsimulate increase in score

3.3 Create Timer Functionality

use useEffect to start timer
use setInterval inside of useEffect
add the logic to update timer
navigate to GameOver page when timer expires

3.4 Track User Input on Keypress

add event listener for keyup
unregistering event listeners in useEffect

3.5 Update User Score Based on Input

use useState to track and update user's score as they play the game
update user's score based on keyboard input
display random character

4. React Context API to Share State Between Copmonents

4.1 Introduction to React Context

what is React Context
why it's useful/why we need it

4.2 Track User's Score Between Components

store user's score in a ScoreContext after completing a game
display user's score in Game Over page
prevent users from navigating directly to Game Over page

5. Airtable API and Setup

5.1 Introduction to Airtable

sign up
what is Airtable
why we are using it here

5.2 Airtable Workspace and API

create a workspace and base (link an excel doc)
explore the Airtable API with postman

6. Netlify and Serverless Functions

6.1 Introduction to Serverless Functions

what are serverless functions
why we are using them here

6.2 Netlify Init and Setup

create a new website in Netlify connected to your repository
create local netlify.toml file for configuration
explore the netlify dashboard

6.3 Creating Your First Serverless Function

install netlify dev to run site and functions locally
create Hello World GET endpoint
connect local code to site in Netlify

Helpful tools - json viewer in Chrome

6.4 Retrieving High Scores From Airtable

create new GET endpoint
implement endpoint for retrieving high scores Airtable

Resources

https://flaviocopes.com/airtable/

6.5 Setup Environment Variables

use dotenv package to store private credentials
store Airtable credentials in environment variables

6.6 Display High Scores in High Scores Page

create fetch Data hook
call serverless function for high score data

6.7 Create Save High Score Serverless Function

create new POST endpoint
implement functionality for saving a score to Airtable

Helpful tools - postman

6.8 Refactoring Common Airtable Code

create an Airtable utils file to share code from

6.9 Save High Score on Game Over

attempt to save the user's high score when the game is finished
display message for whether or not the user got a high score

6.10 Game Over Bug Fix and Extra Styling

7. Add Authentication with Auth0

7.1 Introduction to Authentication/Authorization and Auth0

why do we need authentication/authorization
what is Auth0 and how does it help

7.2 Sign Up and Create Tenant in Auth0

sign up for free account
create tenant and application for our project

7.3 Add Authentication in React with Auth0

create React Hook to interact with Auth0 for authentication
implement login/logout functionality
create ButtonLink component

7.4 Require Username in Sign Up

make username a required field when registering with Auth0
what is an Identity Token
display username in navbar (where to put it)

8. Add Security Serverless Functions

8.1 Introduction to Authorization (JWTs and Access Tokens)

what are JSON Web Tokens
what are access tokens
when are they used and why

8.2 Include Access Token in Save Score Requests

what is an Access Token
configure Auth0 Client to retrieve Access Token
update Fetch request to include Access Token
create API application in Auth0

8.3 Retrieve and Parse Access Token

parse Access Token in save high score serverless function

8.4 Validate Access Token

use jwks-rsa and jsonwebtoken packages to validate access Token

9. Create Light/Dark Mode with Context API and Hooks

9.1 Intro to Theming

https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/

9.2 Define CSS Variables for Theming

create css variables for background color, text color, and accent

9.3 Use Theme Provider From Styled Components

create dark and light theme objects that we will swap between
pass theme to ThemeProvider
update CSS Variables based on theme

9.4 Create Use Theme Hook

create React Context for tracking the user's theme
add toggle theme button to Navbar
update them on button press

9.5 Persist Theme Choice in Local Storage

add ability to save user's theme in local storage

10. Final Touches

10.1 Styling and Cleanup

create button link and linkButton
create loader styled component

10.2 Final Hosting Configurations for Netlify

environment variables
auth0 callback urls

11. Wrap Up

11.1 What Next

next steps and ideas for additional features

11.2 Wrap Up

course summary and what we accomplished