Building a Simple Real-Time Chat App with Supabase

[00:00] Introduction
[08:20] Overview of Project
[08:34] What Data Will Be Stored?
[11:00] Supabase
[11:35] Create A New Project
[19:33] Creating Messages Table In Supabase
[23:00] Defining Read Policy For Messages Table
[25:54] Defining Insert Policy For Messages Table
[28:06] Serve It Up!
[30:25] Adding Bootstrap
[35:40] Adding Bootswatch
[39:28] Adding Custom CSS
[44:06] Quick Recap
[44:44] Adding Javascript
[47:00] Supabase CDN
[55:30] Putting Real Data Onto The Page
[01:01:14] Automagically Add New Messages To Page
[01:05:31] Enabling Realtime On Supabase Table
[01:08:00] Autoscroll
[01:15:19] Creating Send Message Form
[01:18:19] Listening For Form Submitted
[01:20:56] Sending New Message To The API
[01:23:49] Clearing Content After Message Submitted
[01:27:40] XSS Example
[01:30:37] Sanitizing Inputs
[01:37:43] Removing Images
[01:40:27] "Letting you all go ham" (Another Recap/ Deploying With Surge)
[01:45:05] Things We Need To Add
[01:47:03] Deleting Insert Messages Policy

[glatocha]

at first I thought that dude is way too chaotic for me, but I kind of like how he interact and answers all questions. I will subscribe on YT and think about finally getting into twitch

[cesar]

This is great. I would love to collaborate with you. I am working on a chatpdf app with aircraft technical data that seems to break the Ai occasionally.

[AdhilJayan]

Can anyone explain ? Why we hardcoding the API key ? any one can see our key and get access to our data base right ? correct me If I am missing anything..

[adwaithks]

Vs code theme !!.. someone please tell me 😭

[immagarcia]

Hello
Have you installed the supabase image and how would you install and program it?

[abbastolgayylmaz]

I think it'd be better to sanitise text we receive from the form, before sending to db.
yet this is still a good way to prevent if somehow malicious code is already injected into db.

[cristiancgr]

How would I make the chat independent of each user?

[vikingzeppelin]

Can you make a part 2 for this video, but include twitch and youtube authentication? That way you'll have a single chat (as an obs overlay) when streaming to the two different platforms, simultaneously. Their apis give you realtime chat that's already curated. Emote animations too, I think.

[mathnewph]

I can't watch rn 🥺 please upload the redif 😁

[soufianta]

Which macbook did you have exactly dear CJ?

[devd]

Awesome man! thanks a lot for tutorial.

[duartelucas]

Cool, already added supabase to my toolbelt!

[juliannicholls]

The site is still there, but no new messages are taken.

[happynak]

"which is not good db design" i dont get it.. i wanna see good db design, why are you showing us how not to do it