Create Professional CSS Animations with This Dev Tool

Learn Tanstack Start In 60 Minutes

NEW CSS Scroll Features are Game Changers

Add Beautiful Blurry Image Loading With 3 Lines of Code

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

Create Professional CSS Animations with This Dev Tool

Learn Tanstack Start In 60 Minutes

NEW CSS Scroll Features are Game Changers

Add Beautiful Blurry Image Loading With 3 Lines of Code