Remix Bootcamp: Zero to Mastery
21h 2m 22s
English
Paid
Course description
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.
Read more about the course
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
Watch Online Remix Bootcamp: Zero to Mastery
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 subscriptionComments
0 commentsSimilar courses
Normal UI
Sources: Anthony Alicea
You don't need to be a designer to make a web application more user-friendly. Successful web applications are user-friendly web applications. The better...
39 minutes 16 seconds
Full-Stack Tao
Sources: Alex Kondov
Software development is not only about creating new features, but also about writing code that retains its value over time and remains flexible to changes.
Build & Test Accessible Web Apps | Testing Accessibility (PRO)
Sources: Marcy Sutton
Comprehensive Accessibility Training for Creating High-Quality Web Applications A self-paced course designed to teach the principles and effective...
16 hours 30 minutes 59 seconds
Developing LLM App Frontends with Streamlit
Sources: zerotomastery.io
This byte-sized course will teach Streamlit fundamentals and how to use Streamlit to create a frontend for your LLM-powered applications.
1 hour 43 minutes 52 seconds
Want to join the conversation?
Sign in to comment