React and Serverless – Fullstack Web Development

Course Curriculum

Chapter 1: Course Overview and Project Setup

Lecture 1: Welcome

Lecture 2: What We'll Build and Resources

Lecture 3: My Setup

Lecture 4: 1.2 Create Starter React Project

Lecture 5: Add Routing with React Router

Lecture 6: Create the Navbar

Chapter 2: Styling with Styled Components

Lecture 1: Introduction to Styled Components

Lecture 2: Create Base Styled Components

Lecture 3: Style the Navbar

Lecture 4: Style the Home Page

Lecture 5: Style the Game Page

Chapter 3: Game Functionality with React Hooks

Lecture 1: Introduction to React Hooks

Lecture 2: First React Hook for Tracking Score

Lecture 3: Implement the Timer

Lecture 4: Listen for User Input

Lecture 5: Update User Score Based on Input

Chapter 4: React Context API to Share Score State Between Components

Lecture 1: Introduction to React Context

Lecture 2: Tracking User's Score Between Components

Chapter 5: Airtable API and Setup

Lecture 1: Introduction to Airtable

Lecture 2: Airtable Workspace and API

Chapter 6: Serverless Functions for Storing High Scores

Lecture 1: Introduction to Serverless Functions

Lecture 2: Netlify Init and Setup

Lecture 3: Creating Your First Serverless Function

Lecture 4: Serverless Function to Retrieve High Scores

Lecture 5: Setup Environment Variables

Lecture 6: Displaying High Scores

Lecture 7: Create Save High Score Serverless Function

Lecture 8: Refactor Common Airtable Code

Lecture 9: Save Score on Game Over

Lecture 10: Game Over Bug Fix and Extra Styling

Chapter 7: Add Authentication with Auth0

Lecture 1: Introduction to Authentication

Lecture 2: Sign Up and Create Tenant in Auth0

Lecture 3: Add Authentication in React

Lecture 4: Require Username on Sign Up

Chapter 8: Add Security to Our Serverless Functions

Lecture 1: Introduction to Authorization

Lecture 2: Include Access Token in Save Score Request

Lecture 3: Retrieve and Parse Access Token

Lecture 4: Validate Access Token

Chapter 9: Create Light/Dark Mode with Context API and Hooks

Lecture 1: Introduction to Theming with CSS

Lecture 2: Create CSS Variables for Theming

Lecture 3: Use the Styled Components Theme Provider

Lecture 4: Create useTheme Hook

Lecture 5: Persist Theme Choice in Local Storage

Chapter 10: Final Touches

Lecture 1: Styling and Clean Up

Lecture 2: Final Deploy Configurations in Netlify

Chapter 11: Course Wrap Up

Lecture 1: What's Next

Lecture 2: Wrap Up