markdalgleish/remix3-resources

A collection of useful links relating to Remix 3

Introduction, Technical Explanation | Remix

React Router RSC Preview

React Router's preview support for React Server Components is now available

Wake up, Remix!

It's time to go wake up Remix! Here's what we're building and what it means for React Router.

janhesters/react-router-saas-template

Create B2B and B2B SaaS apps with React Router.

Launchway - The Remix SaaS Boilerplate and Starter Kit - Setting up rate limiting in a Remix app

Learn how to implement rate limiting in Remix using server framework middleware and platforms like Cloudflare and Vercel

Remix Roadmap Planning #18

Join Ryan and Michael as they walk through the Remix Team's Roadmap - Public roadmap 👉 https://github.com/orgs/remix-run/projects/5 - RFCs 👉 https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post 👉 https://remix.run/blog/open-development 00:00 - Bumper 00:48 - Intro and thoughts on the New Year 02:40 - Recap on React Router v7 release 07:06 - Framework/Library mode and breaking changes 14:50 - Documentation updates 17:19 - Diversion on anime and streaming vs blue-ray 20:38 - Roadmap review 33:00 - Milestones and the latin root of "hope" 38:55 - Remix the Web philosophy and future work Learn more at https://remix.run and https://reactrouter.com

Launchway - The Remix SaaS Starter Kit - API routes and RESTful services in Remix

Exploring different usages of API routes in Remix such as client-side form submissions, receiving webhooks, and exposing a RESTful API to the outside world.

jiangsi/edgecd-blog

EdgeCD AI Blog is an open-source blog system built with Remix.run on Cloudflare Workers. Features: - Powered by Remix.run framework - Fully edge-based computing - Leverages Cloudflare ecosystem (D1, R2, AI, KV, CDN)

React Router v7

React Router v7 brings all the great things you love from Remix back to React Router

Launchway - The Remix SaaS Starter Kit - Client-side validation in Remix with Zod and clientActions

Exploring a novel method for client-side form validation in Remix using Zod and clientActions

Launchway - The Remix SaaS Starter Kit - Type-safe environment variables in Remix

Handle environment variables in Remix using Zod for type-safety and validation

Launchway - The Remix SaaS Starter Kit - Remix file uploads using S3, Cloudflare R2 and Hetzner

A guide to uploading files in Remix using S3-compatible storage providers

Remix Roadmap Planning #17

Join Ryan and Michael as they walk through the Remix/React Router Roadmap - Public roadmap 👉 https://github.com/orgs/remix-run/projects/5 - RFCs 👉 https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post 👉 https://remix.run/blog/open-development Learn more at https://remix.run

Remix Todo App: Part 1 - Building the App Layout and Structure

Learn how to set up the layout and structure of your Remix Todo App.

Remix Todo App: Part 6 - Deploying the App

Step-by-step guidance on how to deploy your Remix Todo App to production.

Remix Todo App: Part 3 - Multiple Forms with Single Button and Concurrent Mutations

Learn how to implement multiple forms with a single button for mutations and handle concurrent mutations efficiently in Remix.

Remix Todo App: Part 5 - Implementing a Theme Switcher

Add a theme switcher to your Remix Todo App to support light and dark modes.

Remix Todo App: Part 4 - Pending UI

Improve user experience by adding pending states and implementing network-aware UI feedbacks.

Remix Todo App: Part 2 - Loading Data into Components and Handling Mutations with Form

Discover how to load data into components and manage mutations using Remix forms.

Remix Roadmap Planning #16

Join Ryan and Michael as they walk through the Remix/React Router Roadmap - Public roadmap 👉 https://github.com/orgs/remix-run/projects/5 - RFCs 👉 https://github.com/remix-run/remix/discussions/categories/official-rfcs - "Open Development" blog post 👉 https://remix.run/blog/open-development - React Router Prerelease docs 👉 https://reactrouter.com/dev/ 0:00 Bumper 0:42 React Router v7 Overview 9:10 React Router v7 demo 11:12 Improved routing config with routes.ts 15:22 Automatic type-safe routing 25:31 How the type-safe routing works 32:33 "Are we forced into every new feature"? 41:06 Pre-rendering 49:59 Single fetch/turbo-stream 56:48 Final notes Learn more at https://remix.run

jiangsi/hono-remix-vite-on-cloudflare

hono remix vite on cloudflare ,use vite as local dev tools ,and can access cloudflare kv

EVERYTHING you need to KNOW about Remix.run ACTIONS

Today we go over how actions inside of React Router v7 / Remix.run work. How you submit to them, what happens when you do, how they re-trigger loaders, resource routes, multiple forms on a single page handling. Custom HoC and middleware and much much more! 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ⏱️ Timestamps: 00:00 - Intro 00:33 - What are remix actions? 01:04 - Usual submission flow 03:37 - Action submission flow 06:13 - loaders re-triggering flow 07:19 - what you can use re-triggers for 07:59 - Why re-triggers are awesome 08:26 - what happens when you submit to an action? 08:46 - returning response from an action 09:36 - throwing responses 09:57 - throwing a redirect response 10:36 - when is it useful to throw responses 11:02 - throwing non-redirect responses 12:05 - difference between a thrown redirect and normal response 12:53 - useActionData important info 13:45 - resource routes 15:28 - why are resource routes awesome 17:13 - setting up the playground 17:56 - adding a progressively enhanced form 18:37 - triggering an action 19:03 - adding fields to the form 19:37 - seeing our server data 20:23 - progressive enhancement with no JS 22:19 - handling multiple forms on a page with single action 26:05 - handling multiple forms on a page with resource routes & tRPC like loaders 29:59 - redirecting from actions to new routes 31:30 - throwing responses & errors into error boundaries 33:03 - redirecting on successful submissions 33:39 - adding action middleware 35:20 - outro 🔖 Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial

Working with QR codes in Remix | Andre Landgraf

Learn how to easily generate QR codes in your Remix app to share URLs and other information with your users.

react-router-busy

Drop-in busy state for react-router/remix forms and links

Oops, I accidentally made our website faster by switching to Remix

We migrated our site to a new hosting provider, and with it a new React framework. We expected the site to run a little slower. Our tests proved otherwise.

flameddd/remix-run-18n-cookie_base-demo

How Remix's Flat File-Based Routing Works

Learn how Remix's flat file-based routing generates routes from file names.

redabacha/remix-deno-vite-template

Remix v2 + Vite + Deno

Everything YOU need to KNOW about Remix loaders

Today we go over how loaders inside of React Router v7 / Remix.run work. How you can cache loaders, how you can optimize them, where and how they re-trigger, and by the end of this video you will be ready to use them for any situation that might come up. 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ⏱️ Timestamps: 00:56 - What are loaders exactly? 04:19 - Single fetch approach with loaders 07:40 - What can you return from loaders 08:32 - Successful responses 08:50 - Thrown responses 09:25 - Error responses 09:54 - Streaming the data 11:53 - Streaming the data with single fetch 13:28 - When do loaders re-fire 13:43 - re-fire on action submission 14:40 - re-fire on param change 15:56 - re-fire on search param change 16:37 - re-fire on useRevalidate trigger 17:04 - re-fire on navigation to the same page 18:02 - how to stop loader re-triggers 20:14 - Practical examples 23:29 - Defering slow requests 25:56 - Using server caching for faster response times 28:25 - Caching with headers 30:25 - Using shouldRevalidate 32:44 - clientLoader caching (with remix-client-cache) 32:59 - Defer with single fetch 🔖 Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial

File uploads with Remix (Updated) — ProgrammingAreHard —

@forge42/seo-tools

Framework agnostic set of helpers designed to help you create, maintain and develop your SEO

How to Create the Perfect Hono + Remix Server in under 10 minutes

Today we go over how to switch your Remix vanilla server over to Hono.js in your remix vite projects, how to type your AppLoadContext with TypeScript tricks and how to use middleware in Remix. We also use the i18n middleware for localization and internationalization. 🔗 Resources and Links: GitHub Repo: https://github.com/AlemTuzlak/remix-ecommerce 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ⏱️ Timestamps: 00:00 - Intro 00:28 - Going over what we need 01:25 - Adding the Hono server to Remix vite 02:20 - Extending our vite config 03:10 - Creating the load context 05:55 - Typing our app load context 07:28 - Adding internationalization i18n middleware 08:04 - Modifing our project 10:02 - Going over our implementation 11:10 - Going over what else you could do 🔖 Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, Hono.js

medama-io/medama

Self-hostable, privacy-focused website analytics.

Cache Control and Remix: Answering my own questions

Introduction I had some questions around Cache Control and using them in Remix. This is kind of just me answering my own questions lol. Before going over my questions, let's look at two examples and some of the values. Cache-Control without stale-whi...

How To Set Up A New Web Project

A step-by-step guide to initiating and configuring your web project from the ground up.

Fog of War

Introducing Fog of War: infinitely scalable Remix and React Router applications

Speed up your Remix knowledge

Introduction This post is for my younger self. A post that would've helped me get up to speed with Remix faster. What is Remix? Remix is a web framework built on top of the Web Fetch API, allowing for deployment on multiple platforms. It acts as a ce...

Drizzle Run

Play with Drizzle in your browser

Custom routing with Remix

Create your own route convention. Use a custom glob pattern. Add layouts automatically, or prepend an optional language segment.

remix-auth-clerk


The Secret to Maintainable Remix Apps: Hexagonal Architecture

Ever feel like updating your Remix app's UI is a circus act? One small change, and suddenly everything's breaking? You're not alone. This fragility often comes from tightly coupled components – a change in one place triggers a domino effect throughout your code. But there's a solution: hexagonal architecture. This pattern,

How to Validate Form in Remix with clientAction by sergiodxa

When to use Route Modal in React Router by sergiodxa

@metronome-sh/dev-error-boundary

Remix dev error boundary

Translate your Remix.run app with Lingui - Simon Depelchin

Lingui is an alternative to i18next for internationalization in Javascript project. It offers a different approach to i18n and is now available for Remix.run projects with Vite.

FUTURE of react-router v7 and Remix.run v3 EXPLAINED.

Curious about the future of React Router v7 and Remix.run? Watch this video for a detailed explanation of what's to come! Learn about the exciting updates and improvements in store for these popular tools. 🔗 Resources and Links: The article: https://remix.run/blog/merging-remix-and-react-router Remix package RFC: https://github.com/remix-run/remix/discussions/7823 Single-fetch RFC: https://github.com/remix-run/remix/discussions/7640 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak GitHub: https://github.com/AlemTuzlak Company Github: https://github.com/forge42dev ⏱️ Timestamps: 00:00 - Intro 00:08 - Going over the announcement 01:22 - Why this makes sense in depth explanation 04:29 - Going through the rest of the article. 07:35 - Remix package RFC 10:45 - Remix Single Fetch RFC 14:47 - Remix future TL:DR 15:09 - The future of the packages and the great transition 17:15 - Outro 🔖 Tags: Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, Vite

Incremental Path to React 19: React Conf Follow-Up

React Router v7 will provide an incremental path to the entire, full stack feature set of React. Upgrading from to React Router v7 is non-breaking for both React Router v6 and Remix v2.

Remix for Next.js Developers

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

dev-xo/remix-saas

A Lightweight, Production-Ready Remix Stack for your next SaaS Application.

Merging Remix and React Router

We've been building a bridge from React Router to Remix, and we made it so good that we're going to merge the two projects.

Homegrown Remix Middleware (feat. Kiliman)

Kiliman shows Brooks how to use two new packages he's created for homegrown session context and middleware, and walks him through authentication and session management examples in a Remix application. remix-express-vite-plugin 👉 https://github.com/kiliman/remix-express-vite-plugin Learn more about Kiliman 👉 https://twitter.com/codingthirty 00:00 - Introduction 00:44 - Kiliman's background with Remix 02:44 - Thoughts on Remix's routing convention 06:47 - Motivation for homegrown middleware 09:24 - Setting up the project 11:03 - Setting up express-dev-server and remix-create-express-app 18:36 - Setting up middleware 19:38 - Implementing session middleware 31:23 - Implementing auth middleware 40:55 - Comparing with the RFC 47:33 - Final thoughts Learn more at https://remix.run

Roadmap Planning #11

- Public roadmap 👉 https://github.com/orgs/remix-run/projects/5 - 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 current work 10:18 - Overview of "In Progress" 13:44 - Fog of War 18:50 - Split out client loaders/actions 24:19 - Middleware and Server Context 40:48 - SSG Learn more at https://remix.run

Easy Stripe Integration in your Remix.run App

In Today's episode will cover: - @Stripe Integration - Webhook Setup - Checkout Session and Payment Testing These videos are free and created for the community, support will be much appreciated! 🫶

Replace ESLint & Prettier with Biome.js - Simon Depelchin

Learn more about Software Development

Deploy a Remix App on Google Cloud Run

kiliman/remix-global-data

Example showing how to use global data in your Remix app

Debounce your useFetcher submissions with this custom Remix hook

Debouncing helps reduce server load. Create a custom fetcher hook that adds debounce support. Modify the type of useFetcher to support extra features.

alexanderson1993/remix-colyseus

@vite-pwa/remix

Zero-config PWA for Remix

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

Migrating Remix to Vite

Challenges, learnings, and scripts — still not done yet 😰

Varkoff/remix-nestjs-monorepo

Remix App With NestJS Adapter

New Hygraph Studio

Studio is the revamped interface of Hygraph, the next-generation headless CMS. Sign up to use Studio today and experience how it can help you build higher-performance digital applications while empowering your editorial and development teams to work faster.

How to Add i18n to a Remix Vite app by sergiodxa

Internationalization with Remix

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.

Deploying Remix to GitHub Pages

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

Understanding the Steps of Migrating Your Remix App to Vite.js

Remix 2.7 introduced official Vite support, making it ideal to migrate our Remix Apps to Vite. In today's episode, we'll step by step migrate a base Remix App to Vite. 00:00 Introduction 00:14 Step 1: Setup Vite 00:40 Step 2: HMR & HDR 00:58 Step 3: TypeScript Integration 01:26 Step 4: Migrating Remix App Server 02:00 Step 5: Path Aliases 02:26 Step 6: Remove @remix-run/css-bundle 03:00 Step 7: Enabling TailwindCSS 03:24 App Migration (Remix + Vite)

alessandrojcm/remix-nitro

An example on how to run Remix with Nitro with HMR using Vite's 5.1 experimental runtime API.

Handle both JSON and FormData in Remix

Use formdata for progressive enhancement and json for a better developer experience. Parse request bodies based on their content type, and parse fetchers read pending requests.

Add Drizzle ORM to Remix Vite with Cloudflare D1

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

How to deploy Remix Vite to Netlify | Netlify Developers

Learn how our new Remix adapters and templates add support for Vite with Remix for both Netlify Functions and Edge Functions.

saas-kits/remix-boilerplate

SaaSKits is a SaaS boilerplate built with Remix, Stripe, Prisma and Resend to help you bootstrap your SaaS idea quickly.

How to Persist the user locale using cookies with Remix & i18next by sergiodxa

gregermendle/remix-mailer

Preview and test emails in Remix using [BLANK]

The Valley of Code: Remix

Remix is an excellent Web Application Framework I would use when building complex React-based applications.

How to Build a simple login and logout with Remix by sergiodxa

ws-rush/unplugin-remix-router

How to make Cloudflare properly cache a Remix site

remix-client-cache

Utility library to cache your client data in Remix.run

jacob-ebey/remix-electron-llamafile

Chat with LLMs locally utilizing llamafile as the underlying model executor.

Internationalizing Remix Vite apps: Adding i18n | Remix Done Right Pt. 3

Welcome back to the "Remix Done Right" series! In this episode, we'll delve into the world of internationalization (i18n) in Remix Vite projects. Join me as I show you how to seamlessly integrate i18n into your Remix applications. 🛠️ What You'll Learn in Part 3: Setting Up i18n: Learn the intricacies of configuring internationalization in Remix Vite projects, ensuring smooth localization of your web apps. Language Switcher: Implement a language switcher to empower users to seamlessly toggle between different language options. Translating Content: Dive into translating content within your application, from static text to dynamic data, ensuring a fully localized user experience. 🚀 Get Ready to Remix: Follow along and code with us as we lay the foundation for a globally accessible Remix application with robust internationalization support. Whether you're new to i18n or a seasoned developer, this tutorial is designed to be beginner-friendly yet packed with advanced insights. 🔗 Resources and Links: GitHub Repo: https://github.com/AlemTuzlak/remix-ecommerce Remix Documentation: https://remix.run/docs/en/main Vite Documentation: https://vitejs.dev/ 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak59192 GitHub: https://github.com/AlemTuzlak ⏱️ Timestamps: 00:00 - Intro 00:39 - Basic setup and overview 01:21 - Revealing entry files 02:00 - entry.client setup 02:20 - Adding everything we need 03:26 - Adding our first language file 04:06 - Adding resources file 05:45 - Modifying entry.server 08:02 - Modifying the root.tsx file 10:35 - Adding our first translation 10:46 - Fixing a Vite specific error with remix-i18n 11:14 - Our first demo 11:50 - Adding another language 12:37 - Making our resources type-safe 15:22 - Adding a language switcher 15:44 - Final demo 16:17 - Outro 🔖 Tags: Remix framework, Vite, Remix Vite, internationalization, i18n, web development, frontend development, Remix tutorial, coding tutorial, i18n tutorial, Remix Vite tutorial, web app localization, i18n setup, language switcher, translating content, developer tools, open source, coding community.

@scandinavianairlines/remix-azure-functions

A package that adapts requests between Azure Functions and Remix.run

How to do ISR and advanced caching with Remix | Netlify Developers

Incremental Static Regeneration (ISR) is a powerful pattern for rendering pages on the web. Remix has useful tools to do fine-grained ISR and other advanced caching patterns when deployed to Netlify. This guide will show you how to do it.

Create your own content management system with Remix and Xata

Learn how to create a custom CMS using Xata, Remix, Novel, LiteLLM, and Vercel.

6 Routes à connaître si tu utilises Remix (guide complet)

Remix est un framework de React qui permet de développer des applications web full-stack. Son routing puissant permet de créer un fichier dans le dossier routes pour créer une route API ou une vue.

edmundhung/remix-cloudflare-template

📜 All-in-one remix starter template for Cloudflare Pages

Project Setup with Remix and Vite | Remix Done Right: Part 1

Remix Done Right Series - Part 1: Project Setup with Remix and Vite Welcome to the first installment of our "Remix Done Right" series! In this episode, we dive into the essential steps of setting up the foundation for our Remix app using Vite. Get ready to embark on a journey of creativity and coding as we create a powerful remix application from scratch. 🛠️ What You'll Learn in Part 1: Project Setup: We guide you through the process of setting up a basic project structure using Remix and Vite, ensuring a solid foundation for your app. Remix Development Tools Installation: Learn how to install and configure Remix development tools to streamline your workflow and enhance the development experience. Plugin Integration: Discover the power of plugins as we add some essential ones to supercharge your Remix app development. Tailwindcss: Learn how to install tailwindcss in Remix and use it to style your projects. 🚀 Get Ready to Remix: Follow along and code with me as we lay the groundwork for an exciting and feature-rich Remix application. Whether you're a seasoned developer or just starting, this series is designed to be beginner-friendly and packed with valuable insights. 🔗 Resources and Links: Remix Documentation: https://remix.run/docs/en/main Vite Documentation: https://vitejs.dev/ Remix Development Tools: https://github.com/Code-Forge-Net/Remix-Dev-Tools 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak59192 GitHub: https://github.com/AlemTuzlak ⏱️ Timestamps: 00:00 - Intro 01:23 - Installing a fresh Remix.run project 01:52 - Remix Vite vs old Remix bundler rant 04:12 - Initialing the project 05:02 - Going over what we initialized 05:33 - Modifing our Vite config & adding remix-development-tools 06:54 - tsconfig.json overview 08:49 - Looking at our application with remix dev tools 09:31 - Adding tailwindcss to the project 12:08 - Overview of app with tailwind 12:29 - Adding remix dev tools plugins 14:32 - Our first plugin overview 15:40 - Adding the icons plugin 16:58 - Outro & info on the part 2

Generate responsive images on Remix – Unpic

Automatically generate responsive images on Remix using Unpic

How to Get the absolute URL in Remix's MetaFunction by sergiodxa

How to Use a CDN for your static assets in Remix by sergiodxa

How to Defer a Fetch response in Remix by sergiodxa

How to Use React Portal in Remix by sergiodxa

How to Call an action from a loader in Remix by sergiodxa

Epic Web Conf 2024

The Full Stack Web Development Conference of Epic proportions.

How to Expose Remix Routes as API Endpoints by sergiodxa

If you're building a Remix web app, and then you decide to expose an API from that app, you may be tempted to try to reuse the same routes …

How to Find and remove unused code with Knip by sergiodxa

How to Build an app with Remix and Bun by sergiodxa

How to Prefetch data for Remix Fetcher usage by sergiodxa

If you're using Remix, you can ask it to prefetch the data of a new route using `<Link prefetch`> prop, but if you need to use `fetcher.loa…

How to Create a CRUD with Remix by sergiodxa

How to Create multiple top-level layouts in Remix by sergiodxa

How to Prevent the Remix loader to run after document request by sergiodxa

How to Pass cookies from a Remix loader to an external API by sergiodxa

Server-side rendering local dates without FOUC

Achieving the holy grail of server-side rendered local dates without hydration mismatches or flash of unhydrated content, by (ab)using synchronous scripts.

rajeshdavidbabu/remix-supabase-social

A community driven social networking app built using Remix and Supabase

View transitions with 1 line of code in Remix!?

In this video we go over view transitions in Remix.run, how they work, what you can do with them and we go in depth on granular image transitions between pages. The github repo for the video project: https://github.com/AlemTuzlak/remix-view-transition-pokemon If you wish to support the channel consider subscribing for more content. Twitter: https://twitter.com/AlemTuzlak59192 Github: https://github.com/AlemTuzlak Blog: https://alemtuzlak.hashnode.dev/ Timeline: 00:00 - Intro 00:22 - View transition demo 01:45 - View transitions API in depth explanation 05:01 - Project setup for view transitions in Remix 06:10 - View transitions in 1 LOC 07:52 - Main page with view transitions 08:39 - Granular image transitions with custom names 10:00 - How do granular transitions work in Remix 13:32 - Viewing our granular view transitions 14:25 - Even more granular transitions!! 17:07 - Final demo 17:47 - Outro

What is Remix.run exactly???

We go into what Remix.run is exactly, how it works under the hood and how it improves your DX and makes your users fall in love with your website. If you wish to support the channel consider subscribing for more content. Twitter: https://twitter.com/AlemTuzlak59192 Github: https://github.com/AlemTuzlak Blog: https://alemtuzlak.hashnode.dev/ 00:00 - Introduction to Remix.run 02:08 - How does Remix operate on a server 06:30 - Server framework deep dive 09:08 - Browser framework overview 11:17 - Outro

Optimistic Drag and Drop

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

In-Place Optimistic UI

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

Optimistic Add

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

User Feedback with Busy Indicators

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

