🌟 MingleMate

MingleMate is a real-time chat application built with React.js, Tailwind CSS, DaisyUI, Node.js, Express, MongoDB, and Socket.IO. It allows users to connect, chat, and share moments seamlessly.

---

🚀 Features

• Real-time messaging with Socket.IO
• User authentication and authorization
• Responsive and modern UI with Tailwind CSS and DaisyUI
• Persistent chat history with MongoDB
• Online/offline user status
• Typing indicators and read receipts
• Secure password encryption using bcrypt
• RESTful APIs built with Express
• Cloud-based image uploads with Cloudinary

---

🛠️ Tech Stack

Frontend

• React.js
• Tailwind CSS
• DaisyUI

Backend

• Node.js
• Express.js
• Socket.IO

Database

• MongoDB

Authentication

• JWT (JSON Web Tokens)
• bcrypt

Cloud Storage

• Cloudinary

---

📂 Project Structure

CHAT-APP/
├── backend/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── index.js            # Backend entry point
│   └── .env                # Environment variables
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── lib/
│   │   ├── pages/
│   │   ├── store/
│   │   ├── utils/
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── index.js
│   ├── public/
│   └── dist/
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
└── MingleMate2.svg

---

📦 Installation

1️⃣ Clone the repository

git clone https://github.com/AviralJaiswal/ChatBot.git
cd Chat-App

2️⃣ Install dependencies

npm install

3️⃣ Set up environment variables

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

MONGODB_URI="your URI"
JWT_SECRET=mysecretkey
CLOUDINARY_CLOUD_NAME="name of cloud"
CLOUDINARY_API_KEY="YOUR KEY"
CLOUDINARY_API_SECRET="YOUR API SECRET"
NODE_ENV=development
PORT=5001

4️⃣ Start the backend server

cd backend
npm start

5️⃣ Start the frontend

cd frontend
npm start

6️⃣ Visit the application

http://localhost:3000

---

🔄 API Endpoints

Authentication

• POST /api/auth/register — Register a new user
• POST /api/auth/login — Authenticate user and return JWT token

Messages

• GET /api/messages/:chatId — Get messages for a specific chat
• POST /api/messages — Send a new message

---

⚙️ Scripts

• npm run server — Start backend server
• npm run client — Start frontend React app
• npm run dev — Start both client and server concurrently

---

🖌️ UI Preview

---

🤝 Contributing

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

---

📄 License

This project is licensed under the MIT License.

---

📧 Contact

For any inquiries or collaboration, reach out at avijai2004@gmail.com.