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.
Remix Bootcamp: Zero to Mastery
21h 2m 22s
English
Paid
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
About the Author: Zero To Mastery
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.
Watch Online 245 lessons
0:00
/ #1: Course Outline
All Course Lessons (245)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionRelated courses
-
Updated 2y agoComplete Guide to Qwik
By: Fullstack.ioMaster Qwik with practical examples and learn to create scalable, fast web applications. Improve user and developer experience with this intuitive framework. -
Updated 2y agoSolidJS: The Complete Guide
By: Sinan PolatThis book is the result of two years of meticulous work. SolidJS may seem simple at first glance. -
Updated 2y agoHTMX - 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
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.