💬 MERN Real-Time Chat App

A full-stack, real-time messaging application built with the MERN stack and Socket.io.

---

✨ Features

• ⚡ Real-Time Messaging: Instant messaging powered by Socket.io.
• 🔐 Secure Authentication: JWT-based authentication and Bcrypt password hashing.
• 🟢 Online Status: See who is currently online in real-time.
• 🎨 Dynamic Themes: Choose your favorite aesthetic with DaisyUI theme integration.
• 🖼️ Image Uploads: Seamless profile picture updates using Cloudinary.
• 📱 Fully Responsive: Beautifully designed for both desktop and mobile devices.
• 🧠 State Management: Efficient global state handling using Zustand.

🛠️ Tech Stack

Frontend

• React 18 (Vite)
• Tailwind CSS + DaisyUI
• Zustand (State Management)
• React Router DOM
• Framer Motion (Animations)
• Lucide React (Icons)
• Socket.io Client

Backend

• Node.js + Express.js
• MongoDB + Mongoose
• Socket.io (WebSockets)
• JSON Web Tokens (JWT)
• Cloudinary (Image Storage)
• Bcryptjs (Cryptography)

---

🚀 Getting Started

Follow these instructions to get the project up and running on your local machine.

Prerequisites

• Node.js (v18+)
• MongoDB connection string
• Cloudinary account credentials

1. Clone the repository

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

2. Install dependencies

From the root directory, you can install both frontend and backend dependencies using the provided script:

npm run build

(Alternatively, you can manually run npm install inside both the frontend/ and backend/ directories).

3. Environment Variables

Create a .env file in the backend directory and add the following variables:

PORT=5001
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

4. Run the Application

Start the Backend Server (Development Mode)

cd backend
npm run dev

Start the Frontend Client

Open a new terminal and run:

cd frontend
npm run dev

The app will typically be available at http://localhost:5173.

---

📂 Project Structure

chat-app/
├── backend/               # Node/Express backend
│   ├── src/
│   │   ├── controllers/   # Route controllers
│   │   ├── lib/           # Database, Socket.io configs
│   │   ├── models/        # Mongoose schemas
│   │   ├── routes/        # Express routes (auth, messages)
│   │   └── index.js       # Entry point
│   ├── .env               # Environment variables
│   └── package.json       
│
├── frontend/              # React/Vite frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page layouts (Home, Login, etc.)
│   │   ├── store/         # Zustand stores (useAuthStore, etc.)
│   │   ├── App.jsx        # Main application component
│   │   └── main.jsx       # React DOM rendering
│   ├── tailwind.config.js # Tailwind CSS configuration
│   └── package.json       
│
└── package.json           # Root package.json (build scripts)

📜 License

This project is licensed under the ISC License.