illustration for Build a Realtime Chat App with Remix and Supabase

Build a Realtime Chat App with Remix and Supabase

Instructor

Jon Meyers
43m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
148
people completed
Bookmark
Download
RSS

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

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Credits

Kamil Khadeyev (illustration)

Learner Reviews

  • Learner
    3 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    supabase libs changed quite a lot, so as a beginner who was able to finally figure out the new libs, the course is not beginner friendly

    on the other hand, concepts didn't change much

    so I would recommend students to find more up to date implementation first, and maybe then use this course to help understand the logic

  • Learner
    7 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Amazing course! Helped me with the basics

  • Learner
    11 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Enjoyful overview with the straight guide to make a simple app combining Remix+Supabase. It can help you understand the basics of both and, after some polishing, might be a great starting point for the following personal project. Thank you, Jon!

  • Norberto Cammayo
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    It is so much precise and on point on the topics without spending a lot of time explaining which I find it very easy for me to digest the concepts presented.

  • Learner
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    I love this course. Easy to understand I need to do. I hope you share for community more courses about remix-run. Thanks again

  • Ricardo Ramirez
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Great course and a good example app to showcase Remix and Supabase working together, I appreciate Jon's clear explanation about the things he's doing in the code.

Course Content

43m • 11 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers

    Introduction to Cloudflare Workers

    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use

    Practical Git for Everyday Professional Use

    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.