Full Stack Discord Clone

This is a repository for Full Stack Discord Clone

🚀 Demo

https://discord-app.up.railway.app/

Project Screenshots:

🧐 Features

Here're some of the project's best 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
• Full responsivity and mobile UI
• Light / Dark mode
• Websocket fallback: Polling with alerts
• ORM using Prisma
• MySQL database using Planetscale
• Authentication with Clerk

💻 Built with

Technologies used in the project:

• Tailwind
• React
• Next.js
• Prisma
• MySQL
• Socket.io
• UploadThing
• ShadcnUI

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-discord-clone.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=


DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=

Setup Prisma

Add MySQL Database (I used PlanetScale)

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

🛡️ License:

This project is licensed under the MIT