A modern real-time chat application built using the MERN stack with JWT authentication, live messaging using Socket.IO, and clean UI using TailwindCSS and DaisyUI.

• 🔐 JWT Authentication (Login & Register)
• 💬 Real-time messaging via WebSockets (Socket.IO)
• 🟢 Online/offline user status
• 📱 Responsive design (Mobile & Desktop)
• 🎨 Modern UI with TailwindCSS & DaisyUI
• 🧠 Global state management with Zustand
• 🛡️ Protected routes
• ✅ Error handling & loading skeletons
• 👀 Unread message indicators (custom)
• ⚡ API call optimizations (custom)
• 📷 Image compression before upload (custom)
• 🧲 Online-only toggle for contact list (custom)

▶️ Deployed on Render

This project is based on an excellent fullstack tutorial by Burak from the YouTube channel Codesistency:

• 📹 YouTube Tutorial
• 💻 Original GitHub Repo

Big thanks to him for the detailed and well-explained series!

Frontend:

• React
• TailwindCSS
• DaisyUI
• Zustand
• Socket.IO client

Backend:

• Node.js + Express
• MongoDB + Mongoose
• Socket.IO
• JSON Web Token (JWT)
• bcryptjs
• CORS

git clone https://github.com/nemanjagit/chatapp.git
cd chatapp

Create a .env file inside the /backend folder:

MONGODB_URI=your_mongodb_connection_string
PORT=your_server_port
JWT_SECRET=your_jwt_secret

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

npm run build # installs dependencies and builds frontend

Start the backend:

cd backend
npm run dev

Open new terminal from root and start the frontend:

cd frontend
npm run dev

🧠 Note: Ensure MongoDB is running (locally or via Atlas), and that you’ve configured Cloudinary credentials correctly before starting the app.

chat-app/
├── frontend/              # React frontend
│   └── src/
│       ├── components/
│       ├── pages/
│       ├── store/       # Zustand stores
│       └── ...
├── backend/              # Express backend
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── ...

• Manual testing for login, registration, and real-time messaging
• UI tested across various screen sizes
• Additional tests for online toggle and unread messages