sergiodxa/personal-site
Personal website
Personal website
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! π
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.
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:
Form component and utils for easy form validation in remix
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.
"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
Remix and Next-ui starter
Updated Remix Blog Tutorial using Firebase Auth for user accounts
Converting a demo of implementing nested layouts in Next.js: https://github.com/brookslybrand/next-nested-layouts
An ephemeral anonymous blog to send each other tiny beautiful letters
A Remix.run starter with tailwindcss configured and deployed to various cloud platforms
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.
Knowledge Base starter kit with WYSIWYG, Markdown, GPT, and Multi-language support. Built with Remix, Tailwind CSS and Prisma.
π Fullstack boilerplate using Remix, Next.js, Expo, Prisma, TypeScript, tRPC and many more!
The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.
In this video take a previous demo I created showing how to add nested/persistent layouts in Next.js and show how to accomplish the same thing in Remix. You can find the original video here: https://www.youtube.com/watch?v=WOeLxL2DF3E&t=8s&ab_channel=ReactTipswithBrooksLybrand Code: https://github.com/brookslybrand/remix-nested-layouts Live Demo: https://remix-nested-layouts.vercel.app/
Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.
Remix stack for an MDX docs site that is quick to set up and customize
The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.
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
Remix with brilliant bells and useful whistles
Remix starter for creating documentation websites with Hygraph
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!).