Creating Records

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

Redirecting to New Records

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

Protecting Routes with Auth

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

Redirecting Logged in Users

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

kiliman/remix-vite-template

Remix template with Vite, Tailwind CSS, and Fly.io support

Cookies in Remix

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

Forms: GET vs. POST and Remix Actions

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

Module Co-Location with Route Folders

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

Creating User Accounts

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

Implementing Logout

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

Form Validation

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

How to Access the Search Params of a Request in Remix by sergiodxa

The blog of sergiodxa

Roadmap Planning #8

- 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

The Ultimate Full Stack Framework for 2024: Remix

Remix is a full-stack framework with seamless backend-frontend integration, fewer states, and web standards emphasis

Remixing Toast Notifications (feat. Andre Landgraf)

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

How to Keep Your Loader Data Fresh in Remix by sergiodxa

The blog of sergiodxa

Turn Progressive Enhancement up to 11

Learn how to create a progressive enhancement image uploader that works for users with or without JavaScript.

Use Client Hints to Eliminate Content Layout Shift

Learn how to eliminate CLS using client hints in the Epic Stack.

Server-Sent Events in Remix (feat. Moishi Netzer)

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

Enhance User Experience with Real-Time File Upload Progress Updates in Remix | andrekoenig.de

Learn how to implement real-time file upload progress updates to enhance the user experience with Remix. Keep users informed about the progress of their file uploads in real-time for a smoother and more engaging experience.

Roadmap Planning #7

- 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

Remix Dev Tools (feat. Alem Tuzlak)

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

Learn Remix. Create Better Websites. Get Hired. | Zero To Mastery

Learn Remix from scratch. Take your coding skills & career to the next level by building better websites with the hottest web framework based on React.

Redirecting from a resource route

Use redirect routes to redirect users to the right place. Implement dynamic next/previous buttons. Send users back to onboarding or login pages.

The Remix Philosophy is not Just for Remix | Ken Snyder | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Ken_Snyder_remix_philosophy Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Remix Demo - Shopping List ➤ https://github.com/kensnyder/remix-demo-shopping-list Chapters 0:00 intro 0:22 preamble 0:31 what we'll cover 0:48 about ken 1:27 why should you care? 2:02 let's create a real remix app 13:18 try it on github 13:27 outlet 14:20 more complex forms 16:29 philosophy: embrace server/client model 17:21 bundles 18:13 single page app 18:39 remix app 20:10 server & runtime adapters 20:41 official list 21:23 work with web foundations 21:43 standards 23:09 request, response 23:48 fetch loves requests & response 24:26 headers 25:28 url search params 26:13 traditional react components 27:11 more traditional react page 27:46 ...or just use remix 28:07 work without js 30:11 demo without js 31:15 roadmap and future flags 31:43 roadmap highlights 32:47 future flags 34:08 applying the philosophy outside remix 35:11 we chose a new mindset 36:14 hello shoreline 36:26 thank you

Upload Images: Supabase & Remix Integration

Effortlessly upload images using Supabase and Remix; set up, create client-side uploader, and manage server-side uploads with this guide

How to Upload Images in a Remix Application by sergiodxa

The blog of sergiodxa

Integration testing Remix apps with Vitest, Typescript & Docker

Master integration testing for Remix apps using Vitest, TypeScript, Docker, and real databases, with adaptable techniques for any JS app like Next.js

Remix 🚚 Vite: Migrating Remix apps to Vite ⚡️

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

Remix v2.2 Leverages New Core Netlify Primitives

Hosting your Remix sites and applications on Netlify just got even better thanks to a number of new capabilities in our core platform and updated integrations which unleash the features in the latest version of Remix. Learn how you can use advanced cache control, streaming, custom local dev servers, and more.

Discover Vite Remix Exploration

Introducing Remix v2.2.0: lightning-fast Vite integration, plugins, and better developer experience. Elevate projects and discover new potential!

Remix ❤️ Vite: Introducing the new Remix Vite Plugin

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

Remix ❤️ Vite

Today we’re announcing that unstable support for Vite is available in Remix v2.2.0!

Remix com serverless

Nessa postagem vamos aprender como fazer o deploy de uma aplicação Remix no serverless.

Ship an app with Remix

Learn this popular React framework by building and deploying your own Work Journal app.

jjhiggz/elysia-remix-demo

I think this demo shows why elysia and remix are actually a pretty nice technological matchup

I'll take you through the Remix tutorial - Code Autopilot

The tutorial says 30m, but it took me about 80m, not including editing time. #remix #react * * * Nikos Katsikanis LTD Director/Producer: Visit https://nikoskatsikanis.com for more information. Check out "The Nikos Show" on my main channel: https://www.youtube.com/@NikosKatsikanis

Why I Won't Use Next.js

From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won't use Next.js.

Containerizing and Deploying a Production Remix App | Cycle.io | The LowOps Container Orchestration Platform

Containerizing and deploying a production Remix application on the LowOps platform Cycle.

Creating a multitenant SaaS service with Turso, Remix, and Drizzle - Turso Blog

Building a multitenant SaaS website where each user gets their own Turso database by leveraging Turso’s numerous database offering.

How to Redirect with Search Param in Remix by sergiodxa

The blog of sergiodxa

v2.1.0 Remix Experimental View Transitions API

Brooks shows off the new experimental View Transition API in Remix v2.1.0 Release Notes 👉 https://github.com/remix-run/remix/releases/tag/remix%402.1.0 unstable_viewTransition API 👉 https://remix.run/docs/2.1.0/components/link#unstable_viewtransition Matt Brophy's React Router Demo 👉 https://github.com/brophdawg11/react-router-records Chapters 00:00 Introduction 02:41 Remix.run blog example 05:29 Transitioning specific elements 13:24 Accessibility and prefers-reduced-motion Learn more at https://remix.run

Server-side pagination with Remix

Use query parameters to implement server-side pagination with Remix. Create a rolling pagination component that shows the current page along with a few pages before and after it, like Google Search.

btomaj/shopify-app-template-remix-testing

Embedding Remix in Directus

In this mad-science experiment, we combine the Directus CMS with the Remix framework in a single package that enjoys the features of both.

A love letter to the Remix loader

This is an uncontroversial opinion for people using Remix, but it needs to be said:   The loader API is the best thing about Remix. Some background: A loader is a custom defined function that is responsible for "loading" all of the data that is required to render a route. It's

Remix Love: Reasons and Passion

Remix.run revolutionizes web development with simplicity, flexibility, and seamless integration, improving project setup, deployment, and migration

Upload e Crop de Imagens com Remix JS e Easy Crop. Uso do Shadcn UI Bun com gerenciado de pacotes.

GitHub Repo: https://github.com/RemixJS-Brasil/remix-upload-cropimage Neste vídeo, mergulhamos em uma jornada de desenvolvimento web emocionante, onde exploramos como realizar o upload e o recorte de imagens com Remix JS e a eficiente biblioteca React Easy Crop. Além disso, vamos dar um toque visual de classe ao nosso projeto, utilizando os componentes do elegante Shadcn UI e otimizar nosso fluxo de trabalho com o gerenciamento de pacotes Bun. Prepare-se para aprender a criar uma experiência de usuário excepcional enquanto aprimoramos nossas habilidades de desenvolvimento web.

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.

Setting Up Remix JS with Strapi Headless CMS: Quick Start Guide

Setting Up Remix JS with Strapi Headless CMS: Quick Start Guide In this video, we won't be starting from scratch. Instead, we're diving straight into a finished project from a repository. I'll show you how easy it is to get started with Remix JS and Strapi Headless CMS to jump-start your web development project. So if you are looking for a Free completed web site, give this repo a try. 🔍 What's Inside: How to pull a project from a repository. Step-by-step guide to get the project up and running on your system. Overview of the project's main features. Why Try This? 🕒 Save time with a ready-made solution. 🔧 Get a feel for Remix and Strapi by exploring a completed project. 📚 Learn without the hassle of setting things up from the beginning. This video is based on Paul's project. We'll go through a Remix and Strapi combination, giving you a clear idea of how to use and tweak it for your own projects. 📝 Links & Resources: Project Repo: https://github.com/PaulBratslavsky/strapi-remix-starter About Strapi: https://strapi.io About Remix: https://remix.run 🗣 If this video helps you out or if you've got questions, drop a comment below! If you find this useful, give it a thumbs up 👍 and don't forget to SUBSCRIBE for more. Let's make web projects easier together! --------------------------------------------------------------------------------------------------------------------- Check out my other videos. --------------------------------------------------------------------------------------------------------------------- Want to see how I use ChatGPT to study? Check out this video. https://www.youtube.com/watch?v=BxRoPAYMDG8 Javascript vs React how soon should you learn it? https://www.youtube.com/watch?v=w8NCk4qMAAs Check out my story and how I got hired? https://www.youtube.com/watch?v=61P0yKsU8yw Check out my first cringe video here. This was one of my first videos. https://www.youtube.com/watch?v=DjYz8-UwS4o

How to Access the Loader Data in Remix by sergiodxa

The blog of sergiodxa

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

Remix Austin Meetup - 10/04/23

This Remix Austin meetup took place at the H-E-B Digital & Favor Eastside Tech Hub in Austin, TX on October 4th. We had a great speaker! remixaustin.com repo: https://github.com/remix-austin/remixaustin-com Strapi Remix Starter: https://github.com/PaulBratslavsky/strapi-remix-starter 01:49 Brooks Lybrand - Upgrading remixaustin.com to v2 28:55 Paul Bratslavsky - How I use Remix and Strapi to Prototype Ideas Fast 46:22 Announcements Upgrading remixaustin.com to v2 — Brooks Lybrand Remix v2 recently launched! Let's walk through what an upgrade looks like by upgrading our very own website How I use Remix and Strapi to Prototype Ideas Fast — Paul Bratslavsky I have many ideas for Saas products. They are all always bad, but I still need to try them out. Knowing this about myself, I wanted to figure out the quickest way to go from 0 to 1. In this talk, I will share how I use Strapi ( headless CMS ) with Remix. - Some of the benefits - Prototype fast - Separate content from the presentation layer - Developers and content managers can work in parallel - Small team or tight schedule - Project budget - Need a pre-build admin to manage content - Lots of content to manage I will showcase some code examples of Remix projects with Strapi and how you can go from 0 to 1. There are many great Remix stacks out there, and in this talk I will be sharing mine. Want to attend future Remix Austin meetups? Join our group to be notified of future events: https://www.meetup.com/remix-austin

Hydrogen: Shopify’s headless commerce framework

Build performant ecommerce faster with Shopify’s React-based framework for developing custom storefronts. Built-in Oxygen hosting makes deployment easy.

Accessible, Typesafe, Progressively Enhanced Modern Web Forms

Learn how to use modern tools that offer the best user and developer experience for web forms.

Level Up Your React Game with Remix, Prisma, & Supabase Postgres DB

Ready to supercharge your React app development with Remix? Learn how to create a server-rendered app with the Remix Stacks, Prisma, and Supabase.

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

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

The blog of sergiodxa

sergiodxa/remix-on-bun

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.

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

Remix v2

The second major release of Remix is stable today.

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

partykit/remix-starter

🎈 PartyKit ⤫ Remix 💿

rolanday/remix-next-auth-unocss

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

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.

getcord/cord-remix

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

rphlmr/remix-js-with-jsdoc

A Remix run demo in full JS with JSDoc

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

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.

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

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.

scandinavianairlines/remix-workers-poc

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

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

How to Create a reusable Form component in Remix by sergiodxa

The blog of sergiodxa

remix-development-tools

Remix development tools.

remix-json-routes

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

remix-hono

A Hono adapter for Remix apps using Cloudflage Pages

manawiki/repay

Remix + PayloadCMS

Autosave form inputs with Remix

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

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

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

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

AlexandroMtzG/saasrock-kb

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

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

AlexandroMtzG/novel-remix

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

jacob-ebey/bun-remix

Bun + Remix + HMR

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.

congdinh/create-remix-queue

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

resendlabs/resend-remix-example

This example shows how to use Resend with Remix

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.

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.

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.

remix-custom-routes

Custom routing conventions for Remix

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

The blog of sergiodxa

Learn React UI

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

Mana - A new kind of wiki

xHomu/remix-v2-server

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.

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.

My Struggle With Remix

Remix is a fantastic framework but it's not without its issues. Here are some of my struggles after building a few different projects with it.

Remix Forge - Visual Studio Marketplace

Extension for Visual Studio Code - Remix generator for route files to help you generate your routes faster.

"Fast, responsive native mobile apps powered by Remix & defer" by Oscar Newman at #RemixConf 2023 💿

Get advanced with `defer` and other Remix features to power a lag-free, web-based native app, without giving up Remix's data loading and mutations on the server. Chasing the dream of write-once/run-anywhere by wrapping your website in a native app shell? Scared that a great Remix website won't feel as snappy as the instant transitions of your old SPA? Fear not—by being smart with `defer` and leveraging the browser platform, you can power a spinner-free website and super-speedy native app from the same routes. Speaker Bio: Oscar Newman is a product and design-focused software engineer working on consumer healthcare experiences at Solv Health, where he has led a team-wide migration to Remix. He's passionate about consumer healthcare and building compelling user experiences. He's dabbled in design systems and front-end tooling, and is terrible at algorithms and most coding interviews. https://remix.run/conf/2023/speakers/oscar-newman

epicweb-dev/epic-stack

This is a Full Stack app starter with the foundational things setup and configured for you to hit the ground running on your next EPIC idea.

"Keynote" by Michael Jackson & Ryan Florence at #RemixConf 2023 💿

Speaker Bio: Ryan Florence has been obsessed with UX since using an Intellivision. https://remix.run/conf/2023/speakers/ryan-florence Speaker Bio: Michael Jackson, the author or Remix, not the pop star. https://remix.run/conf/2023/speakers/michael-jackson Learn more at https://remix.run

"Web beyond the edge" by Igor Minar & Nevi Shah at #RemixConf 2023 💿

Edge computing is increasingly being adopted by web developers these days to improve UX and decrease latency of their applications. Cloudflare Workers, Deno Deploy, Netlify Edge Functions, and Vercel Edge Functions, all have made edge computing available to developers of full stack applications. With this adoption new architectural patterns and anti-patterns for building web applications have emerged. In this talk we’ll cover how developers can utilize edge computing to build full-stack applications and what are the strengths and weaknesses of this approach. We’ll also look into the future — beyond the edge, and explore how thinking of the network as the computer will fundamentally change the architecture of web applications in order to make building planet-scale applications accessible to everyone. Speaker Bio: Nevi Shah is a Product Manager at Cloudflare. She works on Cloudflare Pages and Cloudflare D1. https://remix.run/conf/2023/speakers/nevi-shah Speaker Bio: Igor Minar is a software engineer at Cloudflare and co-creator of AngularJS, Angular, and Karma. He has spent the last 15 years helping developers by building infrastructure, APIs, and tooling for the Web. Igor built some of the biggest web development communities during his time at Google. He collaborated with the TypeScript team to bring type-checking and better tooling to developers, as well as browser vendors to design and improve web APIs. He has also worked to establish pragmatic best practices in the web ecosystem by creating conventional commits and many evergreen libraries. https://remix.run/conf/2023/speakers/igor-minar

Use Remix with SST | SST

Create and deploy a Remix app to AWS with SST.

"Get Rich Quick: AI-Powered Remix Apps" by Andrew Petersen at #RemixConf 2023 💿

Want to get rich? Step 1: Buy *.ai domain Step 2: Create pitch deck and start picking out private jets You've already got your Remix app, now just layer on some OpenAI GPT-3/4 so you can justify one of those .ai domains and raise a bunch of money. We'll look at how to utilize a Large Language Model (LLM) in a Remix app. We'll unpack some interesting performance constraints, and identify the technical mechanics to work around them. Speaker Bio: Andrew Petersen is a full-stack developer with over a decade of professional experience. He excels at leading development teams and collaborating with non-technical stakeholders. When not coding, you can find him in the backcountry with his wife and two dogs. Their favorite spots are in southern Utah and Idaho's Sawtooth mountains. https://remix.run/conf/2023/speakers/andrew-petersen

brophdawg11/upgrade-remix

Command line utility to upgrade all Remix dependencies together

"Next gen HMR in Remix" by Pedro Cattori at #RemixConf 2023 💿

How does Remix update your browser in dev? It's more than just watch mode, live reload, or even HMR. Let's dive into how Remix offers a world-class dev experience. Speaker Bio: Pedro Cattori is a software engineer on the Remix team at Shopify. He lives in Washington, D.C. He works on the Remix compiler, dev server, TypeScript integration, and writing algorithms that the rest of the team pretends to understand and prefers to never look at. https://remix.run/conf/2023/speakers/pedro-cattori

"Good Bye Spinners: Enhancing UX with Optimistic UI" by Giovanni Benussi at #RemixConf 2023 💿

Most of the time our API calls work, so why don’t assume that they’ll do and provide a seamless experience? Optimistic UI means to simulate a positive response from the server before receiving one. This talk will introduce examples of optimistic UIs, highlight their benefits, and provide guidance on incorporating them into our applications. Speaker Bio: Giovanni Benussi has been a full-stack developer for more than 12 years. He started working on Ruby on Rails, eventually working on new features, maintenance, and scalability for the framework. Nowadays he works primarily with React. https://remix.run/conf/2023/speakers/giovanni-benussi

"React from Another Dimension" by Dan Abramov at #RemixConf 2023 💿

Backstreet's back. Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov

"Remixing MDX to Create More Accessible Content" by Monica Powell at #RemixConf 2023 💿

An exploration of how using MDX with Remix enhances the Markdown authoring experience, unlocks an ecosystem of tools to improve accessibility, and enables developers to craft more customized content experiences. This talk will walk through multiple ways MDX can be incorporated into a Remix site and provides examples of leveraging MDX to strengthen the usability and accessibility of content. Speaker Bio: Monica Powell is a software engineer who is passionate about making contributing to open-source more approachable, creating technology to elevate people, and building community. You can find her developing educational technology as a Senior Software Engineer at Newsela, teaching web development, and contributing to open-source projects. GitHub recognized her as an inaugural GitHub Star based on her involvement in the tech community. https://remix.run/conf/2023/speakers/monica-powell

"Use Remix to ship faster/build ambitiously with great UX" by Clifford Fajardo at #RemixConf 2023 💿

I will discuss some of the things we've built at LinkedIn with Remix, why we chose it over other alternatives, our incremental migration story and how Remix is enabling us to ship faster & more ambitious web UIs for our users. Whether your an indie hacker, working at startup or large company, and are interested in moving to Remix, this talk is for you. Speaker Bio: Clifford Fajardo is a full-stack software engineer at LinkedIn where he works on infrastructure tools.He has worked at both startups and other large companies, including Salesforce. In his spare time you might find Clifford contributing to open source, hiking trails in the Bay Area, or eating at his favorite pizza shop: Bronco Billy's Pizza. He has a twin brother and is a proud Nicaraguan-American 🇳🇮 https://remix.run/conf/2023/speakers/clifford-fajardo

"Let 70%+ of the users in the world to access your apps" by Arisa Fukuzaki at #RemixConf 2023 💿

Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. Speaker Bio: Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. https://remix.run/conf/2023/speakers/arisa-fukuzaki Note: due to technical difficulties during Arisa's talk at the conference, Arisa was invited to run through her talk again later that evening. This video is that up-to-date version.

"The Little Remix Site that Could" by Brandon Kish at #RemixConf 2023 💿

It started life as a create-react-app landing page in front of a vendor’s SaaS app that got an instant SEO upgrade with Remix v1.1.1’s server side rendering, and it’s never looked back. Need an unauthenticated version of “portal” content before the SaaS vendor supported it? Remix made that easy. Need to migrate content from a 25 year old on-premise vendor solution to a 10 year old on-premise vendor solution but want a modern user experience? We import the vendor’s design library into Remix and handoff the .NET app’s existing user sessions to Remix by POSTing JWTs. Remix is filling the gaps for Schoolcraft College and leveraging a hodgepodge of APIs and creaky old databases. Higher education development can be fun! Speaker Bio: Brandon Kish is a web developer at Schoolcraft College in Livonia, Michigan. He previously taught web design to community college students and misses the CSS Zen Garden. https://remix.run/conf/2023/speakers/brandon-kish

"Accelerating Web Development with Mock Service Worker" by Sean McQuaid at #RemixConf 2023 💿

Mock Service Worker (MSW) is a powerful tool for speeding up development and testing by intercepting and modifying network requests. In this talk, we will explore the benefits of using MSW and how it can be leveraged to streamline your development process. We will cover best practices for implementing MSW, including how to use it for both testing and local development. Additionally, we will discuss real-world examples of how MSW has been used to improve the efficiency and effectiveness of development teams. Speaker Bio: Sean McQuaid is a Senior Software Engineer on the Customer Technology Solutions team at Chick-fil-A. Prior to learning how to code, he attended music school and played the trumpet professionally for over a decade. Sean is very passionate about testing, performance, and tools that provide a good developer experience. https://remix.run/conf/2023/speakers/sean-mcquaid

"Reaching new heights with Remix, Prisma and Google Cloud Run" by Brian Lee at #RemixConf 2023 💿

Let's look at real world look at a migration from a React SPA and self-managed Express API to Remix on Google Cloud Run in a production setting. At Nellis Auction we made the jump and have insights to share with those of you looking to make the switch as well (hint: the performance boost for our customers was dramatic). Speaker Bio: Brian Lee is the VP of Engineering at Nellis Auction, an advisor at Reality Defender, and is currently seeking Masters in Computer Science at Vanderbilt University in Nashville, TN. Brian graduated from UNLV in 2013. Throughout his career he has worked in many areas, including geographic information systems, artificial intelligence, machine learning, custom video streaming, mobile development, and gaming engines. His work has spanned several languages and technologies, but it was always nestled within the web ecosystem. https://remix.run/conf/2023/speakers/brian-lee

"Remix API" by Shane Walker at #RemixConf 2023 💿

Using Remix to create a stand alone API is simple, fast and really fun! In just a couple minutes you can stand up a super straight forward API. This can let folks dip their toe into the wonderful world of remix without rewriting their front end. Speaker Bio: Shane Walker is a self-taught developer with a passion for learning new things and watching them come to life. From his first “Hello World” app, he was hooked. He is invigorated by solving problems in code. https://remix.run/conf/2023/speakers/shane-walker

"Lightning Fast E-Commerce: Remix with Shopify Hydrogen" by Alexa Spalato at #RemixConf 2023 💿

Join us for a thrilling ride as we explore the world of headless e-commerce with Shopify Hydrogen! This tech stack is taking the e-commerce industry by storm, and in this talk, we'll show you just how easy and fun it is to build a high-performance online store using Hydrogen's ready-to-use React components. From creating collections and products to implementing a shopping cart, we'll cover it all and give you the tools you need to elevate your developer experience. Don't miss out on this opportunity to learn the ins and outs of Shopify Hydrogen and see firsthand how it can revolutionize your e-commerce projects. Speaker Bio: Alexandra Spalato is a Developer Relations engineer at Storyblok. She was born and raised in France and lives now on the beautiful Spanish island of Mallorca. While working as a freelance developer and entrepreneur, she decided to fully specialize in the JAM Stack. She is an advocate for headless architecture and has taken that advocacy full time at Storyblok. https://remix.run/conf/2023/speakers/alexandra-spalato

"The Humble Cookie" by Scott Smerchek at #RemixConf 2023 💿

When their inventor, Lou Montulli, came up with the concept for cookies, he couldn’t have known the impact these little packets of data would have on the internet as we know it. Join me in this exciting journey as we uncover the humble beginnings of the HTTP cookie, its maligned use by advertisers, yet evolution into a still quite versatile tool for web developers today. The cookie was unfashionable for a span with Single Page Applications, but with Remix, we can once again easily harness the power of cookies in a secure way. In this talk, we'll dive deep into the world of cookies and explore the variety of ways they can be used in Remix to enhance the user experience and simplify the development process. Whether you're a seasoned developer who remembers the good ol’ days or just starting out, you'll leave with a better understanding of the powerful role cookies play in developing modern web sites with Remix. Speaker Bio: Scott Smerchek lives in Kansas City and works remotely for UDisc, creating web applications to help disc golfers of all abilities. He works primarily with Node.js, PostgresSQL, MongoDB, and React. He is passionate about functional programming—regardless of the language. https://remix.run/conf/2023/speakers/scott-smerchek

"Remix Live Loader" by Alex Anderson at #RemixConf 2023 💿

Like most things in Remix, realtime data comes with the platform! Server-sent Events let us pass messages from the server to connected clients, making it possible for instant updates when any user makes a change. But how can you use this to make sure every route's data is kept fresh? Enter useLiveLoader, a technique to connect Server-sent Events with useLoaderData to always keep your data fresh. With just one hook, we get the same route data loading as useLoaderData with automatic real-time updates. Let's take a peek at what realtime in Remix looks like, and how to build this kind of hook for your own app. Speaker Bio: Alex Anderson is a software engineer at Echobind, a full-service software agency. He's a maker in many mediums, including code, baked goods, games, tech courses, and music. A spaceship enthusiast, Alex created Thorium: an open-source platform for live-action spaceship bridge simulations. He enjoys building games and puzzles with the web. https://remix.run/conf/2023/speakers/alex-anderson

"Remixing Constraint Validation" by Edmund Hung at #RemixConf 2023 💿

The Remix Form and Action have drastically simplified our forms. While it's easy to validate form data on the server, people have always been searching for a good client-side form validation solution. What if we could use the platform to implement simple client-side validation without adding another dependency? In this talk, we'll explore how to utilize the Constraint Validation API to provide a modern form validation experience in Remix. Speaker Bio: Edmund Hung is a senior web developer from Hong Kong who works on the global online food-ordering and delivery platform, Delivery Hero. He maintains Remix Guide and is currently building Conform, a form validation library focusing on progressive enhancement. In his spare time, he enjoys cycling and gaming. https://remix.run/conf/2023/speakers/edmund-hung

"Video Editing in the Browser" by Christoher Chedeau at #RemixConf 2023 💿

Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial! Speaker Bio: Christopher Chedeau is the co-creator of React Native and Prettier, and the creator of React Conf, Excalidraw, and Yoga (the layout engine, not the one where you stretch a lot). https://remix.run/conf/2023/speakers/christopher-chedeau

"(Ab)use the Platform!" by Jon Jensen at #RemixConf 2023 💿

As any Remixologist will tell you, modern web apps are just pages/links/forms layered in spinners/latency/jank. If that's true, we should use Remix and web fundamentals everywhere to build better experiences! But what about highly interactive apps with streaming data and visualizations? Just how far should we push the envelope? Let's find out! In this talk, we'll implement a multi-user musical instrument with Remix, (ab)using things like: - Forms and FormData - Web Audio - Browser history - Progressive enhancement - Full stack components - Response and Server-sent events Speaker Bio: Jon Jensen is a Senior Software Engineer at Netflix working to improve the developer experience for other UI engineers. Previously he worked at Amazon and Instructure, working on all things software-y. In his spare time he's usually in the mountains, playing Minecraft with his kids, or following the Red Food Truck around Salt Lake City. https://remix.run/conf/2023/speakers/jon-jensen

"The Epic Stack" by Kent C. Dodds at #RemixConf 2023 💿

Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What’s great is that most of the time, it’s hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis. Let's talk about this, and a solution I am working on for it. Speaker Bio: 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. He is the creator of EpicWeb.dev, EpicReact.Dev, and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is married and the father of four kids. https://remix.run/conf/2023/speakers/kent-c-dodds

"Convince your boss to use Remix" by Andre Landgraf at #RemixConf 2023 💿

Do you currently feel stuck and limited working on a React SPA? It is time to sit down with the decision-makers at your company and convince them to unlock the full potential of the web platform with Remix. In this talk, I want to make 5 points to convince your boss to try Remix. You might have already fallen in love with the Remix-way of building for the web, but you will need a business case with solid business incentives to make your boss pay attention. Let’s build one together! Speaker Bio: Andre Landgraf is a full-stack developer from Germany. He currently lives in Cupertino, CA and works for LinkedIn. At work, Andre is known as the Remix guy. He is passionate about building for the web and enjoys learning, writing, and teaching about it. https://remix.run/conf/2023/speakers/andre-landgraf

"A Fist Full of Data: Web Performance, and Data on The Web" by Henri Helvetica at #RemixConf 2023 💿

It’s 2023, and we have witnessed significant advancements in the web platform. Much of that came from innovation, pushing the web to unimaginable capabilities. This has also sadly come at the unimaginable costs to user experience and web performance. A Fist Full of Data is an eye opening talk about data on the web, and the modern means used to mitigate the user experience malaise. Speaker Bio: Henri is a freelance developer who has turned his interests to a passionate mix of site performance engineering and pinches of user experience. When not reading the deluge of daily research docs and case studies, or indiscriminately auditing sites in devtools, Henri can be found contributing back to the community, co-programming meetups including the Toronto Web Performance Group or volunteering his time for lunch and learns at various bootcamps. Otherwise, he’s focusing on running the fastest 5k possible. https://remix.run/conf/2023/speakers/henri-helvetica

"Remixing Community" by Brooks Lybrand at #RemixConf 2023 💿

How do you build community? Especially around a web framework on the cusp of a public v1 release right as society is reopening after a global pandemic? It's not too dissimilar from building a website: trial and error, continuous delivery, teamwork, and a lot of optimism and emojis 😅 In this talk I will share the history and lessons learned from building the Remix Austin meetup. How we went from a single meeting of 2 people in a loud bar, to a community of engineers of varying experience who regularly meet to share demos, talks, and even build a website together. My hope is that our trial and error will be inspiration for anyone trying to build their own tech community. Additionally I hope to encourage the larger Remix community to continue building better websites by cultivating a culture of sharing and connectedness. Speaker Bio: Brooks Lybrand is a Senior Web Engineer for H-E-B, [what he believes is] the best grocery store in the world [okay, at least in Texas]. Brooks specializes in building proof-of-concepts, evaluating tools, and creating highly interactive, data-rich applications. He enjoys exploring new ideas and technologies to help create better experiences for both developers and end-users. When not writing code, he loves spending time with his wife and dogs, camping, playing board games, and pretending he knows what he's talking about when it comes to coffee and mixed drinks. https://remix.run/conf/2023/speakers/brooks-lybrand

"How to Build Accessible React Components" by Catherine Johnson at #RemixConf 2023 💿

Hope you are strapped in for some accessibility! In this session we will breakdown how you can use built-in React tools and web accessibility guidelines to create flexible and accessible components for your website. Speaker Bio: Cat Johnson is a Software Engineer at Microsoft who has worked for more than six years in the industry. She works on React Web Components and focuses on building accessible technology. Cat loves to talk about and teach how to create more accessible and inclusive web applications. She hosts a podcast discussing new technology and how it can create a positive social impact in our world today. She firmly believes that technology can be used to create a more inclusive and equitable world as long as we keep it in check. https://remix.run/conf/2023/speakers/cat-johnson

"When things go wrong, get errors right!" by Glenn Reyes at #RemixConf 2023 💿

When we build web applications, pretty much always the fun part of it is the happy path: That everything works! But what if something goes wrong? It’s so easy to oversee all the error instances which naturally leads to not covering them well enough. Let’s discuss challenges about errors and explore patterns and tools that can help us make better user experiences when things go wrong. Speaker Bio: Glenn is a software engineer, tech speaker and workshop instructor with a passion for building innovative products and beautiful user interfaces using cutting edge web technologies and open source software such as React, GraphQL and TypeScript. Aside from tech, you’ll find him either traveling, on a road bike or playing the guitar. https://remix.run/conf/2023/speakers/glenn-reyes

"React Core Panel" by Joe Savona, Ricky Hanlon, Dan Abramov, & Michael Jackson at #RemixConf 2023 💿

A panel Q&A discussion at Remix Conf with the React team and Michael Jackson. Speaker Bio: Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket JS, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family. https://remix.run/conf/2023/speakers/joe-savona Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov Speaker Bio: Ricky majored in theoretical math and spent his early career working at startups and the Jest core team. In 2018 he joined Meta and somehow found himself on the React team. When he's not pushing bugs to your React code you can find him tweeting, skiing, golfing, or closing GitHub issues that do not match the issue template. https://remix.run/conf/2023/speakers/ricky-hanlon Speaker Bio: Michael is the co-creator of Remix. https://remix.run/conf/2023/speakers/michael-jackson

"Web Performance Testing: Choosing between RUM and Lab Tests" by Erick Tamayo at #RemixConf 2023 💿

What is the difference between Real User Monitoring (RUM) and Lab tests (Lighthouse), and why are both important to deliver a great user experience. Speaker Bio: Erick Tamayo is a Senior Front-end developer at Shopify. He also created Metronome, a tool for real user monitoring (RUM) specifically for Remix. Erick has been following Remix since its creation in 2020 and decided to join the community in 2021. https://remix.run/conf/2023/speakers/erick-tamayo

"Why I chose Remix and never looked back" by Paul Bratslavsky at #RemixConf 2023 💿

In this talk we'll explore how Remix and a headless CMS enabled me to build a client app in two weeks, and how the same approach can help you deliver faster for your clients or team as well. I'll show how you can cut your development time, empower content editors to manage content without additional coding, and create a dynamic frontend in parallel. Speaker Bio: Developer advocate by day and content creator by night, Paul Bratslavsky loves learning new things and sharing them with others. He is a big fan of everything Javascript—especially Remix and Strapi. https://remix.run/conf/2023/speakers/paul-bratslavsky

"React Router 6.4 Saved My Side Business" by Cameron Matheson at #RemixConf 2023 💿

I've been running a side business on an old-React/Flux/React Router 3.0 frontend with a Rails backend. Despite being conceptually simple, the frontend was nearly unmaintainable. In this talk we'll explore how React Router data loaders really turned things around for this creaky old site. Speaker Bio: Cameron Matheson likes writing code and hanging out with his family. He's been living in the year of Desktop Linux since 1998. https://remix.run/conf/2023/speakers/cameron-matheson

"Remixing Hydrogen - Lessons learnt embracing the platform" by JP Prieto at #RemixConf 2023 💿

34 years ago HTTP was born, 9 years later HTML v2 added the form element and at about the same time Ruby on Rails showed us the power of server-side mutations with semantic URLs. Along the way, we went full SPA and embraced everything-client. It’s now 2023, a time to leverage the best practices of the past and Remix some classics. Join me as I dive into what it was like to swap our homegrown react framework with Remix and how this change will impact Shopify headless commerce codebases, patterns and performance in the future. Speaker Bio: I'm a Full-stack engineer with a decade of experience developing highly performing e-commerce applications for agencies and brands such as Cuts Clothing, Vuori, Liquid IV amongst many others. Currently, I am a member of the Hydrogen team at Shopify where our focus is to deliver the best framework and tools for developing headless commerce applications. I am passionate about web standards, React and of course Remix. https://remix.run/conf/2023/speakers/jp-prieto

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.

Custom Fetcher Hooks are Remix's Typesafe RPCs

Create RPCs by exporting functions from your resource routes. Get full end-to-end type safety and autocompletion. Use custom fetcher hooks to get automatic revalidation, request cancellation, and more.

Remix Conf 2023 - Day 2

Learn more at https://remix.run https://remix.run/conf/2023 Join discord: https://rmx.as/discord CC https://event-captioner.deepgram.com/events/remix-2023

Using symbols to create type safe Remix handles without duck typing

Safely type your handle data in Remix without needing to resort to duck typing with Symbols.

Remix Conf 2023 - Day 1

Learn more at https://remix.run/conf/2022 Chat at https://rmx.as/discord

S'More Info? You've come to the right place.

Web developer working on the road from an RV. Sharing tips about trucks and trailers.

Where to host your Remix app in 2023

Should you host your Remix app on a serverless provider like Netlify, Vercel, Cloudflare Pages, or AWS Lambda? Or a long-lived server like Fly, Render, Railway, or DigitalOcean? This guide will help you choose the right hosting option for your app.

jose-donato/race-stack

Remix run stack built for the edge (cloudflare pages and d1)

dalmaer/postgres-remix

A simple Remix app with Vercel Postgres as the database

xanderberkein/remix-cloudflare-module-workers

Use Remix with Cloudflare module workers

Find and fix performance bottlenecks in your Remix app with Server Timing

Use the Server Timing API to measure the performance of your app and find bottlenecks. I've built a server timing utility function for Remix. Merge the timing info from multiple loaders into a single request.

itsMapleLeaf/remix-deno-modern

remix-hook-form

Utility wrapper around react-hook-form for use with Remix.run

oslabs-beta/remixDJ

Dev tool for Remix

kettanaito/msw-with-remix

Minimal example of using Mock Service Worker with Remix. Both server- and client-side.

NoQuarterTeam/boilerplate

🔆 Fullstack boilerplate using Remix, Next.js, Expo, Prisma, TypeScript, tRPC and many more!

Building a markdown input with a preview tab (like GitHub and Stack Overflow) with Remix

Create a progressively enhanced input field with "edit" and "preview" tabs like GitHub and Stack Overflow. Use Remix's useFetcher hook to render the markdown server-side. Set shouldRevalidate to false to make tab-switching instant.

remix-aws

AWS adapter for Remix

Build A Map View With Remix and MapKit JS

Gowalla is all about sharing where you're going with close friends. We deal a lot in maps and map experiences. The case is not so different in our first web product, Lists, where you share places you care about. Here's an example of F1 Tracks Around ...

Autosave form inputs on change or blur with Remix's useFetcher (not useSubmit)

Save forms automatically with useFetcher instead of useSubmit. Show a loading state while saving.

Generate open graph social preview images with Remix

Learn how to generate social preview images for your website with Remix and Tailwind. Use Vercel's Satori package with Remix for dynamic open graph images. Fetch fonts from Google automatically.

remix-auth-webauthn

Authenticate users with [Web Authentication](https://www.w3.org/TR/webauthn-2/) passkeys and physical tokens. It is implemented using [SimpleWebAuthn](https://simplewebauthn.dev) and supports user authentication and user registration using passkeys.

Utiliti

A collection of high quality, secure, and open source utilities.

uceumice/remix-kawaii

Premium & Full-Stack Remix Templates

Start your next project with our high-quality premium Remix templates. Build with modern technology stacks and come with a suite of pre-built components.

Server-side render dates across timezones with Remix

Server-side rendering breaks when the server is in a different timezone than your browser. Make your Remix server timezone agnostic with a timezone offset cookie.

Building a context loaded chat assistant with OpenAI and Remix

It seems everyone is using Chat GPT in their daily lives. From coding, to recipes, to blog generation, carefully crafted prompt engineering…

Animated page transitions with Remix's nested routes

Use Remix's nested routes with react-transition-group and Tailwind CSS to fade between pages.

rajeshbabu-oviva/remix-mdx-blog

A simple blog built with remix and mdx

Multiple forms and actions on a page with Remix

A Remix action is an endpoint for POST requests, and all forms will submit to the same action. Add a name and value to your submit button to know which form was submitted, and use that to determine which action to take.

Future Proofing Your Remix App

We've introduced the concept of future flags to give you a smooth upgrade path for your Remix app.

remix-sitemap

Sitemap generator for Remix applications

Curso Remix How To com Fabio Vedovelli

Este curso lhe trará habilidades para desenvolver aplicações com Remix.run e ajudará a compreender como o Remix funciona. Seu momento "ahá" está mais perto do que você imagina.

remix-routes-folder

A Remix plugin that allows you to organize your routes in multiple route-folders.

dalmaer/remix-openai-streaming

A simple sample project on how to stream openai completion to a Remix app

Aula inaugural do curso Aprenda Remix com Fabio Vedovelli

Remix without Limits – Vercel

Vercel now has advanced Remix support, including SSR streaming with Edge Functions and multi-runtime support.

Front-Commerce is getting a Remix | Front Commerce Developers

We are thrilled to announce that we’re Remixing Front-Commerce!

Lazy Loading Routes in React Router 6.4+

Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!

Shop's AI-powered shopping assistant

Get personalized shopping recommendations from Shop’s AI-powered shopping assistant. Make shopping fun and find exactly what you’re looking for in a flash.

A Pot of (Code) Gold: A Remix NYC St. Patrick's Day Event

Indianapolis Remix Meetup, Thu, Apr 6, 2023, 7:00 PM | Meetup

Remix. It’s web fundamentals. It’s the future of react applications. Got an opinion? Let’s discuss!

@superflare/remix

Remix plugin for Superflare

My experience learning React, web standards, and Remix | Andre Landgraf

In this blog post, I am sharing my story of learning React, web standards, and Remix, and answer the question why I actively try to use less React.

meza/trance-stack

A production-ready Remix stack built for AWS Lambda. Authentication. Security, Internationalization, Feature Flags, Analytics, Tests, Storybook, Ephemeral and Production CI/CD and more.

Stream Progress Updates with Remix using Defer, Suspense, and Server Sent Events

Use Remix's Defer feature in combination with an EventStream to stream progress updates to the client.

/uses

A list of /uses pages detailing developer setups.

insync - Stay in sync with the music you love

insync automatically generates playlists with music from your favourite artists to help you rediscover the music you love!

remix-island

utils to render remix into a dom-node instead of the whole document

Tony's Chocolonely - Headless Shopify eCommerce website re-design

Tony's Chocolonely Demo Store is a Shopify ecommerce built to showcase headless Shopify integrated with Sanity. We re-designed the online store.

Dynamic OG images with Remix and Node.js | Mokhtar Mial

Learn how to generate Open Graph images in your Remix app

From Angular to Remix: Route by route migration

In this tutorial, we will show you how to migrate an Angular application to Remix by running Angular...

Roadmap #5

Learn more at https://remix.run

kiliman/remix-hydration-fix

Sample app that shows how to fix React hydration issues in a Remix app

Type safe context in Remix on Cloudflare Pages

Remix Detector

Try to detect if Remix is being used on the site and show the Remix logo if it is

Remix NYC — Jan 18, 2023 (Remix with tRPC and React Native) (P IS FOR PERFORMANCE LITERACY)

This is the recording for the Remix NYC meetup on January 18, 2023. Talks: 1. Using Remix with TRPC and React Native to build a sample full stack app by Quentin Geddis (https://twitter.com/quentincwg) 2. P IS FOR PERFORMANCE LITERACY by Henri Helvetica (https://twitter.com/henrihelvetica) More about Remix NYC: - Follow us at https://twitter.com/remix_run_nyc. - We host meetups monthly, free of charge. Check us out here: https://www.meetup.com/remix-nyc/. - Want to give a talk? https://airtable.com/shrHi8P2T3fKmtHh0 - Want to sponsor our meetup? https://airtable.com/shro1qUzBgqaLIGGp Timestamps: 00:00 Start 10:44 Quentin Introduction 11:00 Using Remix with TRPC and React Native to build a sample full stack app 15:39 (Demo) Using Remix with TRPC and React Native to build a sample full stack app 36:00 Henri Introduction 37:00 P IS FOR PERFORMANCE LITERACY 1:28:53 End

How to build a Remix website with Sanity.io and live preview | Sanity.io guide

Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.

Start and grow your e-commerce business - 3-Day Free Trial

Try Shopify free and start a business or grow an existing one. Get more than ecommerce software with tools to manage every part of your business.

Hydrogen: Shopify’s opinionated framework for building headless e-commerce

Remix Auth

Supabase Auth simplifies building an app with users. Remix is a web framework that gives you little bits of server where you need it! 🚀 In this video, Jon Meyers takes us through the brand new Supabase Auth Helpers package, which provides convenience functions around storing session data in cookies, rather than localStorage. This makes it possible to send authenticated requests to your database, from the client or server! 🍪 Free egghead course on Remix and Supabase: https://egghead.io/courses/build-a-realtime-chat-app-with-remix-and-supabase-d36e2618 Remix Auth Helpers Docs: https://supabase.com/docs/guides/auth/auth-helpers/remix Learn more about Supabase 👇 🕸 Website: https://supabase.com/ 🏁 Get started: https://app.supabase.com/ 📄 Docs: https://supabase.com/docs 🐙 Github: https://github.com/supabase 💬 Discord: https://discord.supabase.com/ 🐦 Twitter: https://twitter.com/supabase/

10 Shopify SEO best practices with Sanity and Remix

We build Shopify stores with SEO best practices by leveraging the integration with Remix and Sanity. We cover on-page SEO, indexation, and dynamic sitemaps.

dev-xo/remix-auth-otp

A One-Time Password Authentication Strategy for Remix Auth.

A Tool for Discussion / Oxide

Showcasing a hub for knowledge sharing and collaboration that drives our decision-making process.

Jira clone

Task manager application inspired in Jira. Side project made with Remix, React, Tailwind, TypeScript and more.

How to create one form with many actions in Remix

Here is an easy method for building forms with multiple outcomes using a not well known html feature.

Scroll Management with Remix and React Router

Learn to prevent scroll reset on navigation and how to take control over how it restores on back/forward. Learn more at https://remix.run

Use Remix as a SPA only by sergiodxa

Remix always does SSR on document requests. Then it works as an MPA until JS loads and React hydrates your app. At that ...

PodRocket - A web development podcast from LogRocket - Remix in 2023 with Michael Jackson

In this episode, Michael Jackson joins us to talk about Remix joining Shopify! We cover topics like Hydrogen (the Shopify stack for headless commerce), the future of Remix, and more! Links https://remix.run https://github.com/remix-run https://twitter.com/remixrun https://twitter.com/mjackson https://discord.com/invite/xwx7mMzVkA https://www.youtube.com/remixrun https://www.linkedin.com/in/mjijackson https://podrocket.logrocket.com/remix-run Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we’ll send you a $25 gift card! If you’re interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we’ll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: Michael Jackson .

v1.11 Remix Streaming with React Suspense and Remix Defer

Ryan takes us for a first look at Remix Streaming from the v1.11.0 release Learn more at https://remix.run

v1.11.0 Remix Streaming and Granular Error Handling

Ryan shows us how to get granular with our errors and prevent slow, risky data loads from taking down the entire page if it has an error. Learn more at https://remix.run

jacob-ebey/remix-d1-northwind

Northwind Traders implemented on Remix + CF Pages + D1

Never Trust the Client: Architecting a Resilient API

It's important to architect your APIs in a way that can't be spoofed by a mischievous client application.

Call Remix Loaders on demand with useRevalidator

Remix Loaders are a great way to fetch data server-side before rendering the page. As of v1.10.0, you can use the useRevalidator hook to call these loaders whenever you want. In this video, Jon Meyers demonstrates how this can be paired with Supabase Auth and the onAuthStateChange hook to keep the UI in sync with the user's signed in state. GitHub repo: https://github.com/dijonmusters/remix-revalidation-on-demand To learn more about building an app with Remix and Supabase, check out this entirely free egghead course: https://egghead.io/courses/build-a-realtime-chat-app-with-remix-and-supabase-d36e2618?af=9qsk0a In this course we build a realtime chat application and learn about: 🍪 managing sessions with cookies using the Supabase Auth Helpers 🏢 fetching data server-side 🧙‍♀️ generating TypeScript definitions with the Supabase CLI ⏱️ merging realtime updates with loader data 00:00 Introduction 01:10 Creating Remix app 02:07 Adding a loader function 03:00 Empty action hack 05:33 Calling active loaders with useRevalidator 06:23 Creating a Supabase project 08:25 Instantiating a Supabase client 10:55 Implementing Supabase Auth 13:37 Revalidating data onAuthStateChange 15:10 Summary Other helpful resources 📜 Blog article: https://jonmeyers.io/blog/call-remix-loaders-on-demand-with-userevalidate 👇 Get more from Jon 👇 Twitter: https://twitter.com/jonmeyers_io Blog: https://jonmeyers.io/blog

Roadmap Planning #3

Learn more at https://remix.run

remix-ts-snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Snippets for writing Remix with TypeScript code faster!

Roadmap Planning #4

Learn more at https://remix.run

sendou.ink

Competitive Splatoon Hub featuring gear planner, event calendar, builds by top players, and more!

react-router-v6-codemods

A collection of codemods for react-router for upgrading to v6.

whatcanireallyuse

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! 🎉

colbywhite/acoustic-stack

This is a minimal Remix stack to serve as a starting point for demos and debugging.

cliffordfajardo/remix-msw-node-with-playwright

jrestall/remix-kit

remix development, streamlined

Roadmap Planning #1

Learn more at https://remix.run

Remix Brasil - Edição de Janeiro, Tue, Jan 10, 2023, 6:30 PM | Meetup

Meetup da comunidade Remix Brasil - Edição de Janeiro Vamos aprender juntos a criar experiências incríveis na web com [Remix](https://remix.run/)? Remix é um novo framewo

Roadmap Planning #2

Learn more at https://remix.run

Remix Crash Course 2023 (React Framework)

Remix is an amazing React framework that vastly simplifies the process of building fullstack React web apps. With this crash course, you'll learn how Remix allows you to seamlessly blend frontend and backend code into each other. Besides crucial essentials like project setup, routing and styling you'll also learn how to fetch and submit data, and how to integrate backend code into your React application. 👉 If you want to learn more about this awesome React framework, you can explore my full course "Remix - The Practical Guide": https://acad.link/remix (a huge discount will be applied automatically). 👉 Learn more about React.js itself with my bestselling "React - The Complete Guide" course: https://acad.link/reactjs Code attachments: https://github.com/academind/remix-practical-guide-course-resources/tree/main/Code/02%20Essentials Join our Academind Community on Discord: https://academind.com/community Check out all our other courses: https://academind.com/courses ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Follow @academind_real on Instagram: https://www.instagram.com/academind_real • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Remix Meetup January 2023, Thu, Jan 26, 2023, 6:00 PM | Meetup

Come join us at the [H-E-B Digital & Favor Eastside Tech Hub](https://goo.gl/maps/yDe6fZikfrDDcBFEA) for our January [Remix](https://remix.run/) Meetup! Food and drinks wi

Add Vercel Analytics to a Remix Application | simeonGriggs.dev

Vercel offers simple, privacy-focused analytics and web vitals data. These can be instantly set up on Next.js and other frameworks. It's a little extra work for your Remix app, but worth it.

Downgrade to MPA if users prefer reduced data in Remix by sergiodxa

Users can enable a setting in their devices to indicate to websites that they prefer redu...

Add rolling sessions to Remix by sergiodxa

Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date...

Use Server-Sent Events with Remix by sergiodxa

Using Server-Sent Events (SSE) you can keep a connection between a browser (client) and an HTTP server open an...

Remix route helpers: A better way to use parent data

A pattern that will fix concerns with fragile implementation of useMatches when using parent data in Remix.

Remix, Payload in a Single Express Server Monorepo

Example of a monorepo including a Remix and Payload application communicating through the Local API, served by the same Express server.

Match Cards · Tinloof - PWA published on App Store and Google Play

We published a fun memory game called Match Cards as a PWA on both the App Store and Google Play Store.

How to integrate Fathom Analytics into your Remix App

When it comes to building successful websites, it's important to gain insights and data about your website visitors in order to enhance their experience. In this guide, we will go over the steps of integrating Fathom Analytics into a Remix application....

remix-run/react-router-website

The React Router website

React Streaming In Depth: NextJS! Remix! DIY!

Code: https://github.com/jherr/react-streaming Original React team example code: https://codesandbox.io/s/kind-sammet-j56ro 👉 Practical Module Federation Book: https://module-federation.myshopify.com/products/practical-module-federation 👉 No BS TS (The Book): https://no-bs-ts.myshopify.com/ 👉 I'm a host on the React Round-Up podcast: https://devchat.tv/podcasts/react-round-up/ 👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ 👉 Discord server signup: https://discord.gg/ddMZFtTDa5 👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono 0:00 Introduction 1:05 Our Example Project 2:43 NextJS 13 Setup 4:26 Non-Streaming Render 6:01 Streaming Render 14:00 Remix Setup 18:22 Streaming Render 23:14 DIY Project Setup 27:06 Adding Client JS 34:06 Streaming Render 37:55 The Big Payoff 41:51 Adding Interactivity 47:24 Outroduction #react #react18 #nextjs13 #nextjs #remix

Tinloof Store - Built with headless Shopify, Remix, and Sanity CMS

We built an online shop for Tinloof's merchandise to showcase the power of headless Shopify integrated with Sanity.

Authentication in Remix

As apps grow, almost all will need user authentication. Fortunately, Remix gives us tools to make this easy. In this post, we'll look at how we can add authentication to an app using Remix.

What is the edge? Lightning-fast e-commerce with Vendure & Remix at the edge

What is edge computing? And how can it help us create lightning-fast e-commerce experiences from anywhere in the world?

Make every API you use faster and more reliable with one line of code

Full visibility of all your internal and external APIs. Enable caching with the flick of a switch. Say goodbye to CORS issues for good.

How to publish a Remix app to the edge with GitLab and Cloudflare

Learn how to deploy a Remix app with GitLab and Cloudflare Workers.

Remix Conf Europe 2022 talks, workshops, videos and speakers - GitNation

Follow all the important community JavaScript events, talk recordings and hands-on workshops brought to you by GitNation team.

Supabase Auth with Remix

Authentication helpers for loaders and actions in Remix.

Progressively enhance the useFetcher hook in Remix by sergiodxa

If you're using multiple forms on the same route, you may use the useFetcher hook, which also...

It's beginning to look a lot like Remixmas, Wed, Dec 14, 2022, 6:00 PM | Meetup

Join us for another Remix NYC meetup hosted by Cockroach Labs before you head off to celebrate the holidays. Please be sure to provide your first and last name as it appea

Gypsy Jazz Play Alongs

A compilation of the best Gypsy Jazz play alongs found on YouTube!

Gloss.fm | Create beautiful images of tweets.

Capture and share tweets as beautiful images.

remix-vite

Static file serving and directory listing

florentpergoud/remotion-remix-template

A Remix run project with a Remotion Player and AWS Lambda render

mgreenbe/remix-lit-experiment

Migrate from Webpack to Remix

Apps that depend on Webpack loaders and plugins weren't able to incrementally migrate to Remix. Until now!

Remix Flat Routes – An Evolution in Routing – Michael Carter, Remix Conf Europe 2022

Remix Conf Europe 2022 #RemixConfEU #GitNation Website – https://remixconf.eu/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/remix-conf-europe-2022/ Talk: Remix Flat Routes – An Evolution in Routing This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities. This event would not take place without the support of sponsors: 🏆 Platinum Sponsors Focus Reactive → https://focusreactive.com/ 🥇 Gold Sponsors Storyblok → https://www.storyblok.com/ 🥈 Silver Sponsors Netlify → https://www.netlify.com/

Full Stack Components – Kent C. Dodds, Remix Conf Europe 2022

Remix Conf Europe 2022 #RemixConfEU #GitNation Website – https://remixconf.eu/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/remix-conf-europe-2022/ Talk: Full Stack Components In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun 😎. This event would not take place without the support of sponsors: 🏆 Platinum Sponsors Focus Reactive → https://focusreactive.com/ 🥇 Gold Sponsors Storyblok → https://www.storyblok.com/ 🥈 Silver Sponsors Netlify → https://www.netlify.com/

Building E-commerce store from scratch using Remix & Shopify API, Wed, Dec 28, 2022, 2:00 PM | Meetup

Mega Meetup! 🚀 On December 28th, Vonage will host us for a mega 4-hours workshop meetup where we will gather at their offices and build an e-commerce store using Remix an

Your Personal Remix – Facundo Giuliani, Remix Conf Europe 2022

Remix Conf Europe 2022 #RemixConfEU #GitNation Website – https://remixconf.eu/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/remix-conf-europe-2022/ Talk: Your Personal Remix Here and there, people talk about "Personalization". Content creators, marketers, designers, and product owners evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. And we, the developers, have some ways to help with that. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences in our Remix projects. This event would not take place without the support of sponsors: 🏆 Platinum Sponsors Focus Reactive → https://focusreactive.com/ 🥇 Gold Sponsors Storyblok → https://www.storyblok.com/ 🥈 Silver Sponsors Netlify → https://www.netlify.com/

Fire-side chat on Remix, Remix Conf Europe 2022

Remix Conf Europe 2022 #RemixConfEU #GitNation Website – https://remixconf.eu/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/remix-conf-europe-2022/ This event would not take place without the support of sponsors: 🏆 Platinum Sponsors Focus Reactive → https://focusreactive.com/ 🥇 Gold Sponsors Storyblok → https://www.storyblok.com/ 🥈 Silver Sponsors Netlify → https://www.netlify.com/

Remixing How We Give – Sergio Xalambrí, Remix Conf Europe 2022

Remix Conf Europe 2022 #RemixConfEU #GitNation Website – https://remixconf.eu/ Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/remix-conf-europe-2022/ Talk: Remixing How We Give A review of how we're using Remix at Daffy.org to change the way people give to charities. We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally. This event would not take place without the support of sponsors: 🏆 Platinum Sponsors Focus Reactive → https://focusreactive.com/ 🥇 Gold Sponsors Storyblok → https://www.storyblok.com/ 🥈 Silver Sponsors Netlify → https://www.netlify.com/

Remix meetup December 🎁, Thu, Dec 8, 2022, 5:00 PM | Meetup

The December meetup will be hosted by **raffle.ai 🚀** 🕔 **Agenda** \-\- tba \-\-

Remix Brasil - Edição de Dezembro, Tue, Dec 13, 2022, 6:30 PM | Meetup

Meetup da comunidade Remix Brasil - Edição de Dezembro Vamos aprender juntos a criar experiências incríveis na web com [Remix](https://remix.run/)? Remix é um novo framew

Remix Meetup December, Wed, Dec 14, 2022, 6:00 PM | Meetup

Come join us at the [H-E-B Digital & Favor Eastside Tech Hub](https://goo.gl/maps/yDe6fZikfrDDcBFEA) for our December [Remix](https://remix.run/) Meetup! **Please note:**

Improving Web Vitals in Remix

**[Your Remix app](https://remix.run/docs/en/v1/pages/stacks)** is fast by default, but with a few edits to **root.tsx** you can make it feel even faster...

Browsers, JSON, and FormData

Use `process.env` client-side with Remix by sergiodxa

Use process.env client-side with Remix The process.env thing is a Node.js-only feature that many front-end developers adopted as something t...

Remix Conf Europe – The Blues Track (free)

Live stream of Remix Conf Europe #RemixConfEU #GitNation The Blues Track – see full agenda here https://remixconf.eu/#schedule To join The Indie Track see tickets options here https://remixconf.eu/#tickets Join Discord for chatting with the community and ask questions to speakers: https://discord.gg/jcXUrRZCQY This event would not take place without the support of sponsors: 🏆 Platinum Sponsors Focus Reactive → https://focusreactive.com/ 🥇 Gold Sponsors Storyblok → https://www.storyblok.com/ 🥈 Silver Sponsors Netlify → https://www.netlify.com/

jacob-ebey/remix-dashboard-d1

How to dynamically create a sitemap with Sanity and Remix

In this article we explain how we use Sanity and Remix to dynamically create sitemaps. The example used is from Heavybit, a developer tools VC in San Francisco.

Type-safe environment variables on both client and server with Remix

In this post we are going to use TypeScript to: strongly type our process.env variables expose some...

jacob-ebey/remix-dashboard-template

A template to get you up and building a dashboard in Remix.

Remix and the Alternate Timeline of Web Development

Remix 2023: Call for Speakers

2-day single-track event. Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deli...

Modals with React Router 6 and Remix

How do you create modals with React Router Data Routers (^6.4.0) and Remix? Let&#8217;s find out!

Full Stack Components

There’s this pattern I’ve been using in my apps that has been really helpful to me and I’d like to share it with you all.

jacobparis/remix-nx-fly

An example of running multiple Remix apps in an Nx integrated monorepo, each with their own Dockerfile and deployed independently based on affected changes

Remix.js - The Practical Guide

Learn how to build feature-rich & highly reactive fullstack React applications with Remix.

Open Development for Remix

We're completely opening up our development process, join us!

Build Better Websites With Remix with Kent C. Dodds

Event Information ​Build Better Websites With Remix ​Event Information ​​​Hey there! We have another cool guest! ​We will be joined by Kent C. Dodds to chat about what's new in Remix and how you can build better websites faster. ​Remix is a full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. ​We all know that it is all about releasing and serving your clients. So go to market faster by combining your Remix app with a headless CMS like Strapi. ​​Agenda ​ - What's new in Remix - When should you use it - Nested Routes - Data Loading - Forms and Actions - Best resources to learn Remix - Final thoughts ​It will be fun and exciting. I hope to see you all there.

Create charts using your databases from Notion or Airtable

Visualize your data as insightful charts. Embed them in your Notion pages or anywhere else.

Multi Tenancy in Remix

All you need is a little express...

rileytomasek/zodix

Zod utilities for Remix loaders and actions.

puches/remix-cloudrun

Setup Example to Deploy Remix on CloudRun

React Router-ing Remix

We brought all the Remix goodies over to React Router and made improvements in the process. Now it's time to bring those improved APIs back over to Remix where they started!

jrestall/remix-stubs

Example Remix unit testing stubs implementation and Storybook integration.

Fixing Dependency Errors in Remix

https://nalu.wiki Since July, I have been busy migrating Nalu from **NextJS** to **Remix**. **Since both frameworks are built on React, most things work...

Remixing Shopify

Remix is joining Shopify

Mixing It Up: Remix Joins Shopify to Push the Web Forward

We are very excited to announce that the open-source web framework Remix and its team are joining Shopify.

Progressively documentation | Progressively documentation

Rollout quickly, effectively, Progressively

remix-koa-adapter

Koa request server handler for Remix

Persist inputs after a form submit in Remix by sergiodxa

Let's say you have a form with a few inputs. You want to persist the inputs' values after submitting...

Headless WordPress with Remix and Tailwind CSS

In this post, we explore using the Remix framework and Tailwind CSS with headless WordPress and touch on link prefetching and data fetching

WordPress, Remix & GraphQL | Marc Boisvert-Dupras

Fully Typed Web Apps

The main thing that makes end-to-end type safety difficult is simple: boundaries. The secret to fully typed web apps is typing the boundaries.

Throwing vs. Returning responses in Remix by sergiodxa

When you code a loader/action (we'll call them data functions from now) in Remix, you can either retur...

PhilDL/remix-gospel-stack

Remix template with Turborepo, TypeScript and pnpm. The remix app deploys to fly.io or build to Docker image. Example packages for Database with prisma, Tsyringe dependency injection, UI, and internal TypeScript packages.

Lazy-load React components in Remix by sergiodxa

Suppose we want to create a timeline component that lists different events. Each event type has a unique com...

The Web’s Next Transition

Web is made up of technologies that got started over 25 years ago. Now, we are transitioning to a new and improved architecture for building web applications.

Flow Blockchain

Your resource for everything you'll need to build in Flow

Remix Notification

How to display notification in Remix. Blog post with step by step instructions to develop notification functionality with Remix and react-hot-toast.

Build A Pet Management System With Remix, Prisma, and Postgres | Real World Database Application

Senior Developer Advocate Austin Gil lives in a neighborhood with many dogs but can never remember their names. In this new video series, Austin builds out an application to track all of his neighborhood pet friends using Remix, Prisma, and Postgres. Welcome to “Neighborhood Pet Manager!” Chapters: 0:00 - Introduction 1:11 - Overview of the project 3:58 - Project Setup 6:00 - Configuring Prisma 8:53 - Alternative to Configuring Prisma 10:00 - Another Alternative - Using SQLite 18:40 - Starting to Build the Application 20:48 - Outro & What’s Next New to Linode? Get started here with a $100 credit → https://www.linode.com/akatube The code for this project is available here → https://github.com/AustinGil/npm Learn more about PostgreSQL here → https://www.linode.com/docs/guides/databases/postgresql/ Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_confirmation=1 #Remix #Prisma #Postgres #Linode Product: Linode, Akamai, Databases, Austin Gil

Remix, React, and State

The Basics of Remix | CSS-Tricks

You’ve probably heard a lot of hype around one of the newest kids on the framework block, Remix. It may be surprising that it got its start back in 2019, but

Add additional data before submitting on Remix by sergiodxa

The Remix approach to submitting forms is to replace the &lt;form&gt; tag with their &lt;Form&gt; compone...

Misión Árbol - @fundamiarbolven

Misión Árbol. MINEC. Gobierno Bolivariano de Venezuela

💿 remix simplifies things

Progressively enhance for a more resilient web

There has been a lot of talk on the socials lately about progressive enhancement. Some good, some bad, and while the bad is often mislead I get it.

Cloudflare Radar

Up to date Internet trends and insight

Bubble up data on Remix routes by sergiodxa

React introduced a one-way data flow where a parent component has some data (state) and passes it to the children...

Consistent and accessible page titles in Remix

Titles, headings, and accessibility Success criterion 2.4.2 "Page Titled" from the WCAG 2.1 standards states Web pages have titles that describe topic or purpose. This title is necessary for multiple reasons, the most important being that it allows...

Optional route segments with Remix by sergiodxa

Let's say we have a URL structure like this: /:category/products /products Both routes need to work...

Remix Modal Route

How to display a route in a Modal. Blog post with step by step instructions to develop a route with Modal View UI.

fnimick/graphile-starter-remix

Opinionated SaaS quick-start with pre-built user account and organization system for full-stack application development in React, Node.js, GraphQL and PostgreSQL. Powered by PostGraphile, TypeScript, Apollo Client, Graphile Worker, Graphile Migrate, GraphQL Code Generator, Ant Design and Remix

dev-xo/stripe-stack

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

okalil/remix-form-validation

Remix project to show how to set up form validation client side and server side.

Remix Conf Europe 2022

Remix Conf Europe is a 1-day 2-track remote conference focusing on delivering fast and scalable websites deployable to any platform with Remix. November 18, 2022.

freekrai/remix-docs

Remix stack for an MDX docs site that is quick to set up and customize

DanielSmith/remix-tailwind-aria

Publish your newsletter to your Remix site with the ConvertKit API

Learn how to use the ConvertKit API to publish your newsletter to your Remix site.

Qatar 2022 Sticker Album

Lleva un registro de tu álbum de stickers de la Copa Mundial de la FIFA Qatar 2022™

React Router 6.4 Release

React Router 6.4 was released today, adding all of data loading, data mutation, pending navigation, and error handling APIs from Remix to every React Router app.

React Router 6.4 Release Preview

React Router 6.4 adds all of data loading, data mutation, pending navigation, and error handling APIs from Remix to every React Router app.

How Remix won me over

My love story with Remix and why I can't look back.

freekrai/directed-stack

Group related routes together in Remix by sergiodxa

Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they ...

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.

markdalgleish/remix-vanilla-extract-prototype

RemixFast Codebase Generator

RemixFast - The RemixRun Codebase Generator! Build Remix Apps remarkably fast using Visual Editor. Jump start your next project with a generated codebase and only code what matters!

Build a Blog with Remix and Webiny Headless CMS | Webiny

Remix is a full stack web framework that delivers a fast, slick, and resilient user experience. In this article we will create a blog with Remix and Webiny.

Supabase Happy Hour #15 - Supabase File Storage in Remix

Supabase is an extremely powerful and cheap option for building your next big startup idea. In this series, Jon Meyers, Alaister Young and Tyler Shukert demonstrate how to build a SaaS product using Remix and Supabase 💰 This week we dive deep into Supabase File Storage and Remix. We build our own custom upload handler using the experimental `unstable_parseMultipartFormData`, `unstable_composeUploadHandlers` and `unstable_createMemoryUploadHandler` APIs, and define a relationship between our entries and their uploaded files, using the Array column type in PostgreSQL. 00:00 Starting soon 00:50 Introductions 03:17 Supabase Launch Week 10:49 Supabase Hackathon 23:43 Reviewing community PR 34:40 Uploading files in Remix Action 55:30 Array column type in PostgreSQL 01:03:26 Creating signed URLs for private files 01:32:38 Displaying signed URL images in UI 01:57:23 Social links 02:01:01 Thanks for watching GitHub Repo: https://github.com/dijonmusters/happy-days Wanna have a say in what we build? Join us live every Thursday 5pm PT / 8pm ET ⌚️ Follow the Supabase Happy Hour team 🙌 🦘 Jon Meyers: https://twitter.com/jonmeyers_io 🍣 Tyler Shukert: https://twitter.com/dshukertjr 🐨 Alaister: https://twitter.com/alaisteryoung Resources 🧠 Supabase Launch Week 5 - https://supabase.com/launch-week Supabase Hackathon - https://supabase.com/blog/launch-week-5-hackathon Supabase Gold Cap - https://store.supabase.com/products/gold-supacap Supabase File Storage docs - https://supabase.com/docs/guides/storage Remix Upload Handler docs - https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata Dashibase's Lotion - https://lotion.dashibase.com/ Happy Chat 💬 Did you miss us building out a multi-platform realtime chat app with Supabase, Next.js and Flutter? Check out this playlist 💯 https://www.youtube.com/watch?v=sOSrPDtvvaQ&list=PL5S4mPUpp4OvEgxBhoVxXb5YS1ZAZih2l --- Learn more about Supabase 👇 🕸 Website: https://supabase.com/ 🎥 YouTube Channel: https://www.youtube.com/c/supabase 🐦 Twitter: https://twitter.com/supabase/ 👾 Twitch: https://www.twitch.tv/supabase_tv 📄 Docs: https://supabase.com/docs ---

How fullstack teams move faster with Remix

Ship more features and deliver more value with Remix.

Build a Remix application and set up Sanity.io to manage its content

Learn how to use Sanity, a modern content platform, to manage the contents of a book catalog's website built with Remix

remix-docs-gen

<p align="center"> <a href="https://github.com/sandulat/remix-docs-gen" target="_blank"> <img src="https://raw.githubusercontent.com/sandulat/remix-docs-gen/main/assets/remix-docs-gen.png" width="250px" /> </a> </p> <p align="center"> <a h

Remix Careers

remix-isomorphic-link

A wrapper component around Remix's Link / NavLink components and the native anchor element. One component to rule them all! Render an anchor tag for outgoing links and a Remix Link / NavLink for everything else! Also supports automated final slashes for a

Nalu - The Knowledge Network

Wave hello to the new wiki platform!

nakleiderer/remix-sprites-example

A script that combines a folder of SVG files into a single sprites file and generates type definitions for safe usage.

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

Working with Remix Form Data on Netlify

Remix is a JavaScript framework that aims to make creating a production ready application easier than ever. A Remix stack is a template preconfigured with popular tools to get you up and running faster. Netlify's templates team created the K-Pop Stack that integrates Remix with Tailwind CSS for styling and Supabase as the database. Brittney Postma is hosting with Kent C. Dodds, co-founder and Director of Developer Experience at Remix, to build a site using the K-Pop Stack, showing how form data works in Remix, and deploying it all to Netlify. Join them for a live coding session. We'll try to field questions as we go and learn how to take your sites to the next level with Remix and Netlify. - K-Pop Stack (https://kpop-stack.netlify.app/) - Netlify (https://netlify.com/) - Remix (https://remix.run/)

Creating a Github-like Progress bar for your Remix app

This post is about the progress bar that shows at the top of the cover image 🤓 This is a...

Remix Fundamentals — Exclusive Workshop

Spend A Full Day Immersed in Remix with Kent C Dodds

remix-ssg

Simple SSG for [Remix](https://remix.run/).

Uploading files in Remix to a S3 compatible service

Remix is a new react-based framework designed to be a full stack application. With many applications,...

Humankind

Humankind is a unique talent representation agency. Deeply rooted in the creative community, we hold our values dearly.

Advanced Remix — Exclusive Workshop

Spend A Full Day Immersed in Remix with Kent C Dodds

Build a FullStack AMA app with Remix, Prisma, PostgreSQL - Foysal's Dev Diary

Learn how to build a fullstack app, from spec to production, using remix, prisma and postgresql starting from planning out the app's spec at a higher level and breaking it down into smaller modules and bringing it altogether to form a finished product

Feedback - Feedback

Share feedback with the Feedback team. Powered by Convas.

kentcdodds/remix-todomvc

Home | OSS Capital

OSS Capital is the first and only seed-stage focused VC exclusively dedicated to backing leading COSS (commercial open source) startup founders on a global basis.

Remix example | moon

Remix has been prototyped in our

kiliman/remix-server-folders

Patch to add .server extension to folder in Remix

Create a Movie Emoji Quiz - Clerk, Fauna, Remix

Want to build this yourself? Check out the full tutorial here: https://clerk.dev/tutorials/build-movie-emoji-quiz-with-remix-fauna-and-clerk Looking for the FQL Snippets ? https://gist.github.com/devchampian/a11f4edb2cf26831a2c0bf369526be40 Tutorial code repo: https://github.com/clerkinc/remix-fauna-tutorial Tutorial live demo: https://remix-fauna-tutorial.clerk.app/ Sign up for a free Clerk account: https://dashboard.clerk.dev/sign-up 00:00 - Introduction 00:18 - Clerk Setup 01:15 - Code Setup 02:49 - Fauna Setup 05:27 - Clerk + Fauna JWT Integration 06:12 - Working Example 07:18 - Outro

remix-typedjson

This package is a replacement for superjson to use in your Remix app. It handles a subset of types that `superjson` supports, but is faster and smaller.

Remix Meetup July 28th

This Remix Austin meetup took place at the H-E-B Digital & Favor Eastside Tech Hub in Austin, TX on July 28th. We had 3 amazing speakers present! 00:00 Creating a Terms of Service Banner – Brooks Lybrand 11:29 Sending Emails in Cloudflare with Remix Forms – Justin Reynolds 34:42 Headless e-commerce with Medusa, Remix, NX and Tailwind – Jake Ruesink 1:21:39 Goodbye Creating a Terms of Service Banner – Brooks Lybrand The O.G. localStorage—the cookie. Remix makes it super easy to leverage these little guys to do all sorts of things, like drive the state management for a Terms of Service Banner! Repo: https://github.com/brookslybrand/tos-cookie Sending Emails in Cloudflare with Remix Forms – Justin Reynolds Remix gives you full control of your entire stack, which makes creating a service like a contact form with auto email capabilities incredibly easy. Watch as Justin runs through putting all the pieces together for a simple and free solution. Live site: https://remixdevs.com/ Headless e-commerce with Medusa, Remix, NX and Tailwind – Jake Ruesink Jake will show us how he and his team at Lambda Curry are able to effectively and rapidly build awesome ecommerce sites with Remix and MedusaJS Repo: https://github.com/jaruesink/remix-medusa Want to attend future Remix Austin meetups? Join our group to be notified of future events: https://www.meetup.com/remix-austin

Add a Global Progress indicator to your Remix app

Short tutorial to add a Global Progress Indicator for whenever a loader/action is revalidating

kiliman/remix-typedjson

This package is a replacement for superjson to use in your Remix app. It handles a subset of types that `superjson` supports, but is faster and smaller.

@ignisda/remix-pagination

Pagination for Remix apps

Remix with Ryan Florence

Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers. In this episode, we interviewed Ryan Florence, co-founder at

Parse Markdown with Markdoc in Remix by sergiodxa

Markdoc is this new Markdown parser by Stripe, and it's a simple to use yet extendable library we can use i...

React Spring

Bring your components to life with simple spring animation primitives for React

Dependency injection in Remix loaders and actions by sergiodxa

Dependency Injection is a way our function or class can receieve from the caller the instancie...

kiliman/remix-error-logging

Patch to add server side error logging support to Remix

Daffy, the Donor-Advised Fund for You™

Daffy makes giving a habit. Daffy is a modern financial platform for giving—set money aside, watch it grow tax-free & donate to 1.5 million charities.

Remix.run Wurdle | Web Dev Office Hours

Senior Developer Advocate Austin Gil likes to build fun and interesting things for the web. In this new series, Austin recaps his live streams where he builds out new projects, explores technology, and keeps up with the trends. New tips out weekly. Watch Austin's livestreams here YouTube: https://www.youtube.com/channel/UCQmhxXIvIi0e1F_Q7shVZIA Twitch: https://www.twitch.tv/heyaustingil Website: https://austingil.com/

brookslybrand/tos-cookie

Remix example Terms of Service Banner using cookies

Ryan Florence - Why The Form? Data Mutations on the Web - RenderATL 2022

You’re not going to want to miss what Ryan had to say at Render 2022. Oh no. You've rendered a button and want to change some data when the user clicks it. This wasn't always hard, and doesn't have to be anymore. Don’t miss what Render is doing next. Make sure you’re following @renderatl for updates!

Spotify

The Unicorn Finders podcast: Remix.run Full Stack Web Framework Focused on the UI

#10: Galvanized

A remix newsletter

Supabase Happy Hour #12 - protected/authenticated loaders and actions with Remix and Supabase

Supabase is an extremely powerful and cheap option for building your next big startup idea. In this series, Jon Meyers, Alaister Young and Tyler Shukert demonstrate how to build a SaaS product using Remix and Supabase 💰 This week we implement protected loaders and actions, requiring the user to be signed in with a valid session, before they can navigate to a particular route. Additionally, we create a reusable helper function to wrap around any Remix loader or action to ensure the user is authenticated 🧠 00:00 Starting soon 00:42 Introductions 07:40 Fun facts 17:38 What's new with Supabase 25:20 Recap last week 33:30 withAuth helper 1:02:00 Fixing user for SSR 1:17:47 Entry Detail page 1:34:57 Entry Edit page 2:04:56 Social links 2:06:55 Thanks for watching GitHub Repo: https://github.com/dijonmusters/happy-days Wanna have a say in what we build? Join us live every Thursday 5pm PT / 8pm ET ⌚️ Follow the Supabase Happy Hour team 🙌 🦘 Jon Meyers: https://twitter.com/jonmeyers_io 🍣 Tyler Shukert: https://twitter.com/dshukertjr 🐨 Alaister: https://twitter.com/alaisteryoung Links and resources 🏙 CityJS Singapore (online and in person) - https://singapore.cityjsconf.org/ ☝️ 50% off Level Up Tutorials Pro subscription - https://leveluptutorials.com/pro 💿 Realtime Remix with Supabase - https://leveluptutorials.com/tutorials/realtime-remix-with-supabase 🍪 Session cookies in Remix - https://jonmeyers.io/blog/store-data-in-a-cookie-with-sessions-and-remix 🥚 egghead case study - https://egghead.io/case-studies/jon-meyers 🧙‍♀️ Supabase tips: one to many relationships - https://www.youtube.com/watch?v=5VrF9OVQ6rg Happy Chat 💬 Did you miss us building out a multi-platform realtime chat app with Supabase, Next.js and Flutter? Check out this playlist 💯 https://www.youtube.com/watch?v=sOSrPDtvvaQ&list=PL5S4mPUpp4OvEgxBhoVxXb5YS1ZAZih2l --- Learn more about Supabase 👇 🕸 Website: https://supabase.com/ 🎥 YouTube Channel: https://www.youtube.com/c/supabase 🐦 Twitter: https://twitter.com/supabase/ 👾 Twitch: https://www.twitch.tv/supabase_tv 📄 Docs: https://supabase.com/docs ---

A Look At Remix And The Differences With Next.js — Smashing Magazine

Let’s talk about Remix, the framework to create JavaScript projects using server-side rendering. Let’s go through its main features and concepts and see the similarities and differences with Next.js.

jacob-ebey/remix-webpack-cli

A CLI for building https://remix.run applications with Webpack.

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.

Josh-McFarlin/remix-image

A React component for responsive images in Remix

remix-monorepo

## Why

Weather 4 Me

A micro-climate weather application for Julia Rose.

clerkinc/remix-bossa-nova-stack

The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.

Create a simple cookie with Remix

Cookies allow state to be shared between the browser and server. In this article, we look at creating a simple cookie with Remix to display different messages based on whether the user has visited the page before.

jacob-ebey/remix-vitest

Simple example showing how to use Vitest in-source testing with Remix

kiliman/remix-mdx

Gitdash - the Github Dashboard

Take control of your Repos

How to Integrate Markdown Content with Syntax Highlighting in Remix | Andre Landgraf

Markdown is a powerful tool for writing and publishing content. There are different ways of integrating Markdown into your Remix application. In this blog post, I want to show you how my own Markdown setup works.

Remix Conf Recap

​ Remix Conf Recap That’s a wrap for Remix Conf 2022! A big shout out to everyone who attended the conference, spoke at the conference, planned the conference, filmed the conference, or had anything else to do with the conference whatsoever. It was a huge success! Workshop The Remix...

State Machines on the Edge

Remix Conf – Salt Lake City, Utah, USA – May 2022

pegak/power-metal-stack

The Remix Stack for deploying to Cloudflare with Clerk authentication, testing, linting, formatting, etc.

aiji42/remix-esbuild-override

This is a library that makes it possible to change the configuration values of the Remix compiler (esbuild).

ilangorajagopal/synthwave-stack

Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

remix-server-kit

Useful utilities and simplified validation for actions and loaders.

"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

brophdawg11/remix-routers

A collection of UI library implementations of the Remix Router

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

kiliman/remix-ecommerce

Remix sample wth product catalog and shopping cart

Adding a Laravel backend to a Remix App

Or How I Learned to Stop Worrying and Love PHP

janhesters/french-house-stack

The Remix Stack for Web2 apps and Web3 DApps with authentication with Magic, testing, linting, formatting, etc.

Three Key Steps to Fast Loader Functions

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

kentcdodds/remix-mdx

When To Fetch: Remixing React Router - Ryan Florence

Recorded live at Reactathon 2022. Learn more at https://reactathon.com When To Fetch: Remixing React Router We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too: data fetching, data mutations, busy spinners, optimistic UI, error handling, form state, network race conditions, user event interruptions, and all the code that holds it together gets pretty difficult! As we've built Remix, we've gotten a lot of practice leaning on React Router's nested route abstraction to solve all of these problems all at once. Now, millions of React Router apps in production can get the same benefits because we've moved the responsibility of knowing When To Fetch into React Router itself! About Ryan Florence Ryan is the co-founder of Remix, co-creator of React Router, and co-founder of React Training. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

Theo Reacts: Ryan Florence's "Remixing React Router" Talk

Y'all loved my last reaction so I had to do one more :) Ryan killed it with this talk and I really enjoyed it If y'all enjoy content like this lmk in the comments and I'll do more React reactions 😂 Link to original talk: https://www.youtube.com/watch?v=95B8mnhzoCM My stuff: https://t3.gg/discord https://t3.gg/links

remix-router-vue

A Vue UI layer for nested + data-driven routing via @remix-run/router

Remix-ing Routing in Angular 💿

The team at Remix are building a web framework that is built on the priniciples of React Router and...

"Deno and Remix" by Ryan Dahl at #RemixConf 💿

In this talk Ryan will give an overview of Deno, a modern JavaScript runtime, and Deno Deploy, a serverless at edge JavaScript hosting service. He'll give a peak behind the sceenes at the technology powering Deno Deploy, and of course demo how to deploy a Remix app on it. Speaker bio: In 2009, Ryan Dahl released Node.js. Now, Ryan is the CEO of Deno, the company behind the Deno project: A modern runtime for JavaScript and TypeScript. Deno's deploy product is pushing this runtime in the future of modern web architecture via multi-regional deploys with an outrageously fast runtime. Learn more at https://remix.run/conf/2022/speakers/ryan-dahl

"Expanding Remix with Rust" by Ben Wishovich at #RemixConf 💿

Remix's unique use of Loader and Action functions offers the unique opportunity to expand your data processing with Rust. Rust offers near native performance, memory safety through either the Node FFI or via compilation into WebAssembly. Learn the tricks to setup your Rust project to work with Remix, either on the server or the client, and take advantage of the most loved language with your favorite web framework! Speaker bio: Ben is a full stack web developer and software quality engineer with experience building high performance web applications. He's excited about using Remix and Rust to expand the possibilities and performance of the web app. When not coding, Ben might be found running around outside, cooking, or reading sci-fi in the sunny SF Bay Area. Learn more at https://remix.run/conf/2022/speakers/ben-wishovich

"Outstanding Search Experiences with Remix and Algolia" by Sarah Dayan at #RemixConf 💿

Outstanding search starts with two principles: immediate feedback and relevant results. Search-as-you-type experiences have become the standard since Google introduced Google Suggest and Google Instant on their search page in the 2000s. Users not only love the immediate feedback of instant experiences, they expect it. They also expect search to be excellent at understanding their intent, even when they misspell or forget words. Services like Algolia are designed to deliver instant, as-you-type, relevant results right from the first keystrokes. But what happens when the user's network is slow? What's relevant when the user didn't express intent yet? In this talk, we'll see how you can combine Algolia's client-side search with the power of Remix's server runtime to create snappy and delightful yet reliable and resilient search experiences that serve everyone. Speaker bio: Sarah is a Staff Software Engineer from Paris, France who works on front-end search experiences at Algolia. She created the Dinero.js monetary library and hosts the Developer Experience podcast show. She's passionate about building dynamic front-end experiences, and won't shut up about TDD and utility-first CSS. She shares what she learns on her blog and at tech conferences around the world. Learn more at https://remix.run/conf/2022/speakers/sarah-dayan

"Making Slow Responses Seem Fast with Stale while Revalidate" by Scott Smerchek at #RemixConf 💿

The Cache-Control header has been around since HTTP/1.1 in 1997, yet for many of us, it's not something we think about every day. The stale-while-revalidate extension was proposed as early as 2010, but was only widely supported in modern browsers in 2019. In this talk, I will show you the power of stale-while-revalidate and how you can take advantage of it in your Remix project to make your slow responses seem really fast! Speaker bio: Scott's a software engineer with over a decade of experience building web applications for healthcare enterprises from frontend, to APIs, and even infrastructure. Now Scott works at UDisc, a quickly growing disc golf company that is pushing the sport forward through technology. Scott's always favored working in the backend, but Remix is helping him to enjoy working across the full stack, once again. He's incredibly excited about the future of building web applications with Remix and the ease of deploying to the modern edge hosting providers. Learn more at https://remix.run/conf/2022/speakers/scott-smerchek

"State Machines on the Edge" by Erik Rasmussen at #RemixConf 💿

Modeling business logic with state machines has numerous benefits, from eliminating bugs caused by impossible states to visualizing the logic to communicate with non-technical shareholders to simply communicating user flow between technical colleagues. In this talk, I'm going to demonstrate, via live coding, how to combine the strengths of Remix and XState to create a checkout flow entirely on the backend. No. JavaScript. Required. Speaker bio: Erik is an expat American living in Spain. He's the author of Redux Form and Final Form, and is currently in love with TypeScript, XState, and Remix. His day job is using those technologies to build Centered.app, a tool to combat the Twitters' and Facebooks' attempts to steal your attention, and give it back to you to be more productive in your work. Learn more at https://remix.run/conf/2022/speakers/erik-rasmussen

"Magically Create Forms + Actions with Remix Forms" by Daniel Weinmann at #RemixConf 💿

One of the beautiful things about Remix is how easy it is to enhance it to make our lives easier. In this talk, I'll show you how I built Remix Forms and how I use it to: - Code only the parts of my forms that stray from our standard UI. The rest is magically rendered for me. - Never have to think again about client-side + server-side validations, pending indicators, and focus management (with focus on the first field with error even for server-side failures!) - Get form data, validate values, redirect or return errors with one helper. I focus on the mutation, not on the wiring. - Catch any typo or mistake right away with bulletproof typing, even for custom inputs. - Enjoy the autocomplete magic that comes along with it :) Speaker bio: In order to bring his startups to life, Daniel had to go through a 9-year journey to become the technical founder and CTO he needed in his teams. However, his real passion has always been the non-technical way, and having to spend his days coding took a toll on him. When Daniel was finally able to come back to the business side, he had a secret weapon: in his struggles to leave the technical life behind, he gained a deep understanding of what it takes for a non-technical founder to create successful startups. Beyond his own journey, he's helped tons of founders build world-class products over the last 20+ years. Along the way, he was CEO, CMO, and CTO of many startups. Daniel has also founded a few successful ones himself, including Mailee, which was sold to a Brazilian internet provider, and Catarse, the biggest crowdfunding platform in Latin America. Learn more at https://remix.run/conf/2022/speakers/daniel-weinmann

"Full Stack Fast: Data on the Edge" by Greg Brimble at #RemixConf 💿

Why force your users to settle for either loading skeletons or slow page renders? Remix can bring your application rendering to the edge, but what about your data? Why should every request have to call back to a single database cluster in Virginia? For the best performance and experience for your users, store your data on the edge, alongside the rest of your application. We'll discuss how the original colocated server and database configuration worked, how it evolved with Jamstack, improved with next-gen data services, and how today's technology supports a new architecture altogether. But distributed systems are notoriously hard to design for, and edge-based storage is no different, with the challenges of synchronicity being a particularly difficult problem. I'll highlight the benefits of edge-based storage, how it compares to the other options, and I'll showcase a truly global Remix application built with Cloudflare's KV, Durable Objects and R2. Speaker bio: Greg is a Systems Engineer at Cloudflare working on Cloudflare Pages in the Emerging Technologies and Incubation department. Cloudflare Pages is a full-stack developer platform and they were very excited to add support for Remix at the end of last year. Before Pages, Greg worked with Cloudflare's Speed Team where he learned to appreciate the Network tab of DevTools. Greg has also contributed to the Web Almanac and numerous open-source projects, and, most importantly, he has his fingers crossed for enough snow to go skiing after Remix Conf! ⛷ Learn more at https://remix.run/conf/2022/speakers/greg-brimble

"Remixing Hydrogen" by Anthony Frehner at #RemixConf 💿

Let's talk about some of the headaches of building headless Shopify e-commerce stores, and how Hydrogen-UI + Remix make it better. Pre-built Shopify components? Check. GraphQL auto-completion? Oh yeah. Speedy websites? Blazing fast. Speaker bio: Anthony Frehner is a frontend web developer and architect. He likes to contribute to open source when he has the time! Anthony is currently working on Hydrogen 🙂 Anthony's recently been providing feedback on a WICG proposal for which he also spent some time making a polyfill. He's a core-team member of the single-spa open source library, he occasionally give conference talks–here's Anthony's talk at React Rally 2019–and write technical articles, and he proposed a new CSS unit called vhc which eventually turned into the dvh, lvh, and svh (and equivalent *vw) CSS units, which was very exciting for him personally! Learn more at https://remix.run/conf/2022/speakers/anthony-frehner

"Remix & High Performance eCommerce" by Sébastien Morel at #RemixConf 💿

Performances are key. That statement is true for any web application but even more for eCommerce applications that convert performances into revenue. Why are eCommerce projects more complex than others? What are the key topics and the special things that you need to take into account when building an eCommerce application in 2022. In this talk we will deep dive into all the things that must be dynamic and how to achieve performances. All explained with a Remix project example. Speaker bio: Sébastien is a passionate and accomplished tech leader and problem-solver with extensive experience in architecture, performance optimizations, development, and system administration. CTO at Crystallize, a super-fast, super modern, super sexy, and super-powerful Headless eCommerce"", he's in charge (among other) of the Developer eXperience initiative. Previously, he led and grew his former web agency for 18 years working on more than 150 projects successfully and proudly implemented, deployed and maintained. Agnostic of the web technology he's using, Sébastien is also an open source maintainer active in the PHP/Symfony community. Learn more at https://remix.run/conf/2022/speakers/s%C3%A9bastien-morel

"Remix 3D Blast" by Nick Small at #RemixConf 💿

Whether you want to progressively enhance a traditional website or build an immersive 3D experience, Remix gives us a powerful and fun framework to create with WebGL and three.js. After deploying a 3D Remix experience to production, I've found that all the patterns that Remix provides are just as valuable even when we're not rendering to the DOM. In this talk, I'll show off some zany 3D antics to explain how Remix and react-three-fiber can work together to help you build fantastic experiences for your users. We'll focus on: getting react-three-fiber set up in a Remix app; using nested routes and layouts to render a scene; moving scene state to the server with loaders and actions; streaming dynamic 3D resources to the client using resource routes; and finally, transitions and optimistic UI... in 3D! 💿 Rachel the Remix Disc will offer some nifty optimization tips along the way. It'll be a GL-and-web-fundamentals-fuelled blast! Speaker bio: Nick is a long-time dev of many disciplines: JavaScript, full-stack, native, operating systems, game dev. He's motivated by improving people's lives by finding really bad software in consequential places and making it better. Nick's been an early employee at mission-driven companies like Shopify and Devoted Health; empowered citizens and civil servants at US Digital Service, Defense Digital Service, and the NATO mission in Afghanistan; and volunteered on projects to strengthen democracy and build municipal Open Data pipelines. These days Nick lives in the mountains with his wife and kids, and he's focused on tooling to let more people write more accessible software with fewer bugs. Go Remix. Active hobbies include: constructing crosswords (poorly), flying planes (successfully) (so far), building better houses (fingers crossed). Learn more at https://remix.run/conf/2022/speakers/nick-small

"Remix Conf 2022 Keynote" by Michael Jackson at #RemixConf 💿

Michael will kick the inaugural Remix Conference off! Speaker bio: Michael Jackson is the CEO and co-creator/co-founder of Remix. He is the co-author of React Router and a prolific contributor to open source. He is the creator of unpkg.com and gets a kick out of discussing distributed system design as much as he enjoys front-end architecture. Michael lives in Carlsbad, CA with his wife, two boys, and two girls. Learn more at https://remix.run/conf/2022/speakers/michael-jackson

"Remixing a Symfony" by Emily Kauffman at #RemixConf 💿

In late 2020, I ran a Lighthouse test on a simple content page on Harvie, our farm management platform and Symfony app, and received a performance score of 31/100. The JavaScript bundle, the API requests, the database lookups, even with minimal UI to render, had a baseline score in the thirties! Along with customer feedback, this helped to catalyze a renewed commitment to performance at Harvie. Through numerous discussions, we walked through each step of page load, from networking to rendering, and identified where we could improve. After a year of rewrites and upgrades, our remaining detriment to overall performance was our frontend. We had been converting our Symfony twig templates into React SPA components and fell into the common problem of creating "request waterfalls", while our user had to stare at a loading screen. We needed a change, and for us, that was Remix. In this talk, I'll walk you through our team's journey with performance and how Remix has become a natural progression of that. Speaker bio: Emily is a Lead Software Engineer based out of Pittsburgh, PA. She's a lifelong learner, adjunct professor, and IoT enthusiast. Emily has a tech background in healthcare, robotics, and more recently, bringing local food to the masses at Harvie. In her spare time, you can find Emily tinkering with her homemade conversion van, scuba diving, or trying her hand at landscape photography. Learn more at https://remix.run/conf/2022/speakers/emily-kauffman

Remix Conf 2022: The Overview

So RemixConf2022 happened last month. Remix Run is on fire. This tool/framework is the key to Frontend performance with its progressive unique approach. During the conference we’ve learned a lot about Remix, from its core concepts to navigation through the state machine, forms, HTTP cache, and more, and all transparently degraded when Javascript is off!But let’s start from the beginning.

"Building Tech for Social Good with Low Code Tools" by Vic Vijayakumar at #RemixConf 💿

In this talk we are going to be talking about how to build hybrid apps that use a combination of frameworks like Remix and mixing them with no-code backends like Zapier and Airtable, so that they can be managed and modified by non-technical people. I will specifically go over how I replaced the admissions process at my children's preschool with a website and made them paperfree. Speaker bio: Vic is a Staff Engineer @ Eventbrite and indie software maker from Raleigh, North Carolina. He's a dad, runner, violinist, and is severely addicted to acquiring new hobbies. He has run the tech side of North Carolina's extremely popular Rare & Vintage Beer Festival for the last 10 years. Vic was previously in the scientific communications space and a technical cofounder of the Research Square platform, an inaugural recipient of the Fast Company "Brands that Matter" list for accelerating research communication during the pandemic. In his spare time, you can find Vic building LEGO with his family or out at the plant nursery adopting yet another plant. Learn more at https://remix.run/conf/2022/speakers/vic-vijayakumar

"Remix Your UI & UX to Another Level" by Arisa Fukuzaki at #RemixConf 💿

Build performant web apps with a full-stack framework, Remix. Remix focuses on the UI to enjoy fast & resilient UX. Experience the "Remix magic" that enables no fetching & pre-fetch all in parallel before users make actions. As Remix focuses on UI & UX, why not share the "Remix magic" with the business users? In this talk, we're going to see together the combination of the new generation of a full-stack framework, Remix & a visual editor integrated headless CMS (Storyblok). Are you ready to explore a whole new level of experience? Speaker bio: Arisa is a DevRel Engineer at Storyblok & an organizer of a free tech skill & knowledge-sharing community, Lilac. Her mission is to learn, speak, connect and help. In her private time, she is a podcaster, an Aikido fighter, and a GirlCode ambassador. Learn more at https://remix.run/conf/2022/speakers/arisa-fukuzaki

"Incremental Remix" by Jon Jensen at #RemixConf 💿

Remix is fantastic for building brand-new apps. But the truth is most of us are slogging away on crusty old ones. How can we incorporate Remix into our stacks without rewriting everything? And how can we effectively sell our teams on the benefits of adoption? In this talk we'll explore some strategies that will let you gradually adopt Remix, progressively enhancing your tech stack. Speaker bio: Jon is a Senior Software Engineer (Netflix) working to improve the developer experience for other UI engineers. Previously he worked at Amazon and Instructure working on various things software-y. In his spare time, he's usually in the mountains, playing Minecraft with his kids, or following the Red Food Truck around SLC. Learn more at https://remix.run/conf/2022/speakers/jon-jensen

"Instantaneously Interactive: Remix as a Browser Framework" by Shaundai Person at #RemixConf 💿

Your Remix app is so performant that–even without a solid internet connection–navigation on your site seems to happen almost instantaneously. Whether rendered on the client side or server side, pages load data quickly and all the information you users are interested in is on the screen without the wait. But why? In this talk, we discuss the optimizations in Remix for data fetching and rendering apps in the browser that enhance both the user experience and developer experience. Speaker bio: Shaundai is a Senior Software Engineer (Netflix) and educator based in Atlanta, GA, US. She is passionate about making programming interesting and approachable for all, and does that through her work as a course instructor (tsforjs.com), co-lead for React Robins (reactrobins.com), and technical blogger. In her spare time, Shaundai loves to go hiking, jogging, and listen to audiobooks. Find her on Twitter at @shaundai. Learn more at https://remix.run/conf/2022/speakers/shaundai-person

"Web Vitals: The Importance of Measuring a Great Web Experience" by Erick Tamayo at #RemixConf 💿

Nowadays, building a working web application is much more than deploying it to production. The impact on the way your app is delivered to your end-users is also important. Making your app experience better translates into more engagement, conversions, and revenue. That's why it is also vital (pun intended) to know how your application behaves, and that's where Web Vitals help us get a clear overview of how our app is doing. Speaker bio: Erick Tamayo was born in the Dominican Republic. He currently lives in Calgary Canada with his family. Erick's currently developing Metronome which is a tool for Real User Monitoring (RUM) specifically for Remix. He's been following Remix since 2020 and decided to join the community in 2021. Since then he's loved everything about Remix and its community! Learn more at https://remix.run/conf/2022/speakers/erick-tamayo

"How to WebPageTest" by Henri Helvetica at #RemixConf 💿

You cannot improve what you do not measure, and measuring page performance is at the heart of providing marvellous user experiences. "How To WebPageTest" is a talk where I will demonstrate how modern profiling using WebPageTest will provide the best insights. I'll show you tips and tricks on how to interpret the results, and I'll also expose you to key features that are best in class in performance testing. Speaker bio: Henri is a developer who has turned his interests to a passionate mix of site performance engineering and pinches of user experience, which led to his joining Catchpoint Systems on the WebPageTest Team. When not reading the deluge of daily research docs and case studies, or profiling sites in his favourite tools, Henri can be found contributing back to the community: Toronto Web Performance Group meetup + Jamstack Toronto organizer, curating conference content or volunteering his time for lunch and learns at various bootcamps. Otherwise, Henri is focusing on running the fastest 5k possible (surprise surprise), encouraging a healthy lifestyle via #devsWhoRun. Learn more at https://remix.run/conf/2022/speakers/henri-helvetica

"Switching to Remix at Neighbor" by Dennis Beatty at #RemixConf 💿

Neighbor is a marketplace that allows you to make extra cash by storing your neighbors' things in your extra space. After several years of using a standard React frontend generated by create-react-app, we've decided to move to Remix. I will discuss some of the crazy things we've done at Neighbor to work around the limitations of a standard CRA-generated application, why we chose to use Remix over other alternatives, and discuss some of the gotchas and learning that came out of the migration. If you work at a medium to large business and are interested in moving to Remix, this talk is especially for you. I will mostly stick to big picture concepts rather than diving deep into the code. Speaker bio: Dennis works as a senior software engineer at Neighbor, a marketplace for self-storage, where he led the switch to Remix. While Dennis works across the entire tech stack, he's especially comfortable with systems architecture and seeing how pieces fit together. He's contributed to open source software in various ways (mostly within the Elixir ecosystem) and has enjoyed sharing some of his learning on his blog and his Youtube channel. Outside of programming Dennis loves spending time with his wife and his daughter who was born this past year, and he also skis, explores Utah's national forests, and shoots photos of the stars. Learn more at https://remix.run/conf/2022/speakers/dennis-beatty

5 Big Takeaways from Remix Conf

These are our biggest takeaways from conversations that occurred on and off the main stage at the inaugural Remix Conf 2022.

Ali & Divya LIVE at Remix Conf! (JS Party live)

Remix Conf is May 24-25 and we're recording a live episode during the big after party! Join Ali Spittel, Divya, and a huge cast of Remix Conf speakers & attendees for a fun show about Remix and the web ecosystem! Chat in the #jsparty channel 👉  https://jsparty.fm/community

Shipping to the Edge: Kent C Dodds

Recorded live at Reactathon 2022. Learn more at https://reactathon.com Shipping to the Edge The landscape of the web has evolved drastically since the first website was published to the World Wide Web in 1991. Over the years, the pendulum has swung from servers rendering HTML to JavaScript-heavy clients and now it's swinging toward something more in the middle.What about the web today is enabling us to overcome the shortcomings of the web of the past? In this talk, we'll get a little peak into the history of each of these stages of the web and what that means for anyone building on the web platform in the future. About 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 React. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

Build A Fullstack App with Remix, Prisma & MongoDB - Project Setup

Learn how to build and deploy a fullstack application using Remix, Prisma, and MongoDB. In this article, we will be setting up our project, the MongoDB instance, Prisma, and begin modeling out some of our data for the next section of this series.

Live from Remix Conf! with Ali, Divya &amp; friends (JS Party #228)

Ali &amp;amp; Divya recorded seven (!) awesome conversations all about Remix and the web ecosystem live on-stage at the first-ever Remix Conf after-party!

Remix: Edit list items in place with nested routing and progressive enhancement

How can you use a nested route to edit items of an index page directly, without the need for a dedicated edit form page, even without client-side JS loaded? I plan to stream more of me learning Remix, React, and TypeScript, building the shopping list app on twitch.tv/laueist. Find the code here: https://github.com/laueist/shopping-list/commit/a2a336d541a8c19a0d01c0708acbdc207ab94eab

Remix Firebase Email & Google Authentication

Remix Firebase Email & Google Authentication #remix #firebase #authentication First attempt at integrating firebase with Remix for authentication. I used a combination of Server Token Validation and the client-side API's for authentication. - firebase auth remix run ************************************************************************* See this video for an updated approach using Remix Cookie Package - https://youtu.be/8GdYy9PWncI ************************************************************************* Let me know what you think of this approach, it is still a work in progress as I get a better understanding of the "Remix Way" of doing things. 00:00 - Intro 00:54 - Technical Approach 02:28 - Start Code Walkthrough Source Code -------------------- - https://github.com/aaronksaunders/remix-firebase-sample-app Documentation Links ---------------------------------- Firebase Client SDK - https://firebase.google.com/docs/auth/web/manage-users Firebase Admin SDK - https://firebase.google.com/docs/auth/admin/manage-cookies Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

Remix and “The Edge”

“The edge” isn’t just about static assets anymore. It’s increasingly becoming a place for dynamic assets resulting from compute. Remix is taking full advantage of this next generation of edge computing.

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

remix-three

Adapter to render Remix elements with react-three-fiber

benwis/air-metal-stack

A Remix stack setup to run on Deno with support for Rust WASM modules!

thehatworks/industrial-stack

rusty deno remix

Adding route transition animations in Remix

TLDR: Have a look at the live site at thomasledoux.be. Code can be found on Github. When I rebuilt...

Up and Running with Remix

What is Remix? > Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. > -- remix.run But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better. And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more! If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read! Check out this repo to see the project code for this course

Total Compensation Calculator

Migrating a Rails & React SPA to Remix by Diogo Biazus

Maintaining a stack with multiple programming languages can drastically increase the cognitive load of a team. Unifying the frontend and the backend under a single language has always been a tantalizing prospect. With Remix this becomes an achievable goal, however, migrating without a big rewrite is always challenging, while migrating with a big rewrite is often disastrous. This is the story of how we are planning a migration feature by feature, using an integrated authentication system that works on both our Rails backend and on the Remix server. We also disastrous leveraged resource routes to proxy the old application and integrate everything under the same domain, making the back and forth between legacy and rewritten features seamless. Speaker bio: Diogo Biazus has been a software developer since the late 90s. Since then, he has also worked as an open-source contributor, conference organizer, PostgreSQL instructor and consultant, systems integrator (yay, EDI!), "the DevOps guy", and team lead. He has contributed to PostgREST (https://github.com/PostgREST/postgrest) and published PostgreSQL tools such as postgres-websockets (https://github.com/diogob/postgres-websockets), postgres-copy (https://github.com/diogob/postgres-copy), and hasql-notifications (https://github.com/diogob/hasql-notifications). He now focuses on improving DX at Seasoned. Diogo Biazus' GitHub: https://github.com/diogob Repo: https://github.com/SeasonedSoftware/remix-migration

Why you should lift component state up to the URL

"How can I sync component state with the URL?" This is one of the most common questions I see asked in the React community, and in this video we're going to learn why trying to synchronize state between your React app and the URL is a bad idea – and the right way to address this issue. - 0:00 – Intro - 2:04 – Implementing sorting in React - 17:06 – First attempt at shareable URLs: Synchronizing React state - 20:17 – Fundamental problem with first attempt - 21:43 – Second attempt at shareable URLS: Hoist state out of React - 29:13 – Outro Links: 👉 Demo: https://2022-05-16-hoisting-state-to-url.vercel.app 🧑‍💻 Source on GitHub: https://github.com/samselikoff/2022-05-16-hoisting-state-to-url/blob/main/app/routes/index.jsx 💅 Table component from Tailwind UI: https://tailwindui.com/components/application-ui/lists/tables#component-7b5a46e74e475708d966ca31716f1771

Dynamically generate og:image using skia-canvas in Remix 💿 — CanRau.com

How to dynamically generate og:images for Social Media using `skia-canvas` in a Remix resource route.

Purge Per Route by Brooks Lybrand

Love or hate Tailwind, one thing it gets right is only shipping the CSS _you_ use. However, you still have to ship your **entire** site's CSS, no matter how big it gets or what page the user is on. Love or hate Remix (wait, who hates Remix?), one thing it does best is only shipping the CSS each _page_ needs. Remix also removes stylesheets when you navigate away, which avoids clashing styles and class names. What if we could combine these two features? In this talk I will show you how to generate only the CSS _you_ use, while shipping no more CSS than each _page_ needs? Speaker bio: Hi, my name is Brooks Lybrand and I work as Web Engineer for the best grocery store in the world (okay, at least in Texas): H-E-B! I specialize in building proof of concepts, evaluating tools, and creating highly interactive, data-rich applications. I am passionate about exploring new ideas and technologies, discovering how they can better other's lives, and guiding people to these solutions. When I'm not coding, I love spending time with his wife and dogs, camping, playing board games, and pretending I know what I'm talking about when it comes to coffee and beer. Brooks Lybrand's Twitter: https://twitter.com/BrooksLybrand Repo: https://github.com/brookslybrand/purge-per-route Statechart representation of logic: https://stately.ai/registry/editor/105a41c2-1cd9-41a9-a27a-324c71bfb735

Create an isomorphic Supabase client in Remix with Environment Variables

Environment Variables are a way to make values globally available within the environment our code is running in - either the client’s browser or on the web server hosting our app. Environment variables are often used to store secrets - such as an API key. In this article, we look at how to make our secret values available on the server — loaders and actions in Remix — and how to expose public values — such as our Supabase url and anon key — to the browser.

remix-domains

Decouple your business logic from your Remix actions and loaders. With first-class type inference from end to end.

jacob-ebey/remix-cloudflare-worker-template

Remix + Cloudflare Workers + DO + Turborepo

Learn Remix by Building a Social Media Platform with TypeScript and Prisma

Remix takes a more traditional approach to web development, it embraces the Client/Server model and by doing so unlocks the web platform in ways you might not be used to. You'll find yourself not reaching for global state management as much (try not to when you first start out!) because you have access to what's on the server readily available to you anywhere in your application, database and all. In addition to state management adjustments, you'll also find yourself using actual platform API like Forms and the Web Fetch API. Along with Remix, Ian utilizes TypeScript, Prisma, PlanetScale, and Vercel in this course for a truly wonderful developer experience. Prisma + TypeScript make it easy to model and validate all the data flowing through your application. With Prisma set up, you'll find switching to a deployed, production database is a breeze (no really) with PlanetScale. Tying it all together is Vercel which plays nice with GitHub and PlanetScale for easy deploys. With this stack, you will build out an MVP for a social media type application. You’ll start your journey by building out the more static parts of your application, introducing you to Remix API and Patterns along the way. As you get familiar with these API and Patterns Ian will introduce you to more complex features. This includes user authentication through cookie session storage and implementing an authentication strategy (which again, is a lot more pleasant than it sounds with Remix!).

Lightning Fast Headless Commerce with Vendure and Remix

Remix is a new full-stack JavaScript framework which focuses on web standards, modern web app UX, and which promises to help you build better websites. In this post we’ll explore how Remix is ideally suited to headless commerce.

CSS Approaches in Remix

Let's dive into different CSS approaches in Remix! We will look at styling your Remix application in three different ways while analyzing different implications. These considerations include performance, developer experience, and scalability. See how to leverage Remix and CSS to create amazing experiences for your users. Speaker Bio: I am currently a freelance full-stack developer with experience in developing JavaScript applications in a variety of frameworks. I am passionate about web development and have recently been building different projects using Remix. I am also getting a master's degree in information systems at BYU. Outside of development, my wife and I just had our first child. We enjoy playing board games and reading numerous (mainly fantasy) books. Follow Noah: https://twitter.com/jnoahjohnson Repo: https://github.com/jnoahjohnson/remix-css Learn more at https://remix.run

Can I Build and Deploy a Remix Site in 5 Minutes? by Ian Sutherland

Can I build and deploy a Remix site in 5 minutes? Let's find out! In this talk I will attempt to build a basic Remix site with a couple of pages and deploy it to a cloud provider. Will I succeed in setting a web development record or fail spectacularly? Speaker Bio: Ian is a full stack software developer, open source maintainer and speaker. He's currently the head of Developer Experience at Neo Financial, the maintainer of Create React App and a member of the Node.js team. You can find him on Twitter and GitHub @iansu. Follow Ian: https://twitter.com/iansu Code: https://github.com/iansu/remix-fan-club Learn more at https://remix.run

Remix Conf 2022

Edited videos available on this playlist: https://www.youtube.com/playlist?list=PLXoynULbYuEC36XutMMWEuTu9uuh171wx Learn more at https://remix.run/conf/2022 Chat at https://rmx.as/discord 00:00:00 Starting title 00:40:00 Michael Jackson keynote 01:10:00 Henri Helvetica on webpage test 01:35:00 Shaundai Person on remix as browser framework 01:54:45 Erik Rasmussen on state machines 02:45:15 Anthony Frehner on Remixing Hydrogen 02:59:50 Ryan Dahl on deno + remix 03:21:40 Nick Small on remix-three 03:29:20 Erick Tamayo on web vitals 03:38:00 Scott Smerchek on stale-while-revalidate 03:43:25 Lunch 05:55:00 Vic Vijavakumar on social good with low code 06:07:51 Ben Wishovich on remix + rust 06:15:10 Greg Brimble on Full Stack Fast: Data on the Edge 06:24:00 Arisa Fukuzaki on ui + ux 06:48:10 Daniel Weinmann on remix-forms 07:06:30 Jon Jensen on incremental remix 08:00:00 Sarah Dayan on search with algolia + remix 08:24:00 Dennis Beatty on switching to remix at neighbor 08:45:00 Closing Notes

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.

UDisc - The App for Disc Golfers | UDisc

Explore over 13,000 courses with hole maps, reviews, photos, and current conditions. Keep score and improve your game.

Get an offer for your vehicle at Carbingo.com

Get a cash offer for your car in minutes & we'll even pick it up from your home.

Crash Course with Remix Run which is a NEW Full Stack JavaScript Framework you MUST try in Arabic

In this video, I will go deeper into the core concepts in @Remix as We build a blog app with Prisma and Sqlite. Remix is a full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. 🚀 Join Discord - https://discord.com/invite/amsZty2hkM ▬ 🔗 Chapters ▬▬▬▬▬▬▬▬▬▬ ⌛️ 00:00:00 Remix Intro ⌛️ 00:07:27 Remix Project Initialization - File Structure Overview ⌛️ 00:12:26 React Overview - Class/Functional Component ⌛️ 00:16:57 React Overview - Props ⌛️ 00:22:00 React Overview - State ⌛️ 00:25:00 React Overview - Handling Events ⌛️ 00:29:00 React Overview - Functional Component [hooks] ⌛️ 00:33:37 What/Why Remix ⌛️ 00:35:40 Add Tailwind CSS with Configuration ⌛️ 00:46:00 Configure Prettier and Eslint ⌛️ 00:53:00 Your First Route ⌛️ 00:46:00 Loading Data - Loader ⌛️ 01:10:00 Refactoring and Models ⌛️ 01:19:00 Dynamic Route Params ⌛️ 01:33:54 Nested Routing ⌛️ 01:41:03 Actions ⌛️ 02:03:00 Progressive Enhancement - Data Mutation ⌛️ 02:11:00 Delete Data ⌛️ 02:27:00 Prisma and Pulling from a data source ⌛️ 02:50:00 Error Boundary ⌛️ 02:54:00 Outro ▬ 🔗 Resources ▬▬▬▬▬▬▬▬▬▬ ⭐️ Github Repo: https://github.com/moelzanaty3/complete-intro-to-remix-run ▬ 🔥 Contact Me ▬▬▬▬▬▬▬▬▬▬ BIO: https://moelzanaty3.bio.link/ 💖 Become a Patron: Show support & get perks! https://www.patreon.com/mohammedelzanaty ☕️ You Don't need to meet me to buy a coffee: https://www.buymeacoffee.com/moelzanaty3 🔗 GitHub: https://github.com/moelzanaty3 🔗 LinkedIn: https://www.linkedin.com/in/moelzanaty3 🔗 Twitter: https://twitter.com/moelzanaty3 📪 mohammedelzanaty129@gmail.com ▬ ⚙️ My Equipment Gear ▬▬▬▬▬▬▬▬▬▬ 🌟 https://kit.co/mohammdelzanaty/my-youtube-and-teaching-gear ▬ 🎨 My Editor Settings ▬▬▬▬▬▬▬▬▬▬ 🌟 Night Owl Color Theme. 🌟 Dank Mono Font or more information - https://www.youtub.com/watch?v=ykA7WnUQuV0

kiliman/remix-scoped-params

Project showing how to track params across multiple routes by scope

DaCurse/remix-chat-app

Proof of concept for a real-time chat app using Server-Side Events in Remix

riffs

Create and share riffs by clipping parts of songs

How to Speak with Remix by Andre Landgraf

Remix is a full stack web framework but how "full stack" can we make it? Voice user interfaces have seen substantial growth in adoption and popularity over the past years. Unfortunately, there hasn't been much visible effort to apply the latest advancements in web development (frontend development) to the field of voice UIs. I created react-ssml-dom to apply the component-based approach to voice UIs. It was a fun project and I was able to create a small Google Assistant action using React to render SSML! Now, a few years later, Remix is out and has changed the way I develop for the web! What if we could use Remix to also render voice applications? Or full stack web and voice apps? Speaker Bio: Hey there! I am a Software Engineer from Germany with a background in Information Systems. I am currently doing my master's degree in Computer Science in Palo Alto, CA! I love to develop web and voice apps. Sometimes I also study for my degree. On the weekends, I hike, watch Marvel, or listen to Syntax.fm. Please find me on Twitter or the Remix Discord server and get in touch! Follow Andre: https://twitter.com/AndreLandgraf94 Learn more at https://remix.run

GAAD

Thursday, May 19, 2022, help us celebrate the 11th Global Accessibility Awareness Day (GAAD)! The purpose of GAAD is to get everyone talking, thinking and learning about digital access and inclusion, and the more than One Billion people with disabilities/impairments.

edgedb/remix

A Remix stack for EdgeDB-backed applications

How to Use the Remix Framework with Edge Functions | Netlify Blog

Develop a highly-performant Remix app and deploy it to the edge with Netlify! Achieve middleware use cases like personalization, localization, and authentication with Netlify Edge Functions.

Remix Conf Frames

robipop22/dnb-stack

The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.

0xCB-dev/storefront-remix-starter

A storefront starter kit for Vendure built with Remix

Fullstack Authentication with Remix using Prisma, MongoDB and Typescript

Remix is an edge-first server-side rendered JavaScript framework built on React that allows us to...

@boxyhq/saml-jackson

SAML Jackson library

Remix Copenhagen (Copenhagen, Denmark)

Hi 👋 We want to help each other build better experiences on the web for our users. So we're going to learn and teach Remix together. Join us for regular talks in Copenhagen.Want to speak at an event?

Multi-Page Forms Using Remix and Redis

Recently, I set out to create a multi-page form using Remix. I decided to use Redis to store a temporary version of the form data that can be used between p

Remix Stack Name Generator

A simple Remix stack name generator.

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!/

rmx-cli

A CLI for remix-run

jkcorrea/remix-chop-suey-stack

Remix+EdgeDB+Tailwind+Fly.io=🖤

Daffy, the Donor-Advised Fund for You™

Daffy makes giving a habit. Daffy is a modern financial platform for giving—set money aside, watch it grow tax-free & donate to 1.5 million charities.

Moving from Next to Remix

Lessons learned migrating a blog site from Next into Remix.

Create a Remix Ecommerce store with Medusa

Tutorial on how to create a Remix ecommerce store together with Medusa.

kiliman/remix-flat-routes

Remix package to define routes using the flat-routes convention

Multiple forms per route in Remix by sergiodxa

Suppose you have a complex enough Remix application. In that case, you may have reached the point where a sing...

Setting up Tailwind CSS in a Remix Project

In this video, I'll show you how to set up Tailwind CSS in a new Remix project.

How to Speak with Remix by Andre Landgraf

Remix is a full stack web framework but how "full stack" can we make it? Voice user interfaces have seen substantial growth in adoption and popularity over the past years. Unfortunately, there hasn't been much visible effort to apply the latest advancements in web development (frontend development) to the field of voice UIs. I created react-ssml-dom to apply the component-based approach to voice UIs. It was a fun project and I was able to create a small Google Assistant action using React to render SSML! Now, a few years later, Remix is out and has changed the way I develop for the web! What if we could use Remix to also render voice applications? Or full stack web and voice apps? Speaker Bio: Hey there! I am a Software Engineer from Germany with a background in Information Systems. I am currently doing my master's degree in Computer Science in Palo Alto, CA! I love to develop web and voice apps. Sometimes I also study for my degree. On the weekends, I hike, watch Marvel, or listen to Syntax.fm. Please find me on Twitter or the Remix Discord server and get in touch! Follow Andre: https://twitter.com/AndreLandgraf94 Learn more at https://remix.run

netlify-templates/kpop-stack

Create a Remix app with Netlify, Tailwind, TypeScript and more!

Remix Authentication | Clerk

Clerk is the easy solution to Remix authentication. Add users to your application in minutes!

Leverage the web platform with Remix

On this episode, we talk with Michael Jackson (no, not that one) about Remix, the "center stack" web framework that embraces the web platform, rather than attempting to replace it.We discuss how Remix is an outgrowth of the work that he and Ryan Florence did on React Router, and how Remix attempts…

Add CSV file import to Remix with UseCSV

UseCSV is an all-in-one CSV import product that gives you a delightful CSV importer experience for your users.

Build a Movie Emoji Quiz App with Remix, Fauna, and Clerk

Test the emoji game of all the movie buffs you know by building a Movie Emoji Quiz app with Remix, Fauna, and Clerk.

hyper63/alternative-stack

A Remix Stack using hyper cloud as a services tier

New Remix App

React 18 upgrade guide

Rewriting my site with Remix

A bones up rewrite of this site from Next.js to Remix in order to support more dynamic applications and content.

Examples of the Permeating Principles of the Web

netlify/remix-edge-template

Deploy your Remix site to Netlify Edge Functions

Dialect - Get instant programming help today

Dialect is a platform that offers 24/7 face-to-face programming help. Say goodbye to stack overflow, say hello to instant help.

Remix Directory

Find the Remix stack that works for you.

namespaced-fieldset

A tiny React utils which gives uncontrolled <input> elements a power of namespaces, and allows constructing complex objects

Analysis Board

View full game on tuichess.com

apihero-run/jsonhero-web

JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

Claras Coffee

På Claras har vi en kombination som är svår att slå! Vi har det mesta när det gäller mat och fika. Från soppa till panpizza, från smörgåsar till morotskaka.

Full-Stack Remix - Express | Blog | Cartes Development

In this post I would like to share my experience creating a Full-Stack application with a backend decoupled from Remix. Stack: Remix, Express, NodeJS, JWT, Refresh Tokens, Redis, Prisma, PostgreSQL, AWS Elastic Beanstalk, AWS RDS, and a few others.

railwayapp-templates/indie-stack

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

ionic-team/capacitor-remix-templates

Build native iOS, Android, and Web apps with Capacitor and Remix.run 💿

jacob-ebey/remix-react-18-streaming

Remix + React 18 Streaming

Remix Indie to Blues Stack Migration

What does it take to migrate from Remix Indie to Blues Stack? This migration guide will help you understand the steps involved in migrating your databse to Postgres and deploy it to Fly.io

MichaelFrieze/djevents-remix

This is the Remix version of the DJ Events app from Brad Traversy's NextJS Course.

Bespoke | The best customer experience for your products & services.

Bespoke provides complete solutions for your product & service that is easy to use.

Troyes Décibels Festival | 28 Mai 2022

Applaudissez Kyo, Klingande, Henri PFR à Troyes le 28 mai !

React Router v6.3.0

A new package helps you upgrade from React Router v5 to v6 incrementally

NewCastile/weatheria

Another weather app but with Remix

remix-fathom

A hook to quickly add Fathom to your Remix app.

remix-etag

## Problem

hygraph/docs-starter

Remix starter for creating documentation websites with Hygraph

Routing Patterns in Remix

Learn how to use dynamic routes, relative URLs, dot delimiters, and pathless layout routes in Remix!

SSR Date Formatting in Remix using the User's Locale

How I achieved consistent date formatting in Remix on both client side and server side rendered React using a LocaleProvider and Intl.DateTimeFormat.

Remix - Web Standards Are Cool Again

Remix is the first Javascript framework I've used that truly understands what it means to be a fullstack developer.

remix-run/indie-stack

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

rphlmr/supa-fly-stack

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

Girish21/speed-metal-stack

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

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.

Best 10 Code Snippets for Remix and TypeScript in 2022

What is a Code Snippet? A Code Snippet is a block of code you can share and reuse. By...

learnwithjason/commandbar

https://www.frontendfirst.fm/episodes/reacting-to-remix

Add a headless CMS to Remix in 5 minutes

In this article, we’ll see how to integrate Storyblok into our Remix application, so we can manage the content of our project inside a Headless CMS. We'll also see how we can enable a live preview of the content that's created, using Storyblok's Visual Editor.

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.

OpenBB - Investment research for everyone

OpenBB is a leading open source investment analysis company. Our mission is to make investment research effective, powerful and accessible to everyone.

How to build a React app using Remix (Part 1 of 3) | Rangle.io

This three-part series will teach you how to build a React app using Remix Run and Prisma. In Part 1, you will learn how to set up your project.

Adding ETag Support to Remix

Learn what an ETag and If-None-Match are, why they're beneficial to your users, and how to implement them in your Remix application quickly and easily with remix-etag.

Remix SaaS kit

REBRANDED TO SAASROCK!This product is no longer available, please visit the new GumRoad page 😀.

Remix

A remix project using their indie-stack

Recipeasy

A space to collect all of your favourite recipes and easily prepare your shopping list.

Remix Authentication Using Remix-Auth Package

Remix Authentication Using Remix-Auth Package #remix #remixrun #reactjs This is a walkthrough of a sample application using the remix-auth package which is a passport-like framework for simplifying authentication of your remix application using specific packaged strategies. In this example, I am using the Form Strategy to show a simple login flow Remix Playlist - https://buff.ly/3GuKVPS ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro, What is Remix Auth 01:20 - Sample App Flow 03:10 - Walking through the code 04:10 - Checking if a user is authenticated, in protected pages 04:42 - Getting session information from the authenticator, in protected pages 05:30 - Logging out, session cleanup 06:10 - Getting Errors when logging In 06:50 - Logging In using the authenticator 08:10 - Setting Up The Authenticator 09:59 - Throwing Errors When Authenticating, Returning Successful Session Info 12:10 - Why this is awesome 13:10 - App Flow Review 16:01 - Redirecting from the login page if a session already exists 18:28 - Wrap Up Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Remix Auth - https://github.com/sergiodxa/remix-auth Remix Auth Form Strategy - https://github.com/sergiodxa/remix-auth-form Source Code - https://github.com/aaronksaunders/remix-auth-form-strategy Remix Playlist - https://buff.ly/3GuKVPS #reactremix #remixrun #authentication #remixauth #remixformstrategy #reactjs

remix-dnd - CodeSandbox

remix-dnd by kiliman using @remix-run/react, @remix-run/serve, react, react-dnd, react-dnd-html5-backend, react-dom, remix

Building my first Remix app!

Follow along as I build a simple tracking app for my workouts using Remix! We end up with a form to create new entries and a homepage to view them, and the whole thing gets deployed to Fly.io. - 0:00 - Intro - 2:22 - Sketching the mockup - 3:37 - App header + static entry form - 11:08 - Adding and loading Exercises and Entries - 14:09 - Adding an action to create Entries - 16:10 - Loading Entries for the home page - 18:46 - Deploying to Fly.io - 19:24 - Closing thoughts

Remix Routes Demystified — Smashing Magazine

In the past months, there have been lots of talks dedictaed to Remix. Routing is not only one of the things that sets it apart from other frameworks, but it also fuels great performance and improves the overall experience for developers. Let’s dig in to all of the features that build up routing in this powerful framework.

tomaspozo/remix-store

An online store built with Remix and MongoDB

Remix: The Yang to React's Yin

Remix fills the missing piece that all React web applications need: The Network Chasm

superjson-remix

A solution for Remix that allows you to send binary data from your `loader` function to your React client app. It uses the awesome [`superjson`](https://github.com/blitz-js/superjson) package to serialize/deserialize your data automatically.

aaronpowell/azure-remix-stack

A remix stack template for running a remix app on Azure

Remixing React Router

Remix picked up where React Router v3 left off, and now almost everything great about Remix is coming back to React Router!

eslint-plugin-remix

Latest version: 1.0.1, last published: 6 months ago. Start using eslint-plugin-remix in your project by running `npm i eslint-plugin-remix`. There are no other projects in the npm registry using eslint-plugin-remix.

How to Visually Test a Remix App with Applitools and Cypress

Is Remix too new to be visually tested? Let’s find out with Applitools and Cypress.

webstudio-is/webstudio-landing

Landing site

First Remix Bay Area First Meetup (March 2022)

Hello. 👋 We are a group on web enthusiasts who like building great user experiences and plain cool stuff for the web. And we demand great developer experiences while doing it. 😉 We will learn and play with Remix together. (https://remix.run/) Want to give a talk? Please fill out this super short form and we'll get back to you! https://forms.gle/N6yeL5eavHK4ThW58 Follow us on Twitter: https://twitter.com/remixbayarea

Remix - Full Context Review

An in-depth, technical, business-impact analysis and introduction of the framework

The Remix Podcast

This podcast will inspire you to build excellent user experiences for the web. Sometimes with Remix, the modern web framework.

remix-run/blues-stack

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

remix-run/grunge-stack

The Remix Stack for deploying to AWS with DynamoDB, authentication, testing, linting, formatting, etc.

BenMcH/techno-stack

The Remix Stack for deploying to Kubernetes, talking to an existing Postgres Db, authentication, testing, linting, formatting, etc.

cliffordfajardo/micro-discounts

The world's largest directory of tech & software discounts for students, teachers & hobbyists.

remix-redis-session

Redis session storage for Remix

floorplan/floorplan

The app framework that no one asked for but that we all deserve.

Remix vs. Next.js: A Detailed Comparison

A detailed comparison between Remix JS and Next.js frameworks

smoak/nhl-remix

A simple app to show NHL games and scores/details

DAlperin/remix-redis-session

Deploy a Remix App to AWS in 2 minutes

Learn more at https://remix.run/stacks

kiliman/remix-walletconnect

Remix example showing how to use WalletConnect with Remix

Deploy a Remix App to Production in 2 minutes

Learn more at https://remix.run/stacks

Introducing Remix Stacks

Learn more at https://remix.run/stacks

Introducing the Indie Stack

Learn more at https://remix.run/stacks

Remix Stacks

Introducing the easiest way to create a ready-to-deploy, production grade, fast web application with Remix.

I built a Link shortener using Remix and here's my experience!

A few days ago, I decided to try out RemixJS and tried building a link shortener using it... cause if I create one more Todo List app, I'll lose my mind. Here's my experience of using Remix till now. What is Remix? Well, let me start with what Remix ...

soorria/utils

micro apps that might be useful but not enough for their own apps and domains

andrelandgraf/remix-voice

Let's use Remix.run and React to create a server-rendered voice application that returns SSML!

Architect Remix Plugin - Begin

Mix Remix into an Architect project with the official Arc 10 Remix plugin.

remix-forms

Magically create forms + actions in Remix!

nasa-gcn/gcn.nasa.gov

General Coordinates Network (GCN) web site

lmachens/arkesia.gg-web

Interactive Lost Ark map

AdsonCicilioti/remix-wallpapers

remix-mount-routes

Package for mounting Remix routes to any path

FYN-Software/rekindled

Beautiful errors for Remix, both in browser and console

kiliman/remix-blog-mongodb

Remix example that updates the blog tutorial to use MongoDB and Quill

kiliman/remix-ftp-deploy

Example to show how to bundle and FTP your Remix app to a host that doesn't let you build

Add returnTo behavior to Remix Auth by sergiodxa

If you're using Remix Auth, you may want to add support to return the user to where it was before redirectin...

Games for today | NBA Remix

See NBA game results and standings powered by Remix.run

DanielFGray/doot

a reddit clone built with remix.run, tailwind, and postgres

DAlperin/mcsignup

A little app to manage self serve signups to minecraft server

remix-pwa

A PWA handler for Remix

mkartchner994/github-contents-cache

Introduction | Remix Fullstack GraphQL Tutorial

A tutorial integrating a no code Hasura backend with the Remix web framework

How to build an app with Remix and Netlify Graph

Learn how to build an app using Remix that connects with third-party APIs using Netlify Graph. We will fetch data from GitHub and use React JSX to build the UI.

QuentinWidlocher/personal-website

The new version of my website, made with Remix

Heaust

A new way to easily keep track of guests and what they bring to your events.

Use React Native Web's Pressable with Remix's Link magic | Horus Lugo

You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!

marshalhayes/RemixRunDotNet

The power of Remix Run and a .NET backend all together

Remix upload to S3 — CanRau.com

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

Home | tiny frontend

Example micro frontend architecture

Cool-Runningz/roadtrip-fm

🚗 📻 A site that helps you find nearby radio stations in the U.S. Perfect for your next road trip!

Remix request cheatsheet

Adam Collier

Adam Collier is a Creative UX Designer Developer from Manchester, UK. Creating content to come back to. Discover useful snippets, resources and blogposts.

Fix double data request when prefetching in Remix by sergiodxa

Suppose you rendered a &lt;Link prefetch="intent" /&gt; component in your UI with the idea of pref...

jacob-ebey/litestream-remix

Share session and cookies between Next and Remix by sergiodxa

I have been migrating a Next.js app to Remix for a few months. I already wrote how to run them ...

How to build an interactive serverless application with Prisma, Remix, Netlify & CockroachDB

This blog is about my experience building an interactive serverless application with Prisma, Remix, Netlify, and CockroachDB Serverless. Why did I choose Remix over Next.js?

AlonGvili/remix-bitdev

This is a clone of bit.dev that was build using Remix.run framework

xstevenyung/remix-crash

Get better insight on why your Remix app crashed during development 💥

Remix Cookbook - Upgrading a Remix/Netlify application to the 1.2.1 version

Remix team just release 1.2.1 packed with bug fixes and some improvements for the deployment targets. Time to upgrade your application, which might...

afonsoduarte/wordle-tutorial

A Remix tutorial to build a Wordle clone

Deep-Codes/remix-video-chat

Video chat app with Remix and 100ms react sdk in less than 100 lines of code.

petermekhaeil/netlify-graph-remix

Netlify Graph + Remix

@clerk/remix

Clerk.dev SDK for Remix

nikosdouvlis/clerk-remix-demo

Mazen Omar | Dream AchieverMazen OmarMazen Omar | Dream Achiever

Creating My Dream by doing the things I love

ImAbhishekTomar/remix-advance-template

remix template with tailwind and other components

HorusGoul/remix-react-native-web-starter

An easy to use Remix + React Native Web starter

DNI9/your-secrets-re

Share secret messages with friends.

How to Setup React Native Web in a Remix project | Horus Lugo

Easy way to use React Native components in your Remix projects and reuse code

remix-vscode-theme - Visual Studio Marketplace

Extension for Visual Studio Code - Color themes used on Remix Run website and docs

neighbaa/remix-generate-css-links

Scalable patterns in Remix JS

The idea of this article is to try to synthesize a basic approach for a scalable Remix SSR (Server Side Rende) application.

QuentinWidlocher/remix-template

Remix template with Typescript, Tailwind, Zod and Prisma

clintonwoo/hackernews-remix-react

Hacker News clone written with universal TypeScript, using React and Remix.

MDX blog in Remix.run - Oldweb2 blog

A minimal MDX powered blog with Remix.

jacob-ebey/remix-pwa

A template to get a Remix PWA up and running

MrLeebo/wordle-solver

Created with CodeSandbox

Using @emotion/styled with remix

How to use @emotion/styled with remix

edmundhung/remix-migration-strategies

Demonstrating different apparoachs for gradually migrating to Remix.

danestves/danestves.com

✨ My portfolio built with Remix, Tailwind, Prisma, and Fly.io.

Build a newsletter form with Remix & third party scripts in Fly.io

How to build and deploy a newsletter with Remix and external scripts like Prism.js for code highlighting

learnwithjason/learnwithjason.dev

Boop Crew HQ

black-tape-project/remix-storyblok

Starter repo for remix.run configured using Yarn.

Remix Utah Meetup 2022-02-03

Learn more at https://remix.run

Devtools Tech

Devtools Tech is a platform for engineers where they can practice actual interview questions, watch courses, read blogs, and keep track of your progress across various domains and topics.

xndbogdan/remix-os-portfolio

A portfolio project made with the new remix framework

joms/remix-presentation-tool

Little URL

Create short url from long url in one click

Coding with Kent: Remix Work

Learn more about Remix: https://github.com/remix-run/remix My task management app: https://www.centered.app Other stuff I use (font, theme, etc.): https://kcd.im/uses

Creating An Authentication Flow Using Remix and Supabase Tutorial

Creating An Authentication Flow Using Remix and Supabase Tutorial #remix #supabase #reactjs Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. Simple application showing authentication flow and session management using react remix and supabase See Part Two where we cover file upload and writing records to Supabase - https://youtu.be/ySQcGc9NICo Timestamps -------------------- 00:00 What's Covered In The Tutorial 02:15 Application Feature Walkthru 03:19 Looking At Code Starting With index.js, Covering Actions & Loaders Sessions 07:38 Managing Sessions in Authentication Session Using Remix 08:40 Logging In A User In Supabase and Creating the Session 12:18 Creating A New User Account In Supabase and Creating A Session 14:40 Running The Project 15:13 Using Remix Server 15:34 Configuring Environment With .env 16:16 Running Remix App and Verifying Data In Supabase 18:02 Final Thoughts ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Supabase Documentation - https://supabase.com/ Source Code - https://github.com/aaronksaunders/supabase-remix-auth Supabase Playlist - https://youtu.be/MVy46MGmfOQ #reactremix #remixrun

@balavishnuvj/remix-seo

Collection of SEO utilities like sitemap, robots.txt, etc. for a Remix Application

chiangs/remix-starter

Starter repo for Remix, TypeScript, React-Testing-Library and linting configured using Yarn.

Remix-JHB March 2022 | Meetup

Tue, Mar 1, 6:30 PM SAST: 📖 Intro 📖 Remix-JHB was started with the dream of being a share and learn workshop. We're excited to share our excitement with this project with you and we hope that at

mongodb

The official MongoDB driver for Node.js

typescript

TypeScript is a language for application scale JavaScript development

Create a static site with Remix and wget and deploy it to GitHub pages - Oldweb2 blog

How to use Remix.run to create a static site and host it on GitHub Pages.

remix-auth-okta

  # OktaStrategy

Not Another Framework!

The web ecosystem can feel like it moves too fast sometimes. We're sensitive to that at Remix so we've designed it with your future in mind. Get good at Remix, get better at the web.

one-aalam/remix-ink

opentelemetry-instrumentation-remix

open telemetry instrumentation for the `remix` package

Setting up React 18 on your Remix website

Maybe you don't really need it actually but it's still cool.

itsMapleLeaf/remix-electron

Remix Single: Concurrent Mutations w/ useFetcher

While Remix and browsers model mutations as form navigations, `useFetcher` allows you to get the same programming model without causing a navigation. This allows apps to add pending and optimistic UI to multiple elements at the same time. Concurrent Mutations! Learn more at https://remix.run

Remix Single: Optimistic UI

Instead of adding pending states and busy indicators while we wait for the server to process a mutation, we already know what the UI will look like when its done. Skip the spinners with Optimistic UI! Learn more at https://remix.run

jacob-ebey/remix-ecommerce

WIP

https://remix-routing-demo.netlify.app/

andrelandgraf/flash-me

Flash Me | Learn through rehearsal. Create and study with flashcards online.

The Complete Guide to Dark Mode with Remix

Dark Mode can be surprisingly tricky to add with any framework. But Remix gives us some unique tools to deliver a fantastic user experience. In this post, we'll look at how Remix allows us to use the platform to provide a perfect theming solution.

Remix vs Next.js

An objective comparison between Remix and Next.js

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:

remix-image

A React component for responsive images in Remix

Serverless Remix Sessions with Cloudflare Pages

Using sessions with Remix is a pretty straightforward task. Usually, you put your session data into a...

Remix Single: Loading data into components

The first thing you usually need for any route is a way to load data from the server. Remix makes it easy with loaders. Learn more at https://remix.run/docs

Transforms any Date objects from your Remix loaders into strings for a more accurate representation of Remix's deserialisation

kiliman/remix-upload

devstojko/challenge-dashboard-reports

Remix Cookbook - Bringing the power of Tailwind CSS to a Remix project

There are numerous tools to help you build remarkable user interfaces on the web. Nowadays, one of the most popular is Tailwind CSS. It is a librar...

remix-query

Query for Remix-Run

kyh/yours-sincerely

An ephemeral anonymous blog to send each other tiny beautiful letters

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

AnandChowdhary/remix-starter

💿 Starter for @remix-run with localized routing and i18n

mzaien/remix-nextui-vercel

Remix and Next-ui starter

Remix Single: Clearing Inputs After Form Submissions

After a form submission completes, you often want to clear out the form fields. You can `useTransition` to know when to reset the form. Learn more at https://remix.run

jacobparis/remix-cloudflare-prisma

An example of prisma working on cloudflare pages with Remix

Remix Conf — May 2023

Join us in Salt Lake City, UT for our innaugural conference. Featuring distinguished speakers, workshops, and lots of fun in between. See you there!

remix-graphql

Utilities for using GraphQL with a Remix app

Remix Cookbook - How to keep your Remix routes tidy

Remix is a server-side framework which makes use of React as the view layer. Newcomers could face some well-known challenges while building server-...

The Return of Server Side Routing

Return? It never went away. Or at least that is what some smug "told you so" is going to say. But for...

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

Remix Single: Multiple Forms and Single Button Mutations

How to handle multiple forms in one route, and modeling mutations with a single button form. Learn more at https://remix.run

Remix Single: Pending UI

Add pending UI and busy indicators for specific interactions when the app is working. Learn more at https://remix.run

I Built a Blog with RemixJS so You Don't Have To (You're Welcome)

My first impressions of RemixJS as a fullstack framework

Remix & Firebase - using Firebase Auth and Firestore with Remix

In this video I convert the Remix demo app to using Firebase Cloud Firestore database and Firebase Authentication. We'll also take a look at using Sessions and Cookies in Remix. Watch this first if you are not yet familiar with Remix: https://youtu.be/SmMqdF2v30s Github: https://github.com/ianlenehan/my-remix-app

Remix Cookbook - Does Remix impose a project structure I have to follow?

Aside from a few conventions you have to follow, Remix won’t stay in your way in terms of project organization. That’s nice but, at the same time, ...

Remix Cookbook - Form and data validation with ZOD

Remix brings us back to the olden days of web development by relying on web fundamentals. In practice, this means leaving it to the browser to do t...

Remix Single: Data Mutations with Form + action

Remix makes data mutations a breeze by emulating browser behavior with HTML forms and server side actions. It then offers special hooks to build modern web app user experiences. Learn more at https://remix.run

remix-middleware

middleware for your remix loaders and actions

sergiodxa/remix-socket.io

A Remix app using Express and Socket.io

Remix Single: Newsletter Signup Form

Learn more at https://remix.run Code: https://github.com/remix-run/remix/tree/9b46b9025f534fc8e7bf4c4839ab46092505706e/examples/newsletter-signup

Remix London Meetup #1 | Meetup

Wed, Mar 2, 6:30 PM GMT: Kent C. Dodds will be joining us remotely! 6:30 - Drinks & food 7:15 - Talks 8:15 - Socialise 8:45 - Move to a pub Want to speak? https://forms.gle/TLcRoZWYHFY2Ffwz9

Remix Cookbook - Deploy on CloudFlare workers with a quick explanation about the Edge Network

Before we outline all the steps to deploy a Remix application on CloudFlare workers, we’d like to take a moment to explain what the Edge Network is...

Generate a PDF in Remix with Resource Routes by sergiodxa

Remix has a feature called Resource Routes which let you create endpoints returning anything. Usin...

@routes-gen/remix

This package is a [**routes-gen**](https://github.com/sandulat/routes-gen) driver for [Remix](https://github.com/remix-run/remix).

Remix Cookbook - Easy to follow recipes for Remix.run

Easy to follow recipes for the Remix.run framework

vendure-ecommerce/remix-ecommerce

Headless commerce with Remix + Vendure

Dynamically generate OG:image using Remix 💿 — CanRau.com

How to dynamically generate OG:images using Remix resource routes, React JSX, TailwindCSS & Puppeteer

Understanding Remix by Building an Application

With Prisma, Tailwind, Multiple Forms, Validation.

Remix first impressions | Jason Etcovitch

In poking around at Remix (and PlanetScale, Prisma, TailwindCSS), I have some thoughts on Remix that I wanted to share!

Remix Cookbook - Ensure a component loads in the browser rather than in the server

Server-side rendering is great, but occasionally, you have no other option than to ensure the component is only rendered in the browser. Otherwise ...

garand/remix-azure-docker

Remix template for building and deploying Docker images with Azure Container Registry and Azure App Service

Some Thoughts on Server State in Remix

In this post, I talk about how Remix handles server state and why it's so easy to work with.

Why I’m So Excited About Remix | Blog | Trevor Davis | Senior Software Engineer @ Dutchie

I’ve been building on the web for a long time. There’s a part of me that still has a bit of an old school mentality, and it’s hard for me to get really excited…

Avoid waterfalls of queries in Remix loaders by sergiodxa

Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a...

Remix Utah Meetup 2022-01-06

Learn more at https://remix.run Join discord: http://rmx.as/discord Join the meetup: http://rmx.as/meetup

Contribute a Remix Example

Learn more at https://remix.run GitHub: https://github.com/remix-run/remix Join discord: https://rmx.as/discord

Remix Image Component

Nx ❤️ Remix

First version of the Remix plugin for Nx. #reactjs #monorepo #nx

Intro to Remix 💿

🔰 Introduction: This article is just an explanation and summary of what Remix is. You...

elkevinwolf/dynapic

🎇 Dynamic Image Generator as a Service

dsod/remix-dynamic-root-routes-example

Shows how to render dynamic routes for the root slug in URLs. Useful when using an external CMS to add / remove pages dynamically.

kiliman/express-auth-example

Run Next and Remix on the same server by sergiodxa

If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your ...

How I'm building my personal website in 2022

In this video I'll be going over how I rebuilt my personal website - codewithkristian.com - for 2022. I'll cover the tools I use, how I wrote the code, and how I deployed it, without spending any money*. 00:00 Intro 00:43 What we're doing 01:50 Buying a new domain 03:50 Setting up a new codebase project 07:23 Coding timelapse 07:53 Viewing the finished product 08:45 Pushing the project to GitHub 11:44 Deploying the project to the web 16:28 Conclusion * Registering a custom domain (codewithkristian.com) costs money! View the source for this project: https://github.com/codewithkristian/landing-page Cloudflare Registrar - cheap (at-cost) domain registrar: https://www.cloudflare.com/learning/dns/what-is-cloudflare-registrar/ Remix - new React.js framework that I'm digging: https://remix.run Cloudflare Pages - deploy Jamstack applications easily with dope performance: https://pages.cloudflare.com WATCH MY FREE ONLINE COURSES: ⛅ Introduction to Cloudflare Workers - https://egghead.io/courses/introduction-to-cloudflare-workers-5aa3 🚀 Build a Serverless API - https://egghead.io/courses/build-a-serverless-api-with-cloudflare-workers-d67ca551 💾 Build Data-Driven Applications on the Edge - https://egghead.io/courses/build-data-driven-applications-on-the-edge-with-workers-and-workers-kv-4932f3ea MY FAVORITE GEAR: 🎥 Camera - https://geni.us/PAvvcAI 🎤 Best Mic for Narration - https://geni.us/hT3zR8c MY FAVORITE SOFTWARE: 📑 My text editor of choice for code - https://code.visualstudio.com 🎵 Where I get my Music (amazing for YouTubers) - https://www.epidemicsound.com/referral/edhm1x FOLLOW KRISTIAN: 💌 Sign up to my weekly email newsletter - https://www.getrevue.co/profile/codewithkristian 🌍 My website / blog - https://www.codewithkristian.com 🐦 Twitter - https://twitter.com/codewithkristian WHO AM I: I'm Kristian! I make YouTube videos, teach people how to code, and work as an engineering manager in tech. I make videos teaching developers the fundamentals that they need to succeed in their programming careers. I'm into music and live in Austin, Texas with my girlfriend and my dog. Thanks for watching! 👋 🌍 My website / blog - https://www.codewithkristian.com GET IN TOUCH: I'd love to chat! Tweet at me, or send me a DM: @codewthkristian. I'd love to answer any questions you have while watching my videos, or if you have video suggestions, hit me up! PS: Some of the links in this description are affiliate links that I get a kickback from 😜

remix-auth-oauth2

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

remix-auth

Simple Authentication for Remix

A quick field guide to using Remix with Apollo GraphQL

We’re going to show you how easy it is to plug Apollo into Remix. But before we do, let’s quickly dig into how Remix data loaders work.

Remixtape

Remixtape is the modern SaaS boilerplate with everything you need to build better websites with Remix.DatabaseBring your own DB with the best-in-class Node.js and TypeScript ORM Prisma.AuthenticationAuthenticate users with their email and password without compromising on security using the state-of-the-art password hashing algorithm Argon2id.TeamsYour codebase is ready for teams out of the box. Admin users can invite teammates to their organization with is own billing management and invitation workflow.PaymentsSubscription payments are powered by Stripe Checkout. You get everything you need to manage a team's subscription, including webhooks handlers and customer portal.Self-serve account managementThe following user flows are already implemented for you so users can manage their own account without having to email you:RegistrationPassword resetAccount deletionSubscription cancellationEmail and password modificationDX nicetiesBecause small things do matter.Pretty loggingEmail previewsFully typed input validationEasy SEO meta &amp; link tagsAutomatic code formatting and lintingBackground and scheduled jobs processing

Remix, SQLite, and Prisma, Oh my! | Blog

Experience the satisfying developer experience of working with Remix and Prisma

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.

eslint-config-remix

ESlint config for remix app

Matthew-Mallimo/remix-notion-example

An example on how to connect a Remix form to a Notion DB

aravindballa/hackletter

Repository for Hackletter, a weekly newsletter by Aravind, built on top of Buttondown's API.

Remix: Introduction and Getting started ft. Kent C Dodds, Anuj Singla

This is the second India Remix Meetup. Members of the Remix team will speak. Bring all your questions and ideas about how to build better user experiences for the web! Agenda: 9:00: The Power of Form by Kent C Dodds (https://twitter.com/kentcdodds) 9:30: Remix Styling by Anuj Singla (https://twitter.com/singla387) 9:50: QA Would like to speak at this meetup? Propose a talk https://forms.gle/aVMgUG8JQHiEMWn8A --------------------- Follow on Twitter for more updates: https://twitter.com/remix_run Getting started with Remix: https://docs.remix.run Remix Blog: https://blog.remix.run/p/remix-preview Please join the discord channel for updates - https://discord.com/channels/770287896669978684/910796788838043688 Join Zoom Meeting https://healthifyme.zoom.us/j/93611642514?pwd=SEZUMkpEMnZ4bHlhZGI5dTRLUlhxUT09 Thanks, HealthifyMe(https://www.healthifyme.com/) for sponsoring the zoom license for the meeting.

All things Remix w/Kent C. Dodds

Juri Strumpflohner is joined by Kent C. Dodds, Director of Developer Experience at Remix and Victor Savkin to discuss the new Remix framework! Submit questions beforehand using this form: https://forms.gle/P6MZWMPzWDUMRYEWA Show Notes: 0:00 Intros 3:33 2 Minute intro of Remix 8:01 What is so special about Remix? 10:57 Remix nested routing 13:45 Resource routes 17:24 Difference Remix loaders and Next.js getServerSideProps 20:30 React Server Components 25:05 Shared state with Remix 28:45 What is Remix not made for? 31:25 Demo of the Remix Nx "Labs" plugin 49:55 Remix Roadmap in 2022 Links: - https://remix.run/ - Nx Remix plugin demo: https://youtu.be/yUuEA4V6DJ0 Docs: https://nx.dev​​​ GitHub: https://github.com/nrwl/nx​​​ Slack Community: https://bit.ly/nx-slack Consulting: https://nrwl.io​​​ Twitter Socials: Nx - https://twitter.com/NxDevTools Juri - https://twitter.com/juristr Kent - https://twitter.com/kentcdodds Victor - https://twitter.com/victorsavkin #Nx #Remix #Reactjs

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

Building an Ugly Sweater Photo Booth With Remix

Overview of an ugly sweater photo booth that was built using Remix and other developer tools.

Using Upstash Redis with Remix

Articles and tutorials on serverless technologies from Upstash team and community

Handling Errors in Remix: A Guide.

Errors are an embedded part of our lifecycle in programming and like it or not, you run into plenty....

Remix Cookbook - Dark mode toggle with Remix Resource Routes and Dynamic CSS

This article will show you how to leverage Remix Resource Routes to deliver a dark mode toggle: In a hurry? Go straight to the source-code on Gith...

remix-auth-github

The GitHub strategy is used to authenticate users against a GitHub account. It extends the OAuth2Strategy.

shamsup/remix-starter-serverless

A template for deploying Remix to AWS with the Serverless framework

remix-utils

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

Styling Remix App with Tailwind

PostCSS Plugin | Organize CSS Files With postcss-Import

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!

Serving files as routes with Remix

The personal blog of Jacob Paris

jckw/remix-radix-stitches-starter

remix-i18next

The easiest way to translate your Remix apps

dilums/interactive-remix-routing

Interactive app to demonstrate how routing works in Remix

remix-auth-socials

A collection of social media strategies for remix-auth

Convert React website to Remix

This article covers the basics of converting a React website to a Remix website

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.

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

debounced-search.tsx

kentcdodds/kentcdodds.com

My personal website

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.

Debug server-side Remix using VSCode

remix-params-helper

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

Loader vs Route Cache Headers in Remix by sergiodxa

Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...

The Power of Form - Kent C Dodds

Kent C. Dodds teaches us that forms on the web are already incredibly powerful, so let's not try to reinvent them! Instead, with Remix, we'll leverage their strengths and write less code in the process! Even without JavaScript, Remix lets us get some great form-based interactions. This was part of a twelve developer stream where we raised $10,000 for TeamSeas to remove trash from the ocean! It was a fantastic team effort and a whole lot of fun. It all happened over on our Twitch channel: https://frontend.horse/twitch Check out the other guests from the stream: https://www.youtube.com/playlist?list=PLqBqc6jkWtK_Vn8-kwruJJbz67vBn_yW1 A huge thanks to our sponsors who each matched $1,000 of our donations, turning 5K into 10K! Prismic CMS - The headless, component-based CMS for the Jamstack Netlify - Develop & deploy the fastest web experiences in record time Cloudinary - Image and video upload, storage, optimization, and CDN StepZen - A GraphQL API in minutes on the Data and SaaS APIs you use Orbit - Grow and measure your community across any platform with Orbit, mission control for your community View the list of donors here: https://holiday2021.frontend.horse/

Moulton

A Remix Newsletter

Metronome — Performance data tailored for Remix

Delivering the best experience to users is critical for your success. Metronome lets you visualize how your Remix app performs from top to bottom.

Why Remix 💿?

In the the first part of this post series (yes, it's now a series), we talked briefly about what...

How to refetch Remix data when the tab is focused

marcomafessolli/remix-prisma-cloudflare-workers

Run Remix with Prisma on Cloudflare Workers

Remix 💿 mdx-bundler and images — CanRau.com

How to get mdx-bundler (by Kent C. Dodds) working with local images

How Serverless Saved Money on My Heating Bill

I built a serverless application as a weekend project to help me save money on my heating bill. In doing so, I experienced something great about building websites in 2022.

GuptaSiddhant/remix-firebase-template

Starter template for Remix apps deployed to Firebase.

How to add canonical URL to Remix 💿 — CanRau.com

Add canonical urls to you Remix website to avoid duplicate content penalties for better SEO

Validating Remix forms with Constraints API by sergiodxa

The Constraints API is a browser API that has been available since the times of IE10, yep, that old....

Styling Remix using Tailwind and PostCSS

How to style a Remix app using Tailwind and PostCSS

CDN Caching, Static Site Generation, and Server Side Rendering

Remix relies on CDNs and cache control headers to get the best web performance possible. Here we’ll compare various caching strategies, including Static Site Generation and Increment Static Regeneration, and compare the tradeoffs.

mcansh/snkrs

show off your sneaker collection

sitemap.xml generator for remix.run

NoQuarterTeam/boilerplate-remix

remix-themes

An abstraction for themes in your Remix_run app.

Remix Run Speedrun - Pokemon

Is Remix Run more than just hype? Let’s find out by building out a multi-page Pokemon SPA to show you a bunch of the fundamentals: SSR data loading, Navigation, API Routes, page routes and parameters, and more. Code: https://github.com/jherr/remix-speedrun-pokemon Remix Quickstart: https://remix.run/docs/en/v1/tutorials/blog Remix Philosophy: https://remix.run/docs/en/v1/guides/philosophy 👉 What's my theme? Night Wolf [black] 👉 What's that font? Operator Mono 👉 I'm a host on the React Round Up podcast: https://devchat.tv/podcasts/react-round-up/ 👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ 👉 Discord server signup: https://discord.gg/ddMZFtTDa5 Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel. 00:00 Introduction 00:33 Setup 01:26 Tailwind setup 02:27 Layout configuration 04:12 Setting up Pokemon data 04:50 Creating the index page 06:42 Creating an API route 07:10 useFetcher and Forms 09:10 Implementing a Route 11:33 Adding Breadcrumbs 12:36 How Remix is different 13:15 Remix Actions 14:08 Outroduction #remix #remixRun

Building a Simple Search UI with Remix

Photo: Markus Winkler on Unsplash. One thing I love most about Remix is how it encourages you to...

itsMapleLeaf/thoughtbucket

organize your ideas in a neat and cozy bucket (so they don't get jumbled around and lost like mine 🙃)

Using Service Workers with Remix by sergiodxa

A Remix app is by default fast, the framework optimize a lot how the required resources for a page are loaded s...

lgastler/remix-remotion-demo

A little demo using remix resource routes to render a dynamic Remotion video!

Adding CSRF protection to Remix by sergiodxa

While you may not need CSRF if your cookies have the SameSite: Lax configured, it may still be a good idea to ...

cbenjamin2009/remix-blog-firebase-auth

Updated Remix Blog Tutorial using Firebase Auth for user accounts

gmencz/OneClip

Share your clipboard with people nearby. No Setup, No Signup.

Localizing Remix apps with i18next by sergiodxa

There's a lot if libraries to implement i18n in JS and React, and i18next is one of the most popular out ther...

brookslybrand/remix-nested-layouts

Converting a demo of implementing nested layouts in Next.js: https://github.com/brookslybrand/next-nested-layouts

BenoitAverty/realworld-remix.run

Remix.run implementation of Conduit

mcansh/remix-tailwind-starter

A Remix.run starter with tailwindcss configured and deployed to various cloud platforms

On Rails

What's the deal with Remix?

remix-postcss

Use your PostCSS Config in Remix

Use NProgress in a Remix app by sergiodxa

Remix's philosophy is to kill all the spinner! This is amazing, but sometimes it's not possible. Connections may be...

Use ETags in Remix by sergiodxa

ETags are strings used to identify a particular version of a resource. If the URL is the identity of a resource the ETag is t...

Route protection in Remix with Policies by sergiodxa

A Policy is a design pattern used to define authorization rules that can be re-used easily across an app...

How to add Honeycomb to a Remix.run app on Cloudflare Workers

Those are some lovely honeycomb spans you've got there... be a shame if something happened to them.

Remix Meta Tags | Ryan Chenkie

This post covers how to use the MetaFunction provided by Remix to set meta tags for any page in a Remix app. It also shows how to set content for meta tags dynamically.

@afaik/remix-auth-supabase-strategy

> Strategy for using supabase with Remix Auth

How to poll for fresh data on an interval with Remix

How to do HTTP Basic authentication with Remix

Setting Up SASS With Remix Run - Devtools Tech

Remix is the newest JavaScript framework in the developer community right now. It is a full-stack web framework that foc...

The problem with importing css

On implementing a client for feature flags in your UI codebase

A Beginners Guide to Remix Framework

JavaScript is constantly booming with new frameworks to poke and prod with and we have, a new kid on the block! Let's say hello to Remix – recently released by the folks behind React Router.

nyoung697/remix-hasura-fly

remix-auth-microsoft

The Microsoft strategy is used to authenticate users against a [Microsoft Identity](https://docs.microsoft.com/en-us/azure/active-directory/develop/) account. This can be a work/school account or a personal Microsoft account, like Skype, Xbox and Outlook.

remix-auth-auth0

The Auth0 strategy is used to authenticate users against an Auth0 account. It extends the OAuth2Strategy.

tom-sherman/rescript-remix-template

Remix and ReScript in harmony