Responsive Nextjs Discord clone with Livekit 🚀

Create servers, manage roles, and chat in real-time with WebSocket and React-Query. Enjoy audio/video calls with LiveKit, and handle files with UploadThing. Powered by Clerk for auth, Neon.tech for the database, and Prisma ORM.

Demo currently not avaliable because of the cost of third-party tools · Documentation · Report Bug · Request Feature

Features

1. Server and Channel Creation:

   • Users can create and manage multiple servers and channels, providing a flexible structure for communication.

2. Member Management:

   • Server admins and moderators can manage members, including changing roles, kicking users, and inviting others to join the server.

3. Real-Time Text Chat:

   • Implemented a WebSocket-based real-time chat system with React-Query, allowing users to send, edit, and delete messages.

4. File and Image Uploads:

   • Users can upload and share pictures and files within channels and direct messages.

5. Audio and Video Chat:

   • Integrated audio and video communication within server channels and direct messages using LiveKit.

6. Clerk Authentication:

   • Secure authentication using Clerk, supporting multiple authentication methods for users.

7. File Management with UploadThing:

   • Efficient file management and storage using UploadThing, ensuring a seamless experience for handling user uploads.

8. Database Powered by Neon.tech:

   • Utilizes Neon.tech for a scalable and performant database, with Prisma as the ORM for efficient data management.

Installation

• Clone the repository:

  git clone https://github.com/TsotnePharsenadze/Discord-react-nextjs-typescript

• Navigate to the project directory:

  cd discord

• Install the dependencies:

  npm install

• Create .env file and setup all the neccessary env variables (Project uses NeonDb, UploadThing, ClerkJs and LiveKit as a third party db and SaaS)

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/

DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=

• Set up Neon.tech and generate/push Prisma models:

  1. Open new terminal and exec npx prisma generate
  2. then npx prisma db push

Usage

• Start the development server:

  npm run dev

• Open your browser and visit http://localhost:3000 to access the application.

📷 Screenshots

Contributing

Contributions are welcome! If you want to contribute to this project, please follow these steps:

• Fork the repository.
• Create a new branch for your feature or bug fix.
• Commit your changes to the new branch.
• Open a pull request back to the main repository, including a description of your changes.