Merge branch 'main' of https://github.com/Wcoder547/MERN-CHAT-APP

Author: Wcoder547

README.md

@@ -1,2 +1,248 @@
-# MERN-CHAT-APP
-A real-time chat app built with the MERN stack and WebSockets. Includes secure authentication, private/group messaging, instant updates via Socket.io, and a responsive UI for seamless communication.
+# MERN Chat App
+
+> Real-time full-stack chat application built with the MERN stack, Socket.io, and Docker.
+
+![Node.js](https://img.shields.io/badge/Node.js-18+-green) ![React](https://img.shields.io/badge/React-18-blue) ![Socket.io](https://img.shields.io/badge/Socket.io-4-black) ![Docker](https://img.shields.io/badge/Docker-ready-blue) ![License](https://img.shields.io/badge/license-MIT-green)
+
+---
+
+## What is this?
+
+A production-ready chat application that lets users exchange messages in real time. It supports private one-on-one conversations and group messaging, with secure JWT-based authentication and instant delivery via WebSockets.
+
+Built as a full-stack project to demonstrate real-world usage of the MERN stack alongside Socket.io event handling, CI/CD pipelines, structured logging with Winston, and containerized deployment with Docker.
+
+---
+
+## Features
+
+- **Real-time messaging** — instant delivery via Socket.io WebSockets
+- **Authentication** — JWT-based secure login and registration
+- **Private & group chats** — one-on-one and multi-user rooms
+- **Persistent history** — messages stored in MongoDB
+- **Structured logging** — Winston file and console transports
+- **Dockerized** — single `docker-compose up` to run the full stack
+- **CI/CD** — GitHub Actions pipeline for automated builds
+
+---
+
+## Preview
+
+```
+User A                      Server                     User B
+  |--- send message -------->|                            |
+  |                          |--- socket.emit('msg') --->|
+  |                          |--- save to MongoDB --------|
+  |<--- acknowledgment ------|                            |
+```
+
+---
+
+## Tech Stack
+
+| Layer      | Technology                          |
+|------------|-------------------------------------|
+| Frontend   | React 18, Vite, Socket.io-client    |
+| Backend    | Node.js, Express, Socket.io         |
+| Database   | MongoDB, Mongoose                   |
+| Auth       | JWT, bcrypt                         |
+| Logging    | Winston                             |
+| DevOps     | Docker, Docker Compose, GitHub Actions |
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- MongoDB (local or Atlas URI)
+- Docker & Docker Compose (optional but recommended)
+
+### Option 1 — Docker (recommended)
+
+```bash
+git clone https://github.com/Wcoder547/MERN-CHAT-APP.git
+cd MERN-CHAT-APP
+```
+
+Create a `.env` file in the root:
+
+```env
+MONGO_URI=mongodb://mongo:27017/chatapp
+JWT_SECRET=your_jwt_secret
+PORT=5000
+CLIENT_URL=http://localhost:3000
+```
+
+Then run:
+
+```bash
+docker-compose up --build
+```
+
+App will be live at `http://localhost:3000`.
+
+---
+
+### Option 2 — Manual
+
+**Backend**
+
+```bash
+cd Back-end
+npm install
+npm run dev
+```
+
+**Frontend** (in a separate terminal)
+
+```bash
+cd Front-end
+npm install
+npm run dev
+```
+
+---
+
+## Project Structure
+
+```
+MERN-CHAT-APP/
+├── Back-end/
+│   ├── controllers/       # Route handlers
+│   ├── models/            # Mongoose schemas (User, Message, Room)
+│   ├── routes/            # Express route definitions
+│   ├── socket/            # Socket.io event handlers
+│   ├── middleware/         # Auth middleware, error handling
+│   └── utils/             # Winston logger config
+├── Front-end/
+│   ├── src/
+│   │   ├── components/    # Reusable UI components
+│   │   ├── pages/         # Route-level page components
+│   │   ├── context/       # Auth and socket context providers
+│   │   └── hooks/         # Custom React hooks
+└── docker-compose.yml
+```
+
+---
+
+## Environment Variables
+
+| Variable     | Description                        | Example                          |
+|--------------|------------------------------------|----------------------------------|
+| `MONGO_URI`  | MongoDB connection string          | `mongodb://localhost:27017/chat` |
+| `JWT_SECRET` | Secret key for signing JWTs        | `supersecretkey`                 |
+| `PORT`       | Backend server port                | `5000`                           |
+| `CLIENT_URL` | Allowed CORS origin (frontend URL) | `http://localhost:3000`          |
+
+---
+
+## Socket Events
+
+| Event             | Direction         | Payload                        | Description                         |
+|-------------------|-------------------|--------------------------------|-------------------------------------|
+| `sendMessage`     | Client → Server   | `{ roomId, message, sender }` | Send a new message                  |
+| `receiveMessage`  | Server → Client   | `{ message, sender, time }`   | Broadcast message to room members   |
+| `joinRoom`        | Client → Server   | `{ roomId }`                  | Join a specific chat room           |
+| `userOnline`      | Server → Client   | `{ userId }`                  | Notify room of a user coming online |
+| `userOffline`     | Server → Client   | `{ userId }`                  | Notify room of a user going offline |
+
+---
+
+## API Endpoints
+
+### Auth
+
+| Method | Route              | Description         |
+|--------|--------------------|---------------------|
+| POST   | `/api/auth/register` | Register a new user |
+| POST   | `/api/auth/login`    | Login, returns JWT  |
+
+### Messages
+
+| Method | Route                         | Description                    |
+|--------|-------------------------------|--------------------------------|
+| GET    | `/api/messages/:roomId`       | Fetch message history for room |
+| POST   | `/api/messages`               | Save a new message             |
+
+### Rooms
+
+| Method | Route               | Description           |
+|--------|---------------------|-----------------------|
+| GET    | `/api/rooms`        | List all rooms        |
+| POST   | `/api/rooms`        | Create a new room     |
+| GET    | `/api/rooms/:id`    | Get a specific room   |
+
+All protected routes require the `Authorization: Bearer <token>` header.
+
+---
+
+## Logging
+
+Winston is configured with two transports:
+
+- **Console** — development output with colorized levels
+- **File** — `logs/combined.log` for all levels, `logs/error.log` for errors only
+
+Log levels follow standard severity: `error > warn > info > http > debug`.
+
+---
+
+## CI/CD
+
+GitHub Actions workflow (`.github/workflows/`) runs on every push to `main`:
+
+1. Builds Docker images for frontend and backend
+2. Runs tests
+3. Pushes updated images to the container registry
+
+---
+
+## Caveats & Limitations
+
+- No end-to-end message encryption (messages stored as plaintext in MongoDB)
+- File/media sharing not yet supported
+- No read receipts
+- Horizontal scaling requires a Redis adapter for Socket.io (not currently configured)
+
+---
+
+## Roadmap
+
+- [ ] Read receipts
+- [ ] Media/file uploads (Cloudinary)
+- [ ] Redis adapter for multi-instance Socket.io
+- [ ] React Native mobile client
+
+---
+
+## Local Development Tips
+
+- Use [MongoDB Compass](https://www.mongodb.com/products/compass) to inspect collections during development
+- Socket.io events can be debugged by setting `localStorage.debug = 'socket.io-client:socket'` in the browser console
+- Winston logs land in `Back-end/logs/` — tail them with `tail -f Back-end/logs/combined.log`
+
+---
+
+## Contributing
+
+1. Fork the repo
+2. Create your branch: `git checkout -b feature/your-feature`
+3. Commit your changes: `git commit -m 'feat: add your feature'`
+4. Push to the branch: `git push origin feature/your-feature`
+5. Open a Pull Request
+
+---
+
+## Author
+
+**Waseem** — [@Wcoder547](https://github.com/Wcoder547)
+
+Full-stack developer · MERN · Next.js · TypeScript
+
+---
+
+## License
+
+[MIT](LICENSE)