💬 MERN Chat App
A real-time full-stack chat application built with the MERN Stack, Socket.IO, JWT (Cookies), ImageKit, and styled beautifully using DaisyUI + Tailwind CSS.
🚀 Features
- 🔐 JWT Authentication with HTTP-only cookies
- ⚡ Real-time Messaging using Socket.IO
- 💬 Send Text, Images, and Files
- 🖼️ Upload optimized images via ImageKit
- 🧑🤝🧑 One-to-One chat functionality
- 🌙 Fully responsive with DaisyUI components (modals, chat bubbles, alerts, etc.)
- 🧾 Persistent login using cookie-based auth
- 🔌 Socket reconnect handling and session recovery
🛠️ Tech Stack
🧩 Frontend
- React.js
- DaisyUI (built on Tailwind CSS)
- Axios with
withCredentials: true - Socket.IO Client
- React Router DOM
- Zustand
⚙️ Backend
- Node.js + Express.js
- MongoDB with Mongoose
- Socket.IO for WebSocket support
- JWT for authentication
- Multer for file uploads
- ImageKit SDK for image CDN/hosting
🎨 UI Design with DaisyUI
Key components:
- 💬
chat,chat-bubble– message UI - 📤
modal– for file/image uploads - 🔘
button,input,textarea– forms and inputs - 🌓
theme– supports dark/light modes - 🔔
alert,toast– feedback components
DaisyUI themes are easy to switch (e.g.
light,dark,cupcake,retro, etc.)
📁 Message Types
| Type | Description |
|---|---|
| Text | Plain messages with emoji support 😄 |
| Image | Uploaded via ImageKit CDN |
| File | Any document (PDF, DOCX, etc.) |
🔄 Real-Time Messaging
- Socket connection on login
- Instant message delivery
- Socket disconnects on logout
🧠 Authentication Flow
- Login/Register → Sets JWT in HTTP-only cookie
- Frontend sends requests with cookies (
withCredentials: true) - Backend Middleware verifies token
- Logout → clears the cookie and disconnects socket