Real-Time Chat Application (IRC Clone)

A modern, real-time chat application built with Next.js, WebSockets, and MongoDB. This application features secure user authentication via Clerk, a custom WebSocket backend for low-latency messaging, and a sleek user interface using Tailwind CSS and shadcn/ui.

✨ Features

• Real-Time Messaging: Instant message delivery using a custom ws WebSocket backend.
• Secure Authentication: User signup, login, and session management powered by Clerk.
• Persistent Chat History: Messages and room metadata are securely stored in MongoDB.
• Private Rooms: Support for creating and joining private chat rooms (up to 2 participants per room).
• Modern UI: Clean, responsive design built with Tailwind CSS, Next Themes (Light/Dark mode), and Radix UI.
• Type-Safe: Written in TypeScript for robust and reliable code.

🛠️ Tech Stack

• Frontend: Next.js 15+, React 19, Tailwind CSS, shadcn/ui
• Backend: Next.js API Routes, custom ws WebSocket Server (port 3001)
• Database: MongoDB & Mongoose
• Authentication: Clerk
• Real-time: ws (WebSocket)

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v20+ recommended)
• npm, yarn, pnpm, or bun
• A MongoDB cluster (e.g., MongoDB Atlas)
• A Clerk account and project

🚀 Getting Started

1. Clone the repository

git clone <repository-url>
cd irc

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env file in the root directory and add the necessary keys.

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

# MongoDB
MONGO_URI=your_mongodb_connection_string

# WebSocket
NEXT_PUBLIC_WS_URL=ws://localhost:3001

4. Run the Development Server

This project uses concurrently to seamlessly run both the Next.js frontend server and the WebSocket backend simultaneously.

npm run dev:all

Alternatively, you can run them in separate terminals:

• Next.js Client: npm run dev
• WebSocket Server: npm run ws

5. Open the Application

Navigate to http://localhost:3000 in your browser to see the application running.

📂 Project Structure briefly explained

• /src/app/: Next.js frontend pages, application layouts, and app API routes.
• /src/components/: Reusable React components, providers, and shadcn/ui elements.
• /src/lib/: Shared utility functions.
• /src/models/: Mongoose schemas representing database collections (e.g., Rooms, Messages).
• /src/server/: The standalone WebSocket server code (websocket.ts).
• /src/dbConfig/: MongoDB connection setup routines.

📝 Available Scripts

• npm run dev - Starts the Next.js development server.
• npm run ws - Starts the standalone WebSocket server using tsx.
• npm run dev:all - Starts both the Next.js and WebSocket development servers concurrently.
• npm run build - Builds the application for production.
• npm start - Starts the Next.js production application.
• npm run lint - Lints the codebase using ESLint.