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

Discord Clone with Next.js 14, React, Socket.io, LiveKit, Tailwind, Clerk, uploadthing, Prisma, PostgreSQL
https://github.com/berkanumutlu/discord-clone

clerk discord discord-clone livekit next nextjs postgresql prisma react real-time-app real-time-chat real-time-messaging shadcn socket socket-io socketio tailwind uploadthing voice-chat voice-chat-app

Last synced: about 2 months ago
JSON representation

Discord Clone with Next.js 14, React, Socket.io, LiveKit, Tailwind, Clerk, uploadthing, Prisma, PostgreSQL

Host: GitHub
URL: https://github.com/berkanumutlu/discord-clone
Owner: berkanumutlu
Created: 2024-10-18T12:22:47.000Z (8 months ago)
Default Branch: master
Last Pushed: 2024-12-06T15:48:10.000Z (6 months ago)
Last Synced: 2025-03-24T22:51:12.914Z (2 months ago)
Topics: clerk, discord, discord-clone, livekit, next, nextjs, postgresql, prisma, react, real-time-app, real-time-chat, real-time-messaging, shadcn, socket, socket-io, socketio, tailwind, uploadthing, voice-chat, voice-chat-app
Language: TypeScript
Homepage:
Size: 3.16 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 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

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

Or with SSH

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

Or with Github CLI

```shell
$ git clone gh repo clone berkanumutlu/discord-clone
```

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

```shell
$ cp .env.example .env
```

**3)** Install docker container (required docker)

```shell
$ docker-compose up -d
```

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

```shell
$ 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

```shell
$ docker exec -it {APP_CONTAINER_ID} bash
```

**5)** Install all the dependencies using npm

```shell
/user/local/app $ npm install
```

**6)** Setup Prisma

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

**7)** Restart your docker container

```shell
$ docker-compose restart
```

**8)** Now you're ready to use project

- To stop the Docker container, use the following command

```shell
$ docker-compose stop
```

## Screenshots