remix-auth

Simple Authentication for Remix

How to Debug Remix loaders and actions in VS Code

This video shows how to configure VS Code to debug your Remix loaders and actions. NOTE: You can now use the `debugger` statement instead of the external `debug()` function. I tried this before, but it didn't work. Not sure why it works now. You still can't set a breakpoint inside a route module, but you can add `debugger` statement and it will break there. You can then step through your code. I will be re-recording this video with this new info. Get the launch configuration here: https://rmx.fyi/debug

kiliman/remix-component-data

This is a proof of concept for showing how you can expose loader functions from your components to use in your routes.

HTTP vs. Server-side Cache in Remix by sergiodxa

When you build a web application, you may reach a point where some performance problems could be solved by a...

edmundhung/remix-guide

A platform for sharing everything about Remix

remix-forms

Magically create forms + actions in Remix!

QuentinWidlocher/remix-template

Remix template with Typescript, Tailwind, Zod and Prisma

jacob-ebey/remix-pwa

A template to get a Remix PWA up and running

remix-utils

This package contains simple utility functions to use with [Remix.run](https://remix.run).

Remix vs Next.js

An objective comparison between Remix and Next.js

remix-etag

## Problem

Test Remix loaders and actions by sergiodxa

If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...

sergiodxa/personal-site

Personal website

remix-tailwind

Use TailwindCSS with Remix without an extra build step!

Deploy Remix K-pop Stack + Supabase

Have you heard about our new Remix Stacks template the K-pop Stack? It combines Remix, Supabase, Tailwind, and more to give you a note creation app with auth to help jump start your own Remix creation. Check out how to make it your own and get it deployed to fast and free! Repo: https://github.com/netlify-templates/kpop-stack Blog Post: https://www.netlify.com/blog/deploy-your-remix-supabase-app-today!/

remix-auth-oauth2

A strategy to use and implement OAuth2 framework for authentication with federated services like Google, Facebook, GitHub, etc.

Build a Realtime Chat App with Remix and Supabase

Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes. We will learn about: loaders and actions in Remix querying and mutating data with Supabase authentication with GitHub authorization with RLS merging client and server state with realtime events deploying a Remix app to Vercel This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

Validating Remix Form Data Using Zod and TypeScript

You can use Zod to validate form input and create typed TypeScript objects in a Remix action function that is handling the form data.

remix-vite

Static file serving and directory listing

jacob-ebey/remix-ecommerce

WIP

Remix Image Component

Building a full stack app with Remix, Prisma, and Supabase

There is a misconception that Remix is only for static sites. This is a how-to guide for building a full-stack app with the new framework + Prisma + Supabase, and deploying it to Vercel.

Data Flow in Remix

Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again.

remix-i18next

The easiest way to translate your Remix apps

remix-graphql

Utilities for using GraphQL with a Remix app

remix-pwa

A PWA handler for Remix

rileytomasek/zodix

Zod utilities for Remix loaders and actions.

dilums/interactive-remix-routing

Interactive app to demonstrate how routing works in Remix

Remix for Next.js Developers

Snippets of code translated from Next.js to Remix. Learn Remix by example.

Remix Run - Introduction to HTTP Caching

HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.

remix-run/indie-stack

The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.

dev-xo/stripe-stack

A Stripe focused Remix Stack that integrates User Subscriptions, Authentication and Testing. Driven by Prisma ORM. Deploys to Fly.io

remix-image

A React component for responsive images in Remix

Remix upload to S3 — CanRau.com

Upload files to S3 compatible API - I'm using Backblaze B2 - with Remix and parseMultipartFormData

eslint-config-remix

ESlint config for remix app

E2E test Remix with Vitest and Puppeteer by sergiodxa

Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...

@ignisda/remix-pagination

Pagination for Remix apps

zod-form-data

Validation helpers for [zod](https://github.com/colinhacks/zod) specifically for parsing `FormData` or `URLSearchParams`. This is particularly useful when using [remix](https://github.com/remix-run/remix) and combos well with [remix-validated-form](https:

debounced-search.tsx

Use Remix with socket.io by sergiodxa

If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...

itsMapleLeaf/remix-electron

The useMatches hook in Remix by sergiodxa

If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...

remix-validated-form

Form component and utils for easy form validation in remix

remix-seo

A package for easily managing SEO meta and link tags in Remix.

kentcdodds/kentcdodds.com

My personal website

Kent C. Dodds @ ReactNext 22 - Stream Away the Wait

ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment

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.

remix-params-helper

This package makes it simple to use Zod with standard URLSearchParams and FormData which are typically used in Remix apps.

remix-query

Query for Remix-Run

"Working with Nested Routes and Parameterized Routes" by Aaron Saunders at #RemixConf 💿

We will walk through a simple demonstration of a remix application using nested routes and parameterized routes. The use of nested routes helps me with component design and separation when architecting an application. Parameterized routes / Dynamic Routes contain state information that can through the parameters that are defined on the route. This provides powerful flexibility when designing your app and app's components. Putting the two together in an simple solution to be a reference when you build something amazing. Speaker bio: Aaron is an Information Technology Strategist, Thought Leader, and Diversity and Inclusion Trailblazer - Founder & CEO of Clearly Innovative. He believes technology and in his case coding is an enabler and an equalizer. Aaron has focused a large part of his career training and developing individuals who want to get into tech but cannot find the opening; through the apprenticeship program he ran at Clearly Innovative, teaching web and mobile development at Howard University, and the free technical videos on his Youtube Channel he just want to help others get a seat at the table of tech and innovation. Learn more at https://remix.run/conf/2022/speakers/aaron-k-saunders