# uday-konaparthi/collaborative-code-editor architecture

> Architecture diagram of the GitHub repository uday-konaparthi/collaborative-code-editor, 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/uday-konaparthi/collaborative-code-editor
- Repository: https://github.com/uday-konaparthi/collaborative-code-editor

## Overview

PingPulse is a browser-based collaborative code editor. Users register or log in, create or join a room, then collaborate through shared code, chat, participant presence and video signaling; they can also run code. The graph includes the documented/API-backed room, authentication, execution and real-time stages, plus client state and persistence. Edges are limited to relationships shown in excerpts or the source index; unsampled UI and runtime wiring are not inferred.

Main entry points: [`backend/server.js`](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/server.js) (HTTP server), [`frontend/src/App.jsx`](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/App.jsx) (Route app), [`frontend/src/pages/editorRoom.jsx`](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/editorRoom.jsx) (Editor room), [`backend/routes/roomRoutes.js`](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/roomRoutes.js) (Room routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_app["Route app<br/>[App.jsx]"]
  node_authui["Auth screens"]
  node_dashboard["Dashboard<br/>[dashboard.jsx]"]
  node_joinui["Join room<br/>[joinRoom.jsx]"]
  node_editor["Editor room<br/>[editorRoom.jsx]"]
  node_codeui["Code editor<br/>[codeBox.jsx]"]
  node_chatui["Room chat<br/>[chatBox.jsx]"]
  node_videoui["Video grid<br/>[videoGrid.jsx]"]
  node_clientstate["Client state"]
end

subgraph group_realtime["Live collaboration"]
  node_socketclient["Socket client<br/>[socket.jsx]"]
  node_socketserver["Socket events<br/>[socketHandler.js]"]
end

subgraph group_api["Backend API"]
  node_backend["HTTP server<br/>[server.js]"]
  node_authapi["Authentication<br/>[authController.js]"]
  node_roomapi["Room operations<br/>[roomController.js]"]
  node_userapi["User lookup<br/>[userController.js]"]
  node_execution["Code execution<br/>[runCode.js]"]
  node_authroutes["Auth routes<br/>[auth.js]"]
  node_roomroutes["Room routes<br/>[roomRoutes.js]"]
  node_userroutes["User routes<br/>[userRoutes.js]"]
  node_authmw["Route protection<br/>[protectRoute.js]"]
end

subgraph group_data["Persistence"]
  node_userstore[("User records<br/>[userSchema.js]")]
  node_roomstore[("Room records<br/>[roomSchema.js]")]
end

node_user(("User"))
node_database[("MongoDB")]
node_judge["Judge0"]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_joinui
node_app -->|"routes to"| node_editor
node_authui -->|"updates"| node_clientstate
node_dashboard -->|"reads"| node_clientstate
node_joinui -->|"updates"| node_clientstate
node_editor -->|"renders"| node_codeui
node_editor -->|"renders"| node_chatui
node_editor -->|"renders"| node_videoui
node_codeui -->|"updates"| node_clientstate
node_codeui -->|"emits code"| node_socketclient
node_chatui -->|"sends messages"| node_socketclient
node_socketclient -.->|"exchanges events"| node_socketserver
node_backend -->|"mounts"| node_authroutes
node_backend -->|"mounts"| node_roomroutes
node_backend -->|"mounts"| node_userroutes
node_backend -->|"registers"| node_socketserver
node_authroutes -->|"dispatches"| node_authapi
node_roomroutes -->|"dispatches"| node_roomapi
node_roomroutes -->|"protects"| node_authmw
node_roomroutes -->|"dispatches"| node_execution
node_userroutes -->|"dispatches"| node_userapi
node_authapi -->|"reads/writes"| node_userstore
node_roomapi -->|"reads/writes"| node_roomstore
node_roomapi -->|"reads/writes"| node_userstore
node_userapi -->|"reads"| node_userstore
node_socketserver -->|"references"| node_roomstore
node_execution -.->|"submits code"| node_judge
node_backend -->|"connects"| node_database
node_userstore -.->|"persists"| node_database
node_roomstore -.->|"persists"| node_database

click node_app "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/App.jsx"
click node_authui "https://github.com/uday-konaparthi/collaborative-code-editor/tree/main/frontend/src/auth"
click node_dashboard "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/dashboard.jsx"
click node_joinui "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/joinRoom.jsx"
click node_editor "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/editorRoom.jsx"
click node_codeui "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/components/codeblock/codeBox.jsx"
click node_chatui "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/components/chatBox.jsx"
click node_videoui "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/components/videoGrid.jsx"
click node_clientstate "https://github.com/uday-konaparthi/collaborative-code-editor/tree/main/frontend/src/redux"
click node_socketclient "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/utils/socket.jsx"
click node_socketserver "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/utils/socketHandler.js"
click node_backend "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/server.js"
click node_authapi "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/controllers/authController.js"
click node_roomapi "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/controllers/roomController.js"
click node_userapi "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/controllers/userController.js"
click node_execution "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/utils/runCode.js"
click node_authroutes "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/auth.js"
click node_roomroutes "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/roomRoutes.js"
click node_userroutes "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/userRoutes.js"
click node_authmw "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/middleware/protectRoute.js"
click node_userstore "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/models/userSchema.js"
click node_roomstore "https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/models/roomSchema.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_authui,node_dashboard,node_joinui,node_editor,node_codeui,node_chatui,node_videoui,node_clientstate,node_user toneBlue
class node_socketclient,node_socketserver,node_database toneAmber
class node_backend,node_authapi,node_roomapi,node_userapi,node_execution,node_authroutes,node_roomroutes,node_userroutes,node_authmw toneMint
class node_userstore,node_roomstore toneRose
class node_judge toneIndigo
```

## Components

### Client experience

- [Route app](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth screens](https://github.com/uday-konaparthi/collaborative-code-editor/tree/main/frontend/src/auth): `frontend/src/auth`
- [Dashboard](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/dashboard.jsx): `frontend/src/pages/dashboard.jsx`
- [Join room](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/joinRoom.jsx): `frontend/src/pages/joinRoom.jsx`
- [Editor room](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/pages/editorRoom.jsx): `frontend/src/pages/editorRoom.jsx`
- [Code editor](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/components/codeblock/codeBox.jsx): `frontend/src/components/codeblock/codeBox.jsx`
- [Room chat](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/components/chatBox.jsx): `frontend/src/components/chatBox.jsx`
- [Video grid](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/components/videoGrid.jsx): `frontend/src/components/videoGrid.jsx`
- [Client state](https://github.com/uday-konaparthi/collaborative-code-editor/tree/main/frontend/src/redux): `frontend/src/redux`

### Live collaboration

- [Socket client](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/frontend/src/utils/socket.jsx): `frontend/src/utils/socket.jsx`
- [Socket events](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/utils/socketHandler.js): `backend/utils/socketHandler.js`

### Backend API

- [HTTP server](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/server.js): `backend/server.js`
- [Authentication](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/controllers/authController.js): `backend/controllers/authController.js`
- [Room operations](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/controllers/roomController.js): `backend/controllers/roomController.js`
- [User lookup](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/controllers/userController.js): `backend/controllers/userController.js`
- [Code execution](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/utils/runCode.js): `backend/utils/runCode.js`
- [Auth routes](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/auth.js): `backend/routes/auth.js`
- [Room routes](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/roomRoutes.js): `backend/routes/roomRoutes.js`
- [User routes](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/routes/userRoutes.js): `backend/routes/userRoutes.js`
- [Route protection](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/middleware/protectRoute.js): `backend/middleware/protectRoute.js`

### Persistence

- [User records](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/models/userSchema.js): `backend/models/userSchema.js`
- [Room records](https://github.com/uday-konaparthi/collaborative-code-editor/blob/main/backend/models/roomSchema.js): `backend/models/roomSchema.js`

### Other components

- **User**
- **MongoDB**
- **Judge0**

## Connections

- User → Route app: uses (evidence: `frontend/src/App.jsx`)
- Route app → Auth screens: routes to (evidence: `frontend/src/App.jsx`)
- Route app → Dashboard: routes to (evidence: `frontend/src/App.jsx`)
- Route app → Join room: routes to (evidence: `frontend/src/App.jsx`)
- Route app → Editor room: routes to (evidence: `frontend/src/App.jsx`)
- Auth screens → Client state: updates (evidence: `frontend/src/auth/login.jsx`)
- Dashboard → Client state: reads (evidence: `frontend/src/pages/dashboard.jsx`)
- Join room → Client state: updates (evidence: `frontend/src/pages/joinRoom.jsx`)
- Editor room → Code editor: renders (evidence: `frontend/src/pages/editorRoom.jsx`)
- Editor room → Room chat: renders (evidence: `frontend/src/pages/editorRoom.jsx`)
- Editor room → Video grid: renders (evidence: `frontend/src/pages/editorRoom.jsx`)
- Code editor → Client state: updates (evidence: `frontend/src/components/codeblock/codeBox.jsx`)
- Code editor → Socket client: emits code (evidence: `frontend/src/components/codeblock/codeBox.jsx`)
- Room chat → Socket client: sends messages (evidence: `frontend/src/components/chatBox.jsx`)
- Socket client → Socket events: exchanges events
- HTTP server → Auth routes: mounts (evidence: `backend/server.js`)
- HTTP server → Room routes: mounts (evidence: `backend/server.js`)
- HTTP server → User routes: mounts (evidence: `backend/server.js`)
- HTTP server → Socket events: registers (evidence: `backend/server.js`)
- Auth routes → Authentication: dispatches (evidence: `backend/routes/auth.js`)
- Room routes → Room operations: dispatches (evidence: `backend/routes/roomRoutes.js`)
- Room routes → Route protection: protects (evidence: `backend/routes/roomRoutes.js`)
- Room routes → Code execution: dispatches (evidence: `backend/routes/roomRoutes.js`)
- User routes → User lookup: dispatches (evidence: `backend/routes/userRoutes.js`)
- Authentication → User records: reads/writes (evidence: `backend/controllers/authController.js`)
- Room operations → Room records: reads/writes (evidence: `backend/controllers/roomController.js`)
- Room operations → User records: reads/writes (evidence: `backend/controllers/roomController.js`)
- User lookup → User records: reads (evidence: `backend/controllers/userController.js`)
- Socket events → Room records: references (evidence: `backend/utils/socketHandler.js`)
- Code execution → Judge0: submits code
- HTTP server → MongoDB: connects (evidence: `backend/server.js`)
- User records → MongoDB: persists
- Room records → MongoDB: persists