Real-Time Chat Application - MERN Stack

Project Overview

The Real-Time Chat Application is a web app built using the MERN stack, enhanced with Socket.io for real-time messaging, Zustand for state management, and TailwindCSS + Daisy UI for a modern UI/UX experience.

The application supports:
✅ User authentication
✅ Online/offline status tracking
✅ Multimedia message sharing

Tech Stack

Frontend

• ⚛️ React (Vite)
• 🌍 React Router
• 📦 Zustand (State Management)
• 🎨 TailwindCSS & Daisy UI
• 🔗 Axios
• 💬 Socket.io-client
• 🔧 Lucide-react (Icons)

Backend

• 🖥️ Node.js & Express
• 🗄️ MongoDB Atlas (Database)
• 🏗️ Mongoose (ODM)
• 🔑 JWT (Authentication)
• ☁️ Cloudinary (Media Uploads)
• 📡 Socket.io (Real-time messaging)

---

Features

1️⃣ User Authentication & Authorization

• 🔐 JWT-based authentication
• ✅ Secure user login & signup
• 🍪 Cookie-based session handling

2️⃣ Real-Time Messaging

• ⚡ Instant messaging with Socket.io
• 🟢 Online/offline user status
• 🔄 Message history with infinite scrolling
• 🖼️ Text & image message support

3️⃣ User Interface & Experience

• ✨ Beautiful UI with TailwindCSS + Daisy UI
• 🎭 30+ customizable themes
• 📌 Sidebar with online/offline user filtering

4️⃣ User Profile & Settings

• 🖼️ Editable profile picture
• 📧 View account details (email, member since, status)
• 🚪 Logout functionality

5️⃣ Backend Architecture

• 🔧 Modular structure (controllers, middleware, models)
• 🔒 Secure API routes for authentication & messaging
• ☁️ Cloudinary integration for media uploads

6️⃣ Frontend Structure

• 📦 Component-based design for scalability
• 📄 Pages: Home, Login, Signup, Profile, Settings
• 🌐 API interactions using Axios

---