Remix.js – The Practical Guide

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome to the Course!

Lecture 2: What Is Remix? And Why Would You Use Remix?

Lecture 3: Remix vs NextJS

Lecture 4: About The Course

Lecture 5: How To Get The Most Out Of This Course

Lecture 6: Attachments & Discord Community

Chapter 2: Remix Essentials – Core Concepts

Lecture 1: Module Introduction

Lecture 2: MUST READ: Creating a Remix v1 Project

Lecture 3: Creating a Remix Project

Lecture 4: Adjusting the Created Projects

Lecture 5: Analyzing the Created Project

Lecture 6: Solving Issues with Starting the Development Server

Lecture 7: Getting Started with File-based Routing

Lecture 8: Adding Links & Building a SPA (Single-Page Application)

Lecture 9: Onwards to a Better Project

Lecture 10: Styling Pages & Understanding the Root Route

Lecture 11: Surfacing Component Styles

Lecture 12: Styling Active Links via NavLink

Lecture 13: How Form Submissions Work

Lecture 14: Server-side Form Handling via action()

Lecture 15: Adding Backend Code & Redirecting

Lecture 16: Fetching Page Data via loader()

Lecture 17: Returning & Using Fetched Data

Lecture 18: From <form> to <Form>

Lecture 19: Providing User Feedback via useNavigation

Lecture 20: Validating Input & Returning Data in action()

Lecture 21: Error Handling via ErrorBoundary

Lecture 22: Handling Error Responses via CatchBoundary

Lecture 23: Adding Dynamic Routes & Dot-delimited Routes

Lecture 24: Fetching Data for Dynamic Routes

Lecture 25: Another CatchBoundary Example

Lecture 26: Setting Page Metadata

Lecture 27: Summary

Chapter 3: Routing & Layouts – Deep Dive

Lecture 1: Module Introduction

Lecture 2: What We'll Build – A Demo

Lecture 3: Project Planning & Creation

Lecture 4: Creating Project Routes – A Refresher

Lecture 5: Nested Paths – An Alternative Approach

Lecture 6: Layout Routes

Lecture 7: Adding Components & Styling

Lecture 8: Using Custom Fonts

Lecture 9: Working on More Routes

Lecture 10: Marketing Pages & Static Images

Lecture 11: Leveraging Layouts

Lecture 12: Rendering a Modal Page (Overlay Page)

Lecture 13: Adding Links

Lecture 14: Paths: Absolute vs Relative

Lecture 15: Navigating Programmatically

Lecture 16: Adding NavLinks

Lecture 17: Introducing Pathless Layout Routes

Lecture 18: Doing More with Pathless Layout Routes

Lecture 19: Introducing Resource Routes

Lecture 20: Understanding Splat Routes

Lecture 21: Working with URL Search Parameters (Query Parameters)

Lecture 22: Adding More Expense-related Links

Lecture 23: An Alternative Way Of Setting Up Routes

Lecture 24: Module Summary

Chapter 4: Data Fetching & Mutations – Deep Dive

Lecture 1: Module Introduction

Lecture 2: Project & Database (MongoDB) Setup

Lecture 3: Adding Prisma (A Package For Querying the Database)

Lecture 4: Adding an Expense Data Model

Lecture 5: Preparing the Code for Form Submissions

Lecture 6: Adding a Server-side "addExpense" Function

Lecture 7: Adding Expenses to the Database (via action())

Lecture 8: Adding Server-side Validation

Lecture 9: Submitting Forms Programmatically

Lecture 10: Adding Visual Submission Feedback

Lecture 11: Fetching Expenses (via loader())

Lecture 12: Loaders – A Closer Look

Lecture 13: Loading a Single Expense (via Dynamic Route Parameters)

Lecture 14: How Nested Loaders Are Executed

Lecture 15: Using Parent Loader Data via useMatches()

Lecture 16: Updating Data

Lecture 17: Deleting Data

Lecture 18: One Action – Multiple Forms

Lecture 19: Programmatic "Behind-the-Scenes" Submission via useFetcher()

Lecture 20: Extracting Search Parameters

Lecture 21: Adding Visual Feedback to the Authentication Form

Lecture 22: Adding a Shared Root Document

Lecture 23: Adding Default Error Handling Logic

Lecture 24: Handling Errors Without ErrorBoundary or CatchBoundary

Lecture 25: Managing Errors Inside Components

Lecture 26: Practice Time – Challenge

Lecture 27: Practice Time – Solution

Lecture 28: Updating the expenses/raw Route

Lecture 29: Module Summary

Chapter 5: Adding User Authentication

Lecture 1: Module Introduction

Lecture 2: Project Setup

Lecture 3: How Does User Authentication Work?

Lecture 4: Preparing the Database

Lecture 5: Adding Server-side Credentials Validation

Lecture 6: Check for Existing Users & Emails

Lecture 7: User Signup & Password Hashing

Lecture 8: Getting Started with User Login

Lecture 9: Sessions & Cookies – Preparation