DISCORD CLONE

This project is an Discord Clone that is build using the Next.js , React Js , Typescript and Tailwind css. It has the features of real time direct messaging, real time audio and video call, attaching files in the DM, member management, server creation, inviting members to the channel and some other features.

Screencast.from.2024-09-11.06-44-25.mp4

Tech Stacks

• Frontend: Next.js, React.js, TypeScript
• UI Libraries: ShadCN UI, Tailwind CSS
• Login Authentication: Clerk Authentication
• Image/PDF Upload: Uploadthing
• ORM: Prisma (with support for MySQL, PostgreSQL, etc.)
• Database: MySQL (using Aiven Cloud)
• Real-time Messaging: Socket.io
• Audio/Video Calls: Livekit
• Web Deployment: Railway

Key Features

• Real-time messaging using Socket.io
• Send attachments as messages using UploadThing
• Full responsivity and mobile UI
• Light/Dark mode
• Websocket fallback: Polling with alerts
• ORM using Prisma
• MySQL database using Aiven Cloud
• Authentication with Clerk
• Member management (Kick, Role change Guest/Moderator)
• Delete & edit messages in real-time for all users
• Server creation and customization
• Beautiful UI using Tailwind CSS and ShadcnUI
• Create text, audio, and video call channels
• 1:1 conversation between members
• 1:1 video calls between members
• Unique invite link generation & full working invite system
• Infinite loading for messages in batches of 10 (@tanstack/query)
• Audio/Video call: Livekit
• Web deployment: Railway

Demo Image

To view the webpage images, navigate to Output_Images

Project Details

• Operating System - Windows 10
• Cloud Platform - Aiven cloud for MySQL Database
• Contribution - Individual
• Duration - 1-2 months

Deployment Link

https://discord-clone

Learning Experience

This project helps me to acquire knowledge on developing an complete web and higher level application. I developed expertise in style and UI development and mastered using Git and GitHub for version control.

Getting Started

1. Clone the repository:

   git clone https://github.com/PRIYANKAec/Discord-clone.git

2. Navigate to the project directory and install dependencies:

   cd Discord-clone
   npm install

3. Update the environment variables with your credentials.

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 with your browser to see the result.

Feel free to explore the project and contribute to its development!

MIT License