# pradeep-polishetty/webvideo architecture

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

- Interactive diagram: https://gitdiagram.com/pradeep-polishetty/webvideo
- Repository: https://github.com/pradeep-polishetty/webvideo

## Overview

This is a browser-based real-time chat and video-room application. Users can join chat to see who is online and exchange private messages, or join a named room for peer-to-peer video. The React entry point renders both experiences; each uses a shared Socket.IO client to communicate with the Node server, which tracks users and rooms in memory and dispatches events. Video additionally uses browser media capture and PeerJS. Server and UI behavior are based on sampled source; unsampled files are not inferred.

Main entry points: [`webfrontend/src/components/VideoCall.jsx`](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/components/VideoCall.jsx) (Video rooms), [`websockets/index.js`](https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js) (Realtime server), [`webfrontend/src/socket.js`](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/socket.js) (Socket client), [`webfrontend/src/App.jsx`](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/App.jsx) (App composition)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React frontend"]
  node_entry["App entry<br/>[main.jsx]"]
  node_app["App composition<br/>[App.jsx]"]
  node_chat["Private chat<br/>[Chat.jsx]"]
  node_video["Video rooms<br/>[VideoCall.jsx]"]
  node_socket_client["Socket client<br/>[socket.js]"]
end

subgraph group_backend["Socket server"]
  node_server["Realtime server<br/>[index.js]"]
  node_user_state["Online users<br/>[index.js]"]
  node_room_state["Room peers<br/>[index.js]"]
end

subgraph group_external["Browser and peer services"]
  node_media_api["Media capture"]
  node_peerjs["PeerJS calls"]
end

node_user(("User"))

node_user -->|"uses"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_chat
node_app -->|"renders"| node_video
node_chat -->|"emits and listens"| node_socket_client
node_video -->|"emits and listens"| node_socket_client
node_socket_client -->|"Socket.IO events"| node_server
node_server -->|"dispatches events"| node_socket_client
node_server -->|"reads and writes"| node_user_state
node_server -->|"reads and writes"| node_room_state
node_video -->|"captures media"| node_media_api
node_video -->|"creates peer calls"| node_peerjs

click node_entry "https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/main.jsx"
click node_app "https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/App.jsx"
click node_chat "https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/components/Chat.jsx"
click node_video "https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/components/VideoCall.jsx"
click node_socket_client "https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/socket.js"
click node_server "https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js"
click node_user_state "https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js"
click node_room_state "https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js"

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_entry,node_app,node_chat,node_video,node_socket_client,node_user toneBlue
class node_server,node_user_state,node_room_state toneAmber
class node_media_api,node_peerjs toneMint
```

## Components

### React frontend

- [App entry](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/main.jsx): `webfrontend/src/main.jsx`
- [App composition](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/App.jsx): `webfrontend/src/App.jsx`
- [Private chat](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/components/Chat.jsx): `webfrontend/src/components/Chat.jsx`
- [Video rooms](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/components/VideoCall.jsx): `webfrontend/src/components/VideoCall.jsx`
- [Socket client](https://github.com/pradeep-polishetty/webvideo/blob/main/webfrontend/src/socket.js): `webfrontend/src/socket.js`

### Socket server

- [Realtime server](https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js): `websockets/index.js`
- [Online users](https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js): `websockets/index.js`
- [Room peers](https://github.com/pradeep-polishetty/webvideo/blob/main/websockets/index.js): `websockets/index.js`

### Browser and peer services

- **Media capture**
- **PeerJS calls**

### Other components

- **User**

## Connections

- User → App entry: uses
- App entry → App composition: renders
- App composition → Private chat: renders
- App composition → Video rooms: renders
- Private chat → Socket client: emits and listens
- Video rooms → Socket client: emits and listens
- Socket client → Realtime server: Socket.IO events
- Realtime server → Socket client: dispatches events
- Realtime server → Online users: reads and writes
- Realtime server → Room peers: reads and writes
- Video rooms → Media capture: captures media
- Video rooms → PeerJS calls: creates peer calls