💬 Chatly - Real-Time Chat Application

Chatly is a feature-rich, full-stack real-time chat application built using the MERN stack (MongoDB, Express.js, React.js, Node.js) and Socket.io. It supports secure authentication, real-time 1-on-1 messaging, dynamic group chats, image sharing, audio voice notes, and active presence tracking.

---

🎨 Design & Preview

Chatly features a modern, responsive, and vibrant UI powered by Tailwind CSS. The desktop interface provides a split sidebar layout (chats vs. groups), and transitioning to mobile dynamically scales down to a clean, focus-oriented message drawer.

---

🧩 Tech Stack

Frontend

• ⚛️ React (Vite) – Component-based SPA framework
• 🎨 Tailwind CSS – Styling and responsive utility design
• 🔁 Redux Toolkit – Centralized state management (users, groups, active messages, online status)
• 🔌 Socket.io Client – Persistent WebSockets connection layer
• 😀 Emoji Picker React – Seamless emoji integrations

Backend

• 🧠 Node.js + Express.js – Server framework and REST API endpoints
• 🗄️ MongoDB + Mongoose – NoSQL database schema representation and query ODM
• ☁️ Cloudinary – Cloud media storage for image and audio payloads
• 🧱 Multer – Handles multipart form-data parsing on uploads
• 🔒 Bcrypt.js – Secure password hashing logic
• 🧩 CORS & Cookie-Parser – Secure cross-origin requests and token cookie handling

---

🚀 Key Features

• 🔐 Secure JWT Auth: User register, login, and profile modification with password hashing and cookies.
• 💬 Real-time 1-on-1 Chat: Instant messaging powered by WebSockets.
• 👥 Group Chats:
  • Dynamic group creation selecting multiple members from active users.
  • Participant Header Viewer: Lists participants under the group title.
  • Interactive Members Modal: Clicking the header reveals a detailed modal of group members, highlighting the group admin and current user.
• 🟢 Presence system: Live online user indicator badges.
• 🖼️ Image & Media Sharing: Upload images directly into the chat stream.
• 🎙️ Voice Messaging: Record audio clips directly in-app and send them instantly to other users.
• 🗑️ Chat Cleaners: Delete/clear chat history for both individual and group conversations.

---

🧱 Project Architecture & Flows

High-level Flow

graph TD
    Client[React Client SPA] <-->|HTTP REST / Cookies| API[Express API Gateway]
    Client <-->|WebSockets / Socket.io| SocketSrv[Socket.io Server]
    API -->|Mongoose ODM| DB[(MongoDB Database)]
    API -->|Uploads| Cloudinary[Cloudinary Media Service]
    SocketSrv <-->|Reads/Writes Online Map| MemoryCache[In-Memory UserSocket Map]

Loading

⚡ Socket.io Real-Time Synchronization

1. Initiation: On user login, the client establishes a persistent connection to the server passing the userId in the socket query parameters.
2. Presence Tracking: The server maps the userId to its active socket.id inside a memory dictionary (userSocketMap) and immediately broadcasts the updated getOnlineUsers list to all connected clients.
3. Dispatching Message Events:
   • For 1-on-1 messages: The backend looks up the recipient's socket.id and emits a newMessage event exclusively to them.
   • For Group messages: The backend traverses all group participant IDs, retrieves their active socket IDs, and emits a newMessage event to each member.
4. Disconnection: When a socket disconnects, their ID is removed from the memory map and a fresh online list is sent out.

---

📂 Project Structure

├── backend/
│   ├── config/             # DB connection & Cloudinary setup
│   ├── controllers/        # Express handlers (auth, messages, user groups)
│   ├── middlewares/        # JWT Authentication, Multer file upload filters
│   ├── models/             # Mongoose DB Schemas
│   ├── routes/             # API Endpoint Routing
│   ├── socket/             # Socket.io connection handlers and socket map
│   └── index.js            # Main backend entry point
└── frontend/
    └── src/
        ├── assets/         # Static assets and images
        ├── components/     # UI Components (MessageArea, Sidebar, message cells)
        ├── customHooks/    # Reusable API fetch wrappers (groups list)
        ├── pages/          # App Pages (Home, Login, Register, Profile)
        ├── redux/          # Redux Toolkit global store and slices
        └── main.jsx        # Frontend entry point

---

📘 Data Schema Blueprint

🧑 User Model (User)

{
  name: String,
  userName: { type: String, unique: true },
  email: { type: String, unique: true },
  password: { type: String, required: true },
  image: { type: String, default: "" }
}

💬 Message Model (Message)

{
  sender: { type: ObjectId, ref: "User" },
  receiver: { type: ObjectId, ref: "User" }, // omitted for group messages
  conversationId: { type: ObjectId, ref: "Conversation" }, // populated for group messages
  message: { type: String, default: "" },
  image: { type: String, default: "" },
  audio: { type: String, default: "" }
}

🗨️ Conversation Model (Conversation)

Note: The participants field is named partcipants (missing the first 'i') within the schema.

{
  partcipants: [{ type: ObjectId, ref: "User" }],
  messages: [{ type: ObjectId, ref: "Message" }],
  isGroup: { type: Boolean, default: false },
  groupName: { type: String, default: "" },
  groupAdmin: { type: ObjectId, ref: "User" },
  groupImage: { type: String, default: "" }
}

---

⚙️ Setup & Installation

Prerequisites

• Node.js installed locally.
• MongoDB Instance (Local or MongoDB Atlas connection URL).
• Cloudinary Account (for media uploads).

1. Clone the repository

git clone https://github.com/Samagra12725/RealTimeChatApp.git
cd RealTimeChatApp

2. Configure Environment Variables

Create a .env file in the backend/ folder:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_signing_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

3. Run Backend Server

cd backend
npm install
npm run dev # Launches server on port 5000

4. Run Frontend App

cd ../frontend
npm install
npm run dev # Launches dev server on port 5173

---

👨‍💻 Author

Samagra Jaiswal

• Software Developer | MERN Stack Specialist
• GitHub: @Samagra12725