Fullstack Discord Clone 13, React, , Prisma, Tailwind, MySQL Full Course 2023
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
1 view
4371
1523
2 months ago 02:02:42 1
Open Interpreter - Advanced Experimentation
2 months ago 00:17:14 1
SpaceX Starship Flight 5 Catch Explained! Yes, finally it happened!
2 months ago 04:01:11 2
[4K] Watch SpaceX Catch A Starship Rocket From Space!!! #IFT5
2 months ago 00:08:24 1
EFT | ОСНОВЫ ОБОРОНЫ ГРУППОЙ
2 months ago 03:34:31 1
Создайте Fullstack-приложение за 3 часа с помощью React и NodeJS: MERN