Discord Clone

It is a study project based on Discord app built with Next.js 14, React, Tailwind, shadcn/ui, Clerk, uploadthing, Prisma, PostgreSQL, Socket.io, LiveKit.

Features

• Designed using tailwind & shadcn
• Automatic / Light / Dark theme modes
• ORM using Prisma
• PostgreSQL database
• Authentication with Clerk
• Real-time messaging using Socket.io
• Server creation & customization
• Invite system with unique invite link generation
• Create Text, Audio chat channels
• Member management (Kick, User role change Guest / Moderator)
• Send attachments as messages using UploadThing
• Delete & Edit messages in real time for all users
• Infinite loading for messages in batches of 15 with @tanstack/query
• 1:1 conversation and audio calls between members
• Websocket fallback: Polling with alerts

Installation

1) Clone repository

$ git clone https://github.com/berkanumutlu/discord-clone.git

Or with SSH

$ git clone [email protected]:berkanumutlu/discord-clone.git

Or with Github CLI

$ git clone gh repo clone berkanumutlu/discord-clone

2) Copy the example.env file and make the required configuration changes in the file

$ cp .env.example .env

3) Install docker container (required docker)

$ docker-compose up -d

4) After installation, find your app's container id on docker

$ docker ps

# Output:
CONTAINER ID   IMAGE                 COMMAND                  CREATED      STATUS          PORTS                              NAMES
...
4e98c27c070a   discord-clone-app     "docker-entrypoint.s…"   7 days ago   Up 15 seconds   0.0.0.0:3000->3000/tcp, 5555/tcp   discord-clone-app
...

• And connect to the terminal of your app's container

$ docker exec -it {APP_CONTAINER_ID} bash

5) Install all the dependencies using npm

/user/local/app $ npm install

6) Setup Prisma

/user/local/app $ npx prisma generate
/user/local/app $ npx prisma db push

7) Restart your docker container

$ docker-compose restart

8) Now you're ready to use project

• To stop the Docker container, use the following command

$ docker-compose stop

Screenshots

• Home Page

  

• Login page & Initial page

  

• Text channel

  

• Voice chat

  

• Create server

  

• Create channel

  

• Invite to server

  

• Manage server members

  

• Search in server

  

• User conversations

  

License

This is a study project based on Discord app so they own the licence.