🎮 Discord

📖 About The Project

Discord is a modern, feature-packed, real-time chat application built with Next.js, TypeScript, Prisma, and TailwindCSS. This project simulates a Discord-like environment, allowing users to create and join servers, participate in text and voice channels, share media, and manage servers, all in real-time.

With integrations like Clerk for authentication and LiveKit for media communication, Be-A-Guptaji Discord ensures that all real-time interactions (text, voice, video) are secure and scalable. It is designed for developers and community managers who want to create and manage online communities with ease.

✨ Key Features

🔑 Clerk Authentication: Secure login, sign-up, and session management.
🗣 Real-Time Messaging: Instant communication via WebSocket.
⚙️ Server & Channel Management: Create, manage, and organize servers and channels.
📁 File Uploads: Upload and share files in various channels.
🎥 Media Rooms: Audio and video communication with LiveKit.
🖼 Dynamic User Interface: Built with TailwindCSS to ensure a modern and responsive layout.
💬 Text Chat: Full-featured chat interface with emoji support, file sharing, and more.
🔐 User Management: Assign roles, create private channels, and control server access.

📸 Screenshots

Sign-In Page

Sign-In

Create New Server

Server DashBoard

Real Time Chatting

Audio Room

Video Room

Create New Channel

Search

Server Action

Members List

🏗️ Architecture

The application architecture is designed for modularity, scalability, and performance. The architecture follows a client-server model, which is broken down as follows:

Frontend (Next.js + TailwindCSS):
- Handles rendering of UI components like the server dashboard, chat rooms, and media room interfaces.
- Manages client-side routing with dynamic route handling for each server.
- Implements state management via Zustand to manage app-level state.
Backend (Next.js API Routes):
- Handles real-time WebSocket communication and provides REST API routes for server management.
- Processes requests for creating and managing servers, channels, and messages.
Authentication (Clerk):
- Ensures secure user authentication with features like social login (Google, GitHub), email-based sign-up, and session management.
Database (Prisma + PostgreSQL):
- Stores user data, server information, channels, messages, roles, and more using Prisma ORM connected to PostgreSQL.
Real-Time Communication (LiveKit):
- Manages real-time audio and video communication in media rooms (video chat).

graph TD
    %% ==============================
    %% CLIENT LAYER
    %% ==============================
    subgraph Client
    U[🖥️ User Browser] --> F[💻 Next.js Frontend]
    end

    %% ==============================
    %% BACKEND & API
    %% ==============================
    subgraph Backend
    F --> API[⚙️ Next.js API Routes]
    API --> DB[(🗄️ PostgreSQL via Prisma)]
    API --> WebSocket[🔗 Real-Time WebSocket]
    end

    %% ==============================
    %% AUTHENTICATION
    %% ==============================
    subgraph Authentication
    F --> Clerk[🔐 Clerk Authentication Service]
    Clerk -->|✅ Authenticate User| U
    end

    %% ==============================
    %% MEDIA SERVICES
    %% ==============================
    subgraph Services
    API --> LS[🎥 LiveKit - Video/Audio Communication]
    end

    %% ==============================
    %% FILE UPLOAD SERVICE
    %% ==============================
    subgraph FileUpload
    API --> Uploadthing[📤 Uploadthing - File Upload Service]
    end

    %% ==============================
    %% FLOWS & INTERACTIONS
    %% ==============================
    U -->|🔑 Login| Clerk
    Clerk -->|🔖 Session Token| F
    U -->|📡 Join Server| API
    API -->|📂 Retrieve Data| DB
    API -->|💬 Send/Receive Real-Time Messages| WebSocket
    API -->|🎧 Join Media Call| LS
    LS -->|📺 Real-Time Media Streaming| U
    API -->|📤 File Upload| Uploadthing
    Uploadthing -->|💾 Store Files| DB

    %% ==============================
    %% COLOR STYLING
    %% ==============================
    classDef client fill:#6ac6b7,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef backend fill:#f1a4cb,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef auth fill:#92f6c5,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef db fill:#f1e1a4,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef ws fill:#92d0f9,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef services fill:#82c7f9,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef upload fill:#ffbcab,stroke:#000,stroke-width:2px,color:#000,font-weight:bold;
    classDef user fill:#5c89b0,stroke:#000,stroke-width:2px,color:#fff,font-weight:bold;

    %% Apply Classes
    class U user;
    class F client;
    class API backend;
    class DB db;
    class WebSocket ws;
    class Clerk auth;
    class LS services;
    class Uploadthing upload;

