🌟 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/                # Express backend
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── index.js            # Entry point for backend
│   ├── .env                # Environment variables
├── frontend/               # React 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         # App logo

---

📦 Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Set up environment variables:

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

   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 app:

   http://localhost:3000
   

---

🔄 API Endpoints

Auth

• POST /api/auth/register - Register a new user.
• POST /api/auth/login - Authenticate user and return 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. Create a pull request.

---

📄 License

This project is licensed under the MIT License.

---

📧 Contact

For any inquiries, reach out at vijaymakkad0104@gmail.com.

---