Remix.Js - The Practical Guide

Learn how to build feature-rich & highly reactive fullstack React applications with Remix.

What you'll learn
Build fullstack React websites and apps with Remix
Implement dynamic and nested pages
Construct nested layouts with optimized data fetching
Handle form submissions without client-side JavaScript logic
Implement user authentication via session cookies
Requirements
Basic React knowledge is required
NO prior Remix knowledge is required
NO advanced React knowledge is required
Description
Remix is a strongly growing React framework that (vastly!) simplifies the process of building feature-rich, interactive fullstack React applications and websites.With Remix, backend and frontend code work together seamlessly, and, as a developer, you don't have to worry about managing multiple, separated projects or codebases. Instead, you implement your backend logic next to your frontend code and let Remix handle the rest.In this course, you will learn how to build fullstack React.js applications and websites with Remix from the ground up. All key Remix concepts are covered in-depth and taught step-by-step, slowly building up on each other. By the end of this course you will therefore be able to build your own Remix fullstack websites!As part of this course, you will build two major demo projects, including an "Expenses Management Website" where users can sign up, manage their expenses and view expense analytics. As part of this project, you will learn how to perform CRUD (Create, Read, Update, Delete) operations with Remix and how to connect your React app to a database.In general, in this course, the following concepts are covered in great detail:What Remix is & how it worksRemix vs NextJSAdding routes and pagesWorking with nested routesManaging (potentially nested) layoutsCombining pages with non-page componentsStyling pages and componentsFetching data (also for nested pages)Submitting data - via forms & programmaticallyHandling data submissions on the backendStoring data in databases & fetching data from databasesValidating user inputAuthenticating users (signup & login)Managing sessions via cookiesOptimizing Remix applicationsDeploying Remix applicationsAnd much more!

Overview

Section 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

Section 2: Remix Essentials - Core Concepts

Lecture 7 Module Introduction

Lecture 8 Creating a Remix Project

Lecture 9 Analyzing the Created Project

Lecture 10 Getting Started with File-based Routing

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

Lecture 12 Onwards to a Better Project

Lecture 13 Styling Pages & Understanding the Root Route

Lecture 14 Surfacing Component Styles

Lecture 15 Styling Active Links via NavLink

Lecture 16 How Form Submissions Work

Lecture 17 Server-side Form Handling via action()

Lecture 18 Adding Backend Code & Redirecting

Lecture 19 Fetching Page Data via loader()

Lecture 20 Returning & Using Fetched Data

Lecture 21 From to

Lecture 22 Providing User Feedback via useNavigation

Lecture 23 Validating Input & Returning Data in action()

Lecture 24 Error Handling via ErrorBoundary

Lecture 25 Handling Error Responses via CatchBoundary

Lecture 26 Adding Dynamic Routes & Dot-delimited Routes

Lecture 27 Fetching Data for Dynamic Routes

Lecture 28 Another CatchBoundary Example

Lecture 29 Setting Page Metadata

Lecture 30 Summary

Section 3: Routing & Layouts - Deep Dive

Lecture 31 Module Introduction

Lecture 32 What We'll Build - A Demo

Lecture 33 Project Planning & Creation

Lecture 34 Creating Project Routes - A Refresher

Lecture 35 Nested Paths - An Alternative Approach

Lecture 36 Layout Routes

Lecture 37 Adding Components & Styling

Lecture 38 Using Custom Fonts

Lecture 39 Working on More Routes

Lecture 40 Marketing Pages & Static Images

Lecture 41 Leveraging Layouts

Lecture 42 Rendering a Modal Page (Overlay Page)

Lecture 43 Adding Links

Lecture 44 Paths: Absolute vs Relative

Lecture 45 Navigating Programmatically

Lecture 46 Adding NavLinks

Lecture 47 Introducing Pathless Layout Routes

Lecture 48 Doing More with Pathless Layout Routes

Lecture 49 Introducing Resource Routes

Lecture 50 Understanding Splat Routes

Lecture 51 Working with URL Search Parameters (Query Parameters)

Lecture 52 Adding More Expense-related Links

Lecture 53 Module Summary

Section 4: Data Fetching & Mutations - Deep Dive

Lecture 54 Module Introduction

Lecture 55 Project & Database (MongoDB) Setup

Lecture 56 Adding Prisma (A Package For Querying the Database)

Lecture 57 Adding an Expense Data Model

Lecture 58 Preparing the Code for Form Submissions

Lecture 59 Adding a Server-side "addExpense" Function

Lecture 60 Adding Expenses to the Database (via action())

Lecture 61 Adding Server-side Validation

Lecture 62 Submitting Forms Programmatically

Lecture 63 Adding Visual Submission Feedback

Lecture 64 Fetching Expenses (via loader())

Lecture 65 Loaders - A Closer Look

Lecture 66 Loading a Single Expense (via Dynamic Route Parameters)

Lecture 67 How Nested Loaders Are Executed

Lecture 68 Using Parent Loader Data via useMatches()

Lecture 69 Updating Data

Lecture 70 Deleting Data

Lecture 71 One Action - Multiple Forms

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

Lecture 73 Extracting Search Parameters

Lecture 74 Adding Visual Feedback to the Authentication Form

Lecture 75 Adding a Shared Root Document

Lecture 76 Adding Default Error Handling Logic

Lecture 77 Handling Errors Without ErrorBoundary or CatchBoundary

Lecture 78 Managing Errors Inside Components

Lecture 79 Practice Time - Challenge

Lecture 80 Practice Time - Solution

Lecture 81 Updating the expenses/raw Route

Lecture 82 Module Summary

Section 5: Adding User Authentication

Lecture 83 Module Introduction

Lecture 84 Project Setup

Lecture 85 How Does User Authentication Work?

Lecture 86 Preparing the Database

Lecture 87 Adding Server-side Credentials Validation

Lecture 88 Check for Existing Users & Emails

Lecture 89 User Signup & Password Hashing

Lecture 90 Getting Started with User Login

Lecture 91 Sessions & Cookies - Preparation

Lecture 92 Creating Session Cookies

Lecture 93 Extracting Session Data & Rendering Conditional User Interfaces

Lecture 94 Adding Logout

Lecture 95 Protecting Routes

Lecture 96 More Route Protection

Lecture 97 Connecting Expenses & Users

Lecture 98 Module Summary

Section 6: Optimizing & Deploying Remix Applications

Lecture 99 Module Introduction

Lecture 100 Adding Metadata To Routes

Lecture 101 Why You Might Need Custom Page Response Headers

Lecture 102 Setting Page Response Headers

Lecture 103 Working with Nested Headers

Lecture 104 Using Action & Loader Headers

Lecture 105 Disabling JavaScript For Some Pages

Lecture 106 A Brief Look at the Remix Config File

Lecture 107 Deployment Options

Lecture 108 Deploying a Remix Website - An Example (Netlify)

Section 7: Course Roundup

Lecture 109 Course Roundup

Lecture 110 Bonus Lecture

React developers who want to build fullstack applications with React