Vidcha 🎥💬

Vidcha is a modern, real-time video communication and multimedia web application designed for seamless video streaming, real-time video calls, and interactive chat. Built on a full-stack JavaScript architecture, Vidcha offers fast, low-latency performance with an intuitive user interface.

🌐 Live Demo: https://vidcha.onrender.com/

---

✨ Features

• 📹 Real-Time Video Calls: Peer-to-peer audio and video streaming powered by WebRTC and Socket.io.
• 💬 Instant Live Messaging: In-call text chat, interactive reactions, and room management.
• 🔒 Secure Authentication: User registration, login, and JWT-based session security.
• 📱 Responsive UI: Sleek, mobile-friendly design built with React / Next.js and styled for modern displays.
• ⚡ Low Latency & High Performance: Optimized server-side processing with Node.js & Express.
• 🌐 Cloud Deployed: Seamless continuous deployment configured for Render.

---

🛠️ Tech Stack

Frontend

• Framework: React / Next.js
• Styling: Tailwind CSS / CSS Modules
• Real-Time Client: Socket.io Client / WebRTC API

Backend

• Runtime: Node.js
• Framework: Express.js
• Real-Time Server: Socket.io / WebSockets
• Authentication: JSON Web Tokens (JWT) & bcrypt
• Database: MongoDB / PostgreSQL (Mongoose / Prisma)

Deployment & Infrastructure

• Hosting: Render
• Environment: Node.js Production Engine

---

🚀 Getting Started

Follow these instructions to set up and run Vidcha locally on your machine.

Prerequisites

Ensure you have the following installed:

• Node.js (v18.x or higher)
• npm or yarn
• Git

---

Installation

1. Clone the repository:

   git clone https://github.com/your-username/vidcha.git
   cd vidcha

2. Install Backend Dependencies:

   npm install

3. Install Frontend Dependencies (if client folder is separate):

   cd client
   npm install
   cd ..

---

⚙️ Environment Variables

Create a .env file in the root directory (and /client if applicable) and configure the following variables:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database
DATABASE_URL=mongodb+srv://<username>:<password>@cluster.mongodb.net/vidcha

# Authentication & Security
JWT_SECRET=your_super_secret_jwt_key
JWT_EXPIRES_IN=7d

# CORS & Client URL
CLIENT_URL=http://localhost:3000

---

🏃 Running the Application

Development Mode

Run the backend server:

npm run dev

Run the frontend client (in a separate terminal):

cd client
npm start
# or for Next.js:
npm run dev

Open http://localhost:3000 in your browser to view the app.

---

📁 Directory Structure

vidcha/
├── client/              # Frontend React / Next.js application
│   ├── public/          # Static assets
│   └── src/             # Components, pages, hooks, styles
├── server/              # Backend Express Node.js application
│   ├── controllers/     # Request handlers
│   ├── models/          # Database models
│   ├── routes/          # API routes
│   └── sockets/         # WebRTC & Socket.io handlers
├── .env.example         # Example environment variables
├── package.json         # Root dependencies & scripts
└── README.md            # Project documentation

---

🌐 Deployment on Render

Vidcha is deployed live at https://vidcha.onrender.com/.

Deployment Steps on Render:

1. Connect your GitHub repository to Render.
2. Create a new Web Service.
3. Set the build and start commands:
   • Build Command: npm run build
   • Start Command: npm start
4. Add environment variables in the Render Dashboard under Environment.
5. Deploy!

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

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

Distributed under the MIT License. See LICENSE for more information.

---

✉️ Contact & Support

If you have any questions or feedback, feel free to reach out or open an issue in the repo!