Create your own content management system with Remix and Xata
Learn how to create a custom CMS using Xata, Remix, Novel, LiteLLM, and Vercel.
Learn how to create a custom CMS using Xata, Remix, Novel, LiteLLM, and Vercel.
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
Knowledge Base starter kit with WYSIWYG, Markdown, GPT, and Multi-language support. Built with Remix, Tailwind CSS and Prisma.
Remix Edition - Notion-style WYSIWYG editor with AI-powered autocompletion.
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
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.
๐ Fullstack boilerplate using Remix, Next.js, Expo, Prisma, TypeScript, tRPC and many more!
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.
Vercel now has advanced Remix support, including SSR streaming with Edge Functions and multi-runtime support.
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! ๐
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.
Remix stack for an MDX docs site that is quick to set up and customize
The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.
Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.
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!).
"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
The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.
Another weather app but with Remix
Remix starter for creating documentation websites with Hygraph
Landing site
The world's largest directory of tech & software discounts for students, teachers & hobbyists.
A simple app to show NHL games and scores/details
micro apps that might be useful but not enough for their own apps and domains
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.
Interactive Lost Ark map
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.
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.
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.
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.
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.
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.
Drizzle is a typescript ORM for type-safe database access and automatic migrations. Add it to your Remix app to get started with SQLite.