💬 Real-Time Chat Application

🚀 A modern, full-stack real-time messaging platform built with the MERN stack

🌐 Live Demo • 📖 Documentation • ⚡ Quick Start

---

---

📋 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• 📁 Project Structure
• ⚡ Quick Start
• 🔑 API Endpoints
• 🚀 Deployment
• 👨‍💻 Developer

---

✨ Features

🔐 Authentication & Security

• ✅ JWT-based user authentication
• ✅ Bcrypt password encryption
• ✅ HTTP-only secure cookies
• ✅ Protected routes & middleware

💬 Real-time Messaging

• ✅ Instant message delivery with Socket.IO
• ✅ Online/Offline user status
• ✅ Message history & persistence
• ✅ Multi-user chat support

🎨 User Interface

• ✅ Modern & responsive design
• ✅ Theme customization support
• ✅ Profile management
• ✅ Image upload via Cloudinary
• ✅ Smooth animations & transitions

---

🛠️ Tech Stack

Frontend

Backend

DevOps & Tools

---

📁 Project Structure

chat-app/
├── backend/
│   ├── src/
│   │   ├── controllers/    # Request handlers
│   │   ├── models/         # Database schemas
│   │   ├── routes/         # API routes
│   │   ├── middleware/     # Auth middleware
│   │   ├── lib/            # Utilities (DB, Socket, Cloudinary)
│   │   └── index.js        # Server entry
│   └── package.json
│
└── frontend/
    ├── src/
    │   ├── components/     # React components
    │   ├── pages/          # Page components
    │   ├── store/          # Zustand stores
    │   ├── lib/            # Utilities
    │   └── App.jsx         # Root component
    └── package.json

---

⚡ Quick Start

Prerequisites

• Node.js v16+ installed
• MongoDB (local or Atlas)
• Cloudinary account

Setup Steps

1. Clone the repository

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

2. Install dependencies

   # Install root dependencies
   npm install
   
   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd ../frontend
   npm install

3. Configure environment variables

   Create .env in the backend folder:

   PORT=5001
   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   NODE_ENV=development
   CLOUDINARY_CLOUD_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret

4. Run the application

   # Start backend (from backend folder)
   npm run dev
   
   # Start frontend (from frontend folder, new terminal)
   npm run dev

5. Access the app

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:5001

---

🔑 API Endpoints

Authentication

Method	Endpoint	Description	Auth
POST	/api/auth/signup	Register new user	❌
POST	/api/auth/login	User login	❌
POST	/api/auth/logout	User logout	✅
PUT	/api/auth/update-profile	Update profile	✅
GET	/api/auth/check	Check auth status	✅

Messages

Method	Endpoint	Description	Auth
GET	/api/messages/users	Get all users	✅
GET	/api/messages/:id	Get messages with user	✅
POST	/api/messages/send/:id	Send message	✅

---

🚀 Deployment

Live Application

The application is deployed and accessible at:

🌐 https://chat-app-6ly8.onrender.com

Deployment Platform

• Platform: Render
• Frontend & Backend: Deployed as a monorepo
• Database: MongoDB Atlas
• Image Storage: Cloudinary

Note: The app may take a few seconds to load initially due to Render's free tier cold start.

---

👨‍💻 Developer

Gaurav Kumar

---

📝 License

This project is licensed under the ISC License.

---

⭐ Star this repo if you find it helpful!

Made with ❤️ using the MERN Stack