Remix Guide

Menu
  • Official
    74
  • Tutorials
    292
  • Packages
    72
  • Events
    18
  • Showcase
    98
  • Templates
    53
  • Examples
    91
  • Opinions
    107
  • Docs
  • GitHub
  • Discord
  • Meetup
  • RSS
Tutorials
others / alemtuzlak.hashnode.dev2023-09-19

Global Types for Typed Remix Apps

Optimize Remix.run apps with global types for smooth version transitions, runtime changes, and easy updates using a single declaration file

others / www.jacobparis.com2023-09-19

URL based database filtering with OData

Use OData to create a flexible query language for your database. Give your users pre-made queries or let them construct their own.

others / www.tsmailok.dev2023-09-04

Dark Mode with Remix: Key Lessons

When it comes to achieving the best user experience, Remix is undeniably the ideal tool. Here are some valuable insights I acquired in my pursuit of delivering exceptional user experiences through Dark Mode.

others / alemtuzlak.hashnode.dev2023-09-01

Handling type-safe toast notifications with zod in Remix applications

As development paradigms on the web are starting to shift from classic SPA's to the server/client model of Remix and Next app directory new challenges arise that weren't here before, one of those is handling toast notifications. In this article I wil...

others / alemtuzlak.hashnode.dev2023-09-01

Raining down confetti on redirects in Remix

Yesterday I wrote about how we can use flash session to show toast messages to the user in this article: https://alemtuzlak.hashnode.dev/handling-toasts-in-remix Well, today I want to expand on this and add a fun little utility that will brighten up ...

others / www.jacobparis.com2023-08-28

Create a custom Remix hook to access loader data from any component

Use the useRouteLoaderData hook to access loader data from any component. Export a custom hook to make it easier to use. Use useMatches to find the ID of the route you want.

others / dev.to2023-08-16

How to internationalize a Remix application (Part 1)

Let's talk about internationalization (i18n) for Remix... When it comes to JavaScript localization....

others / otiv.dev2023-07-31

Remix Error Handling Essentials

This blog post is a personal guide for Remix projects. If you need error handling you should do these things at minimum.

others / sergiodxa.com2023-07-13

How to Create a reusable Form component in Remix by sergiodxa

The blog of sergiodxa

others / www.jacobparis.com2023-07-13

Autosave form inputs with Remix

Save forms automatically with useDebounceFetcher. Make a reusable Input component. Compatible with Conform.

others / dev.to2023-07-01

Serverless Remix App Contact Form with AWS Lambda, AWS SES and Google ReCaptcha

Introduction This blog post revisits my (apparent) "Check out this new React framework"...

others / www.jacobparis.com2023-06-30

Form validation with Conform, Zod, and Remix

Use Conform to validate your forms serverside. Show errors on the client. Use Zod to generate your form schema.

others / dev.to2023-06-29

Building a full stack app with Remix & Drizzle ORM: Project setup

Introduction In this tutorial series, we'll explore building a full stack application...

others / www.youtube.com2023-06-23

Remix.run V2 Full Stack Tutorial 2023 | Crash course

Welcome to the Remix.run V2 Full Stack Tutorial 2023 Crash course! In this exciting Crash course, we'll dive deep into the latest version of Remix.run, a cutting-edge framework for building full stack JavaScript applications. 👨🏻‍💻Github Repository: https://github.com/ski043/remix-tutorial-yt 👨🏻‍💻 Ressources used: Remix.run: https://remix.run/ Tailwind.css: https://tailwindcss.com/ Timestamps 00:00 Intro 00:25 Demo 01:35 Initial Setup 07:00 Dark Mode Setup 17:00 Coding Application 50:30 Hygraph Setup 56:00 Coding Application 01:38:06 Deployment @TailwindLabs @Remix-Run #tailwindcss #remix

others / www.youtube.com2023-06-20

Building an E-Commerce Store with Remix.run, Stripe, and Sanity.io: Full Stack Tutorial

Learn how to build a cutting-edge E-Commerce app using Remix.run, Stripe, Sanity.io and Tailwind.css in this comprehensive coding tutorial. Discover the power of Remix.run's web framework, integrate seamless payment processing with Stripe, and enhance your app's visual appeal with Tailwind.css. Link to code: www.github.com/ski043/sanity-ecommerce Chapters: 0:00 Intro 0:15 Demo 1:11 Coding 2:13:07 Deployment

others / www.youtube.com2023-06-20

Create a Personal Website / Blog using Remix.run, Tailwind.css, Hygraph and GraphQL

Welcome to my latest YouTube tutorial on creating a personal website with a blog using the powerful combination of Remix.run, Tailwind.css, Hygraph, and GraphQL! 🚀 In this step-by-step guide, I will walk you through the process of building an impressive personal website that showcases your unique skills while incorporating a dynamic blog. Harnessing the cutting-edge technologies of Remix.run, Tailwind.css, Hygraph, and GraphQL, you'll learn how to create a stunning online presence that leaves a lasting impression. 👨🏻‍💻Github Repository: https://github.com/ski043/personal-website 👨🏻‍💻 Ressources used: Tailwind.css: https://tailwindcss.com/ Remix.run: https://remix.run/ graphql-request: https://www.npmjs.com/package/graphql-request Headlessui: https://headlessui.com/ remix-themes: https://github.com/abereghici/remix-themes Timestamps 00:00 Intro 00:25 Demo 01:35 Initial Setup 07:00 Dark Mode Setup 17:00 Coding Application 50:30 Hygraph Setup 56:00 Coding Application 01:38:06 Deployment ​@Hygraph @TailwindLabs @Remix-Run #tailwindcss #remix

others / www.jacobparis.com2023-06-18

Typesafe environment variables with Zod

Write a Zod schema to typecheck your environment variables. Crash the app if any are missing. Add type definitions to process.env.

others / www.epicweb.dev2023-06-12

Improve UX and Security with Time-based One Time Passwords (TOTPs)

Watch Kent show you the improved user experience, security, and the implementation of Time-based One Time Passwords in the Epic Stack.

others / www.jacobparis.com2023-06-12

Add Drizzle ORM to a Remix app

Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.

others / sergiodxa.com2023-06-05

How to Use TANStack Query to share data between Remix loaders by sergiodxa

The blog of sergiodxa

others / www.jacobparis.com2023-06-02

Solving hydration errors in Remix

Hydration errors can be caused by dates, ad blockers, browser extensions, invalid HTML, 3rd party scripts, CSS in JS libs, character encoding, IDs, and more

others / www.jacobparis.com2023-05-28

Guidelines for optimistic UI in modern CRUD apps

Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.

others / www.jacobparis.com2023-05-25

Progressively enhanced client rendering to avoid SSR hydration issues in Remix.

React doesn't like mismatches between client and server rendering. Avoid it by rendering tricky content like dates only on the client. Fade it in for a smooth UI and to avoid layout shift.

others / docs.sst.dev2023-05-17

Use Remix with SST | SST

Create and deploy a Remix app to AWS with SST.

others / medium.com2023-05-16

How to setup Cloudflare CDN in a remix.run app/website with fly.io

Recently I tried setting up CDN on my remix.run website hosted on fly.io.

Show more
New Hot Top
others2022-06-01

Three Key Steps to Fast Loader Functions

scottsmerchek.com
Tutorials

Don't fall for these common mistakes. Instead, make sure you follow these three key steps to write performant loader functions.

Published on scottsmerchek.com

others / scottsmerchek.com2022-04-01

Setting up Production Monitoring for Remix on Fly.io

Fly.io has been a dream to work with so far, and the monitoring story is no different. Learn how to quickly set up production monitoring for your remix app on fly.io.

others / scottsmerchek.com2022-05-23

Migrating from Meteor.js to Remix in 2022

We successfully switched from Meteor.js to Remix, but there were many challenges to solve along the way. This post is a summary of the challenges we faced and solutions we implemented to make the switchover as painless as possible.