Fullstack Discord Clone: Next.js 13,  React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

8/26/2023
1

Description

Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord

Github & Live Website: https://www.codewithantonio.com/projects/team-chat-platform

LiveKit: https://livekit.io/

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 Socket.io

- 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

Chapters

Intro Demo
6:57
Environment setup
19:05
Folders setup
11:03
Authentication
13:02
Dark Light Theme setup
9:03
Prisma Planetscale setup
26:08
Initial modal UI
21:04
UploadThing setup
23:10
Server creation API
11:13
Navigation sidebar
28:39
Create Server Modal
13:07
Server Sidebar
29:42
Invitations
34:10
Server Settings
9:15
Manage Members
48:29
Channel Creation
20:48
Delete Leave server modal
18:45
Search Server Modal
26:26
Server Channels List
40:00
Edit Channels
21:50
Channel ID Page
12:49
Chat Header
16:11
Prisma Schema completion
11:53
Conversations Setup
15:50
Socket IO setup
17:18
Chat Input component
13:58
Messages API
10:12
Message Attachment
13:04
Emoji bar
9:10
Chat Messages component
30:46
Chat Item component
46:08
Delete Message
6:37
Chat Socket hook
19:47
Chat Scroll hook
12:50
Direct Messages
13:36
Video Calls
19:40
Deployment
4:18