Chat App 🚀💬

👋 A real-time chat application built with modern web technologies, featuring instant messaging, user authentication, and image uploads. The app has a sleek UI and a seamless user experience.

📌 Technologies Used

🎨 Frontend:

• ⚛️ React – Component-based UI

• 🎨 TailwindCSS – Utility-first styling

• 🌼 DaisyUI – Pre-styled UI components

• 🗂️ Zustand – Lightweight state management

• 🔍 Lucide Icons – Modern icon set

🛠️ Backend:

• 🟢 Node.js – JavaScript runtime

• ⚡ Express – Fast backend framework

• 📡 Socket.io – Real-time communication

• 🍃 MongoDB Atlas – NoSQL cloud database

• ☁️ Cloudinary – Image upload and storage

✨ Features

• 💬 Real-time chat with Socket.io

• 🔐 User authentication (login/signup)

• 🟢 Online/offline status indicators

• 📷 Image upload via Cloudinary

• 🌗 32 Diifferent mode (DaisyUI themes)

• 🎨 Optimized UI with Lucide Icons

🛠️ Installation & Setup

Prerequisites

Ensure you have Node.js and MongoDB Atlas set up.

Clone the Repository

git clone https://github.com/yourusername/chat-app.git](https://github.com/ayandas1234/Chat-App-Using-React--Tailwind--Zustand--Daisy-UI--Node-js--Express--MongoDB--Socket-io.git
cd Chat-App-Using-React--Tailwind--Zustand--Daisy-UI--Node-js--Express--MongoDB--Socket-io

Install Dependencies

🛠️ Backend:

cd backend
npm install

🎨 Frontend:

cd frontend
npm install

Configure Environment Variables

Create a .env file in the backend folder with:

MONGO_URI=your_mongodb_connection_string
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
JWT_SECRET=your_jwt_secret

Run the Application

🛠️ Backend:

cd backend
npm run dev

🎨 Frontend:

cd frontend
npm run dev

📸 Screenshots

view - 1

view - 2

view - 3

view - 4

view - 5

view - 6

view - 7

view - 8

view - 9

view - 10

view - 11

view - 12

view - 13

view - 14

view - 15

view - 16

view - 17

view - 18

view - 19

view - 20

view - 21

view - 22

view - 23

🎥 video

https://github.com/user-attachments/assets/8dc382e4-4438-470d-b184-f76e2fb97d8c

🔗 Connect with Me

• 📧 G-mail: G-mail

• 💼 LinkedIn: LinkedIn Profile

• 🏗️ GitHub: GitHub Profile

🎯 Conclusion

This chat application provides a seamless real-time messaging experience with modern UI and robust backend infrastructure. Whether you're looking to integrate real-time chat into your project or learn how to build a full-stack chat app, this project serves as a great reference. Contributions and feedback are always welcome! 🚀💡

Building this application has greatly improved my skills in both frontend and backend development. On the frontend, I gained experience in React state management with Zustand, creating responsive and modern UI using TailwindCSS and DaisyUI, and optimizing the user experience with Lucide Icons. On the backend, I strengthened my knowledge of Node.js and Express, implemented real-time communication with Socket.io, and worked with MongoDB Atlas for scalable data storage. Additionally, integrating Cloudinary for image uploads enhanced my understanding of third-party API services. This project demonstrated how the frontend and backend work together efficiently, enabling real-time updates and smooth data flow between users. 🚀🔥