Remix Bootcamp: Zero to Mastery

21h 2m 22s
English
Paid
May 20, 2024

Learn Remix by building your own full-stack project. Taught by an industry professional, this course covers everything from beginner to advanced topics. If you're a Developer who is serious about taking your coding skills and career to the next level by building better websites, then this is the course for you.

More

We guarantee you that this is the most efficient and up-to-date Remix course that you can find. Zach will help you go from an absolute beginner to learning Remix Run, building better websites, and getting hired as a Web Developer.

Watch Online Remix Bootcamp: Zero to Mastery

Join premium to watch
Go to premium
# Title Duration
1 Course Outline 05:41
2 What is Remix? 02:21
3 Why Remix? 06:37
4 Intro to the Master Project 03:52
5 The Recipe Page & Optimistic UI 07:24
6 Finishing the Tour of the Master Project 05:39
7 Installing NodeJS 02:03
8 Creating a Remix Project 01:52
9 The Vite Config File 04:00
10 Upgrading Remix and Future Flags 03:33
11 Owning Your Entry Points 02:13
12 What are Routes? 02:49
13 Nested Routing 06:32
14 The Root Route 03:16
15 Remix's Special Components 03:42
16 The Link API 03:06
17 Adding Style with Links 07:14
18 Techniques for Component-Level CSS 07:45
19 Setting Up Tailwind 03:39
20 Using Tailwind - Part 1 04:27
21 Using Tailwind - Part 2 05:46
22 Using Tailwind - Part 3 05:10
23 What are Loaders? 09:35
24 Pending UI 09:07
25 Why Load Before Route Transitions 09:44
26 Sharing Data Between Routes 12:03
27 Errors and Error Boundaries 06:24
28 Installing Postgres with Docker 15:10
29 Setting Up Prisma with Postgres 07:16
30 Overview 02:26
31 Setting Up the Pantry Route 11:04
32 Redirects in Remix 07:05
33 Setting Up the Pantry Database Tables 13:13
34 Seeding the Database 09:14
35 Database UI Tools 09:37
36 Loading Data into the Pantry UI 05:13
37 Creating a Model Abstraction 10:38
38 Building a Basic Shelf UI 10:54
39 Intro to HTML Forms 21:35
40 Enhancing the Search Bar with JavaScript 08:17
41 Creating Shelves 14:12
42 Enhancing the Create Shelf Button 08:10
43 Deleting Shelves 18:46
44 Handling Multiple Deletes 06:58
45 Introducing useFetcher 07:31
46 More Cases for useFetcher 02:06
47 Server State in Remix 04:28
48 Editing Shelf Names 12:28
49 Validating Forms with Zod 18:45
50 Intro to Optimistic UI 09:20
51 Optimistically Deleting Shelves 12:57
52 Creating Shelf Items 07:22
53 Deleting Shelf Items 11:57
54 Optimistically Creating Shelf Items 21:46
55 Suppressing the Layout Effect Warning 04:24
56 Optimistically Deleting Shelf Items 08:18
57 Additional Enhancements 14:17
58 Overview 01:33
59 The User Model 07:41
60 The Login Route 10:11
61 Intro to Cookies 02:25
62 Setting Our First Cookie 03:41
63 Cookie Attributes 07:28
64 A Simple Auth Flow 06:21
65 Remix's Cookie Helper 05:05
66 Cryptographic Signatures 04:10
67 Signing Cookies 01:46
68 Signing Cookies in Remix 04:28
69 Sessions 03:43
70 Session Storage 04:03
71 Session Storage in Remix 07:11
72 Overview 02:46
73 What is Authentication 02:03
74 Overview of Magic Link Authentication 02:52
75 Magic Link Structure 01:52
76 Generating Magic Links 07:47
77 Updating the Login Route 03:58
78 Validation Route Overview 01:50
79 Parsing the Magic Link Payload 08:37
80 Validating the Expiration Time 03:10
81 Validating the Nonce 06:05
82 Finishing the Login 02:43
83 The Sign Up Form 08:13
84 The Sign Up Form Action 09:38
85 Signing Up for Mailgun 03:49
86 Setting Up the Mailgun Client 06:17
87 Sending the Magic Link Email 06:09
88 Showing the Check Email Message 02:20
89 Overview 02:53
90 Authorization Rules for the Login Page 02:27
91 Login Authorization Rule #1 06:20
92 Login Authorization Rule #2 01:07
93 Authorization Rules for the Pantry Page 05:55
94 Pantry Authorization Rule #1 02:43
95 Pantry Authorization Rule #2 01:41
96 Pantry Authorization Rules #3-4 02:16
97 Pantry Authorization Rules #5-6 03:44
98 Pantry Authorization Rule #7 02:23
99 UI Updates Roadmap 02:16
100 Adding an Error Boundary 07:31
101 Hiding the App Nav Button 03:04
102 Creating a Logout Route 05:29
103 Overview 04:06
104 Revisiting the Remix Philosophy 03:29
105 Setting Up the Recipes Route 04:35
106 Setting Up the Recipe Database Tables 03:56
107 Updating the Seed Script 04:24
108 Recipe Page Components 01:45
109 The Recipes Loader 06:00
110 Rendering the Recipe List 04:20
111 Creating a Search Bar Component 07:47
112 Supporting Search in the Loader 02:10
113 The Create Recipe Form 04:52
114 Setting Up the Recipe Detail Route 04:45
115 Sorting the Recipes List 01:36
116 Preserving the Search Parameters 06:18
117 Recipe Link Pending UI 05:42
118 Using Link Prefetch 08:20
119 Recipe Detail Route Overview 01:40
120 Overview of Step 1 - Creating an Input Component 06:41
121 Displaying the Name and Total Time 10:14
122 Rendering the Ingredients 07:25
123 Rendering the Instructions 06:31
124 Overview of Step 2 - Updating Recipes 01:04
125 Saving the Recipe Name, Total Time, and Instructions 08:33
126 FormData's getAll Function 04:01
127 Updating the validateForm Function 08:29
128 Updating the Ingredients 08:06
129 Creating New Ingredients 07:29
130 Addressing and Issue 04:09
131 Adding Error Messages to the UI 07:40
132 Exercise: Imposter Syndrome 02:57
133 Overview of Step 3 - Deleting Recipes and Ingredients 00:33
134 Deleting a Recipe 02:28
135 Deleting Ingredients 03:39
136 Authorization Rules for the Recipe Detail Route 01:51
137 Recipe Detail Authorization Rule #1 02:56
138 Recipe Detail Authorization Rules #2-5 02:08
139 Enhancement Overview 02:35
140 Overview of Step 1 - Saving Inputs on Change 01:20
141 Saving Recipe Inputs on Change 08:23
142 Creating an Ingredient Row Component 05:53
143 Saving Ingredient Inputs on Change 04:04
144 Persisting the Recipe Fetcher Data 06:51
145 Persisting the Ingredient Fetcher Data 05:07
146 Debouncing Form Inputs 02:07
147 Creating a Hook for Debouncing 07:04
148 Debouncing the Form Inputs 03:32
149 Overview of Step 2 - The Case for Optimistic UI in the Side Bar 02:02
150 Updating the Side Bar with useFetchers 05:47
151 Overview of Step 3 03:40
152 Wiring up a Fetcher to Create New Ingredients 09:28
153 Creating a Hook for Optimistically Rendering Ingredients 05:18
154 Optimistically Rendering New Ingredients 04:59
155 Updating the Default Enter Key Behavior 04:15
156 Creating Mew Ingredients with the Enter Key 01:55
157 Focusing the Amount Input on Create 04:48
158 Optimistically Deleting Ingredients 03:44
159 Overview 01:23
160 Creating a File Input 03:27
161 The Urlencoded Content Type 05:36
162 The Multipart Content Type 05:30
163 Parsing Multipart Forms 01:27
164 Overview of Parsing Multipart Forms in Remix 05:17
165 Remix's Built-In Upload Handlers 03:48
166 Storing Images in the Public Directory 03:16
167 Writing the Image URL to the Database 03:10
168 Overview 03:30
169 Updating the DB to Track Meal Plans 02:19
170 Modals in Remix 04:30
171 Setting up the Modal Route 05:00
172 Creating some Components for the Modal 05:26
173 Meal Plan Modal UI 05:44
174 Passing Context to the Outlet 04:47
175 Creating the Modal Action 05:23
176 The Update Meal Plan Action Case 06:19
177 Indicating which Recipes are in the Meal Plan 03:32
178 The Meal Plan Filter Button 07:01
179 The Meal Plan Filter Backend 02:27
180 Preserving the Search State when Filtering 05:18
181 Preserving the Filter State when Searching 03:49
182 Overview of Next Steps and Setting up the Grocery List Route 02:22
183 Defining the Grocery List Item Type 04:17
184 Building the Grocery List Item Component 06:17
185 Getting Started on the Grocery List Loader 06:17
186 Formatting the Missing Ingredients 03:36
187 Grouping Grocery List Items by the Ingredient Name 06:06
188 Rendering the Grocery List 02:36
189 Creating the Grocery List Route Action 04:29
190 Adding Grocery Items to the Pantry 06:21
191 The Grocery List Empty State 03:18
192 Clearing the Meal Plan 06:14
193 Overview 01:29
194 The PageLayout Component 04:06
195 Setting up the Settings Route 02:31
196 Intro to Resource Routes 02:39
197 MIME Types 05:46
198 Overview of Customizing the Theme 02:34
199 Renaming the Resource Route 01:46
200 Controlling the Tailwind Theme with the Theme Resource Route 05:02
201 Building the Form to Change the Site Theme 03:50
202 Creating the Theme Cookie 02:09
203 The App Settings Route Action 04:05
204 The App Settings Route Loader 02:51
205 Fixing the Off-By-One Issue 05:20
206 Returning Dynamic CSS Based on the Theme Cookie 03:32
207 Overview 00:53
208 Redirecting the Home Page 01:18
209 The Discover Page UI 04:38
210 Discover Detail Page Setup 02:45
211 Discover Detail Page UI 03:07
212 Intro to Caching 01:48
213 Private vs Server Caches 03:10
214 Preview of Using the Browser Cache 03:42
215 Caching Vocabulary 02:36
216 The Default Browser Strategy 03:32
217 The No-Store Strategy 01:24
218 The Fixed-Time Strategy 01:22
219 The Cache-Busting Strategy 04:10
220 The Revalidate-Once-Stale Strategy 01:45
221 Etags 04:04
222 Responding to the If-None-Match Header 03:13
223 The Stale-While-Revalidate Strategy 04:22
224 Caching Full HTML Pages 02:29
225 Responding to If-None-Match on HTML Requests 05:40
226 Introduction to Testing 01:01
227 Setting Up Playwright 02:00
228 Writing our First Test 06:52
229 Creating Dynamic Routes 07:01
230 Implementing the Test Login Route 04:54
231 Testing a Typical Pantry Page Flow 07:18
232 Finishing up the Pantry Test 04:05
233 The Playwright UI 02:23
234 Creating a Delete User Test Endpoint 04:24
235 Deleting Test Users 01:42
236 Deployment Overview 00:45
237 The Fly CLI 02:48
238 Prisma MIgrations 03:28
239 Creating the Database Server 03:15
240 Creating the App Server 01:39
241 Setting Environment Variables 03:27
242 Deploying the App 01:10
243 An Example of Upgrading Remix 13:52
244 Thank You! 01:18
245 ARCHIVED - Seeding the Database (Archived Apr 2024) 09:14

Similar courses to Remix Bootcamp: Zero to Mastery

GSAP3: Beyond the Basics

GSAP3: Beyond the BasicsCarl (Creative Coding Club)

Duration 8 hours 25 minutes 41 seconds
SolidJS: The Complete Guide
SVG Animation with GreenSock

SVG Animation with GreenSockCarl (Creative Coding Club)

Duration 12 hours 34 minutes 48 seconds
Building Full-Stack Apps with AI

Building Full-Stack Apps with AIMckay Wrigley (takeoff)

Duration 8 hours 3 minutes 16 seconds
Next Auth V5 - Продвинутое руководство
Animating the web with Framer Motion

Animating the web with Framer MotionJeroen Reumkens

Duration 6 hours 3 minutes 51 seconds