
Build an Advanced Realtime Chat Project with Supabase
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
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
Web Dev Simplified
Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular tech...