Source code & more: [ Ссылка ]
PART 1: [ Ссылка ]
Convex: [ Ссылка ]

Hi all 👋 In this 15 hour tutorial split in two parts you will learn how to create an end-to-end fullstack and real-time slack clone, all with workspaces, channels, 1:1 conversations, threads, reactions, editing and deleting messages as well as member roles.

Key Features:

📡 Real time communication
👍 Reactions to messages
🧵 Threads / Replies system
✏️ Editing messages
🗑️ Deleting messages
🔐 Role based access control
🖼️ Image attachments
🔒 Authentication with Next auth v5
📺 Channel creation
🏢 Workspace creation
✉️ Invite system / Invite codes
💬 Direct messaging
👥 User profiles
⚛️ Framework Next.js 14
🚀 Deployment on Vercel
🎨 Shadcn UI & Tailwind CSS

Timestamps
00:00 Intro
00:32 Emoji picker component
14:44 Image picker feature
22:51 Editor submit feature
51:21 Image upload feature
01:03:38 Schema finalization
01:13:55 Messages GET API
01:49:55 Message list
02:39:51 Channel hero
02:47:04 Message toolbar
02:57:41 Edit & delete message feature
03:18:40 Message reactions feature
03:40:40 Infinite load feature
03:46:22 Thread panel
04:16:53 Thread content
04:33:30 Conversations (DMs) feature
05:15:41 Message thread bar
05:28:53 Member profile panel
05:46:11 Member update & remove feature
06:15:22 Search dialog component
06:28:37 Cosmetic improvements
06:34:53 Deployment

свернуть