# SecureChat 🔐💬 A production-ready **MERN stack real-time chat application** with private 2-person rooms, media sharing, JWT security, admin panel, and 24-hour auto-deletion. --- ## ✨ Features | Feature | Details | |---|---| | **Room Code System** | Any 2 users sharing the same code get paired instantly | | **Real-time Messaging** | Socket.io for live messages, typing, and online indicators | | **Media Uploads** | Images from gallery or camera → uploaded to Cloudinary | | **24h Auto-delete** | All rooms, messages, and media auto-expire via cron job | | **JWT Auth** | httpOnly cookies + localStorage, rate-limited auth endpoints | | **Admin Panel** | Full dashboard at `/admin` with charts, room/media/user management | | **Mobile Responsive** | Works on all screen sizes | --- ## 🗂️ Project Structure ``` chat-app/ ├── client/ # Vite + React frontend (port 5173) │ └── src/ │ ├── pages/ Home, Chat, AdminLogin, AdminDashboard │ ├── components/ ChatBox, MessageBubble, MediaUpload, TypingIndicator │ │ └── admin/ AdminTable, StatsCard, Charts │ ├── context/ AuthContext, SocketContext │ └── utils/ api.js (Axios) │ └── server/ # Express + Node.js backend (port 5000) ├── controllers/ auth, chat, room, media, admin ├── models/ User, Room, Message, Media ├── routes/ authRoutes, chatRoutes, roomRoutes, adminRoutes ├── middleware/ authMiddleware, adminMiddleware, uploadMiddleware ├── utils/ cloudinary.js, cronJobs.js └── socket/ socketHandler.js ``` --- ## 🚀 Quick Start ### Prerequisites - **Node.js** v18+ - **MongoDB** (Atlas or local) - **Cloudinary** account (free tier works) --- ### 1. Clone & Install ```bash # Backend cd server npm install # Frontend cd ../client npm install ``` ### 2. Configure Environment Variables Edit `server/.env`: ```env PORT=5000 MONGODB_URI=mongodb://localhost:27017/chatapp # OR for Atlas: mongodb+srv://user:pass@cluster.mongodb.net/chatapp JWT_SECRET=your_super_secret_jwt_key_min_32_chars JWT_EXPIRES_IN=7d ADMIN_USERNAME=admin ADMIN_PASSWORD=YourSecureAdminPassword ADMIN_JWT_SECRET=your_admin_jwt_secret_key CLOUDINARY_CLOUD_NAME=your_cloud_name CLOUDINARY_API_KEY=your_api_key CLOUDINARY_API_SECRET=your_api_secret CLIENT_URL=http://localhost:5173 NODE_ENV=development ``` ### 3. Run Development Servers Open two terminals: ```bash # Terminal 1 — Backend cd server npm run dev # Server starts at http://localhost:5000 # Terminal 2 — Frontend cd client npm run dev # App opens at http://localhost:5173 ``` --- ## 🔐 Authentication - **Users**: Register/login at `http://localhost:5173` - **Admins**: Login at `http://localhost:5173/admin/login` - Default credentials from `.env`: `ADMIN_USERNAME` / `ADMIN_PASSWORD` --- ## 💬 How to Chat 1. Open `http://localhost:5173` in **two different browser windows** (or two different browsers) 2. **Register/login** in both windows with different usernames 3. Enter the **same room code** (e.g. `hello`) in both windows 4. Start chatting in real time! 🎉 --- ## 🛠️ Admin Panel Visit `http://localhost:5173/admin/login` and log in with your admin credentials. **Features:** - 📊 Live stats (active rooms, messages today, media uploads, total users) - 📈 Charts: messages per hour + per day (Recharts) - 🏠 Room management (view, delete) - 🖼️ Media management (view, delete from Cloudinary) - 👤 User management (ban/unban, IP-based banning) --- ## 🗑️ Auto-Deletion A **node-cron** job runs every hour and deletes: - Rooms older than 24 hours - Messages older than 24 hours - Media files from both MongoDB and Cloudinary MongoDB also has **TTL indexes** on all collections as a backup. --- ## 🔒 Security - JWT tokens stored in **httpOnly cookies** (XSS-resistant) - **Rate limiting** on all API routes (stricter on auth endpoints) - **Helmet.js** security headers - **Image-only** file upload validation (MIME + extension check, 5MB limit) - Room messages are strictly **scoped to room members** - Admin uses a **separate JWT secret** and cookie --- ## 📡 API Endpoints ### Auth | Method | Route | Description | |---|---|---| | POST | `/api/auth/register` | Register new user | | POST | `/api/auth/login` | Login | | POST | `/api/auth/logout` | Logout | | GET | `/api/auth/me` | Get current user | ### Rooms (Protected) | Method | Route | Description | |---|---|---| | POST | `/api/rooms/join` | Join/create room by code | | GET | `/api/rooms/:code` | Get room info | | POST | `/api/rooms/leave` | Leave room | ### Chat (Protected) | Method | Route | Description | |---|---|---| | GET | `/api/chat/:roomId/messages` | Get messages (paginated) | | POST | `/api/chat/:roomId/message` | Send text message | | POST | `/api/chat/media/upload` | Upload image | ### Admin (Admin JWT required) | Method | Route | Description | |---|---|---| | POST | `/api/admin/login` | Admin login | | GET | `/api/admin/stats` | Dashboard stats + chart data | | GET | `/api/admin/rooms` | List all rooms | | DELETE | `/api/admin/rooms/:id` | Delete room | | GET | `/api/admin/media` | List all media | | DELETE | `/api/admin/media/:id` | Delete media | | GET | `/api/admin/users` | List all users | | POST | `/api/admin/users/:id/ban` | Ban user | | POST | `/api/admin/users/:id/unban` | Unban user | --- ## 🌐 Socket.io Events | Event | Direction | Description | |---|---|---| | `join-room` | Client → Server | Join a chat room | | `send-message` | Client → Server | Send a message | | `typing` | Client → Server | Start typing indicator | | `stop-typing` | Client → Server | Stop typing indicator | | `new-message` | Server → Client | New message received | | `user-joined` | Server → Client | Partner joined room | | `user-offline` | Server → Client | Partner disconnected | | `user-typing` | Server → Client | Partner is typing | | `user-stop-typing` | Server → Client | Partner stopped typing | --- ## 🏗️ Production Deployment ```bash # Build frontend cd client npm run build # Output in client/dist/ # Serve dist/ with your server or a CDN # Set NODE_ENV=production in server/.env # Use a process manager like PM2: npm install -g pm2 cd server pm2 start index.js --name securechat ``` --- ## 📦 Tech Stack | Layer | Technology | |---|---| | Frontend | React 18, Vite, Tailwind CSS v3, Recharts, Socket.io-client | | Backend | Node.js, Express.js, Socket.io | | Database | MongoDB, Mongoose | | Auth | JWT (jsonwebtoken, bcryptjs) | | Media | Cloudinary, Multer | | Security | Helmet, express-rate-limit | | Scheduling | node-cron | --- ## 📄 License MIT — Free to use, modify, and distribute. # chat-app