Case Study: Building Shop with Remix
A case study on how Shopify rapidly built a web version of their popular iOS/Android app Shop with Remix
A case study on how Shopify rapidly built a web version of their popular iOS/Android app Shop with Remix
Brooks walks through how to get started with Remix SPA mode (ssr: false) and how to setup a simple GitHub Action to deploy to GitHub Pages. Repo: https://github.com/brookslybrand/remix-gh-pages 00:00 - Intro 00:19 - Setting up a Remix SPA mode project 02:26 - Setting up GitHub Pages 03:47 - Setting up a GitHub Action 06:12 - Fixing asset 404s with basename 08:44 - Outro Learn more at https://remix.run
Learn how to implement internationalization (i18n) in your Remix project. Discover the significance of i18n, gain an understanding of the core principles, and learn various strategies for effective i18n management with Remix.
Tying all of the previous Trellix Singles together, this videos shows how you can build something as complex as optimistic Drag and Drop with the simple primitives of Remix. Explore the full code here π COMING SOON 00:00 - Overview 00:46 - Drag and Drop implementation 05:45 - UX before optimistic UI 06:52 - Board state implementation 07:45 - Adding optimistic drag and drop 11:42 - UX with optimistic UI 12:28 - Canceling fetches with fetcher keys Learn more at https://remix.run
Learn how to leverage useSubmit and useFetchers to handle the complex use case of optimistically updating multiple forms without a single useState or useEffect. Explore the full code here π COMING SOON 00:00 - Overview 02:14 - Before optimistic UI 04:16 - Using useSubmit 06:47 - Update data with pending items 09:45 - Get pending items with useFetchers 15:54 - Add pending items to data 17:50 - Demoing optimistic UI 18:26 - Auto scroll with flushSync 21:15 - Review Learn more at https://remix.run
Learn how to create in-place optimistic UI to avoid flickering of state after submitting an action and waiting for the loader to revalidate. Explore the full code here π COMING SOON 00:00 - Overview 00:57 - EditableText component 01:50 - Form submissions without optimistic UI 03:14 - Adding optimistic UI 06:58 - Handling focus management 10:19 - Demoing the optimistic UI Learn more at https://remix.run
With useNavigation we can render contextual pending UI to give our user feedback that our application is "thinking" while they way for an action to resolve. Explore the full code here π COMING SOON 00:00 - Overview 00:45 - Adding pending UI via useNavigation 02:57 - Improving pending UI via formAction 04:10 - Pending UI for multiple actions Learn more at https://remix.run
By returning redirects we can improve the user's experience after they create a new board by changing a single line of code. Explore the full code here π COMING SOON 00:00 - Overview 00:33 - Redirect after creating a record Learn more at https://remix.run
This video brings everything together from the first 9 videos to allow authenticated users to create a new board and automatically see their new board once it's created. This is the loader, component, action trifecta that makes Remix so powerful. Explore the full code here π COMING SOON 00:00 - Overview 01:31 - Setting up a Remix Action 02:24 - Validating the form data 05:08 - Creating a new board 05:27 - Essential vs. incidental complexity Learn more at https://remix.run
Like protecting routes from unauthenticated users, sometimes you also want to redirect authenticated users away from other routes. This video shows you the best way to handle redirecting a users from the root of Trellix to the "home" route. Explore the full code here π COMING SOON 00:00 - Overview 00:19 - Redirecting from the root route (β) 02:11 - Redirecting from the index route (βοΈ) 03:44 - Demoing redirecting logged in users 04:44 - Remix in the future: middleware Learn more at https://remix.run
Remix makes it easy to protect routes that require the user to be authenticated. With a single function you can get the user's data if they're authenticated and otherwise redirect them to the login page. Explore the full code here π COMING SOON 00:00 - Overview 00:36 - Requiring a user on routes 02:32 - Throwing a redirect 04:40 - Demoing the protected route Learn more at https://remix.run
Learn how to log users out by invalidating the auth Cookie and redirecting after submitting the logout form. Explore the full code here π COMING SOON 00:00 - Creating a logout route 00:38 - Deleting the auth cookie 01:39 - Demoing the logout form Learn more at https://remix.run
Learn how to create new users on signup, and enhances the user validation by checking whether or not the user exists. Explore the full code here π COMING SOON 00:00 - Overview 00:20 - Exploring the signup/queries module 00:58 - Validating account existence Learn more at https://remix.run
A cookie is a small piece of information that your server sends someone in a HTTP response that their browser will send back on subsequent requests. In this Single we explore how to create, write, and read cookies to manage user authentication. Explore the full code here π COMING SOON 00:00 - Overview 00:39 - Scaffolding a createAccount function 03:20 - Creating a cookie 04:14 - Writing the cookie 05:30 - Cookie attributes explained 09:03 - Reading the cookie 11:22 - Review Learn more at https://remix.run
Remix's routing convention allows you to convert a route to a folder so you can co-locate modules and keep your route logic clean. Explore the full code here π COMING SOON 00:00 - Overview 00:27 - Converting route files into folders 01:12 - Moving validation code outside the route 02:05 - Cleaning up the code Learn more at https://remix.run
Learn how to validate form data inside a Remix Action and display useful error messages to your user. Explore the full code here π COMING SOON 00:00 - Overview 00:29 - Setting up placeholder error messages 02:17 - Validating form data in Remix Actions 06:03 - Rendering validation errors Learn more at https://remix.run
Learn the difference between submitting a form with a GET vs. a POST method, and how to access that information using an Action in Remix. Explore the full code here π COMING SOON 00:00 - Overview 00:26 - Submitting a GET request 01:16 - Submitting a POST request 2:00 - Accessing form data on the server 4:24 - Review Learn more at https://remix.run
- Public roadmap π https://github.com/orgs/remix-run/projects/5/views/1 - RFCs π https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post π https://remix.run/blog/open-development 00:00 - Introduction 02:47 - Middleware 25:37 - Server Context 50:24 - Client Middleware (Q&A) Learn more at https://remix.run
Andre teaches Brooks how to build a toast notification system in Remix using Cookies. Full Stack Web Development with Remix π https://a.co/d/5BmioFi Repo (initial setup) π https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/15-advanced-session-management/bee-rich/solution Learn more about Andre π https://github.com/andrelandgraf 00:00 - Introductions 06:33 - Setting up the project 12:53 - Client-side toast notifications 19:37 - Server-side toast notifications 28:00 - Cookie-driven toast notifications (diagram) 37:15 - Cookie-driven toast notifications (code) 1:10:30 - Progressively enhanced toast notifications 1:15:15 - Concluding thoughts Learn more at https://remix.run
- Public roadmap π https://github.com/orgs/remix-run/projects/5/views/1 - RFCs π https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post π https://remix.run/blog/open-development 00:00 - Introduction and recap 01:27 - Bundle Shredding πΈ for Lambda/Serverless Architecture 06:55 - RFC: React Elements and Promises as loader / action data 39:40 - Client Data 47:53 - Remix SPA Target 54:53 - Vite update (Q&A) 57:17 - unstable_parseMultipartFormData (Q&A) 1:00:15 - Middleware (Q&A) Learn more at https://remix.run
Alem teaches Brooks how to use Remix Forge and the Remix Dev Tools Remix Forge π https://marketplace.visualstudio.com/items?itemName=CodeForge.remix-forge Remix Dev Tools π https://github.com/Code-Forge-Net/Remix-Dev-Tools Learn more about/sponsor Alem π https://github.com/AlemTuzlak 00:00 - Introductions 03:55 - Setting up the project 06:43 - Remix Forge 20:51 - Setting up the Remix Dev Tools 33:37 - Exploring the "Settings" tab 41:47 - Exploring the "Routes" tab 52:13 - Exploring the "Active page" tab 1:11:04 - Exploring the "Errors" tab 1:24:17 - New Vite plugin 1:33:46 - Remix Dev Tools plugins 1:36:19 - Remix Dev Tools enhanced logging 1:41:44 - Final thoughts Learn more at https://remix.run
Moishi Netzer teaches Brooks how to implement server-sent events in Remix! Repo π https://github.com/moishinetzer/remix-live-loader Server-sent events docs π https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events Learn more about Moishi π https://github.com/moishinetzer 00:00 - Introductions 02:44 - Walkthrough of the app 08:50 - Setting up server-sent events 27:18 - Adding multiple listeners 39:14 - Live Chat 52:40 - Final thoughts Learn more at https://remix.run
Vite announcement blog post π https://remix.run/blog/remix-heart-vite Migration guide π https://remix.run/docs/en/dev/future/vite Vite announcement discussion π https://www.youtube.com/watch?v=qyo5of7EDjY 0:00 - Migrating the default template 2:19 - Migrating the Express template 5:11 - Migrating the Indie Stack
Try it out the new plugin for yourself using a minimal server npx create-remix@latest --template remix-run/remix/templates/unstable-vite Or a custom Express server npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express Learn more at https://remix.run/docs/future/vite 00:18 Initialize the project 00:39 HMR + HDR 03:08 MDX routes 05:29 Importing SVGs 07:36 Conclusion
Today weβre announcing that unstable support for Vite is available in Remix v2.2.0!