Remix v2 Routes Upgrade

This video is walkthrough of a few strategies you can take to migrate from the Remix v1 to v2 route file naming convention - Migration doc: https://remix.run/docs/en/main/start/v2#file-system-route-convention - @remix-run/v1-route-convention: https://www.npmjs.com/package/@remix-run/v1-route-convention - Plopix script: https://gist.github.com/Plopix/58fc3f3be202d9915c466e71077d36a2 - kiliman's flat routes library also has a migration script: https://github.com/kiliman/remix-flat-routes#-migrating-existing-routes - Simple bash script demonstrated in this video: https://gist.github.com/brookslybrand/53ecbcbad0fb7735aa763106536d4ed2

Build a server-side filter UI with Remix

Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.

How to Abort Async Calls Inside Remix Loaders and Actions by sergiodxa

The blog of sergiodxa

Transforming Form Data into Sessions: A Deep Dive into Zod and Conform

Learn how to use Zod and Conform to validate and transform form data into sessions

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

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.

sergiodxa/remix-on-bun

I might be enjoying Remix more than Next

📘 T3 Stack Tutorial: https://1017897100294.gumroad.com/l/jipjfm 🤖 SaaS I'm Building: https://www.icongeneratorai.com/ ✂️ Background Cutter: https://www.backgroundcutter.com/ 💬 Discord: https://discord.gg/4kGbBaa 🔔 Newsletter: https://newsletter.webdevcody.com/ 📁 GitHub: https://github.com/webdevcody 📺 Twitch: https://www.twitch.tv/webdevcody 🤖 Website: https://webdevcody.com 🐦 Twitter: https://twitter.com/webdevcody

rolanday/remix-next-auth-unocss

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.

Remix meetup September 🍃, Thu, Sep 21, 2023, 5:00 PM | Meetup

Remix Copenhagen meetup returns in September with a series of talks, this time hosted by **raffle.ai 🔎** We will meet at 17:00 and the first talk will be "The 20 minute i

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...

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 ...

rphlmr/remix-js-with-jsdoc

A Remix run demo in full JS with JSDoc

getcord/cord-remix

Get Real-Time Chat and Presence in Seconds With Cord + Remix

Remix London October 2023, Tue, Oct 3, 2023, 6:00 PM | Meetup

Time for another [Remix](https://remix.run/) meetup, this time hosted by [Skyscanner](https://www.skyscanner.net/)! Want to speak? Either fill in this form [https://forms.

Remix V2 (Sébastien Morel) & Media with Service Workers (Matt McClure), Tue, Aug 29, 2023, 5:15 PM | Meetup

We are very excited to have this session hosted at Mux. Prepare for two awesome talks, great conversations, pizza, and drinks! **Talks will start at 6:00 pm.** **Live str

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.

partykit/remix-starter

🎈 PartyKit ⤫ Remix 💿

Remix Mapbox Starter Template

How to internationalize a Remix application (Part 1)

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

scandinavianairlines/remix-workers-poc

A proof of concept for adding Remix loaders and actions in a service-worker

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.

remix-development-tools

Remix development tools.

remix-json-routes

A Remix package to allow custom route definition via JSON or React elements

manawiki/repay

Remix + PayloadCMS

How to Create a reusable Form component in Remix by sergiodxa

The blog of sergiodxa

Autosave form inputs with Remix

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

remix-hono

A Hono adapter for Remix apps using Cloudflage Pages

HMR and Hot Data Revalidation with v2_dev 🔥

Check out the new v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Indie stack 👉 https://github.com/remix-run/indie-stack

Mental model for the new dev server 🧠

For a deeper dive, check out Pedro's talk at Remix Conf 2023 👉 https://pedrocattori.dev/blog/legendary-dx

Migrating your project to v2_dev 🚚

Migration guide 👉 https://remix.run/docs/en/main/pages/v2#dev-server v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Chapters 0:00 intro 0:15 Remix App Server 1:08 Express adapter 1:17 enable new dev server 2:02 package.json commands 3:40 removing require cache purging 5:03 broadcastDevReady 5:47 review 6:41 avoiding restarts

Create a Full Stack Realtime Chat Messaging App with Remix.run

Join me in this exciting coding tutorial as we dive into the world of full stack development! In this video, we'll be creating a feature-rich chat messaging application using Remix.run using the power of Server-Sent Events. 👨🏻‍💻Github Repository: https://github.com/ski043/remix-chat-yt 👨🏻‍💻 Ressources used: Remix.run: https://remix.run/ Tailwind.css: https://tailwindcss.com/ Remix-Auth docs: https://remix-docs-flame.vercel.app/ Timestamps 00:00 Intro 00:25 Demo 01:05 Installation 09:00 Setup Prisma 15:10 Coding Application @Remix-Run @TailwindLabs #tailwindcss #react

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"...

jacob-ebey/bun-remix

Bun + Remix + HMR

resendlabs/resend-remix-example

This example shows how to use Resend with Remix

congdinh/create-remix-queue

Building Real-Time Applications with Remix.js Server-Sent Events and Job Queues

AlexandroMtzG/saasrock-kb

Knowledge Base starter kit with WYSIWYG, Markdown, GPT, and Multi-language support. Built with Remix, Tailwind CSS and Prisma.

AlexandroMtzG/novel-remix

Remix Edition - Notion-style WYSIWYG editor with AI-powered autocompletion.

L-Steinmacher/epic-stack-with-prisma-client-extensions

Example Remix application to show how to use Prisma Client extensions and setting up enums with Prisma The Epic Stack.

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.

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

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

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

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

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

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.

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.

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.

remix-custom-routes

Custom routing conventions for Remix