DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

Discord Clone web application using Next.js, Socket.io and Tailwind CSS

Fullstack Discord Clone 🚀

Description:

Discord Clone web application using Next.js, Socket.io and Tailwind CSS

The Discord Clone Project is an immersive full-stack web application designed for real-time communication and collaboration within online communities. Developed using cutting-edge technologies such as Next.js 14, React, Socket.io, Prisma, TailwindCSS, and MySQL, this clone provides a dynamic and responsive platform for users to engage seamlessly. From instant messaging with Socket.io to multimedia channels and 1:1 video calls, the Discord Clone delivers a comprehensive communication experience.

🌐 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
  • Fully responsivity and mobile UI
  • Light / Dark mode
  • Websocket fallback: Polling with alerts
  • ORM using Prisma
  • MySQL database using Railway
  • Authentication with Clerk

Working Videos

Server

<path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
Enter fullscreen mode Exit fullscreen mode

bandicam.2023-12-27.23-07-01-591.mp4

Live chat in channel

<path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
Enter fullscreen mode Exit fullscreen mode

bandicam.2023-12-27.23-11-44-843.mp4

Direct chat with user and video call

<path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
Enter fullscreen mode Exit fullscreen mode

bandicam.2023-12-27.23-16-38-910.mp4

search users, channels and infinite loading

<path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
Enter fullscreen mode Exit fullscreen mode

bandicam.2023-12-27.23-26-08-845.mp4

Deployed on Railway.app

Dicord Clone

Stay Connected:

Follow me on LinkedIn Prayansh Parmar for updates and announcements.

Happy Chatting! 📝✨

GitHub

View Github

Top comments (0)