Discord Clone 💬

---

---

Overview

Welcome to Discord Clone, a feature-rich replication of the popular Discord chat application built with Next.js. 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 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.
• 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.
  • Typing indicators to show active users.
• Media Sharing:
  • Upload and share images and PDFs via UploadThing.
  • Preview media directly in chats.
• Video and Audio Rooms:
  • Real-time audio and video communication powered by LiveKit.
• 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.
  • Client-side state management with 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:

   git clone https://github.com/yourusername/discord-clone.git
   cd discord-clone

2. Install Dependencies:

   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:

   npx prisma generate

5. Run the Development Server:

   npm run dev

   Open http://localhost:3000 in your browser.

6. Build for Production:

   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. See the LICENSE file for details.

---

Last updated: 03:54 PM WIB, Saturday, May 24, 2025