Discord Clone

Overview

This application is a clone of Discord so this is not intended for commercial use. This monorepo consists of:

• Backend app.
• Web app.
• Database package.
• Models package.
• tsconfig package.
• Utils package.

Visit the website from here.

This project is inspired by this video ❤️

Features

• Login and registration using email and password using Passport.js.
• Backend API for the web app using Express.js.
• Create and join servers with customization like changing server name and image.
• Create and join text, voice, and video channels in the server.
• Send messages in the text channels.
• Send direct messages to mutuals.
• Customize the user's profile by changing your username and profile picture.
• Customize the server's roles and permissions.
• Join voice and video channels and talk with friends using LiveKit.
• Send emojis and attachments in the chat.
• PostgreSQL hosted on neon.tech.
• Redis database hosted on Upstash.
• Infinite scrolling for messages.
• Responsive design for mobile and desktop.
• Light and dark mode using shadcn/ui.
• Websockets for real-time communication.
• Manage server members by kicking and banning them.
• Edit and delete messages.
• Explore featured servers.
• Edit and delete the server's channels.
• Add, edit, and remove channel categories.
• Status indicator for online and offline users.
• Invite and join servers using invite links.

Technologies

• React.js
• Next.js 14
• TypeScript
• shadcn/ui
• Express.js
• Zod
• Tailwind CSS
• Prisma
• PlanetScale
• react-hook-form
• react-toastify
• LiveKit
• Upstash
• Redis
• Socket.IO
• UploadThing
• Passportjs

Prerequisites

- Node v18.17.1

Cloning this repo

Clone the monorepo and navigate to it:

• git clone https://github.com/devkarim/discord-clone.git
• cd discord-clone

Install required packages

This monorepo uses pnpm as a package manager, use the following to install:

pnpm i

Setup .env file

These environment variables are required for the app to work:

# for web
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=

# for backend workspace
NODE_ENV=
PORT=
SESSION_SECRET=
REDIS_DATABASE_URL=

# for database package
DATABASE_URL=

You can check .env.example in each workspace/package for more information.

Start development server

Use this command to start the development servers (Next.js & Express.js) in parallel:

pnpm dev

See also

• Discord Clone Backend
• Discord Clone Web

Author

This project is made by @devkarim.

License

This project is licensed under the MIT License - feel free to explore, modify, and share.