videopeersjs/README.md

# VideoPeersJS - Real Time P2P Video Chat Application

## Description

This is a modern, secure real-time video chat application built using WebRTC, Socket.io, Node.js, Express.js, and Next.js. VideoPeersJS allows users to create rooms and share room IDs with other users for peer-to-peer video calls with enhanced security and a beautiful, responsive design.

## 🚀 Latest Updates (2025)

- **Enhanced Security**: Implemented comprehensive security measures including Helmet.js, rate limiting, input validation, and CORS protection
- **Modern UI/UX**: Complete redesign with beautiful gradients, animations, and responsive design using Tailwind CSS
- **Updated Dependencies**: All packages updated to latest stable versions for security and performance
- **Improved User Experience**: Better loading states, error handling, and user feedback
- **Enhanced Architecture**: Better code organization and error handling
- **Environment Configuration**: ICE servers and configuration moved to environment variables
- **Enhanced Typography**: Added multiple Google Fonts for better visual hierarchy
- **Local Fonts**: Migrated to self-hosted fonts for better performance, privacy, and reliability (156KB total)

## Deployment Link : https://video-peers.vercel.app/

## Screen Shots :
<p><img align="right" src="https://github.com/hirentimbadiya/Video-Peers/assets/86219935/3cc34115-e4db-460a-9825-d0e97a5f6cae" /></p>
<p><img align="center" src="https://github.com/hirentimbadiya/Video-Peers/assets/86219935/24fa55ab-c08d-40f5-8023-060c06da78f5" alt="hirentimbadiya"/></p>

## How To Use : 
1. Enter your email and a room ID on the homepage
2. Share the room ID with someone you want to video chat with
3. Once both users are in the room, click the "Start Call" button
4. Use the control buttons to mute/unmute audio, turn camera on/off, or end the call

## 🔒 Security Features

- **Rate Limiting**: Prevents abuse with request limits
- **Input Validation**: All user inputs are validated and sanitized
- **CORS Protection**: Configured for secure cross-origin requests
- **Helmet.js**: Adds security headers to protect against common attacks
- **Error Handling**: Comprehensive error handling and logging
- **Connection Timeouts**: Prevents hanging connections

## Key Features

- [x] Create and join video chat rooms using room IDs
- [x] Real-time peer-to-peer video calling using WebRTC
- [x] Audio mute/unmute controls with visual indicators
- [x] Video on/off controls
- [x] Call end functionality
- [x] Modern, responsive design with animations
- [x] Enhanced typography with local fonts for better performance
- [x] Self-hosted fonts (no external dependencies)
- [x] Environment-based configuration for ICE servers
- [x] Input validation and sanitization
- [x] Connection status indicators
- [x] Beautiful gradients and glass-morphism effects
- [x] Accessible design with proper ARIA labels

## Installation

1. Clone the repository

```bash
git clone https://github.com/hirentimbadiya/VideoPeersJS.git
cd VideoPeersJS
```

2. Install dependencies for Client Side

```bash
cd client
npm install
```

3. Install dependencies for Server Side

```bash
cd server
npm install
```

4. Configure environment variables

```bash
# In server directory, copy .env.example to .env
cp .env.example .env

# Edit .env with your preferred settings:
# PORT=8000
# CLIENT_URL=http://localhost:3000
# NODE_ENV=development
```

5. Run the application

- Run the server side first:
   ```bash
   cd server
   npm run dev
   ```
   
- Run the client side:
   ```bash
   cd client
   npm run dev
   ```

6. Open your browser and navigate to `http://localhost:3000`

## 🛠 Technologies Used

### Frontend
- [Next.js 14](https://nextjs.org/) - React framework with latest features
- [React 18](https://reactjs.org/) - UI library
- [Tailwind CSS 3](https://tailwindcss.com/) - Utility-first CSS framework
- [Framer Motion](https://www.framer.com/motion/) - Animation library
- [Lucide React](https://lucide.dev/) - Beautiful, customizable icons
- [WebRTC](https://webrtc.org/) - Real-time communication

### Backend
- [Node.js](https://nodejs.org/) - Backend runtime
- [Express.js](https://expressjs.com/) - Web framework
- [Socket.io](https://socket.io/) - Real-time bidirectional communication
- [Helmet.js](https://helmetjs.github.io/) - Security middleware
- [Joi](https://joi.dev/) - Input validation
- [Express Rate Limit](https://github.com/nfriedly/express-rate-limit) - Rate limiting
- [Validator.js](https://github.com/validatorjs/validator.js) - String validation

## 🔧 Development

### Project Structure
```
VideoPeersJS/
├── client/                 # Next.js frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/         # Next.js pages
│   │   ├── context/       # React context providers
│   │   ├── service/       # WebRTC service
│   │   └── styles/        # Global styles
│   ├── .env.example       # Environment variables template
│   └── package.json
├── server/                 # Node.js backend
│   ├── index.js           # Main server file
│   ├── .env.example       # Environment variables template
│   └── package.json
└── README.md
```

### API Endpoints

#### REST Endpoints
- `GET /` - Health check and server info
- `GET /health` - Health status endpoint

#### Socket Events
- `room:join` - Join a video chat room
- `user:call` - Initiate a call to another user
- `call:accepted` - Accept an incoming call
- `peer:nego:needed` - WebRTC negotiation
- `peer:nego:done` - Complete WebRTC negotiation
- `call:end` - End the current call
- `error` - Error handling

## Working Demo
https://github.com/hirentimbadiya/Video-Peers/assets/86219935/7ce8caf9-0881-4abe-b633-79d3bb0a87ef

## 🚀 Future Scope

- [ ] Text chat support in rooms
- [ ] Screen sharing feature
- [ ] Multiple participants in a room (group calls)
- [ ] Video recording and playback
- [ ] Virtual backgrounds
- [ ] File sharing capabilities
- [ ] Mobile app development
- [ ] Integration with calendar systems

## 📚 My Learnings

Building this project taught me about:

- **WebRTC**: Understanding peer-to-peer communication, ICE candidates, and media streams
- **Socket.io**: Real-time bidirectional communication patterns
- **Security**: Implementing comprehensive security measures for web applications
- **Modern React**: Using hooks, context, and latest React patterns
- **UI/UX Design**: Creating beautiful, accessible interfaces with Tailwind CSS
- **Next.js**: Server-side rendering, file-based routing, and optimization
- **Node.js Security**: Rate limiting, input validation, and security headers

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📄 License
[MIT](https://choosealicense.com/licenses/mit/)

## 👨‍💻 Author
- [hirentimbadiya](https://github.com/hirentimbadiya)
- Email: hirentimbadiya74@gmail.com

---

⭐ Star this repo if you find it helpful!