Discord for any problems/errors/bugs: Github & Live Website: LiveKit: Hi all 👋 In this 11 hour tutorial you will learn how to create an end-to-end fullstack and real-time discord clone, all with servers, channels, video calls, audio calls, editing and deleting messages as well as member roles. Key Features: Real-time messaging using Send attachments as messages using UploadThing Delete & Edit messages in real time for all users Create Text, Audio and Video call Channels 1:1 conversation between members 1:1 video calls between members Member management (Kick, Role change Guest / Moderator) Unique invite link generation & full working invite system Infinite loading for messages in batches of 10 (@tanstack/query) Server creation and customization Beautiful UI using TailwindCSS and ShadcnUI Full responsivity and mobile UI Light / Dark mode Websocket fallback: Polling with alerts ORM using Prisma MySQL database using Planetscale Authentication with Clerk Timestamps 00:00 Intro & Demo 06:57 Environment setup 26:02 Folders setup 37:05 Authentication 50:07 Dark & Light Theme setup 59:10 Prisma & Planetscale setup 01:25:18 Initial modal UI 01:46:22 UploadThing setup 02:09:32 Server creation API 02:20:45 Navigation sidebar 02:49:24 Create Server Modal 03:02:31 Server Sidebar 03:32:13 Invitations 04:06:23 Server Settings 04:15:38 Manage Members 05:04:07 Channel Creation 05:24:55 Delete & Leave server modal 05:43:40 Search Server Modal 06:10:06 Server Channels List 06:50:06 Edit Channels 07:11:56 Channel ID Page 07:24:45 Chat Header 07:40:56 Prisma Schema completion 07:52:49 Conversations Setup 08:08:39 Socket IO setup 08:25:57 Chat Input component 08:39:55 Messages API 08:50:07 Message Attachment 09:03:11 Emoji bar 09:12:21 Chat Messages component 09:43:07 Chat Item component 10:29:15 Delete Message 10:35:52 Chat Socket hook 10:55:39 Chat Scroll hook 11:08:29 Direct Messages 11:22:05 Video Calls 11:41:45 Deployment
Hide player controls
Hide resume playing