실시간 채팅 어플리케이션

Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

In this video, we are going to build a realtime chat application with Supabase,Next.js. demo: https://next-chat-demo.vercel.app/ code: https://github.com/Chensokheng/next-chat-demo Boilerplate: https://dailyblog-demo.vercel.app/blog/1053fbb2-0018-4dd0-8f60-8282d7f9c402 ============================================ @Supabase doc: https://supabase.com/docs/reference/javascript/introduction auth: https://supabase.com/docs/guides/auth/auth-helpers ==================================== Zustand: https://zustand-demo.pmnd.rs/ =========================================== Support the channel : 🙏🌸 - donate 🌻: https://www.patreon.com/dailywebcoding ===================================== Follow me:   👇 - Discord: https://discord.gg/XbJkCtt - Github: https://github.com/Chensokheng ⭐️ Contents ⭐️ 00:00 Introduction 02:05 Setup project 05:29 layout 07:32 Chat header 10:47 Setup supabase 15:35 Authentication 23:43 InitUser State 29:07 User table and trigger 33:37 Chat UI 39:54 Create message 51:35 List Message 1:05:06 optimisticAddMessage 1:11:44 MessageMenu 1:16:10 Delete Message 1:27:49 Edit Message 1:39:44 Realtime listener 1:58:27 arrow down & notification 2:12:54 Pagination 2:26:47 Presence 2:35:23 Logout UI 2:38:57 Deploy 2:43:02 Outro