CSS 𝐬𝐭𝐫𝐞𝐭𝐜𝐡 Solves So Many Height Problems

The NEW React Activity Component Is a Game Changer for Performance

Every Project Needs This NEW Tanstack Library

Data Access Layers are a Must Know for Next.js Developers

Try Supabase: https://supabase.plug.dev/rZx5wtt

In this video I will show you how to create an advanced realtime chat application that supports public/private rooms, a full permission system, user invites, infinite scrolling, and much more. We will be using Next.js, Tailwind, Shadcn, React, Drizzle, and Supabase for this project


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/supabase-realtime-chat
WDS Shadcn Registry: https://wds-shadcn-registry.netlify.app/


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction/Demo
00:00:53 - Supabase Setup
00:05:06 - Auth Setup
00:09:57 - Database Setup
00:15:04 - Chat Room List Empty State
00:17:26 - Navbar
00:26:20 - New Chat Room Page
00:45:58 - Supabase MCP Server Setup
00:53:04 - Chat Room List Page
01:08:54 - Chat Page
01:35:18 - Realtime Functionality
01:56:40 - Invite User Modal
02:01:23 - Infinite Scroll


#Supabase #WDS #NextJS

Build an Advanced Realtime Chat Project with Supabase

CSS 𝐬𝐭𝐫𝐞𝐭𝐜𝐡 Solves So Many Height Problems

The NEW React Activity Component Is a Game Changer for Performance

Every Project Needs This NEW Tanstack Library

Data Access Layers are a Must Know for Next.js Developers