💬 Chat App (Full Stack MERN)

A real-time full‑stack chat application built using React, Node.js, Express, MongoDB, Socket.IO, and Zustand. This project focuses on real‑world concepts like authentication, real‑time messaging, global state management, and production‑ready frontend + backend integration.

---

🚀 Features

• 🔐 User Authentication (Signup / Login)
• 💬 Real‑time Messaging using Socket.IO
• 👥 One‑to‑One Chat Support
• 🟢 Online / Offline User Status
• 🌐 Global State Management with Zustand
• 📦 MongoDB for Data Persistence
• ⚡ Modern React Frontend (Vite)
• 📁 Production‑ready build with Express serving frontend

---

🛠️ Tech Stack

Frontend

• React (Vite)
• Zustand (Global State)
• CSS / Modern UI

Backend

• Node.js
• Express.js
• MongoDB + Mongoose
• Socket.IO
• JWT Authentication

---

📂 Project Structure

ChatAPP/
│
├── back_end/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── server.js
│   └── socket/
│
├── front_end/
│   ├── src/
│   ├── dist/          # Production build
│   ├── vite.config.js
│   └── package.json
│
├── .env
├── package.json
└── README.md

---

⚙️ Environment Variables

Create a .env file in the root directory and add:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

---

🧑‍💻 Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/manishsuhtar01/chat_app.git
cd ChatAPP

---

2️⃣ Install Backend Dependencies

npm install

---

3️⃣ Install Frontend Dependencies

cd front_end
npm install

---

4️⃣ Build Frontend for Production

npm run build

This will create the front_end/dist folder.

---

5️⃣ Start the Server

npm start

Server will run at:

http://localhost:5000

---

🔄 Development Mode (Frontend Only)

cd front_end
npm run dev

---

📌 Important Notes

• Frontend is served statically by Express in production
• Build frontend once, start backend multiple times

---

📸 Screenshots

---

🎯 Learning Outcomes

• Real‑time communication with WebSockets
• Handling global state with Zustand
• Production‑level Express + React integration
• Debugging real deployment issues
• Proper project structure and Git workflow

---

🧠 Future Improvements

• Group chats
• Message seen status
• Typing indicators
• File sharing
• Notifications

---

👨‍💻 Author

Manish Suthar B.Tech CSE | Full‑Stack Developer

---

⭐ Support

If you like this project, give it a ⭐ on GitHub!