# prajwalkadam29/webrtc-encrypted-p2p-chat-forked architecture

> Architecture diagram of the GitHub repository prajwalkadam29/webrtc-encrypted-p2p-chat-forked, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked
- Repository: https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked

## Overview

MetaCrypt is a browser-based, wallet-authenticated chat application. Users connect and sign in with Ethereum, choose a display name and room, then the client uses a WebSocket signaling server to establish WebRTC peer connections. Messages and files travel directly between peers, encrypted with keys established on-device; files are chunked and integrity-checked. The client app is the coordinating layer for authentication, room state, peer communication, and chat UI. Arrows reflect the supplied excerpts and README; unsampled implementation details are not inferred.

Main entry points: [`client/src/app.jsx`](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/app.jsx) (App coordinator), [`client/src/utils/webrtc.js`](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/webrtc.js) (WebRTC manager), [`client/src/utils/fileTransfer.js`](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/fileTransfer.js) (Chunked file transfer), [`client/src/components/ChatWindow.jsx`](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ChatWindow.jsx) (Chat composer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and UI"]
  node_app["App coordinator<br/>[app.jsx]"]
  node_landing["Landing page<br/>[LandingPage.jsx]"]
  node_background["Animated background"]
end

subgraph group_identity["Wallet identity"]
  node_login["Wallet login modal"]
  node_walletauth["SIWE wallet auth<br/>[walletAuth.js]"]
end

subgraph group_connectivity["Peer connectivity"]
  node_webrtc["WebRTC manager<br/>[webrtc.js]"]
  node_signalserver["Signaling server<br/>[server.js]"]
end

subgraph group_secure["Secure exchange"]
  node_crypto["ECDH and AES-GCM<br/>[crypto.js]"]
  node_transfer["Chunked file transfer<br/>[fileTransfer.js]"]
end

subgraph group_experience["Chat experience"]
  node_sidebar["Room and member sidebar<br/>[ChannelSidebar.jsx]"]
  node_composer["Chat composer<br/>[ChatWindow.jsx]"]
  node_messages["Message list<br/>[MessageList.jsx]"]
  node_progress["Transfer progress"]
  node_fileupload["File upload control<br/>[FileUpload.jsx]"]
  node_sounds["Notification sounds"]
end

node_user(("User"))
node_wallet{{"Ethereum wallet"}}
node_peers(("Peer clients"))

node_user -->|"opens"| node_landing
node_landing -->|"renders"| node_background
node_user -->|"requests login"| node_login
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_login
node_login -->|"delegates to"| node_walletauth
node_walletauth -->|"connects and signs"| node_wallet
node_app -->|"renders"| node_sidebar
node_app -->|"coordinates"| node_webrtc
node_webrtc -->|"signals through"| node_signalserver
node_signalserver -->|"relays signaling"| node_webrtc
node_webrtc -->|"negotiates connections"| node_peers
node_peers -->|"exchange data"| node_peers
node_app -->|"uses for encryption"| node_crypto
node_app -->|"uses for files"| node_transfer
node_transfer -->|"encrypts chunks"| node_crypto
node_transfer -->|"sends via"| node_webrtc
node_app -->|"renders"| node_composer
node_app -->|"renders"| node_messages
node_app -->|"renders"| node_progress
node_composer -->|"submits message"| node_app
node_app -->|"uses notifications"| node_sounds
node_composer -.->|"opens file chooser"| node_fileupload

click node_app "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/app.jsx"
click node_landing "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/LandingPage.jsx"
click node_background "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ThreeBackground.jsx"
click node_login "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/WalletLoginModal.jsx"
click node_walletauth "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/walletAuth.js"
click node_sidebar "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ChannelSidebar.jsx"
click node_webrtc "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/webrtc.js"
click node_signalserver "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/server/server.js"
click node_crypto "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/crypto.js"
click node_transfer "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/fileTransfer.js"
click node_composer "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ChatWindow.jsx"
click node_messages "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/MessageList.jsx"
click node_progress "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/FileTransferProgress.jsx"
click node_fileupload "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/FileUpload.jsx"
click node_sounds "https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/notificationSounds.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_app,node_landing,node_background,node_user,node_peers toneBlue
class node_login,node_walletauth toneAmber
class node_webrtc,node_signalserver toneMint
class node_crypto,node_transfer toneRose
class node_sidebar,node_composer,node_messages,node_progress,node_fileupload,node_sounds,node_wallet toneIndigo
```

## Components

### Entry and UI

- [App coordinator](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/app.jsx): `client/src/app.jsx`
- [Landing page](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/LandingPage.jsx): `client/src/components/LandingPage.jsx`
- [Animated background](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ThreeBackground.jsx): `client/src/components/ThreeBackground.jsx`

### Wallet identity

- [Wallet login modal](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/WalletLoginModal.jsx): `client/src/components/WalletLoginModal.jsx`
- [SIWE wallet auth](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/walletAuth.js): `client/src/utils/walletAuth.js`

### Peer connectivity

- [WebRTC manager](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/webrtc.js): `client/src/utils/webrtc.js`
- [Signaling server](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/server/server.js): `server/server.js`

### Secure exchange

- [ECDH and AES-GCM](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/crypto.js): `client/src/utils/crypto.js`
- [Chunked file transfer](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/fileTransfer.js): `client/src/utils/fileTransfer.js`

### Chat experience

- [Room and member sidebar](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ChannelSidebar.jsx): `client/src/components/ChannelSidebar.jsx`
- [Chat composer](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/ChatWindow.jsx): `client/src/components/ChatWindow.jsx`
- [Message list](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/MessageList.jsx): `client/src/components/MessageList.jsx`
- [Transfer progress](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/FileTransferProgress.jsx): `client/src/components/FileTransferProgress.jsx`
- [File upload control](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/components/FileUpload.jsx): `client/src/components/FileUpload.jsx`
- [Notification sounds](https://github.com/prajwalkadam29/webrtc-encrypted-p2p-chat-forked/blob/main/client/src/utils/notificationSounds.js): `client/src/utils/notificationSounds.js`

### Other components

- **User**
- **Ethereum wallet**
- **Peer clients**

## Connections

- User → Landing page: opens (evidence: `README.md`)
- Landing page → Animated background: renders (evidence: `client/src/components/LandingPage.jsx`)
- User → Wallet login modal: requests login (evidence: `README.md`)
- App coordinator → Landing page: renders (evidence: `client/src/app.jsx`)
- App coordinator → Wallet login modal: renders (evidence: `client/src/app.jsx`)
- Wallet login modal → SIWE wallet auth: delegates to (evidence: `client/src/components/WalletLoginModal.jsx`)
- SIWE wallet auth → Ethereum wallet: connects and signs (evidence: `client/src/utils/walletAuth.js`)
- App coordinator → Room and member sidebar: renders (evidence: `client/src/app.jsx`)
- App coordinator → WebRTC manager: coordinates (evidence: `client/src/app.jsx`)
- WebRTC manager → Signaling server: signals through (evidence: `README.md`)
- Signaling server → WebRTC manager: relays signaling (evidence: `README.md`)
- WebRTC manager → Peer clients: negotiates connections (evidence: `README.md`)
- Peer clients → Peer clients: exchange data (evidence: `README.md`)
- App coordinator → ECDH and AES-GCM: uses for encryption (evidence: `client/src/app.jsx`)
- App coordinator → Chunked file transfer: uses for files (evidence: `client/src/app.jsx`)
- Chunked file transfer → ECDH and AES-GCM: encrypts chunks (evidence: `client/src/utils/fileTransfer.js`)
- Chunked file transfer → WebRTC manager: sends via (evidence: `client/src/utils/fileTransfer.js`)
- App coordinator → Chat composer: renders (evidence: `client/src/app.jsx`)
- App coordinator → Message list: renders (evidence: `client/src/app.jsx`)
- App coordinator → Transfer progress: renders (evidence: `client/src/app.jsx`)
- Chat composer → App coordinator: submits message (evidence: `client/src/components/ChatWindow.jsx`)
- App coordinator → Notification sounds: uses notifications (evidence: `client/src/app.jsx`)
- Chat composer → File upload control: opens file chooser