Skip to content

Commit fefcc03

Browse files
04shubham704shubham7
authored
Update README.md
1 parent 9b0ddb2 commit fefcc03

1 file changed

Lines changed: 274 additions & 60 deletions

File tree

‎README.md‎

Lines changed: 274 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,287 @@
1-
# React + TypeScript + Vite
21

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
42

5-
Currently, two official plugins are available:
3+
# PeerCall — Modern, Secure Real-Time Video Chat 🎥🔒
64

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
5+
![Project Status: Active](https://img.shields.io/badge/status-active-brightgreen)
6+
![License: MIT](https://img.shields.io/badge/license-MIT-blue)
7+
![GitHub Issues](https://img.shields.io/github/issues/OPCODE-Open-Spring-Fest/PeerCall)
8+
![GitHub Pull Requests](https://img.shields.io/github/issues-pr/OPCODE-Open-Spring-Fest/PeerCall)
9+
![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)
910

10-
## React Compiler
11+
> A community-driven, secure, real-time video chat app built with web technologies.
1112
12-
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13+
---
1314

14-
## Expanding the ESLint configuration
15+
## Table of Contents
1516

16-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17+
- [Project Overview](#project-overview)
18+
- [Vision and Design Principles](#vision-and-design-principles)
19+
- [Goals & Non-Goals](#goals--non-goals)
20+
- [Key Features](#key-features)
21+
- [Tech Stack](#tech-stack)
22+
- [Architecture Overview](#architecture-overview)
23+
- [Folder Structure](#folder-structure)
24+
- [Getting Started](#getting-started)
25+
- [Testing & Quality Gates](#testing--quality-gates)
26+
- [Contributing](#contributing)
27+
- [Issue & Release Process](#issue--release-process)
28+
- [Branching & Git Workflow](#branching--git-workflow)
29+
- [PR Template & Review Checklist](#pr-template--review-checklist)
30+
- [Code Style Guide](#code-style-guide)
31+
- [Security & Licensing](#security--licensing)
32+
- [Roadmap](#roadmap)
33+
- [Project Governance](#project-governance)
34+
- [Maintainers & Contact](#maintainers--contact)
35+
- [Acknowledgements](#acknowledgements)
1736

18-
```js
19-
export default defineConfig([
20-
globalIgnores(['dist']),
21-
{
22-
files: ['**/*.{ts,tsx}'],
23-
extends: [
24-
// Other configs...
37+
---
2538

26-
// Remove tseslint.configs.recommended and replace with this
27-
tseslint.configs.recommendedTypeChecked,
28-
// Alternatively, use this for stricter rules
29-
tseslint.configs.strictTypeChecked,
30-
// Optionally, add this for stylistic rules
31-
tseslint.configs.stylisticTypeChecked,
39+
## Project Overview
40+
41+
**PeerCall** delivers secure, privacy-respecting, real-time video communication combining peer-to-peer WebRTC with solid authentication and session management.
42+
43+
### Watch PeerCall in action:
44+
45+
![WebRTC Video Call Demo](https://media.giphy.com/media/XreQmk7ETCak0/giphy.gif)
46+
*A smooth real-time WebRTC video call experience.*
47+
48+
![Screen Sharing Demo](https://media.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)
49+
*Seamless screen sharing capability.*
50+
51+
---
52+
53+
## Vision and Design Principles
54+
55+
- 🚀 **Easy onboarding:** Clone, run, and start developing quickly.
56+
- 🤝 **Community-first:** Open governance and transparent development.
57+
- 🔒 **Security:** Token rotation, secure sessions, HTTP-only cookies.
58+
- ⚡ **Performance:** Responsive, efficient, modern browser compatibility.
59+
60+
---
61+
62+
## Goals & Non-Goals
63+
64+
| **Goals** | **Non-Goals** |
65+
| ----------------------------------------------------|---------------------------------------------|
66+
| Secure, user-friendly video chat platform | Enterprise-level scaling out-of-the-box |
67+
| Clear and welcoming contribution process | Polished final UI/UX design |
68+
| Strong CI/CD pipelines and reproducible builds | Complex SFU cluster deployments initially |
69+
70+
---
71+
72+
## Key Features
73+
74+
- 🔐 Secure sign-up/sign-in with refresh token rotation
75+
- 🔗 Create/join rooms using short shareable links
76+
- 🎥 WebRTC peer-to-peer media (audio/video) with mute & toggle controls
77+
- 💬 In-call chat overlay for messaging during video calls
78+
- 📱 Device & session listing with revocation for security
79+
- 🔄 Lightweight backend for authentication, signaling, and presence
80+
81+
---
82+
83+
## Tech Stack
84+
85+
### Frontend
86+
- React + TypeScript
87+
- [Vite](https://vitejs.dev/)
88+
- [Framer Motion](https://www.framer.com/motion/) for animations
89+
- CSS Modules / Tailwind CSS
90+
91+
### Backend
92+
- Node.js + TypeScript
93+
- Express or NestJS
94+
- MongoDB or PostgreSQL
95+
- JWT + httpOnly cookie session management
96+
97+
### Real-Time
98+
- WebRTC for media streams
99+
- socket.io or WebSocket for signaling & presence
100+
101+
### Tooling
102+
- ESLint, Prettier for code quality
103+
- Jest or Vitest for unit testing
104+
- GitHub Actions for CI/CD
105+
106+
---
107+
108+
## Architecture Overview
109+
110+
```
111+
112+
graph TD
113+
Client[Client (Browser)]
114+
Server[API \& Signaling Server]
115+
Database[Database]
116+
117+
Client -->|Requests Access Token| Server
118+
Client -->|WebRTC Signaling \& Media| Server
119+
Server -->|Stores Sessions \& Tokens| Database
120+
121+
```
122+
*Architecture components of PeerCall showing how client, signaling server, and database interact.*
123+
124+
---
125+
126+
## Folder Structure
127+
128+
```
129+
130+
/
131+
├─ README.md
132+
├─ LICENSE
133+
├─ .github/
134+
├─ frontend/
135+
│ ├─ src/
136+
│ ├─ public/
137+
│ └─ package.json
138+
├─ server/
139+
│ ├─ src/
140+
│ └─ package.json
141+
├─ scripts/
142+
└─ tests/
143+
144+
```
145+
146+
---
147+
148+
## Getting Started
149+
150+
### Prerequisites
151+
- Node.js >= 18
152+
- npm >= 9 or Yarn
153+
154+
### Clone and install
155+
156+
```
157+
158+
git clone https://github.com/OPCODE-Open-Spring-Fest/PeerCall.git
159+
cd PeerCall
160+
cd frontend
161+
npm install
162+
cd ../server
163+
npm install
32164
33-
// Other configs...
34-
],
35-
languageOptions: {
36-
parserOptions: {
37-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
38-
tsconfigRootDir: import.meta.dirname,
39-
},
40-
// other options...
41-
},
42-
},
43-
])
44165
```
45166

46-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47-
48-
```js
49-
// eslint.config.js
50-
import reactX from 'eslint-plugin-react-x'
51-
import reactDom from 'eslint-plugin-react-dom'
52-
53-
export default defineConfig([
54-
globalIgnores(['dist']),
55-
{
56-
files: ['**/*.{ts,tsx}'],
57-
extends: [
58-
// Other configs...
59-
// Enable lint rules for React
60-
reactX.configs['recommended-typescript'],
61-
// Enable lint rules for React DOM
62-
reactDom.configs.recommended,
63-
],
64-
languageOptions: {
65-
parserOptions: {
66-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
67-
tsconfigRootDir: import.meta.dirname,
68-
},
69-
// other options...
70-
},
71-
},
72-
])
167+
### Setup environment variables
168+
169+
- Copy `.env.example` to `.env` in both `frontend` and `server` folders and fill in the required values.
170+
171+
### Run local servers
172+
73173
```
174+
175+
176+
# Run backend API server
177+
178+
cd server \&\& npm run dev
179+
180+
# Run frontend dev server (open new terminal)
181+
182+
cd ../frontend \&\& npm run dev
183+
184+
```
185+
186+
Open [http://localhost:5173](http://localhost:5173) to view the app.
187+
188+
---
189+
190+
## Testing & Quality Gates
191+
192+
- ✅ Type-check: `npm run type-check`
193+
- ✅ Linting: `npm run lint` (`npm run lint:fix` to fix issues)
194+
- ✅ Unit Tests: `npm run test`
195+
- ✅ Build verification: `npm run build`
196+
- ✅ Continuous Integration with GitHub Actions on all PRs and main branch.
197+
198+
---
199+
200+
## Contributing
201+
202+
Please read our [Contribution Guide](./CONTRIBUTING.md) for detailed instructions. Quick start:
203+
204+
1. Pick an issue labelled `good first issue` or `help wanted`.
205+
2. Fork and create a feature branch: `git checkout -b feat/awesome-feature`
206+
3. Commit often with clear, conventional commit messages.
207+
4. Run tests and linting locally before PR.
208+
5. Open a PR referencing relevant issues and describe your changes.
209+
6. Engage in code review until PR is approved and merged.
210+
211+
---
212+
213+
## Issue & Release Process
214+
215+
- Use descriptive labels like `type: bug`, `area: frontend`, `help wanted` etc.
216+
- File issues using templates for reproducibility.
217+
- Releases follow semantic versioning. Changelog auto-generated.
218+
219+
---
220+
221+
## Branching & Git Workflow
222+
223+
- Feature branches use prefixes like `feat/`, `fix/`, `chore/`, and `docs/`.
224+
- PRs should be concise and pass all CI checks.
225+
- Rebase to keep history clean before merging.
226+
227+
---
228+
229+
## PR Template & Review Checklist
230+
231+
```
232+
233+
234+
## Summary
235+
236+
## Related Issues
237+
238+
## How to Test
239+
240+
- [ ] CI passes
241+
- [ ] Code style \& tests updated
242+
243+
```
244+
245+
---
246+
247+
## Code Style Guide
248+
249+
- Strict TypeScript typing – use `readonly` and `unknown` when appropriate
250+
- ESLint and Prettier enforced for consistency
251+
- Modular, testable, focused components and functions
252+
- Clear API typings on exports and interfaces
253+
254+
---
255+
256+
## Security & Licensing
257+
258+
- Responsible Disclosure guidelines in `SECURITY.md`
259+
- Contributor Code of Conduct in `CODE_OF_CONDUCT.md`
260+
- Licensed under MIT (see the `LICENSE` file)
261+
262+
---
263+
264+
## Roadmap
265+
266+
- v0.1: MVP - authentication + basic peer-to-peer WebRTC calls
267+
- v0.2: Session management, chat overlay, UI improvements, e2e tests
268+
- v1.0: Accessibility audit, stability enhancements, optional SFU integration
269+
270+
---
271+
272+
## Project Governance
273+
274+
Community-driven with maintainer oversight. Contributions, discussions, and feedback are welcomed to shape project direction.Please star the repo
275+
---
276+
277+
## Maintainers & Contact
278+
279+
- Project Manager: [@04shubham7](https://github.com/04shubham7)
280+
281+
282+
---
283+
284+
## Acknowledgements
285+
286+
Thanks to all [PeerCall contributors](https://github.com/OPCODE-Open-Spring-Fest/PeerCall/graphs/contributors), WebRTC community ([webrtc.org](https://webrtc.org/)), and open-source projects making this possible.
287+

0 commit comments

Comments
 (0)