kaiqianyyang / discord-clone

A clone of discord application

Discord Clone

This is a repository for Fullstack Discord Clone implemented with Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL.

The live url: https://discord-clone-production-0cac.up.railway.app

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Run
3. Features

About The Project

Built With

• Next.js 13
• React
• Socket.io
• Prisma
• Tailwind
• MySQL
• Shadcn

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Node version 18.x.x

Installation

1. Clone the repo

   git clone https://github.com/github_username/repo_name.git

2. Install NPM packages

   npm install

3. 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=

4. Setup Prisma

   // initiate and update database
   npx prisma migrate reset
   npx prisma generate
   npx prisma db push
   
   // check database
   npx prisma studio 

Run the App

npm run dev

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

(back to top)