Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Remix.js - The Practical Guide
Introduction
Welcome to the Course! (0:32)
What Is Remix? And Why Would You Use Remix? (5:40)
Remix vs NextJS (2:10)
About The Course (1:23)
How To Get The Most Out Of This Course (3:37)
Attachments & Discord Community
Remix Essentials - Core Concepts
Module Introduction (1:43)
Must-read: Creating a Remix v1 Project
Creating a Remix Project (3:35)
Analyzing the Created Project (4:02)
Getting Started with File-based Routing (3:46)
Adding Links & Building a SPA (Single-Page Application) (5:11)
Onwards to a Better Project (3:06)
Styling Pages & Understanding the Root Route (9:05)
Surfacing Component Styles (6:44)
Styling Active Links via NavLink (3:02)
How Form Submissions Work (3:57)
Server-side Form Handling via action() (3:23)
Adding Backend Code & Redirecting (9:16)
Fetching Page Data via loader() (4:59)
Returning & Using Fetched Data (7:51)
From to (4:49)
Providing User Feedback via useNavigation (3:59)
Validating Input & Returning Data in action() (6:05)
Error Handling via ErrorBoundary (6:52)
Handling Error Responses via CatchBoundary (7:34)
Adding Dynamic Routes & Dot-delimited Routes (7:53)
Fetching Data for Dynamic Routes (4:07)
Another CatchBoundary Example (1:41)
Setting Page Metadata (4:31)
Summary (2:17)
Routing & Layouts - Deep Dive
Module Introduction (1:33)
What We'll Build - A Demo (2:04)
Project Planning & Creation (3:54)
Creating Project Routes - A Refresher (10:12)
Nested Paths - An Alternative Approach (5:47)
Layout Routes (7:54)
Adding Components & Styling (6:38)
Using Custom Fonts
Working on More Routes (10:51)
Marketing Pages & Static Images (4:04)
Leveraging Layouts (2:41)
Rendering a Modal Page (Overlay Page) (3:30)
Adding Links (5:13)
Paths: Absolute vs Relative (2:34)
Navigating Programmatically (3:33)
Adding NavLinks (3:32)
Introducing Pathless Layout Routes (8:56)
Doing More with Pathless Layout Routes (3:41)
Introducing Resource Routes (3:39)
Understanding Splat Routes (5:31)
Working with URL Search Parameters (Query Parameters) (9:29)
Adding More Expense-related Links (3:42)
Module Summary (1:52)
Data Fetching & Mutations - Deep Dive
Module Introduction (1:04)
Project & Database (MongoDB) Setup (3:40)
Adding Prisma (A Package For Querying the Database) (4:17)
Adding an Expense Data Model (5:48)
Preparing the Code for Form Submissions (7:10)
Adding a Server-side "addExpense" Function (6:08)
Adding Expenses to the Database (via action()) (6:57)
Adding Server-side Validation (10:14)
Submitting Forms Programmatically (5:09)
Adding Visual Submission Feedback (5:29)
Fetching Expenses (via loader()) (9:16)
Loaders - A Closer Look (5:27)
Loading a Single Expense (via Dynamic Route Parameters) (8:47)
How Nested Loaders Are Executed (3:03)
Using Parent Loader Data via useMatches() (6:27)
Updating Data (7:27)
Deleting Data (3:22)
One Action - Multiple Forms (6:28)
Programmatic "Behind-the-Scenes" Submission via useFetcher() (9:31)
Extracting Search Parameters (4:08)
Adding Visual Feedback to the Authentication Form (2:17)
Adding a Shared Root Document (7:25)
Adding Default Error Handling Logic (4:24)
Handling Errors Without ErrorBoundary or CatchBoundary (5:54)
Managing Errors Inside Components (4:06)
Practice Time - Challenge (1:13)
Practice Time - Solution (5:27)
Updating the expenses/raw Route
Module Summary (3:11)
Adding User Authentication
Module Introduction (0:50)
Project Setup (1:01)
How Does User Authentication Work? (2:15)
Preparing the Database (5:16)
Adding Server-side Credentials Validation (4:28)
Check for Existing Users & Emails (3:32)
User Signup & Password Hashing (6:32)
Getting Started with User Login (3:49)
Sessions & Cookies - Preparation (4:52)
Creating Session Cookies (8:05)
Extracting Session Data & Rendering Conditional User Interfaces (6:52)
Adding Logout (6:36)
Protecting Routes (6:48)
More Route Protection (1:35)
Connecting Expenses & Users (8:31)
Module Summary (1:18)
Optimizing & Deploying Remix Applications
Module Introduction (1:08)
Adding Metadata To Routes (8:02)
Why You Might Need Custom Page Response Headers (2:17)
Setting Page Response Headers (3:38)
Working with Nested Headers (3:38)
Using Action & Loader Headers (2:49)
Disabling JavaScript For Some Pages (6:49)
A Brief Look at the Remix Config File (4:48)
Deployment Options (2:03)
Deploying a Remix Website - An Example (Netlify) (7:04)
Course Roundup
Course Roundup (0:58)
Using Parent Loader Data via useMatches()
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock