Node with React: Fullstack Web Development

Course Curriculum

Chapter 1: Course Overview – Start Here!

Lecture 1: Course Resources

Lecture 2: Join Our Community!

Lecture 3: App Overview

Lecture 4: App User Flow Walkthrough

Lecture 5: Tech Stack

Lecture 6: App Mockups

Chapter 2: Server Side Architecture

Lecture 1: Application Architecture

Lecture 2: Relationship Between Node and Express

Lecture 3: Generating Express Apps

Lecture 4: Express Route Handlers

Lecture 5: Important Info About Heroku and Deployment

Lecture 6: Deployment Checklist

Lecture 7: [Render] Git and GitHub Setup

Lecture 8: [Render] Registration, Creating a Service and Deployment

Lecture 9: [Heroku] Installing the Heroku CLI

Lecture 10: [Heroku] Verifying Deployment

Lecture 11: [Heroku] Followup Deployments

Chapter 3: Authentication with Google OAuth

Lecture 1: Intro to Google OAuth

Lecture 2: The OAuth Flow

Lecture 3: Overview of Passport JS

Lecture 4: Passport Setup

Lecture 5: The Google OAuth API

Lecture 6: Google Project Setup and Enabling the Google OAuth API

Lecture 7: Securing API Keys

Lecture 8: Google Strategy Options

Lecture 9: Testing OAuth

Lecture 10: Authorized Redirect URI's

Lecture 11: OAuth Callbacks

Lecture 12: Access and Refresh Tokens

Lecture 13: Nodemon Setup

Chapter 4: Adding MongoDB

Lecture 1: Server Structure Refactor

Lecture 2: The Theory of Authentication

Lecture 3: Signing In Users with OAuth

Lecture 4: Introduction to MongoDB

Lecture 5: Remote vs Local MongoDB Instances

Lecture 6: MongoDB Atlas Setup and Configuration

Lecture 7: Connecting Mongoose to Mongo

Lecture 8: Breather and Review

Lecture 9: Mongoose Model Classes

Lecture 10: Saving Model Instances

Lecture 11: TokenError: Bad Request

Lecture 12: Mongoose Queries

Lecture 13: Passport Callbacks

Lecture 14: Encoding Users

Lecture 15: Deserialize User

Lecture 16: Enabling Cookies

Lecture 17: Testing Authentication

Lecture 18: Logging Out Users

Lecture 19: [Optional] A Deeper Dive

Chapter 5: Dev vs Prod Environments

Lecture 1: Dev vs Prod Keys

Lecture 2: MongoDB Atlas Production Setup and Configuration

Lecture 3: Generating Production Resources

Lecture 4: Determining Environment

Lecture 5: Version Control Scheme

Lecture 6: [Render] Production Environment Variables

Lecture 7: [Heroku] Production Environment Variables

Lecture 8: Fixing Proxy Issues

Chapter 6: Moving to the Client Side

Lecture 1: Important Update About React App Generation

Lecture 2: React App Generation

Lecture 3: A Separate Front End Server

Lecture 4: Running the Client and Server

Lecture 5: Important Create React App Proxy Update

Lecture 6: Routing Stumbling Block

Lecture 7: The Beauty of Create React App's Proxy

Lecture 8: [Optional] Why This Architecture?

Chapter 7: Developing the Client Side

Lecture 1: Async/Await Syntax

Lecture 2: Refactoring with Async/Await

Lecture 3: Important Note About Proxy

Lecture 4: Front End Tech

Lecture 5: Client React Setup

Lecture 6: ReactDOM warning with React v18

Lecture 7: Installing Root Modules

Lecture 8: Troubleshooting NPM

Lecture 9: createStore Strikethrough in Code Editor

Lecture 10: Redux Review and Setup

Lecture 11: The Auth Reducer

Lecture 12: Finishing Reducer Setup

Lecture 13: Why We Care About Auth

Lecture 14: React Router Setup

Lecture 15: Route Configuration

Lecture 16: Matching Routes with Exact

Lecture 17: Always Visible Components

Lecture 18: Materialize CSS

Lecture 19: Webpack with CSS

Lecture 20: Header Design

Lecture 21: Current User API

Lecture 22: Additional Proxy Rules

Lecture 23: Basics of Redux Thunk

Lecture 24: Refactoring the App

Lecture 25: Testing FetchUser

Lecture 26: Refactoring to Async/Await

Lecture 27: AuthReducer Return Values

Lecture 28: Accessing State in the Header