💬 Real-Time Chat Application

A full-stack real-time chat application built using the MERN stack with Socket.io for instant messaging and live user presence tracking.

This project demonstrates real-world backend architecture, authentication, protected routes, REST APIs, and real-time bidirectional communication.

---

🚀 Live Features

• 🔐 JWT Authentication (Signup / Login)
• 💬 Real-time messaging with Socket.io
• 🟢 Online / Offline user status
• 📩 Private one-to-one conversations
• 🧠 Persistent chat history (MongoDB)
• 🔒 Protected API routes
• ⚡ Zustand state management (Frontend)
• 📦 Modular backend architecture (MVC pattern)

---

🛠 Tech Stack

Frontend

• React (Vite)
• Zustand (State Management)
• Axios
• Socket.io-client
• CSS

Backend

• Node.js
• Express.js
• MongoDB + Mongoose
• Socket.io
• JWT (Authentication)
• Middleware-based architecture

---

📂 Project Structure

root/
 ├── backend/
 │   └── src/
 │       ├── controllers/
 │       ├── routes/
 │       ├── models/
 │       ├── middleware/
 │       └── server.js
 │
 ├── frontend/
 │   └── src/
 │       ├── components/
 │       ├── pages/
 │       ├── store/
 │       └── App.jsx

---

⚙️ Installation & Setup

1️⃣ Clone Repository

git clone https://github.com/your-username/chat-app.git
cd chat-app

---

2️⃣ Setup Backend

cd backend
npm install

Create a .env file inside backend folder:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key

Start backend server:

npm run dev

Server runs on:

http://localhost:5000

---

3️⃣ Setup Frontend

Open a new terminal:

cd frontend
npm install
npm run dev

Frontend runs on:

http://localhost:5173

---

🔐 Authentication Flow

• User registers → password hashed → JWT generated
• Token stored in HTTP-only cookie
• Protected routes verify JWT
• Socket authentication middleware validates user before connection

---

📡 Real-Time Communication Flow

1. User connects to Socket.io server
2. Middleware authenticates socket connection
3. Users are stored in online users map
4. Messages emitted to specific user socket ID
5. Message saved to MongoDB
6. Receiver gets real-time update

---

🧠 Learning Outcomes

• Real-time WebSocket communication
• Secure authentication using JWT
• Scalable backend folder architecture
• State management using Zustand
• Middleware chaining in Express
• Linux & Git command practice
• Proper Git workflow (commit, branch, push)

---

🧑‍💻 Author

Shakshyam Pandey B.Tech Student | MERN Stack Developer