https://github.com/tsotnepharsenadze/discord-react-nextjs-typescript
Discord clone built using: React, Next.js, TailwindCSS, Clerk, Zustand, LiveKit, WebSocket, UploadThing, Typescript and Prisma.
https://github.com/tsotnepharsenadze/discord-react-nextjs-typescript
clerk livekit nextjs15 prisma react tailwindcss typescript uploadthing websocket zustand
Last synced: about 2 months ago
JSON representation
Discord clone built using: React, Next.js, TailwindCSS, Clerk, Zustand, LiveKit, WebSocket, UploadThing, Typescript and Prisma.
- Host: GitHub
- URL: https://github.com/tsotnepharsenadze/discord-react-nextjs-typescript
- Owner: TsotnePharsenadze
- Created: 2024-09-30T16:05:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-23T13:49:13.000Z (11 months ago)
- Last Synced: 2025-04-06T15:47:06.032Z (6 months ago)
- Topics: clerk, livekit, nextjs15, prisma, react, tailwindcss, typescript, uploadthing, websocket, zustand
- Language: TypeScript
- Homepage:
- Size: 4.11 MB
- Stars: 13
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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:
```bash
git clone https://github.com/TsotnePharsenadze/Discord-react-nextjs-typescript
```
- Navigate to the project directory:
```bash
cd discord
```
- Install the dependencies:
```bash
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:
```bash
npm run dev
```
- Open your browser and visit `http://localhost:3000` to access the application.
## :camera: 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.