ChatRoom

Real-time rooms for real conversations.

Create rooms. Invite people. Chat instantly.

---

About ChatRoom

ChatRoom is a full-stack real-time chat application where users can create private rooms, request access, approve members, and communicate instantly.

The app combines a React + Vite frontend with an Express.js backend, MongoDB database, JWT authentication, email OTP verification, and Socket.IO live messaging.

It is designed for secure room-based conversations with ownership controls, request handling, saved messages, and a responsive user interface.

---

Live Deployment

Service	URL
Frontend	chatroom-hub.vercel.app
Backend	chatroom-hub-server.onrender.com

---

Main Features

Feature	Description
Real-time messaging	Send and receive room messages instantly with Socket.IO.
Email OTP signup	New users verify their email before account creation.
JWT authentication	Access tokens and refresh cookies protect user sessions.
Private rooms	Users can create rooms for focused conversations.
Join requests	Members request access before entering protected rooms.
Owner approval	Room owners can approve or reject join requests.
Request notifications	Room owners can see pending access requests.
Persistent messages	Chat messages are saved in MongoDB.
Responsive UI	Pages work smoothly across desktop and mobile screens.

---

Tech Stack

Frontend

• React
• React Router
• Axios
• Socket.IO Client
• CSS

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• Socket.IO
• JSON Web Token
• Bcrypt
• Nodemailer

Deployment

Service	Platform
Frontend	Vercel
Backend	Render
Database	MongoDB Atlas
Email Service	Gmail SMTP

---

Folder Structure

.
├── backend
│   ├── src
│   │   ├── config
│   │   ├── controllers
│   │   ├── middleware
│   │   ├── models
│   │   └── routes
│   ├── package.json
│   └── server.js
├── Frontend
│   ├── public
│   ├── src
│   │   ├── components
│   │   ├── context
│   │   ├── pages
│   │   ├── services
│   │   ├── styles
│   │   └── utils
│   ├── package.json
│   └── vite.config.js
└── README.md

---

Installation

Clone Repository

git clone https://github.com/dharmapal25/ChatRoom.git
cd ChatRoom

Install Backend Dependencies

cd backend
npm install

Install Frontend Dependencies

cd ../Frontend
npm install

Start Backend Server

cd ../backend
npm start

Start Frontend

cd ../Frontend
npm run dev

---

Environment Variables

Create backend/.env:

FRONTEND_URL=https://chatroom-hub.vercel.app
JWT_EXPIRATION=15m
JWT_REFRESH_EXPIRATION=7d
JWT_SECRET=your_jwt_secret
JWT_REFRESH_SECRET=your_refresh_secret
NODE_ENV=production
PORT=5000
GMAIL_USER=your_gmail_address
GMAIL_APP_PASSWORD=your_gmail_app_password
SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
SMTP_SECURE=true
MONGO_URI=your_mongodb_connection_string

Create Frontend/.env.development:

VITE_API_URL=http://localhost:5000/api

Create Frontend/.env.production:

VITE_API_URL=https://chatroom-hub-server.onrender.com/api

---

Author

Dharmapal (Flash)

---

Built with love by Dharmapal