💬 ChatVerse

Real-Time MERN Stack Chat Application

A production-grade, full-stack real-time chat application built with the MERN stack and Socket.io. Features one-to-one messaging, group chats, typing indicators, read receipts, online/offline tracking, and a modern dark/light UI.

---

✨ Features

Core Capabilities

• 🔐 JWT Authentication (Secure Register/Login/Session)
• 💬 Direct Messaging (End-to-End Style 1-on-1 private messaging)
• 👥 Group Chats (Create, rename, add/remove members, admin roles)
• ⚡ Real-time Engine (Powered by Socket.io for instantaneous delivery)
• ⌨️ Live Typing Indicators (See when others are typing)
• 🟢 Presence Tracking (Online/offline user status)
• ✅ Read Receipts (Sent, Delivered, Seen markers)

Advanced UX

• 😀 Rich Media & Emojis (Integrated emoji picker)
• 🔔 Smart Notifications (Unread message counts & alerts)
• 📜 Infinite Scroll (Optimized message pagination)
• 🌙 Adaptive Themes (Glassmorphism dark/light mode toggle)
• 🔍 Global Search (Find users seamlessly)
• 🚫 Privacy Controls (Block/Unblock users)
• 👤 Profile Management (Avatars, about status, account deletion)
• 📱 Mobile First (Fully responsive layout across all devices)

---

🛠 Tech Stack

Layer	Technology	Purpose
Frontend	React 18 + Vite	High-performance UI rendering
State	Context API + Hooks	Local state & auth management
Backend	Node.js + Express	Robust REST API architecture
Database	MongoDB + Mongoose	NoSQL flexible data storage
Realtime	Socket.io	Bi-directional event-based communication
Security	JWT + bcrypt	Password hashing & stateless authentication
Styling	Custom Vanilla CSS	Zero-dependency glassmorphism design system

---

📁 Project Architecture

ChatApp MernStack/
├── server/                    # Backend API
│   ├── config/db.js           # Database connection & pooling
│   ├── controllers/           # Business logic & route handlers
│   ├── middleware/             # JWT Auth & error handling pipelines
│   ├── models/                # Mongoose schemas (User, Chat, Message)
│   ├── routes/                # Express API endpoints
│   ├── socket/socketHandler.js # Comprehensive Socket.io events
│   └── server.js              # Application entry point
│
├── client/                    # Frontend SPA (React + Vite)
│   └── src/
│       ├── context/           # AuthContext, ChatContext, SocketContext
│       ├── components/        # Reusable UI (Sidebar, Modals, MessageBubbles)
│       ├── pages/             # Route views (Landing, Login, Register, Dashboard)
│       ├── services/api.js    # Centralized HTTP client wrapper
│       └── index.css          # Global design tokens and utilities
│
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• MongoDB (Local instance or MongoDB Atlas)
• Git

1. Clone the Repository

git clone https://github.com/muhammadumarafzaal/chatverse-realtime-chat.git
cd chatverse-realtime-chat

2. Configure Backend

cd server
npm install

Create a .env file in the server directory:

MONGO_URI=mongodb://127.0.0.1:27017/chatverse
JWT_SECRET=your_super_secret_key_here
PORT=5000
CLIENT_URL=http://localhost:5173

Start the backend server:

npm run dev

3. Configure Frontend

Open a new terminal window:

cd client
npm install
npm run dev

4. Access the Application

Visit http://localhost:5173 in your browser to experience ChatVerse.

---

🔌 Socket.io Event Lifecycle

CLIENT                          SERVER
  │                               │
  ├── connect ──────────────────► │ (Establishes secure WebSocket connection)
  ├── emit("setup", user) ─────► │ → Joins personal user room
  │                               │ → Broadcasts "user online" presence
  │                               │ → Dispatches "online users" list
  │                               │
  ├── emit("join chat", id) ───► │ → Connects client to specific chat room
  │                               │
  ├── emit("new message") ─────► │ → Broadcasts "message received" to room
  │                               │
  ├── emit("typing") ──────────► │ → Broadcasts typing state to room
  ├── emit("stop typing") ─────► │ → Broadcasts stop typing state to room
  │                               │
  ├── emit("message read") ────► │ → Sends "read receipt" back to sender
  │                               │
  ├── disconnect ──────────────► │ → Cleans up rooms & broadcasts "user offline"

---

📝 RESTful API Documentation

Method	Endpoint	Access	Description
POST	/api/auth/register	Public	Register new user
POST	/api/auth/login	Public	Authenticate & get JWT
GET	/api/users?search=	Private	Search global users
GET	/api/users/me	Private	Retrieve current profile
PUT	/api/users/profile	Private	Update profile settings
PUT	/api/users/block/:id	Private	Block a specific user
PUT	/api/users/unblock/:id	Private	Unblock a specific user
GET	/api/chats	Private	Retrieve all user chats
POST	/api/chats	Private	Access/create 1-on-1 chat
POST	/api/chats/group	Private	Create a new group chat
PUT	/api/chats/group/rename	Private	Rename an existing group
PUT	/api/chats/group/add	Private	Add member to group
PUT	/api/chats/group/remove	Private	Remove member/exit group
DELETE	/api/chats/group/:id	Private	Delete group (Admin only)
GET	/api/messages/:chatId	Private	Fetch paginated messages
POST	/api/messages	Private	Dispatch a new message
PUT	/api/messages/read	Private	Update read receipts

---

📜 License & Copyright

Distributed under the MIT License. See LICENSE for more information.

Developed with ♥ by Muhammad Umar Afzaal Portfolio Portfolio Link