Skip to content

Commit c2b25e5

Browse files
committed
docs: update README with screenshots and project overview
1 parent 86035c2 commit c2b25e5

10 files changed

Lines changed: 131 additions & 39 deletions

File tree

README.md

Lines changed: 131 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Confero
22

3-
Confero is a real-time communication platform designed for low-latency video and voice interactions.
3+
Confero is a real-time skill-based video networking platform designed for low-latency video and voice interactions.
44

5-
The project focuses on clean architecture, scalability, and practical real-world implementation of real-time systems using modern web technologies.
5+
The project focuses on clean architecture, scalability, and practical real-world implementation of real-time systems using modern web technologies. Users create profiles with skill tags, enter a matchmaking queue, and are paired with someone who shares at least one skill — a live WebRTC video call begins automatically.
66

77
---
88

@@ -14,91 +14,183 @@ The codebase follows a **monorepo architecture**, keeping frontend and backend d
1414

1515
The goal is to build a system that is predictable under load, easy to reason about, and extensible for future features.
1616

17+
<br/>
18+
19+
![Landing](assets/screenshots/landing.png)
20+
1721
---
1822

1923
## Key Features
2024

21-
- Real-time video and audio communication
22-
- WebSocket-based signaling layer
23-
- WebRTC peer-to-peer media streaming
24-
- Multi-user room support
25-
- Asynchronous event handling
25+
- Real-time video and audio communication via WebRTC P2P
26+
- WebSocket-based signaling layer with Socket.IO
27+
- Skill-intersection matchmaking backed by Redis queues
28+
- Two-sided readiness gate — call only starts when both users accept
29+
- Duplicate tab guard using Redis `SCARD` checks
30+
- OTP + Google OAuth 2.0 authentication
31+
- JWT HTTP-only cookies with refresh token rotation
32+
- Asynchronous session recording via RabbitMQ
2633
- Fast in-memory presence management
34+
- Full admin dashboard with real-time analytics
2735
- Monorepo setup using pnpm workspaces
2836

37+
<br/>
38+
39+
<table>
40+
<tr>
41+
<td width="50%">
42+
43+
![Match Found](assets/screenshots/match-found.png)
44+
45+
</td>
46+
<td width="50%">
47+
48+
![Video Call](assets/screenshots/video-call.png)
49+
50+
</td>
51+
</tr>
52+
<tr>
53+
<td align="center"><sub>Skill-based match flow</sub></td>
54+
<td align="center"><sub>Live P2P video session</sub></td>
55+
</tr>
56+
</table>
57+
58+
---
59+
60+
## User Profiles
61+
62+
Every user has a full profile — custom banner, avatar, job title, LinkedIn, and a skill list that drives the entire matching system.
63+
64+
<table>
65+
<tr>
66+
<td width="33%">
67+
68+
![Profile](assets/screenshots/profile-1.png)
69+
70+
</td>
71+
<td width="33%">
72+
73+
![Profile Edit](assets/screenshots/profile-edit.png)
74+
75+
</td>
76+
<td width="33%">
77+
78+
![Profile 2](assets/screenshots/profile-2.png)
79+
80+
</td>
81+
</tr>
82+
<tr>
83+
<td align="center"><sub>Profile with skill overview</sub></td>
84+
<td align="center"><sub>Live banner update with toast confirmation</sub></td>
85+
<td align="center"><sub>Full profile — personal info & expertise</sub></td>
86+
</tr>
87+
</table>
88+
89+
---
90+
91+
## Admin Panel
92+
93+
A full admin console gives platform operators real-time visibility — active socket connections, live call sessions, total video calls, match rate, call time distribution, and a searchable connection log.
94+
95+
<table>
96+
<tr>
97+
<td width="50%">
98+
99+
![Admin Dashboard](assets/screenshots/admin-dashboard.png)
100+
101+
</td>
102+
<td width="50%">
103+
104+
![Call Sessions](assets/screenshots/call-sessions.png)
105+
106+
</td>
107+
</tr>
108+
<tr>
109+
<td align="center"><sub>Platform intelligence dashboard</sub></td>
110+
<td align="center"><sub>Live call session tracking</sub></td>
111+
</tr>
112+
</table>
113+
114+
<br/>
115+
116+
![Connections](assets/screenshots/connections.png)
117+
118+
<p align="center"><sub>Connection log — full history with participants, duration & status</sub></p>
119+
29120
---
30121

31122
## Tech Stack
32123

33124
### Frontend
34125

