Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Remix (React Router) Bootcamp: Zero to Mastery
Introduction
Introduction (6:12)
What Is React Router? (3:09)
Why React Router? (3:44)
Remix vs React Router (2:12)
Intro to the Master Project (3:51)
The Recipe Page & Optimistic UI (7:23)
Finishing the Tour of the Master Project (5:38)
Exercise: Meet Your Classmates and Instructor
Understanding Your Video Player
Course Resources
Set Your Learning Streak Goal
React Router Overview
Installing NodeJS (2:02)
Creating a React Router Project (1:44)
The Vite Config File (1:09)
Upgrading React Router and Future Flags (2:54)
Owning your Entry Points (2:00)
What are Routes? (3:53)
Exercise: Identifying Server and Client Components in Routes
Solution
Let's Have Some Fun (+ More Resources)
Basic Routes and Styling
An Explanation of New Imports
Basic Routing (3:44)
Nested Routing (5:02)
The Root Route (3:15)
Exercise: Understanding Matched Routes with useMatches
Solution
React Router's Special Components (3:42)
The Link API (3:05)
Adding Style with Links (5:55)
Exercise: Utilizing the links Route Export
Solution
Techniques for Component-Level CSS (7:44)
Setting Up Tailwind
Using Tailwind - Part 1 (4:26)
Using Tailwind - Part 2 (5:45)
Using Tailwind - Part 3 (5:09)
Unlimited Updates
Introduction to Data Loading in React Router
What are Loaders? (4:58)
The Need for Pending UI (1:58)
Pending UI with the Browser (2:22)
Pending UI with useNavigation (3:59)
Pending UI when the Loader is Slow (5:10)
Why Load Before Route Transitions (9:43)
Errors and Error Boundaries (4:28)
Exercise: Handling Errors with Error Boundaries
Solution
Installing Postgres with Docker (15:09)
Setting Up Prisma with Postgres (7:15)
Implement a New Life System
Master Project: React Router Recipes App (The Pantry Page)
Overview (2:25)
Setting up the Pantry Route (4:42)
Redirects in React Router (3:31)
Exercise: Experimenting with HTTP Status Codes
Solution
Setting Up the Pantry Database Tables (13:12)
Seeding the Database (9:13)
Database UI Tools (9:36)
Loading Data into the Pantry UI (4:51)
Creating a Model Abstraction (10:37)
Building a Basic Shelf UI (10:53)
Intro to HTML Forms (21:34)
Exercise: Exploring Similarities Between HTML Forms and Anchor Tags
Solution
Enhancing the Search Bar with JavaScript (4:49)
Exercise: The FormData Object
Solution
Creating Shelves (14:11)
Enhancing the Create Shelf Button (4:54)
Auto-Scrolling to the Left (2:09)
Making the Pantry Section Scrollable (1:09)
Adding a Delete Button to Each Pantry Shelf (6:12)
Making the Action Handle Multiple Forms (5:58)
Deleting Pantry Shelves (6:46)
Handling Multiple Deletes (6:57)
Introducing useFetcher (7:30)
More Cases for useFetcher (2:05)
Server State in React Router (4:27)
Exercise: Understanding Concurrency in Remix
Solution
Editing Shelf Names (12:27)
Validating Forms with Zod (18:44)
Intro to Optimistic UI (9:19)
Optimistically Deleting Shelves (12:56)
Creating Shelf Items (7:21)
Deleting Shelf Items (11:56)
Optimistically Creating Shelf Items (21:45)
Suppressing the Layout Effect Warning (4:23)
Optimistically Deleting Shelf Items (8:17)
Additional Enhancements (14:16)
Course Check-In
Authentication Prerequisites
Overview (1:32)
The User Model (7:40)
The Login Route (3:05)
Setting Up the Login Route Action (5:02)
Intro to Cookies (2:24)
Setting Our First Cookie (3:41)
Cookie Attributes (7:27)
A Simple Auth Flow (6:20)
React Router's Cookie Helper (5:04)
Exercise: Cookies
Solution
Cryptographic Signatures (4:09)
Signing Cookies (1:45)
Signing Cookies in React Router (4:27)
Sessions (3:42)
Session Storage (4:02)
Session Storage in React Router (7:10)
Magic Link Authentication
Overview (2:45)
What is Authentication (2:02)
Overview of Magic Link Authentication (2:51)
Magic Link Structure (1:51)
Generating Magic Links (7:46)
Updating the Login Route (3:57)
Validation Route Overview (2:12)
Parsing the Magic Link Payload (8:36)
Validating the Expiration Time (3:09)
Validating the Nonce (6:04)
Finishing the Login (2:42)
The Sign Up Form (8:12)
The Sign Up Form Action (9:37)
Signing Up for Mailgun (3:48)
Setting Up the Mailgun Client (6:16)
Sending the Magic Link Email (6:08)
Showing the Check Email Message (2:19)
Authorization
Overview (2:52)
Authorization Rules for the Login Page (2:26)
Authorization Utilities (3:36)
Login Authorization Rule #1 (3:26)
Middleware with Client-Side Navigation (2:18)
Login Authorization Rule #2 (1:03)
Authorization Rules for the Pantry Page (5:54)
Pantry Authorization Rule #1 (3:48)
Pantry Authorization Rule #2 (Middleware Request Context) (4:06)
Pantry Authorization Rules #3-4 (2:12)
Pantry Authorization Rules #5-6 (4:21)
Pantry Authorization Rule #7 (2:49)
UI Updates Roadmap (2:15)
Adding an Error Boundary (7:30)
Hiding the App Nav Button (3:03)
Creating a Logout Route (4:38)
User Interface (The Recipe Page)
Overview (4:05)
Revisiting the React Router Philosophy (3:28)
Setting Up the Recipes Route (4:02)
Setting Up the Recipe Database Tables (3:55)
Updating the Seed Script (4:23)
Recipe Page Components (1:44)
The Recipes Loader (4:51)
Rendering the Recipe List (4:19)
Creating a Search Bar Component (7:46)
Supporting Search in the Loader (2:09)
The Create Recipe Form (3:24)
Setting Up the Recipe Detail Route (4:56)
Exercise: Exploring Dynamic Route Segments
Solution
Sorting the Recipes List (1:35)
Preserving the Search Parameters (6:17)
Recipe Link Pending UI (5:41)
Exercise: Writing your own Hook to Delay the Pending UI
Using Link Prefetch (7:13)
Recipe Detail Route Overview (1:39)
Overview of Step 1 - Creating an Input Component (6:40)
Displaying the Name and Total Time (10:13)
Rendering the Ingredients (7:24)
Rendering the Instructions (6:30)
Overview of Step 2 - Updating Recipes (1:03)
Saving the Recipe Name, Total Time, and Instructions (8:32)
FormData's getAll Function (4:01)
Updating the validateForm Function (8:28)
Updating the Ingredients (8:05)
Creating New Ingredients (7:28)
Addressing and Issue (4:08)
Adding Error Messages to the UI (7:39)
Exercise: Imposter Syndrome (2:55)
Overview of Step 3 - Deleting Recipes and Ingredients (0:32)
Deleting a Recipe (2:27)
Deleting Ingredients (3:38)
Authorization Rules for the Recipe Detail Route (1:50)
Recipe Detail Authorization Rule #1 (2:32)
Recipe Detail Authorization Rules #2-5 (1:50)
Enhancement Overview (2:34)
Overview of Step 1 - Saving Inputs on Change (1:19)
Saving Recipe Inputs on Change (8:22)
Creating an Ingredient Row Component (5:52)
Saving Ingredient Inputs on Change (4:03)
Persisting the Recipe Fetcher Data (6:50)
Persisting the Ingredient Fetcher Data (5:06)
Debouncing Form Inputs (2:06)
Creating a Hook for Debouncing (7:03)
Debouncing the Form Inputs (4:44)
Overview of Step 2 - The Case for Optimistic UI in the Side Bar (1:38)
Creating a RecipeListItem Component (2:23)
Updating the Side Bar with Fetcher IDs (6:31)
Overview of Step 3 (3:39)
Wiring up a Fetcher to Create New Ingredients (9:27)
Creating a Hook for Optimistically Rendering Ingredients (5:17)
Optimistically Rendering New Ingredients (4:58)
Updating the Default Enter Key Behavior (4:14)
Creating New Ingredients with the Enter Key (1:54)
Focusing the Amount Input on Create (4:47)
Optimistically Deleting Ingredients (3:43)
File Uploads
Overview (1:22)
Creating a File Input (3:26)
The Urlencoded Content Type (5:35)
The Multipart Content Type (5:29)
Parsing Files from Multipart Forms (2:55)
Storing Files to Disk (3:52)
Serving the Image Files (5:27)
Writing the Image URL to the Database (2:46)
Modals (The Grocery List)
Overview (3:29)
Updating the DB to Track Meal Plans (2:18)
Modals in React Router (2:44)
Setting Up the Modal Route (2:26)
Rendering a Modal (6:09)
Creating some Components for the Modal (5:25)
Meal Plan Modal UI (5:43)
Revalidating Modal Parent Routes (5:54)
Passing Context to the Outlet (4:46)
Creating the Modal Action (5:22)
The Update Meal Plan Action Case (6:18)
Indicating which Recipes are in the Meal Plan (3:31)
The Meal Plan Filter Button (7:00)
The Meal Plan Filter Backend (2:26)
Preserving the Search State when Filtering (5:17)
Preserving the Filter State when Searching (3:48)
Overview of Next Steps and Setting Up the Grocery List Route (2:17)
Defining the Grocery List Item Type (4:16)
Building the Grocery List Item Component (6:16)
Getting Started on the Grocery List Loader (4:06)
Formatting the Missing Ingredients (3:35)
Grouping Grocery List Items by the Ingredient Name (6:05)
Rendering the Grocery List (2:35)
Creating the Grocery List Route Action (3:21)
Adding Grocery Items to the Pantry (6:20)
The Grocery List Empty State (3:17)
Clearing the Meal Plan (6:13)
Resource Routes (The Settings Page)
Overview (1:28)
The PageLayout Component (4:05)
Setting up the Settings Route (2:34)
Intro to Resource Routes (3:03)
MIME Types (5:45)
Exercise: MIME Types
Solution
Overview of Customizing the Theme (2:33)
Renaming the Resource Route (1:07)
Controlling the Tailwind Theme with the Theme Resource Route (5:01)
Building the Form to Change the Site Theme (3:49)
Creating the Theme Cookie (2:08)
The App Settings Route Action (4:04)
The App Settings Route Loader (2:50)
Fixing the Off-By-One Issue (5:19)
Returning Dynamic CSS Based on the Theme Cookie (3:31)
Caching (The Discover Page)
Overview (0:52)
Redirecting the Home Page (1:24)
The Discover Page UI (4:37)
Discover Detail Page Setup (2:57)
Discover Detail Page UI (3:12)
Intro to Caching (1:47)
Private vs Server Caches (3:09)
Preview of Using the Browser Cache (3:41)
Caching Vocabulary (2:35)
The Default Browser Strategy (3:31)
The No-Store Strategy (1:23)
The Fixed-Time Strategy (1:21)
The Cache-Busting Strategy (4:09)
The Revalidate-Once-Stale Strategy (1:44)
Etags (5:19)
Responding to the If-None-Match Header (7:36)
The Stale-While-Revalidate Strategy (3:32)
Testing
Introduction to Testing (1:00)
Setting Up Playwright (1:59)
Writing our First Test (6:51)
Creating Dynamic Routes (7:00)
Creating a Test Login Route (5:56)
Testing a Typical Pantry Page Flow (7:17)
Finishing up the Pantry Test (4:04)
The Playwright UI (2:22)
Creating a Delete User Test Route (3:17)
Deleting Test Users (1:41)
Exercise: End-to-End Testing with Playwright
Solution
Deployment
Deployment Overview (0:44)
The Fly CLI (2:47)
Prisma MIgrations (3:27)
Creating the Database Server (3:14)
Creating the App Server (1:38)
Setting Environment Variables (3:26)
Deploying the App (1:09)
Appendix: Upgrading Remix
An Example of Upgrading Remix (13:51)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Creating a React Router Project