I recently completed a 12-hour tutorial on building a Discord clone, following a guide from the Code With Antonio YouTube channel. My primary objective was to acquire skills in real-time chat, video, and voice call functionalities, with the intention of integrating them into my upcoming web projects.
During the tutorial, I encountered some issues with certain libraries used, leading me to substitute them with alternatives. For instance, I incorporated an emoji picker library and made modifications to the authentication page's UI.
Despite the extended duration of the tutorial, I found it incredibly valuable. Balancing it with my ongoing freelance project presented challenges, but the effort paid off in terms of knowledge gained. The tutorial delved into topics such as Next.js 13's new App router, Server-Side Rendering (SSR), Server-Side Components, dynamic routes, and more.
This project not only enhanced my understanding of real-time communication features but also provided practical insights into the latest advancements in web development. Looking forward, I am eager to apply these newfound skills to enrich my upcoming projects.
Features ✨
- Real-time messaging, edit, delete, update using Socket.io
- Send attachments as messages using UploadThing
- Create Text, Audio and Video call Channels
- 1:1 conversation, audio & video calls between members
- Member management (Kick, Role change Guest / Moderator)
- 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
- Authentication with Clerk