Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaali001/varta
A online video chat platform which matches two people who are learning same languages.
https://github.com/kaali001/varta
hacktoberfest nodejs reactjs socket-io typescript webrtc
Last synced: 2 months ago
JSON representation
A online video chat platform which matches two people who are learning same languages.
- Host: GitHub
- URL: https://github.com/kaali001/varta
- Owner: kaali001
- Created: 2024-10-05T15:55:32.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-10-18T18:57:25.000Z (3 months ago)
- Last Synced: 2024-10-25T19:49:52.599Z (3 months ago)
- Topics: hacktoberfest, nodejs, reactjs, socket-io, typescript, webrtc
- Language: TypeScript
- Homepage: https://varta-online.vercel.app
- Size: 344 KB
- Stars: 5
- Watchers: 1
- Forks: 10
- Open Issues: 10
-
Metadata Files:
- Readme: Readme.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
🗣️ Varta
Varta is a real-time video chat platform that connects users randomly to have face-to-face conversations through WebRTC. It leverages Socket.io for signaling and enables smooth peer-to-peer video streaming between users. Whether you want to chat with strangers or friends, Varta offers an intuitive and seamless video calling experience.
# 🚀 Features
- Random Peer Matching: Users are connected randomly to available peers in the lobby.
- WebRTC-based Video Streaming: Real-time peer-to-peer video calls with minimal latency.
- Lobby System with Loader Animation: Users wait for matching with a circular spinning loader.
- Local Video Preview: Self-video preview in a small floating window for monitoring appearance.
- Automatic Room Creation: Dynamically creates rooms when two users connect.
- Responsive UI: Clean and modern design built with React and Tailwind CSS.
- Cross-Browser Support: Works well across major browsers with WebRTC support.
# 🛠️ Technologies Used
| Frontend | Backend | Other Dependencies |
| ------ | ------ | ------- |
| React | Node.js | Socket.io |
| TypeScript | Express.js | WebRTC API |
| Tailwind CSS |
# ⚙️ Installation Guide
Follow these steps to run the application on your local machine.
## Prerequisites
Make sure you have the following installed:
- Node.js (v18+)
- npm (or yarn)
### 1. Step 1: Clone the Repository
```
git clone https://github.com/your-username/varta.git
cd varta
```
### 2. Step 2: Install Dependencies
- #### For the backend
```
cd server
npm install
```
- (option)create a config.env file and add below details, as of now both predefined in `index.js`.
```
PORT
FRONTEND_URL
```
- #### For the frontend
```
cd ../client
npm install
```
### 3. Step 3: Run the Application
Open two terminal windows: one for the backend and one for the frontend.
- #### Backend (Server)
```
cd server
node src/index.js
```
- #### Frontend (Client)
```
cd client
npm start
```
# 🌐 Project Structure
```
varta/
├── client/ # Frontend code (React)
│ ├── src/
│ │ ├── pages/ # React pages (ChatPage, etc.)
│ │ └── components/ # UI components (Room)
│ └── public/ # Public assets
|
├── server/ # Backend code (Node.js)
│ ├── Managers/
│ │ ├── RoomManager.js
│ │ └── UserManager.js
| └── index.js # Server entry point
└── README.md # Documentation
```
# 🎥 Demo
## 📸 Screenshots:
# ❓ How It Works
- When a user joins, they enter the lobby and wait for another user to connect.
- Once two users connect, the server creates a room and initiates the offer-answer exchange using WebRTC.
- The two peers exchange ICE candidates to establish a connection.
- Users can see both self-video preview and peer video on the interface.
# 🧑💻 Contributing
We welcome contributions! Please follow the steps below to contribute:
- Fork the repository.
- Clone the repository.
- Create a feature branch `git checkout -b feature-name`.
- Commit your changes `git commit -m "Add new feature"`.
- Push to your branch `git push origin feature-name`.
- Open a Pull Request on GitHub.