🛠 Built With

Frontend: Next.js 15, TypeScript, TailwindCSS
Backend: Prisma ORM, PostgreSQL
Authentication: Clerk
Real-Time Communication: WebSocket, LiveKit
State Management: Zustand
File Uploads: Uploadthing

⚙️ Getting Started

Prerequisites

Make sure you have the following installed:

Node.js 18+
PostgreSQL (for database)
Clerk API Key (for user authentication)
LiveKit API Key (for real-time media rooms)

Installation

Clone the repository:

git clone https://github.com/username/be-a-guptaji-discord.git
cd be-a-guptaji-discord

Install the dependencies:

npm install

Configure environment variables:

Create a .env.local file and set the following variables:

DATABASE_URL=your_postgres_connection_string
CLERK_API_KEY=your_clerk_api_key
LIVEKIT_API_KEY=your_livekit_api_key

Set up the database:

Install Prisma and apply the migrations to set up your database.

npm install prisma --save-dev
npx prisma init
npx prisma migrate dev
npx prisma generate

Run the application:

npm run dev

Visit http://localhost:3000 to interact with the application.

📁 Directory Structure

The project is organized as follows:

Directory structure:
└──  discord/
    ├── README.md
    ├── components.json
    ├── eslint.config.mjs
    ├── LICENSE
    ├── middleware.ts
    ├── next.config.ts
    ├── package.json
    ├── postcss.config.mjs
    ├── tsconfig.json
    ├── types.ts
    ├── .env.samples
    ├── .prettierignore
    ├── .prettierrc.json
    ├── app/
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── not-found.tsx
    │   ├── (auth)/
    │   │   ├── layout.tsx
    │   │   └── (routes)/
    │   │       ├── sign-in/
    │   │       │   └── [[...sign-in]]/
    │   │       │       └── page.tsx
    │   │       └── sign-up/
    │   │           └── [[...sign-up]]/
    │   │               └── page.tsx
    │   ├── (invite)/
    │   │   └── (routes)/
    │   │       └── invite/
    │   │           └── [inviteCode]/
    │   │               └── page.tsx
    │   ├── (main)/
    │   │   ├── layout.tsx
    │   │   └── (routes)/
    │   │       └── server/
    │   │           └── [serverID]/
    │   │               ├── layout.tsx
    │   │               ├── page.tsx
    │   │               ├── channel/
    │   │               │   └── [channelID]/
    │   │               │       └── page.tsx
    │   │               └── conversation/
    │   │                   └── [memberID]/
    │   │                       └── page.tsx
    │   ├── (setup)/
    │   │   └── page.tsx
    │   └── api/
    │       ├── channels/
    │       │   ├── route.ts
    │       │   └── [channelID]/
    │       │       └── route.ts
    │       ├── directMessages/
    │       │   └── route.ts
    │       ├── members/
    │       │   └── [memberID]/
    │       │       └── route.ts
    │       ├── messages/
    │       │   └── route.ts
    │       ├── servers/
    │       │   ├── route.ts
    │       │   └── [serverID]/
    │       │       ├── route.ts
    │       │       ├── invite-code/
    │       │       │   └── route.ts
    │       │       └── leave/
    │       │           └── route.ts
    │       ├──

Discord

Install / Use

README