35-
![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs)
36-
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react)
126+
![Next.js](https://img.shields.io/badge/Next.js%2015-000000?style=for-the-badge&logo=nextdotjs)
127+
![React](https://img.shields.io/badge/React%2019-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
37128
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
38129
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss)
39-
40-
---
130+
![Framer Motion](https://img.shields.io/badge/Framer%20Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)
41131

42132
### Backend
43133

44134
![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)
45135
![Express](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express)
46-
![WebSocket](https://img.shields.io/badge/WebSockets-000000?style=for-the-badge)
136+
![Socket.IO](https://img.shields.io/badge/Socket.IO-010101?style=for-the-badge&logo=socketdotio)
47137
![WebRTC](https://img.shields.io/badge/WebRTC-333333?style=for-the-badge)
48138

49-
---
50-
51-
## Infrastructure & Tools
139+
### Infrastructure & Tools
52140

141+
![MongoDB](https://img.shields.io/badge/MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white)
53142
![Redis](https://img.shields.io/badge/Redis-DC382D?style=for-the-badge&logo=redis&logoColor=white)
54143
![RabbitMQ](https://img.shields.io/badge/RabbitMQ-FF6600?style=for-the-badge&logo=rabbitmq&logoColor=white)
144+
![Azure](https://img.shields.io/badge/Azure-0078D4?style=for-the-badge&logo=microsoftazure&logoColor=white)
145+
![GitHub Actions](https://img.shields.io/badge/GitHub%20Actions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white)
55146
![pnpm](https://img.shields.io/badge/pnpm-F69220?style=for-the-badge&logo=pnpm&logoColor=white)
56147

57148
---
58149

59150
## Architecture Overview
60151

152+
```
61153
Client (Browser)
62154
63-
├── WebRTC (Media Streams)
64-
65-
├── WebSocket Signaling
155+
├── WebRTC (Media Streams — direct P2P, no server touch)
66156
67-
└── REST APIs
157+
├── WebSocket Signaling ──► Live Service ──► Redis (presence, queues, locks)
158+
│ │
159+
│ └── RabbitMQ ──► Auth Service (session recording)
68160
69-
├── Redis (Presence, ephemeral state)
70-
├── RabbitMQ (Async events)
71-
└── Core Services
161+
└── REST APIs ──► API Gateway ──► Auth Service (users, auth, admin)
162+
(rate limiting,
163+
reverse proxy)
164+
```
165+
166+
This separation allows real-time media traffic to remain fully isolated from control logic and background processing. A database write failure never interrupts a live call.
167+
168+
---
72169

73-
This separation allows real-time media traffic to remain isolated from control and background processing logic.
170+
## Monorepo Structure
171+
172+
- `frontend` — Next.js 15 App Router, UI, socket client
173+
- `live-service` — WebSocket server, matchmaking engine, WebRTC signaling
174+
- `services/auth-service` — Users, auth, sessions, bans, admin APIs
175+
- `gateway` — Reverse proxy, rate limiting per IP
176+
- `packages/shared` — Shared types and utilities
177+
178+
Managed using **pnpm workspaces** for consistent dependency control.
74179

75180
---
76181

77182
## Design Principles
78183

79184
- Explicit over implicit behavior
80-
- Clear separation of concerns
185+
- Clear separation of concerns — controllers thin, logic in services, data access in repositories
81186
- Real-time paths kept minimal and fast
82187
- Event-driven workflows for non-blocking operations
83188
- Maintainability prioritized over shortcuts
84189

85190
---
86191

87-
## Monorepo Structure
88-
89-
- `apps/web` – Frontend (Next.js)
90-
- `apps/server` – Backend services
91-
- `packages/shared` – Shared types and utilities
92-
93-
Managed using **pnpm workspaces** for consistent dependency control.
94-
95-
---
96-
97192
## Status
98193

99-
**Active development**
100-
101-
Core real-time communication and signaling infrastructure is in place.
102-
Additional scalability, observability, and reliability improvements are ongoing.
194+
**Active development.**
103195

104-
---
196+
Core real-time communication and signaling infrastructure is fully operational and deployed on Azure. Additional scalability, observability, and reliability improvements are ongoing — including moving call state to Redis for horizontal scaling and establishing test coverage starting with the matching engine.
291 KB
Loading
343 KB
Loading

assets/screenshots/connections.png

354 KB
Loading

assets/screenshots/landing.png

716 KB
Loading

assets/screenshots/match-found.png

476 KB
Loading

assets/screenshots/profile-1.png

594 KB
Loading

assets/screenshots/profile-2.png

357 KB
Loading
343 KB
Loading

assets/screenshots/video-call.png

962 KB
Loading

0 commit comments

Comments
 (0)