# fenetdiriba/peercode-ai architecture

> Architecture diagram of the GitHub repository fenetdiriba/peercode-ai, 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/fenetdiriba/peercode-ai
- Repository: https://github.com/fenetdiriba/peercode-ai

## Overview

PeerCode AI is a browser-based collaborative interview-practice editor. Users create or join a room by link, or submit a skill profile for matchmaking; matched users are routed into a shared room. There they edit synchronized code, chat and presence, request Gemini-assisted edits, and run JavaScript/TypeScript in a browser worker. The server provides matchmaking, WebRTC signaling, a non-persistent relay fallback, and the AI endpoint. Documented capabilities are included, but unsampled subsystem links are omitted or marked unverified rather than inferred as direct calls.

Main entry points: [`src/components/RoomView.tsx`](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/RoomView.tsx) (Room interface), [`src/App.tsx`](https://github.com/fenetdiriba/peercode-ai/blob/main/src/App.tsx) (App routing), [`server/app.js`](https://github.com/fenetdiriba/peercode-ai/blob/main/server/app.js) (Server router), [`src/components/MatchView.tsx`](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/MatchView.tsx) (Match screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser experience"]
  node_app["App routing<br/>[App.tsx]"]
  node_landing["Room entry<br/>[LandingView.tsx]"]
  node_profile["Profile identity<br/>[identity.ts]"]
  node_onboarding["Skill onboarding"]
  node_matchview["Match screen<br/>[MatchView.tsx]"]
end

subgraph group_room["Collaborative room"]
  node_roomview["Room interface<br/>[RoomView.tsx]"]
  node_roomhook["Room lifecycle<br/>[useRoom.ts]"]
  node_collab["Collaboration session<br/>[collab.ts]"]
  node_relayclient["Client relay<br/>[relay.ts]"]
  node_editor["Code editor<br/>[CodeEditor.tsx]"]
  node_chat["Room chat<br/>[ChatPanel.tsx]"]
  node_presence["Peer presence<br/>[PresencePanel.tsx]"]
  node_runner["Code runner<br/>[runner.ts]"]
  node_status["Connection status<br/>[StatusBar.tsx]"]
  node_monaco["Monaco setup<br/>[monaco.ts]"]
  node_languages["Language options<br/>[languages.ts]"]
end

subgraph group_server["Server services"]
  node_serverapp["Server router<br/>[app.js]"]
  node_signaling["WebRTC signaling<br/>[signaling.js]"]
  node_relayserver["Room relay<br/>[relay.js]"]
end

subgraph group_matching["Matchmaking"]
  node_matchclient["Matchmaking client<br/>[useMatchmaking.ts]"]
  node_matchmath["Match scoring<br/>[matching.js]"]
  node_matchserver["Match queue<br/>[matchmaking.js]"]
end

subgraph group_ai["AI assistance"]
  node_aiui["AI prompt<br/>[AiPrompt.tsx]"]
  node_aiclient["AI request client<br/>[ai.ts]"]
  node_aiendpoint["AI hint endpoint<br/>[ai.js]"]
end

node_user(("Participant"))
node_gemini["Gemini"]

node_user -->|"opens app"| node_app
node_app -->|"loads profile"| node_profile
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_matchview
node_app -->|"routes to"| node_roomview
node_landing -->|"requests room route"| node_app
node_app -->|"renders"| node_onboarding
node_matchview -->|"starts matching"| node_matchclient
node_matchclient -->|"joins queue"| node_matchserver
node_matchserver -->|"scores pairs"| node_matchmath
node_matchclient -->|"shares matching math"| node_matchmath
node_matchview -->|"routes matched room"| node_app
node_roomview -->|"uses room state"| node_roomhook
node_roomhook -->|"creates session"| node_collab
node_collab -->|"sets up relay"| node_relayclient
node_roomview -->|"renders editor"| node_editor
node_roomview -->|"renders chat"| node_chat
node_roomview -->|"renders presence"| node_presence
node_roomview -->|"runs code"| node_runner
node_roomview -->|"renders status"| node_status
node_editor -->|"configures editor"| node_monaco
node_roomview -->|"selects language"| node_languages
node_roomview -->|"opens prompt"| node_aiui
node_aiui -->|"requests hint"| node_aiclient
node_aiclient -->|"posts hint request"| node_aiendpoint
node_aiendpoint -->|"generates edit"| node_gemini
node_serverapp -->|"routes match socket"| node_matchserver
node_serverapp -->|"routes signaling socket"| node_signaling
node_serverapp -->|"routes relay socket"| node_relayserver
node_collab -.->|"introduces peers"| node_signaling
node_relayclient -.->|"forwards updates"| node_relayserver

click node_app "https://github.com/fenetdiriba/peercode-ai/blob/main/src/App.tsx"
click node_landing "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/LandingView.tsx"
click node_profile "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/identity.ts"
click node_onboarding "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/OnboardingModal.tsx"
click node_matchview "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/MatchView.tsx"
click node_matchclient "https://github.com/fenetdiriba/peercode-ai/blob/main/src/hooks/useMatchmaking.ts"
click node_matchmath "https://github.com/fenetdiriba/peercode-ai/blob/main/shared/matching.js"
click node_matchserver "https://github.com/fenetdiriba/peercode-ai/blob/main/server/matchmaking.js"
click node_roomview "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/RoomView.tsx"
click node_roomhook "https://github.com/fenetdiriba/peercode-ai/blob/main/src/hooks/useRoom.ts"
click node_collab "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/collab.ts"
click node_relayclient "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/relay.ts"
click node_editor "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/CodeEditor.tsx"
click node_chat "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/ChatPanel.tsx"
click node_presence "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/PresencePanel.tsx"
click node_runner "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/runner.ts"
click node_status "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/StatusBar.tsx"
click node_aiui "https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/AiPrompt.tsx"
click node_aiclient "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/ai.ts"
click node_aiendpoint "https://github.com/fenetdiriba/peercode-ai/blob/main/server/ai.js"
click node_serverapp "https://github.com/fenetdiriba/peercode-ai/blob/main/server/app.js"
click node_signaling "https://github.com/fenetdiriba/peercode-ai/blob/main/server/signaling.js"
click node_relayserver "https://github.com/fenetdiriba/peercode-ai/blob/main/server/relay.js"
click node_monaco "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/monaco.ts"
click node_languages "https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/languages.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_app,node_landing,node_profile,node_onboarding,node_matchview toneBlue
class node_roomview,node_roomhook,node_collab,node_relayclient,node_editor,node_chat,node_presence,node_runner,node_status,node_monaco,node_languages toneAmber
class node_serverapp,node_signaling,node_relayserver toneMint
class node_matchclient,node_matchmath,node_matchserver toneRose
class node_aiui,node_aiclient,node_aiendpoint,node_user,node_gemini toneIndigo
```

## Components

### Browser experience

- [App routing](https://github.com/fenetdiriba/peercode-ai/blob/main/src/App.tsx): `src/App.tsx`
- [Room entry](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/LandingView.tsx): `src/components/LandingView.tsx`
- [Profile identity](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/identity.ts): `src/lib/identity.ts`
- [Skill onboarding](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/OnboardingModal.tsx): `src/components/OnboardingModal.tsx`
- [Match screen](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/MatchView.tsx): `src/components/MatchView.tsx`

### Collaborative room

- [Room interface](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/RoomView.tsx): `src/components/RoomView.tsx`
- [Room lifecycle](https://github.com/fenetdiriba/peercode-ai/blob/main/src/hooks/useRoom.ts): `src/hooks/useRoom.ts`
- [Collaboration session](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/collab.ts): `src/lib/collab.ts`
- [Client relay](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/relay.ts): `src/lib/relay.ts`
- [Code editor](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/CodeEditor.tsx): `src/components/CodeEditor.tsx`
- [Room chat](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/ChatPanel.tsx): `src/components/ChatPanel.tsx`
- [Peer presence](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/PresencePanel.tsx): `src/components/PresencePanel.tsx`
- [Code runner](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/runner.ts): `src/lib/runner.ts`
- [Connection status](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/StatusBar.tsx): `src/components/StatusBar.tsx`
- [Monaco setup](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/monaco.ts): `src/lib/monaco.ts`
- [Language options](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/languages.ts): `src/lib/languages.ts`

### Server services

- [Server router](https://github.com/fenetdiriba/peercode-ai/blob/main/server/app.js): `server/app.js`
- [WebRTC signaling](https://github.com/fenetdiriba/peercode-ai/blob/main/server/signaling.js): `server/signaling.js`
- [Room relay](https://github.com/fenetdiriba/peercode-ai/blob/main/server/relay.js): `server/relay.js`

### Matchmaking

- [Matchmaking client](https://github.com/fenetdiriba/peercode-ai/blob/main/src/hooks/useMatchmaking.ts): `src/hooks/useMatchmaking.ts`
- [Match scoring](https://github.com/fenetdiriba/peercode-ai/blob/main/shared/matching.js): `shared/matching.js`
- [Match queue](https://github.com/fenetdiriba/peercode-ai/blob/main/server/matchmaking.js): `server/matchmaking.js`

### AI assistance

- [AI prompt](https://github.com/fenetdiriba/peercode-ai/blob/main/src/components/AiPrompt.tsx): `src/components/AiPrompt.tsx`
- [AI request client](https://github.com/fenetdiriba/peercode-ai/blob/main/src/lib/ai.ts): `src/lib/ai.ts`
- [AI hint endpoint](https://github.com/fenetdiriba/peercode-ai/blob/main/server/ai.js): `server/ai.js`

### Other components

- **Participant**
- **Gemini**

## Connections

- Participant → App routing: opens app (evidence: `README.md`)
- App routing → Profile identity: loads profile (evidence: `src/App.tsx`)
- App routing → Room entry: routes to (evidence: `src/App.tsx`)
- App routing → Match screen: routes to (evidence: `src/App.tsx`)
- App routing → Room interface: routes to (evidence: `src/App.tsx`)
- Room entry → App routing: requests room route (evidence: `README.md`)
- App routing → Skill onboarding: renders (evidence: `src/App.tsx`)
- Match screen → Matchmaking client: starts matching (evidence: `src/components/MatchView.tsx`)
- Matchmaking client → Match queue: joins queue (evidence: `README.md`)
- Match queue → Match scoring: scores pairs (evidence: `server/matchmaking.js`)
- Matchmaking client → Match scoring: shares matching math (evidence: `shared/matching.js`)
- Match screen → App routing: routes matched room (evidence: `src/App.tsx`)
- Room interface → Room lifecycle: uses room state (evidence: `README.md`)
- Room lifecycle → Collaboration session: creates session (evidence: `src/hooks/useRoom.ts`)
- Collaboration session → Client relay: sets up relay (evidence: `src/lib/collab.ts`)
- Room interface → Code editor: renders editor (evidence: `README.md`)
- Room interface → Room chat: renders chat (evidence: `README.md`)
- Room interface → Peer presence: renders presence (evidence: `README.md`)
- Room interface → Code runner: runs code (evidence: `src/components/RoomView.tsx`)
- Room interface → Connection status: renders status (evidence: `README.md`)
- Code editor → Monaco setup: configures editor (evidence: `src/components/CodeEditor.tsx`)
- Room interface → Language options: selects language (evidence: `src/components/RoomView.tsx`)
- Room interface → AI prompt: opens prompt (evidence: `src/components/RoomView.tsx`)
- AI prompt → AI request client: requests hint (evidence: `src/components/AiPrompt.tsx`)
- AI request client → AI hint endpoint: posts hint request (evidence: `README.md`)
- AI hint endpoint → Gemini: generates edit (evidence: `README.md`)
- Server router → Match queue: routes match socket (evidence: `server/app.js`)
- Server router → WebRTC signaling: routes signaling socket (evidence: `server/app.js`)
- Server router → Room relay: routes relay socket (evidence: `server/app.js`)
- Collaboration session → WebRTC signaling: introduces peers (evidence: `README.md`)
- Client relay → Room relay: forwards updates (evidence: `README.md`)