CF

Remix Bootcamp: Zero to Mastery

21h 2m 22s
English
Paid

Remix Bootcamp: Zero to Mastery is a 245-lesson 21 hours 2 minutes self-paced course by Zero To Mastery. Learn Remix by building your own full-stack project.

Course facts

Lessons
245
Duration
21 hours 2 minutes
Level
All levels
Language
English
Updated
Instructor
Zero To Mastery
Price
Premium

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.

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.

Additional

https://github.com/zachdtaylor/remix-recipes-course

Who teaches Remix Bootcamp: Zero to Mastery? Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

What lessons are included in Remix Bootcamp: Zero to Mastery?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 245 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Outline
All Course Lessons (245)
#Lesson TitleDurationAccess
1
Course Outline Demo
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
Unlock unlimited learning

Get instant access to all 244 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Remix Bootcamp: Zero to Mastery?

  • HTMX - The Practical Guide thumbnailUpdated 2y ago

    HTMX - The Practical Guide

    By: Academind Pro (Maximilian Schwarzmüller)
    Are you tired of picking the right JS library from a vast sea of libraries? And do you sometimes feel like frontend JavaScript development & code became.
    4h 5m5/5
  • SolidJS: The Complete Guide thumbnailUpdated 2y ago

    SolidJS: The Complete Guide

    By: Sinan Polat
    This book is the result of two years of meticulous work. SolidJS may seem simple at first glance.
  • Complete Guide to Qwik thumbnailUpdated 2y ago

    Complete Guide to Qwik

    By: Fullstack.io
    Master Qwik with practical examples and learn to create scalable, fast web applications. Improve user and developer experience with this intuitive framework.

More courses by Zero To Mastery

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling, students should have a basic understanding of web development, including familiarity with HTML, CSS, and JavaScript. Knowledge of NodeJS is beneficial as the course involves installing and creating projects with NodeJS. Understanding frontend frameworks and basic database concepts will also be advantageous, as the course covers advanced topics such as setting up databases with Postgres and Prisma.
What kind of project will I build during the course?
Students will work on building a full-stack project, specifically a 'Master Project' that includes features like a Recipe Page and a Pantry UI. The project involves using technologies such as Tailwind for styling, Postgres for database management, and Remix's special components for routing and state management. By the end of the course, students will have developed a comprehensive, functioning web application.
Who is the target audience for this course?
The course is designed for developers who are serious about advancing their coding skills and careers by building better websites. It caters to those interested in full-stack development and who wish to learn cutting-edge web technologies like Remix. Beginners with a basic understanding of web development concepts can also benefit, as the course gradually progresses from introductory to advanced topics.
How does the depth and scope of this course compare to similar courses?
This course offers extensive coverage, consisting of 245 lessons that range from introductory topics like 'What is Remix?' to advanced subjects such as 'Validating Forms with Zod' and 'Server State in Remix.' Unlike many other courses, it provides a hands-on approach to learning by building a full-stack project, giving students practical experience with modern web development tools and techniques.
What specific tools and platforms are covered in this course?
The course covers a variety of tools and platforms essential for modern web development. Students will learn about NodeJS for backend development, Tailwind for CSS styling, and Prisma for database management with Postgres. The lessons also delve into Remix's unique features, such as its routing system and special components, providing a comprehensive toolkit for full-stack development.
What topics are not covered in this course?
While the course is comprehensive, it does not cover frontend frameworks other than Remix, such as React or Angular. It also does not delve into mobile app development, focusing solely on web applications. Additionally, the course does not cover cloud deployment or continuous integration/continuous deployment (CI/CD) pipelines, as the focus is on building and managing web applications locally.
What is the expected time commitment for completing the course?
The course consists of 245 lessons, and the time commitment will vary based on individual pace and familiarity with the topics. Given the depth of material, students should expect to dedicate several weeks to complete the course if progressing at a moderate pace. Dedicating a few hours each day is recommended to fully grasp the concepts and complete the hands-on project work included in the curriculum.