✨ Full Stack Realtime Chat App ✨ Website Link

A production-ready MERN-based chat application featuring real-time messaging, secure authentication, and online user tracking. Built with modern technologies for performance, scalability, and ease of deployment.

🚀 Highlights

• 🌟 Tech Stack: MongoDB, Express.js, React (Vite), Node.js, Socket.io, TailwindCSS, DaisyUI
• 🎃 Authentication & Authorization: Secure JWT-based system with cookies
• 👾 Real-Time Messaging: Powered by Socket.io for instant communication
• 🚀 Online User Status: Live presence tracking
• 👌 State Management: Global state handled by Zustand
• 🐞 Error Handling: Comprehensive client & server error management
• ⭐ Deployment Ready: Configured for Render (backend) and Vercel (frontend)
• ⏳ And much more!

---

🖼 Preview

Screenshots coming soon

🛠 Tech Stack

Frontend

• React (Vite)
• Zustand
• TailwindCSS + DaisyUI

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)
• Socket.io

---

Folder Structure

SmartChat/
 ├── backend/
 │   ├── routes/
 │   ├── controllers/
 │   ├── models/
 │   ├── lib/
 │   └── ...
 ├── frontend/
 │   ├── src/
 │   ├── components/
 │   └── ...
 ├── README.md
 └── ...

⚡ Features

• ✅ Real-time one-to-one chat
• ✅ JWT authentication with cookies
• ✅ Online/offline user indicators
• ✅ Responsive & mobile-friendly UI
• ✅ Secure API calls (CORS + HTTPS)
• ✅ Persistent sessions

---

🔒 Security Features

• JWT Authentication stored in HTTP-only cookies to prevent XSS attacks.
• CSRF Protection using sameSite=strict and conditional secure cookies.
• Password Hashing implemented with bcrypt.
• CORS Configuration with credentials: true for safe cross-origin requests.
• Input Validation on both client and server.

---

📡 API Endpoints

Auth Routes

• POST /api/auth/signup → Register a new user.
• POST /api/auth/login → Login and get auth token.
• POST /api/auth/logout → Logout current user.
• PUT /api/auth/update-profile → Update user profile (requires JWT).
• GET /api/auth/check → Verify authentication (requires JWT).

Message Routes

• GET /api/messages/users → Get all users for sidebar (requires JWT).
• GET /api/messages/:id → Fetch chat history with a user (requires JWT).
• POST /api/messages/send/:id → Send a message to a user (requires JWT).

Auth: Most routes require JWT stored in cookies. Ensure withCredentials: true in frontend requests.

---

⚡ Socket.io Events

Server → Client

Event Name	Payload	Description
getOnlineUsers	[userId, ...]	Sends an array of online user IDs

Client → Server

Event Name	Payload	Description
sendMessage	{ to, message }	Sends a message to a user
disconnect	none	Fires when user disconnects

---

🔧 Installation & Setup

1. Clone the Repository

git clone https://github.com/skyeyeye/SmartChat.git
cd SmartChat

2. Backend Setup

cd backend
npm install

Create a .env file inside the backend/ directory:

PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
FRONTEND_URL=https://your-frontend.vercel.app

Run the backend:

npm run dev

3. Frontend Setup

cd ../frontend
npm install

Create a .env file inside the frontend/ directory:

VITE_BACKEND_URL=https://your-backend.onrender.com

Run the frontend:

npm run dev

4. Open in Browser

Visit:

http://localhost:5173

(Default Vite dev server port)

📦 Deployment

• Frontend: Vercel

• Backend: Render

• Database: MongoDB Atlas

🤝 Contributing

• Pull requests are welcome.
• For major changes, please open an issue first.

---

💖 Made with ❤️ by Ayush Saha