code-with-antonio 8 months ago
web developer #Web Development

Fullstack Discord Clone | Next.js | React | Socket.io | Prisma

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


00:00:00 Intro

00:06:57 Environment setup

00:26:02 Folders setup

00:37:05 Authentication

00:50:07 Dark & Light Theme setup

00: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

Code With Antonio
70.3K subscribers