Table of Contents
IntroductionKent C. Dodds introduces the course by providing personal background with Remix and some prerequisites for the course. A brief overview of the course structure and how to set up the course repo is also provided in this segment.
Remix OverviewKent discusses an overview of the web framework Remix and its core features, including nested routes, server-side rendering, faster loading times, and prefetching data. Remix can update data using just a form and an action on the server.
Remix Q&AKent answers student questions regarding examples of tech stacks using Remix and why achieving the best possible UX with static site generation is impossible. Questions regarding if not having a static site means calling a CMS for every request, if props can be gotten at build time, if children segments have their own loaders, and how to deal with SEO for a landing page are also covered in this segment.
Getting Started with RemixKent demonstrates the file layout of the course repo, how to run the indie stack setup, and walks through two included scripts, one that runs the exercises and another that compares the student exercise to the final solutions. Each course exercise has a README.md file that provides background information, links, exercise instructions, and a space for notes.
Your First Route ExerciseStudents are instructed to add a link to a new route at /posts and create a file that will be rendered when the user visits that route.
Your First Route SolutionKent walks through the solution to the first route exercise and answers a student's question regarding the benefits of flat routes.
Data Loading ExerciseStudents are instructed to put the provided blog posts directly into the loader, retrieve the posts using JSON and useLoaderData, and render the posts using the provided JSX.
Data Loading SolutionKent walks through the solution to the data loading exercise. The answer to the exercise's help TypeScript extra credit is also provided in this segment.
Data Loading Q&AKent answers student questions regarding what Remix is doing when making a request from the loader to the browser, if this type of loader handles serializable JSON, when the HTML is received, and if data can be transmitted other ways like CSV or YAML.
Setup PrismaKent demonstrates how to swap out the hard-coded data with calls into Prisma and optimize data loading by limiting Prisma's querying API.
Dynamic Params ExerciseStudents are instructed to create dynamic routes to generate pages for blog posts. Extra credit exercises include adding post content and type guards for TypeScript.
Dynamic Params SolutionKent walks through the solution to the dynamic params exercise. Student questions regarding how to avoid prop drilling in larger applications, and if the loader data from the parent segment can be accessed when using nested dynamic segments.
Rendering HTML from MarkdownKent demonstrates fully configuring TypeScript for Remix conventions and walks through rendering HTML code from Markdown using the marked library. A student's question regarding if it only executes once in the top level component when using useLoaderData in a child component is also covered in this segment.
Nested Routing ExerciseStudents are instructed to add a route to /posts/admin to see a list of posts, /posts/admin/:slug to edit posts, and /posts/admin/new to create new posts.
Nested Routing SolutionKent walks through the solution to the nested routing exercise.
Nested Routing Q&AKent answers student questions regarding why loader code is being duplicated from the index.tsx, if each route turns into a separate function when reporting to Edge, and if Remix will be adding auth support. This segment also covers how the code location relates to where UI is rendering and a student's question regarding nesting routes for folder structure consistency.
Mutations ExerciseStudents are instructed to implement the new.tsx file by adding the action and creating a createPost function that accepts the title, slug, and markdown in the post.server.ts file.
Mutations SolutionKent walks through the solution to the mutations exercise.
Mutations Q&AKent answers student questions, including if anything needs to be done in the action loader to respond to actions and possible strategies for client-side validation. A demonstration of implementing error handling for the mutations extra credit is also provided in this segment.
Progressive Enhancement ExerciseStudents are instructed to add a loading state to the create button in the form. Once the user submits the form, the button should change to "Creating..." and be disabled.
Progressive Enhancement SolutionKent walks through the solution to the progressive enhancement exercise.
PrefetchingKent live codes the extra credit for the progressive enhancement exercise. To help load the pages as quickly as possible, a prefetch is added to the links on the post listing page and admin page.
Multiple Forms ExerciseStudents are instructed to add a "delete" button to the post creation page and have the "create" button change to an "update" button when editing an existing post.
Multiple Forms SolutionKent walks through the solution to the multiple forms exercise. A demonstration of Remix allowing the ability to name submit buttons is also covered in this segment.
Errors & Validation
Errors ExerciseStudents are instructed to add error boundaries to the /post/:slug, /posts/admin/:slug, /post routes, and the hidden parent route. Remix has built-in error handling capabilities, including ErrorBoundary and CatchBoundary.
Revalidating & Sending DataKent discusses revalidating data in Remix using the unstable_shouldReload API to determine if a route should revalidate and how to trigger data revalidation imperatively. Remix supports streaming and server-sent events to help avoid needing to revalidate entire pages.
Errors SolutionKent walks through the solution to the errors exercise. A student's question regarding if catch boundaries are for server-side while error boundaries are for client-side is also covered in this segment.
Environment Variables ExerciseStudents are instructed to configure the client and server for the ability to create blog posts via the ADMIN_EMAIL variable so only the admin user can create posts.
Environment Variables SolutionKent walks through the solution to the environment variables exercise.
Admin User ExerciseStudents are instructed to create an abstraction to protect every route under /posts/admin. This abstraction should apply to both loader and action functions.
Admin User SolutionKent walks through the solution to the admin user exercise. A brief walkthrough of the extra credit exercise of hiding admin links is also provided in this segment.
Wrapping UpKent wraps up the course by providing a link for course feedback and answering student questions regarding image optimization with Remix, how to approach building a dashboard with widgets from multiple data sources, and SPA compared to MPA with Remix. A look into some of the upcoming changes to Remix is also provided in this segment.