Huddle – Real-Time Chat Application

---

🚀 Live Demo

https://huddle-tgykr.sevalla.app/

---

💬 About the Project

Huddle is a full-stack real-time chat application built with:

• Frontend: React + Vite
• Styling: Tailwind
• Backend: Node.js, Express.js
• Real-time Engine: Socket.IO

The app supports seamless real-time communication, multiple users, and live message broadcasting with a modern UI powered by React.

---

⭐ Features

⚡ Real-Time Messaging

• Instant message delivery using Socket.IO
• WebSocket-based bi-directional event communication
• Auto-updating UI without page reloads

🧩 Frontend Features (React + Vite)

• Component-based UI
• Fast refresh using Vite
• Smooth message list rendering
• Join/Leave notifications
• Auto-scroll chat window

🛠 Backend Features

• Express server handling connections
• Socket.IO event broadcasting
• Modular server architecture
• Ready to scale with authentication or rooms

🧱 Scalable Architecture

• Frontend & backend separated
• Easy to deploy independently
• Room for future enhancements

---

🛠️ Tech Stack

Frontend (React + Vite)

Backend

---

📂 Project Structure

├── backend/
│   ├── server.js            # Express + Socket.IO server
│   ├── controllers/
│   ├── routes/
│   ├── package.json
│   └── ...
│
├── frontend/
│   ├── src/
│   │   ├── components/      # Chat UI components
│   │   ├── pages/
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   └── ...
│
└── README.md

---

🧩 How It Works

1. User connects to server

React app connects to backend via Socket.IO client.

2. User sends a message

socket.emit("send-message", message);

3. Server receives & broadcasts

io.emit("receive-message", message);

4. Frontend updates UI immediately

Messages appear instantly for all connected users.

---

🔮 Future Enhancements

• Private chat rooms
• Admin dashboard

---

🤝 Contributing

Contributions are welcome!
Open an issue or submit a pull request.

---

📚 License

MIT License.