# chandrapratap01/vidloom architecture

> Architecture diagram of the GitHub repository chandrapratap01/vidloom, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chandrapratap01/vidloom
- Repository: https://github.com/chandrapratap01/vidloom

## Overview

VidBridge is a browser-to-browser video communication app: a user creates a room or joins one by ID, then the two room views negotiate a WebRTC connection through a WebSocket signaling server. Media and data are intended to flow directly between peers, with STUN and optional TURN supporting connectivity. The frontend also provides shared layout and a header animation. The README documents traversal capabilities not visible in the sampled room code; the graph distinguishes those from directly evidenced calls.

Main entry points: [`Frontend/src/App.tsx`](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/App.tsx) (App routes), [`Backend/src/index.ts`](https://github.com/chandrapratap01/vidloom/blob/main/Backend/src/index.ts) (WebSocket server), [`Frontend/src/Pages/SenderRoom.tsx`](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/SenderRoom.tsx) (Sender room), [`Frontend/src/Pages/ReceiverRoom.tsx`](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/ReceiverRoom.tsx) (Receiver room)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend experience"]
  node_bootstrap["React bootstrap<br/>[main.tsx]"]
  node_app["App routes<br/>[App.tsx]"]
  node_landing["Room selection<br/>[Landing.tsx]"]
  node_header["Header UI<br/>[Header.tsx]"]
  node_background["Background UI<br/>[Background.tsx]"]
end

subgraph group_calls["Peer calling"]
  node_sender["Sender room<br/>[SenderRoom.tsx]"]
  node_receiver["Receiver room<br/>[ReceiverRoom.tsx]"]
  node_peer["WebRTC peers"]
end

subgraph group_signaling["Room signaling"]
  node_signaling_server["WebSocket server<br/>[index.ts]"]
  node_room_state[("Room membership<br/>[index.ts]")]
end

subgraph group_traversal["Network traversal"]
  node_stun["STUN service"]
  node_turn["TURN relay"]
end

node_user(("Room user"))
node_giphy["Giphy API"]

node_user -->|"opens app"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_app -->|"wraps routes"| node_background
node_app -->|"renders"| node_header
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_sender
node_app -->|"routes to"| node_receiver
node_user -->|"chooses room"| node_landing
node_landing -->|"navigates to"| node_sender
node_landing -->|"navigates to"| node_receiver
node_sender -->|"sends signaling"| node_signaling_server
node_receiver -->|"sends signaling"| node_signaling_server
node_signaling_server -->|"tracks members"| node_room_state
node_signaling_server -->|"relays negotiation"| node_sender
node_signaling_server -->|"relays negotiation"| node_receiver
node_sender -->|"negotiates offer"| node_peer
node_receiver -->|"answers offer"| node_peer
node_peer -.->|"exchanges media/data"| node_peer
node_peer -.->|"discovers public IP"| node_stun
node_peer -.->|"relays if needed"| node_turn
node_header -->|"fetches animation"| node_giphy

click node_bootstrap "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/main.tsx"
click node_app "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/App.tsx"
click node_landing "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/Landing.tsx"
click node_header "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Component/Header.tsx"
click node_background "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Component/Background.tsx"
click node_sender "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/SenderRoom.tsx"
click node_receiver "https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/ReceiverRoom.tsx"
click node_signaling_server "https://github.com/chandrapratap01/vidloom/blob/main/Backend/src/index.ts"
click node_room_state "https://github.com/chandrapratap01/vidloom/blob/main/Backend/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_app,node_landing,node_header,node_background,node_user toneBlue
class node_sender,node_receiver,node_peer toneAmber
class node_signaling_server,node_room_state,node_giphy toneMint
class node_stun,node_turn toneRose
```

## Components

### Frontend experience

- [React bootstrap](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/main.tsx): `Frontend/src/main.tsx`
- [App routes](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/App.tsx): `Frontend/src/App.tsx`
- [Room selection](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/Landing.tsx): `Frontend/src/Pages/Landing.tsx`
- [Header UI](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Component/Header.tsx): `Frontend/src/Component/Header.tsx`
- [Background UI](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Component/Background.tsx): `Frontend/src/Component/Background.tsx`

### Peer calling

- [Sender room](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/SenderRoom.tsx): `Frontend/src/Pages/SenderRoom.tsx`
- [Receiver room](https://github.com/chandrapratap01/vidloom/blob/main/Frontend/src/Pages/ReceiverRoom.tsx): `Frontend/src/Pages/ReceiverRoom.tsx`
- **WebRTC peers**

### Room signaling

- [WebSocket server](https://github.com/chandrapratap01/vidloom/blob/main/Backend/src/index.ts): `Backend/src/index.ts`
- [Room membership](https://github.com/chandrapratap01/vidloom/blob/main/Backend/src/index.ts): `Backend/src/index.ts`

### Network traversal

- **STUN service**
- **TURN relay**

### Other components

- **Room user**
- **Giphy API**

## Connections

- Room user → React bootstrap: opens app (evidence: `README.md`)
- React bootstrap → App routes: renders (evidence: `Frontend/src/main.tsx`)
- App routes → Background UI: wraps routes (evidence: `Frontend/src/App.tsx`)
- App routes → Header UI: renders (evidence: `Frontend/src/App.tsx`)
- App routes → Room selection: routes to (evidence: `Frontend/src/App.tsx`)
- App routes → Sender room: routes to (evidence: `Frontend/src/App.tsx`)
- App routes → Receiver room: routes to (evidence: `Frontend/src/App.tsx`)
- Room user → Room selection: chooses room (evidence: `Frontend/src/Pages/Landing.tsx`)
- Room selection → Sender room: navigates to (evidence: `Frontend/src/Pages/Landing.tsx`)
- Room selection → Receiver room: navigates to (evidence: `Frontend/src/Pages/Landing.tsx`)
- Sender room → WebSocket server: sends signaling (evidence: `Frontend/src/Pages/SenderRoom.tsx`)
- Receiver room → WebSocket server: sends signaling (evidence: `Frontend/src/Pages/ReceiverRoom.tsx`)
- WebSocket server → Room membership: tracks members (evidence: `Backend/src/index.ts`)
- WebSocket server → Sender room: relays negotiation (evidence: `Backend/src/index.ts`)
- WebSocket server → Receiver room: relays negotiation (evidence: `Backend/src/index.ts`)
- Sender room → WebRTC peers: negotiates offer (evidence: `Frontend/src/Pages/SenderRoom.tsx`)
- Receiver room → WebRTC peers: answers offer (evidence: `Frontend/src/Pages/ReceiverRoom.tsx`)
- WebRTC peers → WebRTC peers: exchanges media/data (evidence: `README.md`)
- WebRTC peers → STUN service: discovers public IP (evidence: `README.md`)
- WebRTC peers → TURN relay: relays if needed (evidence: `README.md`)
- Header UI → Giphy API: fetches animation (evidence: `Frontend/src/Component/Header.tsx`)