💬 MERN Chat App

A modern, full-stack real-time chat application built with the MERN stack featuring instant messaging, user authentication, and customizable themes.

Features • Tech Stack • Installation • Usage • API Reference • Contributing

---

✨ Features

🔐 Authentication & Security

• User Registration - Create an account with email, full name, and password
• Secure Login - JWT-based authentication with HTTP-only cookies
• Password Encryption - Bcrypt hashing for secure password storage
• Protected Routes - Middleware-based route protection

💬 Real-Time Messaging

• Instant Messages - Socket.io powered real-time communication
• Image Sharing - Send and receive images in chat via Cloudinary
• Message History - Persistent message storage in MongoDB
• Online Status - See which users are currently online

👤 User Profile

• Profile Picture - Upload and update profile pictures via Cloudinary
• User Settings - Customize your profile and preferences
• Cover Picture - Optional cover picture support

🎨 Customization

• 32 Themes - Choose from a wide variety of DaisyUI themes including:
  • Light, Dark, Cupcake, Synthwave, Cyberpunk, Dracula, Nord, and many more!
• Live Preview - Preview themes before applying
• Persistent Settings - Theme preferences saved in local storage

📱 Modern UI/UX

• Responsive Design - Works seamlessly on desktop and mobile
• Beautiful Interface - Clean, modern design with Tailwind CSS & DaisyUI
• Loading States - Smooth loading animations and skeleton components
• Toast Notifications - Real-time feedback with react-hot-toast

---

🛠 Tech Stack

Frontend

Technology	Purpose
React 19	UI Library
Vite	Build Tool & Dev Server
React Router v7	Client-side Routing
Zustand	State Management
Axios	HTTP Client
Socket.io Client	Real-time Communication
Tailwind CSS	Styling
DaisyUI	UI Components
Lucide React	Icons
React Hot Toast	Notifications

Backend

Technology	Purpose
Node.js	Runtime Environment
Express.js	Web Framework
MongoDB	Database
Mongoose	ODM
Socket.io	Real-time Communication
JWT	Authentication
Bcrypt.js	Password Hashing
Cloudinary	Image Storage
Cookie Parser	Cookie Handling
CORS	Cross-Origin Requests

---

📁 Project Structure

Chat-App/
├── backend/
│   ├── src/
│   │   ├── controllers/       # Request handlers
│   │   │   ├── auth.controller.js
│   │   │   └── message.controller.js
│   │   ├── lib/               # Utilities & configurations
│   │   │   ├── cloudinary.js  # Cloudinary config
│   │   │   ├── db.js          # MongoDB connection
│   │   │   ├── socket.js      # Socket.io setup
│   │   │   └── utils.js       # Helper functions
│   │   ├── middleware/        # Express middlewares
│   │   ├── models/            # Mongoose schemas
│   │   │   ├── user.model.js
│   │   │   └── message.model.js
│   │   ├── routes/            # API routes
│   │   │   ├── auth.route.js
│   │   │   └── message.route.js
│   │   ├── seeds/             # Database seeders
│   │   └── index.js           # Server entry point
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/        # Reusable components
│   │   │   ├── ChatContainer.jsx
│   │   │   ├── ChatHeader.jsx
│   │   │   ├── MessageInput.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   └── skeletons/
│   │   ├── constants/         # App constants
│   │   ├── lib/               # Utilities
│   │   ├── pages/             # Page components
│   │   │   ├── HomePage.jsx
│   │   │   ├── LoginPage.jsx
│   │   │   ├── SignUpPage.jsx
│   │   │   ├── ProfilePage.jsx
│   │   │   └── SettingsPage.jsx
│   │   ├── store/             # Zustand stores
│   │   │   ├── useAuthStore.js
│   │   │   ├── useChatStore.js
│   │   │   └── useThemeStore.js
│   │   ├── App.jsx
│   │   └── main.jsx
│   └── package.json
└── package.json               # Root package.json

---

🚀 Installation

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or Atlas)
• Cloudinary Account (for image uploads)

Step 1: Clone the Repository

git clone https://github.com/Abdooo2235/MERN-Chat-App.git
cd MERN-Chat-App

Step 2: Environment Setup

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

# Server Configuration
PORT=5001
NODE_ENV=development

# MongoDB Connection
MONGODB_URI=your_mongodb_connection_string

# JWT Secret
JWT_SECRET=your_super_secret_jwt_key

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

# Client URL (for CORS in production)
CLIENT_URL=http://localhost:5173

Step 3: Install Dependencies

Install all dependencies (backend + frontend):

npm run build

Or install separately:

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

---

💻 Usage

Development Mode

Run Backend (with nodemon):

cd backend
npm run dev

The server will start on http://localhost:5001

Run Frontend (with Vite):

cd frontend
npm run dev

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

Production Mode

Build and Start:

# From root directory
npm run build   # Installs dependencies and builds frontend
npm start       # Starts the backend server

In production, the backend serves the frontend static files.

---

📡 API Reference

Authentication Endpoints

Method	Endpoint	Description	Auth Required
POST	/api/auth/signup	Register a new user	❌
POST	/api/auth/login	Login user	❌
POST	/api/auth/logout	Logout user	✅
PUT	/api/auth/update-profile	Update profile picture	✅
GET	/api/auth/check	Check authentication status	✅

Message Endpoints

Method	Endpoint	Description	Auth Required
GET	/api/messages/users	Get users for sidebar	✅
GET	/api/messages/:id	Get messages with a user	✅
POST	/api/messages/send/:id	Send a message	✅

Socket.io Events

Event	Direction	Description
connection	Client → Server	User connects
disconnect	Client → Server	User disconnects
getOnlineUsers	Server → Client	List of online users
newMessage	Server → Client	New message received

---

🔑 Getting Cloudinary Credentials

1. Go to Cloudinary and create a free account
2. Navigate to Dashboard
3. Copy your:
   • Cloud Name
   • API Key
   • API Secret
4. Add them to your .env file

---

🎨 Available Themes

The app supports 32 beautiful themes powered by DaisyUI:

Click to see all themes

Theme	Theme	Theme	Theme
light	dark	cupcake	bumblebee
emerald	corporate	synthwave	retro
cyberpunk	valentine	halloween	garden
forest	aqua	lofi	pastel
fantasy	wireframe	black	luxury
dracula	cmyk	autumn	business
acid	lemonade	night	coffee
winter	dim	nord	sunset

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

This project is licensed under the ISC License.

---

👨‍💻 Author

Abdooo2235

• GitHub: @Abdooo2235

---

⭐ Star this repo if you found it helpful! ⭐