https://github.com/rendy752/discord-clone
A Discord Clone that includes chat features, text, voice, video channels, user authentication using Clerk, and web socket for real-time chat
https://github.com/rendy752/discord-clone
axios clerk clsx emoji-picker eslint livekit lucide-react nextjs14 prisma query-string radix-ui socket-io socket-io-client tailwind tanstack-react-query typescript uploadthing websocket zod
Last synced: 2 months ago
JSON representation
A Discord Clone that includes chat features, text, voice, video channels, user authentication using Clerk, and web socket for real-time chat
- Host: GitHub
- URL: https://github.com/rendy752/discord-clone
- Owner: Rendy752
- Created: 2024-02-09T02:05:03.000Z (about 2 years ago)
- Default Branch: production
- Last Pushed: 2024-07-28T15:06:18.000Z (over 1 year ago)
- Last Synced: 2025-02-03T08:46:50.916Z (about 1 year ago)
- Topics: axios, clerk, clsx, emoji-picker, eslint, livekit, lucide-react, nextjs14, prisma, query-string, radix-ui, socket-io, socket-io-client, tailwind, tanstack-react-query, typescript, uploadthing, websocket, zod
- Language: TypeScript
- Homepage: https://rendyp-discord.vercel.app
- Size: 331 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Discord Clone :speech_balloon:
---
[](LICENSE)
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
---
## Overview
Welcome to **Discord Clone**, a feature-rich replication of the popular Discord chat application built with **[Next.js](https://nextjs.org/)**. This project delivers a modern, real-time communication platform where users can create servers, manage channels, send messages, and engage in video/audio calls. Styled with **[Tailwind CSS](https://tailwindcss.com/)** and powered by a robust tech stack, it offers a seamless and responsive user experience.
---
## Features
- **User Authentication**: Secure login and profile management using [Clerk](https://clerk.com/).
- **Server Management**:
- Create, edit, and leave or delete servers as needed.
- Generate unique invite codes to add members.
- **Channel Management**:
- Create, edit, and delete channels (text, audio, video).
- Organize channels by type for efficient navigation.
- **Real-Time Messaging**:
- Send, edit, and delete messages in channels or direct messages.
- Real-time updates with [Socket.IO](https://socket.io/).
- Typing indicators to show active users.
- **Media Sharing**:
- Upload and share images and PDFs via [UploadThing](https://uploadthing.com/).
- Preview media directly in chats.
- **Video and Audio Rooms**:
- Real-time audio and video communication powered by [LiveKit](https://livekit.io/).
- **Member Management**:
- Assign roles (Admin, Moderator, Guest).
- Kick members from servers.
- **Direct Messaging**:
- One-on-one chats with real-time messaging support.
- **UI Enhancements**:
- Dark/light mode toggle with [Next Themes](https://github.com/pacocoursey/next-themes).
- Emoji picker for expressive messaging.
- Fully responsive design with Tailwind CSS.
- **State Management**:
- Efficient data fetching with [Tanstack Query](https://tanstack.com/query).
- Client-side state management with [Zustand](https://github.com/pmndrs/zustand).
Click to see feature details
- **Authentication Flow**: Users sign in with Clerk, creating a profile linked to a unique `userId`.
- **Real-Time Sync**: Socket.IO ensures messages and typing indicators are updated instantly across all connected clients.
- **Media Handling**: UploadThing supports file uploads up to 8MB for images and 4MB for PDFs, with automatic deletion on message removal.
- **Video Rooms**: LiveKit provides low-latency audio/video streams with customizable permissions.
---
## Tech Stack
| **Category** | **Technology** | **Version/Notes** |
|-----------------------|---------------------------------------------|------------------------------------|
| **Framework** | Next.js | 14.1.0 (SSR/SSG) |
| **Language** | TypeScript | 5.x (type-safe) |
| **Styling** | Tailwind CSS | 3.3.0 (with custom animations) |
| **Authentication** | Clerk | Latest (secure auth/profiles) |
| **Database** | CockroachDB with Prisma | Latest (ORM) |
| **Real-Time** | Socket.IO | 4.7.5 (messaging/events) |
| **Video/Audio** | LiveKit | Latest (real-time comms) |
| **File Uploads** | UploadThing | 6.3.3 (image/PDF uploads) |
| **State Management** | Tanstack Query, Zustand | Query: 5.29.2, Zustand: 4.5.2 |
| **UI Components** | Radix UI, Lucide React, Framer Motion | Latest (accessible/animated) |
| **Form Handling** | React Hook Form with Zod | Hook Form: 7.50.1, Zod: 3.22.4 |
| **Emoji Support** | Emoji Mart | 5.5.2 (emoji picker) |
| **Notifications** | Browser Notification API | Native browser support |
| **Utilities** | Axios, Class Variance Authority, etc. | Axios: 1.6.8, etc. (various) |
---
## Project Structure
The project is modularly organized for scalability and maintainability. Below is a detailed breakdown:
- **`app/`**:
- Root directory for Next.js pages and layouts.
- Subdirectories:
- `(auth)/`: Authentication routes (e.g., login flows).
- `(routes)/`: Route-specific files (e.g., `invite/[inviteCode]/page.tsx`).
- `(main)/(routes)/servers/[serverId]/`: Server-specific routes and layouts.
- `layout.tsx`: Global layout component.
- `page.tsx`: Default homepage.
- **`components/`**:
- Reusable UI components.
- Subdirectories:
- `chat/`: Chat-related components (e.g., `chat-header.tsx`, `chat-input.tsx`, `chat-messages.tsx`).
- Other files: `chat-video-button.tsx`, `chat-welcome.tsx`, etc.
- **`modals/`**:
- Modal components for actions like server/channel management.
- Examples: `create-channel-modal.tsx`, `delete-message-modal.tsx`, `invite-modal.tsx`.
- **`server/`**:
- Server-side logic and API routes.
- Files: `server-channel.tsx`, `server-header.tsx`, `server-member.tsx`, etc.
- Subdirectory: `ui/` (e.g., `emoji-picker.tsx`, `file-upload.tsx`).
- **`ui/`**:
- Shared UI utilities and components.
- Examples: `action-tooltip.tsx`, `theme-toggle.tsx`, `user-avatar.tsx`.
- **`hooks/`**:
- Custom React hooks for functionality (e.g., chat, state management).
- **`lib/`**:
- Utility functions and configurations.
- Files: `current-profile.ts`, `db.ts`, `use-origin.ts`.
- **`prisma/`**:
- Prisma schema and database configurations.
- File: `schema.prisma` (defines models like `Profile`, `Server`, `Channel`).
- **`public/`**:
- Static assets (e.g., images, fonts).
---
## Getting Started
### Prerequisites
- Node.js (v18 or later)
- npm or yarn
- CockroachDB instance
- Clerk, LiveKit, and UploadThing API keys
### Installation
1. **Clone the Repository**:
```bash
git clone https://github.com/yourusername/discord-clone.git
cd discord-clone
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Set Up Environment Variables**:
Create a `.env` file in the root directory and add:
```
DATABASE_URL="your-cockroachdb-connection-string"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-publishable-key"
CLERK_SECRET_KEY="your-clerk-secret-key"
LIVEKIT_API_KEY="your-livekit-api-key"
LIVEKIT_API_SECRET="your-livekit-secret-key"
NEXT_PUBLIC_LIVEKIT_URL="your-livekit-url"
```
4. **Generate Prisma Client**:
```bash
npx prisma generate
```
5. **Run the Development Server**:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
6. **Build for Production**:
```bash
npm run build
npm start
```
---
## Contributing
We welcome contributions! Follow these steps:
1. Fork the repository.
2. Create a feature branch (`git checkout -b feature-name`).
3. Commit your changes (`git commit -m "Add feature-name"`).
4. Push to the branch (`git push origin feature-name`).
5. Open a pull request.
Ensure code adheres to the existing style and include tests for new features.
---
## License
This project is licensed under the **[MIT License](LICENSE)**. See the `LICENSE` file for details.
---
*Last updated: 03:54 PM WIB, Saturday, May 24, 2025*