🚀 FullStack Chat App

Welcome to FullStack Chat App – a real-time messaging application built with the MERN stack, incorporating Socket.io for instant communication, Zustand for state management, and a modern Tailwind CSS + DaisyUI design. This project ensures secure authentication, responsive UI, and a seamless user experience. Whether you're looking to connect with friends or build a scalable chat system, this app has you covered! 💬🚀

📌 Features

✅ Real-time messaging with WebSockets (Socket.io)
✅ Secure JWT Authentication 🔐
✅ Optimized Global State Management using Zustand
✅ Typing Indicators & Message Read Status ✍️
✅ Dark & Light Mode support with DaisyUI 🌙☀️
✅ Fully Responsive UI with Tailwind CSS 📱💻
✅ Efficient Backend Architecture using Node.js & Express
✅ MongoDB Database Integration with Mongoose
✅ RESTful APIs & WebSocket Communication 🌐
✅ Scalable & Clean Codebase following best practices

🛠 Tech Stack

📂 Project Structure

📦 FullStack-chat-app
 ┣ 📂 backend/          # Backend (Node.js, Express, MongoDB)
 ┃ ┣ 📂 config/         # Database & server configuration
 ┃ ┣ 📂 controllers/    # API request handlers
 ┃ ┣ 📂 models/         # Mongoose models (User, Messages)
 ┃ ┣ 📂 routes/         # API routes (Auth, Chat, Messages)
 ┃ ┣ 📂 sockets/        # WebSocket events for real-time chat
 ┃ ┣ 📜 server.js       # Main server file
 ┃ ┣ 📜 .env            # Environment variables
 ┃ ┗ 📜 package.json    # Backend dependencies & scripts
 ┣ 📂 frontend/         # Frontend (React, Zustand, Tailwind)
 ┃ ┣ 📂 src/            # Main source code
 ┃ ┣ 📂 components/     # Reusable UI components
 ┃ ┣ 📂 pages/         # Page-based routing
 ┃ ┣ 📂 hooks/         # Custom React hooks
 ┃ ┣ 📂 store/         # Zustand state management
 ┃ ┣ 📜 App.js         # Root application component
 ┃ ┣ 📜 index.js       # Entry point for React
 ┃ ┗ 📜 package.json   # Frontend dependencies & scripts
 ┣ 📜 README.md        # Documentation
 ┣ 📜 .gitignore       # Ignored files
 ┗ 📜 package.json     # Root dependencies & scripts

📥 Installation Guide

Follow these steps to set up the project locally:

1️⃣ Clone the Repository

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

2️⃣ Install Dependencies

Backend

cd backend
npm install

Frontend

cd ../frontend
npm install

3️⃣ Configure Environment Variables

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

PORT=5001
MONGODB_URI=""
JWT_SECRET=""
CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""
NODE_ENV=''

4️⃣ Start the Application

Run Backend Server

cd backend
npm run dev

Run Frontend Client

cd ../frontend
npm run dev

The app should now be running at http://localhost:5001 🎉

📖 Usage

1️⃣ Register or log in to your account.
2️⃣ Start a chat with other users in real time.
3️⃣ Send messages and receive instant updates.
4️⃣ Switch between light & dark mode for a customized experience.

🚀 Deployment

🔹 Backend Deployment (Render)

• Deploy the backend using Render, Vercel, or Heroku.
• Use MongoDB Atlas for cloud database hosting.
• Configure environment variables for production.

🔹 Frontend Deployment (Vercel/Netlify)

• Deploy the React app using Vercel or Netlify.
• Ensure API endpoints match the deployed backend.
• Optimize the UI for performance and SEO.

🎯 Goals

• Build a scalable and responsive chat app 📦
• Optimize for performance and security 🔥
• Implement advanced real-time features ⚡
• Improve UI/UX for better engagement 🎨

🤝 Contributions

Contributions are welcome! If you’d like to enhance this project: 1️⃣ Fork the repository.
2️⃣ Create a new branch (main).
3️⃣ Make changes and commit.
4️⃣ Open a Pull Request.

📄 License

This project is licensed under the MIT License.

📢 Connect With Me

💼 LinkedIn
🐦 Twitter
📑 Medium
📧 Email: divyeshparmar607@gmail.com

⭐ If you find this project helpful, please star this repository on GitHub!

Happy Coding! 🚀🔥