💬 Real-Time Chat Application

A modern, feature-rich real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.io. This application provides seamless, instant messaging with real-time user status updates and media sharing capabilities.

✨ Highlights

• 🚀 Tech Stack: MERN + Socket.io + TailwindCSS + DaisyUI
• 🔐 Secure Authentication: JWT-based authentication and authorization
• ⚡ Real-Time Messaging: Instant messaging powered by Socket.io
• 👥 User Status: Live user online/offline status tracking
• 🎨 State Management: Zustand for efficient state management
• 📱 Responsive Design: Beautiful, mobile-friendly UI with DaisyUI themes
• 🖼️ Image Sharing: Send and receive images in conversations

🛠️ Tech Stack

Backend

• Node.js & Express.js - Server framework
• MongoDB & Mongoose - Database and ODM
• Socket.io - Real-time bidirectional communication
• JWT - Authentication tokens
• bcryptjs - Password hashing
• Cloudinary - Image upload and storage
• CORS - Cross-origin resource sharing
• Cookie-Parser - Cookie handling

Frontend

• React 18 - UI library
• Vite - Build tool and dev server
• React Router - Client-side routing
• Axios - HTTP client
• Socket.io-client - Real-time communication client
• Zustand - State management
• TailwindCSS - Utility-first CSS
• DaisyUI - Component library
• Lucide React - Icon library
• React Hot Toast - Toast notifications

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14.0.0 or higher)
• npm or yarn
• MongoDB (local or MongoDB Atlas)
• Cloudinary account (for image uploads)

🚀 Installation & Setup

1. Clone the Repository

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

2. Backend Setup

cd backend
npm install
npm run dev

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

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

3. Frontend Setup

cd frontend
npm install
npm run dev

📁 Project Structure

chat-app/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   │   ├── auth.controller.js
│   │   │   └── message.controller.js
│   │   ├── models/
│   │   │   ├── user.model.js
│   │   │   └── message.model.js
│   │   ├── routes/
│   │   │   ├── auth.route.js
│   │   │   └── message.route.js
│   │   ├── middleware/
│   │   │   └── auth.middleware.js
│   │   ├── lib/
│   │   │   ├── db.js
│   │   │   ├── socket.js
│   │   │   ├── utils.js
│   │   │   └── cloudinary.js
│   │   ├── seeds/
│   │   │   └── user.seed.js
│   │   └── index.js
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── store/
│   │   ├── lib/
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── eslint.config.js
└── README.md

🔐 Security Features

• Password Hashing: Passwords are hashed using bcryptjs
• JWT Authentication: Secure token-based authentication
• HTTP-Only Cookies: Protect against XSS attacks
• CSRF Protection: SameSite cookie attribute enabled
• Protected Routes: API endpoints require authentication

🎨 Customization

• Theme Selection
• .env customization