Skip to content

README.md

Latest commit

 

History

History
182 lines (151 loc) · 7.93 KB

README.md

File metadata and controls

182 lines (151 loc) · 7.93 KB
Raw

💬 ChatVerse

Real-Time MERN Stack Chat Application

Stars Badge Forks Badge Pull Requests Badge Issues Badge

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