Skip to content

Commit 9b0ddb2

Browse files
authored
Merge pull request #28 from indrasuthar07/feature/landing-page-ui
feat: add responsive landing page UI for PeerCall (#1) Thank you for your contribution! We're hosting Opcode 2025, an open-source fest exclusively for college students, and we would love for you to be a part of it. Website & Registration: opcode.gymkhana.iiitbh.ac.in Join the Community: Be sure to join our Discord server to connect with other participants and stay up-to-date! Important: To ensure your work is officially recognized on our fest leaderboard, we merge pull requests after you have registered. Please reply to this comment to let us know if you have registered or if you are not eligible to participate. And great news – your contributions to this repository will also count towards Hacktoberfest! Looking forward to seeing you at the fest!
2 parents e3c1707 + e7b76c8 commit 9b0ddb2

76 files changed

Lines changed: 12888 additions & 1299 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.gitignore

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1-
node_modules
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

README.md

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

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

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

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)
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
109

11-
> A community-driven, secure, real-time video chat app built with web technologies.
10+
## React Compiler
1211

13-
---
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).
1413

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

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)
16+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
3617

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

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
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,
16432

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+
])
16544
```
16645

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-
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+
])
17373
```
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-

components.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/index.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"iconLibrary": "lucide",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"ui": "@/components/ui",
18+
"lib": "@/lib",
19+
"hooks": "@/hooks"
20+
},
21+
"registries": {}
22+
}

0 commit comments

Comments
 (0)