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

preview_player
Показать описание

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:

- 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
- 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
Рекомендации по теме
Комментарии
Автор

If you are having an issue with disappearing navbar & sidebar upon leaving the server, deleting the server etc.

You can fix this by moving UploadThing's styles into global.css at the end of the file instead of in the react component.

Step 1:
- Remove the import for upload-thing styles inside file-upload.tsx component

Step 2:
- Add the import at the bottom of the globals.css file instead

// globals.css
...


Step 3 (optional):
- Wrap the tailwind config with "withUt":

// tailwind.config.js

const { withUt } = require("uploadthing/tw");
module.exports = withUt({
...leave everything the same
});

codewithantonio
Автор

Are you kidding me? This $100 course is free for everyone. Antonio, you are a blessing to us.

unknownman
Автор

In a 3rd world country i can't afford high quality courses, your content helps me work towards my dreams. Thank you Antonio

mr.daniish
Автор

It takes me 6 hours a day to get through little bit over 1h and 10 minutes but oh boy, experience/exposure I'm getting from coding along with this is JOB EQUIVALENT. thank you so much.

Shadowfeather-sbvc
Автор

Legendary. Incredible work. So hyped to see UploadThing🙏

tdotgg
Автор

I hope you never stop making videos! This is a game changer for a lot of people, including myself. Just know a lot of people appreciate the work you put into these videos!

johnartuz
Автор

Let's protect Antonio at ALL cost ! The teaching style, the humanity, the passion .... I am running out out words literally. May GOD bless this man forever.

dreamsachiever
Автор

OMG almost 12 hours, your work on that project was incredible!🔥🔥🔥 I would like to compliment you on your diligence.👍👍👍 Thank you so much, Antonio

ndblqqy
Автор

I have more than 10 years leaning from YouTube as “we can never stop learning” and I can say you are gold. It’s not only the patience, but the passion on how you teach. Great work

GabrielMartinez-ezue
Автор

Cannot express how thankful we are for your hard work! Thank you so much!! :)

t_park
Автор

I just finished the entire build and I can honestly say that I have not experienced anything like this. It worked like a charm and this tutorial taught me so much. Once again I cannot thank Antonio enough for all his hard work and research and development to make this possible for us to learn. I am lost for words and I am extremely grateful for what you have shown us. Thank you so much... Even though I have completed this, I want to do it again just to learn some of the most difficult parts again. Looking forward to the next one sir!

SuperPompey
Автор

No words can describe how beautiful this project is. Thank you so much for this excellent work

mr-armel
Автор

Antonio, you are the reason why I started learning Next.js. Thank you a lot for your time and effort you put into these videos!

Moje
Автор

Finally finished this project! The complexity in this project felt like it was on a whole new level! I feel like I've grown so much after going through it, but at the same time, I once again just realized how big of a knowledge gap there is between you and I. But it's only a matter of time, someday I will surpass you😼

Triple._.A
Автор

The BEST explained TUTORIAL ever! For example me: I don't know react, but from this course i learned a lot!

Abubakr-triedCoding
Автор

Started at: ‎ Friday, ‎ August ‎23, ‎2024, ‏‎ 3:30 PM
Finished at: Saturday, August 31, 2024 4:55 PM

Thank you a lot Antonio, after Auth.js this is second project I have built from following your videos.

Shadowfeather-sbvc
Автор

Thank you for taking the time to create these project videos! Super excited to dive into this and code alongside you!

alstudiowebdev
Автор

Hi antonio, i really liked your projects they helped me a lot
Just one request if you include system architecture it would be great for us building simliar projects if you explain it with diagrams and what services library used for what purpose it woulb be easy to grasp

navjeevanalone
Автор

when you said great great job so far. it feels i am playing some bad ass game and have unlocked some precious things in it. and the guide in game is appreciating me.

rohanagrawal
Автор

I love the way you teach. Its way better. Never stop making videos. Thank you very much for the effort

dharma_marga