English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 110 lectures (8h 34m) | 3.80 GB
Learn how to build feature-rich & highly reactive fullstack React applications with Remix.
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 works
- Remix vs NextJS
- Adding routes and pages
- Working with nested routes
- Managing (potentially nested) layouts
- Combining pages with non-page components
- Styling pages and components
- Fetching data (also for nested pages)
- Submitting data – via forms & programmatically
- Handling data submissions on the backend
- Storing data in databases & fetching data from databases
- Validating user input
- Authenticating users (signup & login)
- Managing sessions via cookies
- Optimizing Remix applications
- Deploying Remix applications
- And much more!
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
Table of Contents
Introduction
1 Welcome to the Course
2 What Is Remix And Why Would You Use Remix
3 Remix vs NextJS
4 About The Course
5 How To Get The Most Out Of This Course
6 Attachments & Discord Community
Remix Essentials Core Concepts
7 Module Introduction
8 Creating a Remix Project
9 Analyzing the Created Project
10 Getting Started with Filebased Routing
11 Adding Links & Building a SPA SinglePage Application
12 Onwards to a Better Project
13 Styling Pages & Understanding the Root Route
14 Surfacing Component Styles
15 Styling Active Links via NavLink
16 How Form Submissions Work
17 Serverside Form Handling via action
18 Adding Backend Code & Redirecting
19 Fetching Page Data via loader
20 Returning & Using Fetched Data
21 From form to Form
22 Providing User Feedback via useNavigation
23 Validating Input & Returning Data in action
24 Error Handling via ErrorBoundary
25 Handling Error Responses via CatchBoundary
26 Adding Dynamic Routes & Dotdelimited Routes
27 Fetching Data for Dynamic Routes
28 Another CatchBoundary Example
29 Setting Page Metadata
30 Summary
Routing & Layouts Deep Dive
31 Module Introduction
32 What Well Build A Demo
33 Project Planning & Creation
34 Creating Project Routes A Refresher
35 Nested Paths An Alternative Approach
36 Layout Routes
37 Adding Components & Styling
38 Using Custom Fonts
39 Working on More Routes
40 Marketing Pages & Static Images
41 Leveraging Layouts
42 Rendering a Modal Page Overlay Page
43 Adding Links
44 Paths Absolute vs Relative
45 Navigating Programmatically
46 Adding NavLinks
47 Introducing Pathless Layout Routes
48 Doing More with Pathless Layout Routes
49 Introducing Resource Routes
50 Understanding Splat Routes
51 Working with URL Search Parameters Query Parameters
52 Adding More Expenserelated Links
53 Module Summary
Data Fetching & Mutations Deep Dive
54 Module Introduction
55 Project & Database MongoDB Setup
56 Adding Prisma A Package For Querying the Database
57 Adding an Expense Data Model
58 Preparing the Code for Form Submissions
59 Adding a Serverside addExpense Function
60 Adding Expenses to the Database via action
61 Adding Serverside Validation
62 Submitting Forms Programmatically
63 Adding Visual Submission Feedback
64 Fetching Expenses via loader
65 Loaders A Closer Look
66 Loading a Single Expense via Dynamic Route Parameters
67 How Nested Loaders Are Executed
68 Using Parent Loader Data via useMatches
69 Updating Data
70 Deleting Data
71 One Action Multiple Forms
72 Programmatic BehindtheScenes Submission via useFetcher
73 Extracting Search Parameters
74 Adding Visual Feedback to the Authentication Form
75 Adding a Shared Root Document
76 Adding Default Error Handling Logic
77 Handling Errors Without ErrorBoundary or CatchBoundary
78 Managing Errors Inside Components
79 Practice Time Challenge
80 Practice Time Solution
81 Updating the expensesraw Route
82 Module Summary
Adding User Authentication
83 Module Introduction
84 Project Setup
85 How Does User Authentication Work
86 Preparing the Database
87 Adding Serverside Credentials Validation
88 Check for Existing Users & Emails
89 User Signup & Password Hashing
90 Getting Started with User Login
91 Sessions & Cookies Preparation
92 Creating Session Cookies
93 Extracting Session Data & Rendering Conditional User Interfaces
94 Adding Logout
95 Protecting Routes
96 More Route Protection
97 Connecting Expenses & Users
98 Module Summary
Optimizing & Deploying Remix Applications
99 Module Introduction
100 Adding Metadata To Routes
101 Why You Might Need Custom Page Response Headers
102 Setting Page Response Headers
103 Working with Nested Headers
104 Using Action & Loader Headers
105 Disabling JavaScript For Some Pages
106 A Brief Look at the Remix Config File
107 Deployment Options
108 Deploying a Remix Website An Example Netlify
Course Roundup
109 Course Roundup
110 Bonus Lecture
Resolve the captcha to access the links!