React developers
You’re comfortable building components, but you want to create real fullstack applications without splitting everything into separate projects. This course gives you a practical way to make that jump with Remix.
Remix.js - The Practical Guide
Learn how to build rich & highly reactive fullstack React applications with Remix.
Course Overview
About This Course
You already know React — but turning a UI into a real, fullstack product can feel like juggling too many moving parts. Separate frontend and backend projects, duplicated logic, and “where does this code even belong?” decisions slow you down.
This course shows you a cleaner path with Remix, where server and client code live side-by-side and work together by design. You’ll move step-by-step through the core workflow, building confidence as each concept builds on the last — without needing any prior Remix experience.
By the end, you’ll be able to create fullstack React websites and apps that handle real user flows: pages that load the right data, forms that submit reliably, and accounts that stay signed in. You’ll know how to connect your app to a database, implement common create/read/update/delete behavior, and ship a Remix application that’s ready to run in production.
What You'll Learn
You’ll go from “I can build React UIs” to shipping Remix apps that route, fetch, validate, authenticate, and deploy as one cohesive fullstack codebase.
Build fullstack Remix apps
Create feature-rich React websites and applications with Remix where backend logic and frontend UI live together. You’ll be able to structure your code so the framework handles the full request/response flow.
Routes and nested pages
Implement dynamic routes, nested routes, and page hierarchies that scale as your app grows. You’ll be able to compose pages with non-page components without losing clarity in your structure.
Nested layouts and data
Construct nested layouts that fetch the right data at the right level, including optimized data fetching for nested pages. You’ll be able to keep UI and data needs aligned across complex screens.
Forms and submissions
Handle form submissions without client-side JavaScript logic, and also submit data programmatically when needed. You’ll be able to process submissions on the backend and validate user input reliably.
Database CRUD workflows
Store and retrieve data from a database and implement full CRUD (Create, Read, Update, Delete) operations in Remix. You’ll be able to connect your React app to persistent data and keep it in sync.
Auth and sessions
Implement signup and login flows and keep users authenticated via session cookies. You’ll be able to manage sessions securely so users stay signed in across requests.
Ready to get started?
See enrollment optionsPrerequisites
Basic React knowledge is required.
No prior Remix knowledge is required.
Who Is This Course For?
Frontend-focused builders
You can ship UIs, but backend tasks like handling submissions, persistence, and authentication feel like a different world. You’ll get a guided path to add those capabilities inside a React-first workflow.
Next.js curious devs
You’ve heard about Remix (or compared it to NextJS) and want to understand when and why it fits. This course helps you build with Remix directly so you can make an informed framework choice.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Introduction13m
- 01Welcome to the Course!0:32 min
- 02What Is Remix? And Why Would You Use Remix?5:40 min
- 03Remix vs NextJS2:10 min
- 04About The Course1:23 min
- 05How To Get The Most Out Of This Course3:37 min
- 06Attachments & Discord Community0:00 min
Remix Essentials - Core Concepts1h 59m
- 01Module Introduction1:43 min
- 02Must-read: Creating a Remix v1 Project0:00 min
- 03Creating a Remix Project3:35 min
- 04Analyzing the Created Project4:02 min
- 05Getting Started with File-based Routing3:46 min
- 06Adding Links & Building a SPA (Single-Page Application)5:11 min
- 07Onwards to a Better Project3:06 min
- 08Styling Pages & Understanding the Root Route9:05 min
- 09Surfacing Component Styles6:44 min
- 10Styling Active Links via NavLink3:02 min
- 11How Form Submissions Work3:57 min
- 12Server-side Form Handling via action()3:23 min
- 13Adding Backend Code & Redirecting9:16 min
- 14Fetching Page Data via loader()4:59 min
- 15Returning & Using Fetched Data7:51 min
- 16From to4:49 min
- 17Providing User Feedback via useNavigation3:59 min
- 18Validating Input & Returning Data in action()6:05 min
- 19Error Handling via ErrorBoundary6:52 min
- 20Handling Error Responses via CatchBoundary7:34 min
- 21Adding Dynamic Routes & Dot-delimited Routes7:53 min
- 22Fetching Data for Dynamic Routes4:07 min
- 23Another CatchBoundary Example1:41 min
- 24Setting Page Metadata4:31 min
- 25Summary2:17 min
Routing & Layouts - Deep Dive1h 50m
- 01Module Introduction1:33 min
- 02What We'll Build - A Demo2:04 min
- 03Project Planning & Creation3:54 min
- 04Creating Project Routes - A Refresher10:12 min
- 05Nested Paths - An Alternative Approach5:47 min
- 06Layout Routes7:54 min
- 07Adding Components & Styling6:38 min
- 08Using Custom Fonts0:00 min
- 09Working on More Routes10:51 min
- 10Marketing Pages & Static Images4:04 min
- 11Leveraging Layouts2:41 min
- 12Rendering a Modal Page (Overlay Page)3:30 min
- 13Adding Links5:13 min
- 14Paths: Absolute vs Relative2:34 min
- 15Navigating Programmatically3:33 min
- 16Adding NavLinks3:32 min
- 17Introducing Pathless Layout Routes8:56 min
- 18Doing More with Pathless Layout Routes3:41 min
- 19Introducing Resource Routes3:39 min
- 20Understanding Splat Routes5:31 min
- 21Working with URL Search Parameters (Query Parameters)9:29 min
- 22Adding More Expense-related Links3:42 min
- 23Module Summary1:52 min
Data Fetching & Mutations - Deep Dive2h 33m
- 01Module Introduction1:04 min
- 02Project & Database (MongoDB) Setup3:40 min
- 03Adding Prisma (A Package For Querying the Database)4:17 min
- 04Adding an Expense Data Model5:48 min
- 05Preparing the Code for Form Submissions7:10 min
- 06Adding a Server-side "addExpense" Function6:08 min
- 07Adding Expenses to the Database (via action())6:57 min
- 08Adding Server-side Validation10:14 min
- 09Submitting Forms Programmatically5:09 min
- 10Adding Visual Submission Feedback5:29 min
- 11Fetching Expenses (via loader())9:16 min
- 12Loaders - A Closer Look5:27 min
- 13Loading a Single Expense (via Dynamic Route Parameters)8:47 min
- 14How Nested Loaders Are Executed3:03 min
- 15Using Parent Loader Data via useMatches()6:27 min
- 16Updating Data7:27 min
- 17Deleting Data3:22 min
- 18One Action - Multiple Forms6:28 min
- 19Programmatic "Behind-the-Scenes" Submission via useFetcher()9:31 min
- 20Extracting Search Parameters4:08 min
- 21Adding Visual Feedback to the Authentication Form2:17 min
- 22Adding a Shared Root Document7:25 min
- 23Adding Default Error Handling Logic4:24 min
- 24Handling Errors Without ErrorBoundary or CatchBoundary5:54 min
- 25Managing Errors Inside Components4:06 min
- 26Practice Time - Challenge1:13 min
- 27Practice Time - Solution5:27 min
- 28Updating the expenses/raw Route0:00 min
- 29Module Summary3:11 min
Adding User Authentication1h 12m
- 01Module Introduction0:50 min
- 02Project Setup1:01 min
- 03How Does User Authentication Work?2:15 min
- 04Preparing the Database5:16 min
- 05Adding Server-side Credentials Validation4:28 min
- 06Check for Existing Users & Emails3:32 min
- 07User Signup & Password Hashing6:32 min
- 08Getting Started with User Login3:49 min
- 09Sessions & Cookies - Preparation4:52 min
- 10Creating Session Cookies8:05 min
- 11Extracting Session Data & Rendering Conditional User Interfaces6:52 min
- 12Adding Logout6:36 min
- 13Protecting Routes6:48 min
- 14More Route Protection1:35 min
- 15Connecting Expenses & Users8:31 min
- 16Module Summary1:18 min
Optimizing & Deploying Remix Applications42m
- 01Module Introduction1:08 min
- 02Adding Metadata To Routes8:02 min
- 03Why You Might Need Custom Page Response Headers2:17 min
- 04Setting Page Response Headers3:38 min
- 05Working with Nested Headers3:38 min
- 06Using Action & Loader Headers2:49 min
- 07Disabling JavaScript For Some Pages6:49 min
- 08A Brief Look at the Remix Config File4:48 min
- 09Deployment Options2:03 min
- 10Deploying a Remix Website - An Example (Netlify)7:04 min
Course Roundup1m
- 01Course Roundup0:58 min
Ready to Get Started?
Choose the option that works best for you.
Single Course
Remix.js - The Practical Guide
One Payment. Lifetime Access.
$69one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime