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.
Ready to supercharge your React app development with Remix? Learn how to create a server-rendered app with the Remix Stacks, Prisma, and Supabase.
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
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.
The blog of sergiodxa
Learn how to use Zod and Conform to validate and transform form data into sessions
Optimize Remix.run apps with global types for smooth version transitions, runtime changes, and easy updates using a single declaration file
Use OData to create a flexible query language for your database. Give your users pre-made queries or let them construct their own.
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.
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...
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 ...
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.
Let's talk about internationalization (i18n) for Remix... When it comes to JavaScript localization....
This blog post is a personal guide for Remix projects. If you need error handling you should do these things at minimum.
The blog of sergiodxa
Save forms automatically with useDebounceFetcher. Make a reusable Input component. Compatible with Conform.
Introduction This blog post revisits my (apparent) "Check out this new React framework"...
Use Conform to validate your forms serverside. Show errors on the client. Use Zod to generate your form schema.
Introduction In this tutorial series, we'll explore building a full stack application...
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
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
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
Write a Zod schema to typecheck your environment variables. Crash the app if any are missing. Add type definitions to process.env.
Watch Kent show you the improved user experience, security, and the implementation of Time-based One Time Passwords in the Epic Stack.
Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.
The blog of sergiodxa
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
Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.
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.
Create and deploy a Remix app to AWS with SST.
Recently I tried setting up CDN on my remix.run website hosted on fly.io.
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.
Safely type your handle data in Remix without needing to resort to duck typing with Symbols.
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.
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.
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.
Save forms automatically with useFetcher instead of useSubmit. Show a loading state while saving.
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.
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 ...
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.
Use Remix's nested routes with react-transition-group and Tailwind CSS to fade between pages.
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.
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.
It seems everyone is using Chat GPT in their daily lives. From coding, to recipes, to blog generation, carefully crafted prompt engineering…
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!
Use Remix's Defer feature in combination with an EventStream to stream progress updates to the client.
Learn how to generate Open Graph images in your Remix app
Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.
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/