Build a Real-Time Slack Clone With Nextjs, React, Tailwind, Auth.js | Part 1/2 (2024)

Source code & more: https://dub.sh/Z10ELbr
PART 2: https://youtu.be/AbztO-X7PCQ
Convex: https://convex.dev/c/cwa

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 & demo
02:29 Project setup
13:10 Authentication UI
35:04 Database setup
46:45 Github authentication
01:11:51 Google authentication
01:21:43 Password authentication
01:33:27 User button component
01:53:01 Workspace creation
02:45:57 Toolbar component
03:05:20 Sidebar component
03:29:41 Workspace Members
03:45:14 Workspace Header
04:15:26 Workspace preferences
04:56:14 Channels & members
05:37:55 Create channel functionality
05:53:58 Workspace Invite modal
06:11:10 Workspace join page
06:35:18 Channel page
06:53:53 Channel header
07:29:41 Editor component