Create a Full Stack Realtime Chat Messaging App with Remix.run

Hosted on vercel

others / xata.io2024-02-14

Create your own content management system with Remix and Xata

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

others / www.youtube.com2023-07-06

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

repository / github.com2023-07-01

AlexandroMtzG/saasrock-kb

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

repository / github.com2023-07-01

AlexandroMtzG/novel-remix

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

others / www.youtube.com2023-05-17

"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

others / www.jacobparis.com2023-04-22

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.

repository / github.com2023-04-18

NoQuarterTeam/boilerplate

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

others / www.jacobparis.com2023-04-12

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.

others / vercel.com2023-03-22

Remix without Limits – Vercel

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

others / egghead.io2022-12-16

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

others / www.simeongriggs.dev2022-12-09

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.

repository / github.com2022-09-19

freekrai/remix-docs

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

repository / github.com2022-07-07

clerkinc/remix-bossa-nova-stack

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

repository / github.com2022-06-21

ilangorajagopal/synthwave-stack

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

others / egghead.io2022-05-25

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

others / www.youtube.com2022-05-19

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

repository / github.com2022-05-17

robipop22/dnb-stack

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

repository / github.com2022-04-09

NewCastile/weatheria

Another weather app but with Remix

repository / github.com2022-04-05

hygraph/docs-starter

Remix starter for creating documentation websites with Hygraph

repository / github.com2022-03-23

webstudio-is/webstudio-landing

Landing site

repository / github.com2022-03-22

cliffordfajardo/micro-discounts

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

repository / github.com2022-03-19

smoak/nhl-remix

A simple app to show NHL games and scores/details

repository / github.com2022-03-16

soorria/utils

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

others / vicvijayakumar.com2022-03-14

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.

repository / github.com2022-03-14

lmachens/arkesia.gg-web

Interactive Lost Ark map

others2023-07-06

Create a Full Stack Realtime Chat Messaging App with Remix.run

www.youtube.com

remix-auth prisma tailwindcss vercel

Published on www.youtube.com

others / www.youtube.com2022-01-11

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

others / www.youtube.com2022-04-28

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

others / www.youtube.com2021-12-24

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.

others / www.youtube.com2022-08-04

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

others / www.youtube.com2023-01-30

Roadmap #5

Learn more at https://remix.run

others / www.youtube.com2022-06-06

"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