How uday-konaparthi/collaborative-code-editor works
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: server.js HTTP server · App.jsx Route app · editorRoom.jsx Editor room · roomRoutes.js Room routes
Components 25
Client experience
- Route app
frontend/src/App.jsx - Auth screens
frontend/src/auth - Dashboard
frontend/src/pages/dashboard.jsx - Join room
frontend/src/pages/joinRoom.jsx - Editor room
frontend/src/pages/editorRoom.jsx - Code editor
frontend/src/components/codeblock/codeBox.jsx - Room chat
frontend/src/components/chatBox.jsx - Video grid
frontend/src/components/videoGrid.jsx - Client state
frontend/src/redux
Live collaboration
- Socket client
frontend/src/utils/socket.jsx - Socket events
backend/utils/socketHandler.js
Backend API
- HTTP server
backend/server.js - Authentication
backend/controllers/authController.js - Room operations
backend/controllers/roomController.js - User lookup
backend/controllers/userController.js - Code execution
backend/utils/runCode.js - Auth routes
backend/routes/auth.js - Room routes
backend/routes/roomRoutes.js - User routes
backend/routes/userRoutes.js - Route protection
backend/middleware/protectRoute.js
Persistence
- User records
backend/models/userSchema.js - Room records
backend/models/roomSchema.js
Other components
- User
- MongoDB
- Judge0
Connections 33
- User → Route app: uses
frontend/src/App.jsx - Route app → Auth screens: routes to
frontend/src/App.jsx - Route app → Dashboard: routes to
frontend/src/App.jsx - Route app → Join room: routes to
frontend/src/App.jsx - Route app → Editor room: routes to
frontend/src/App.jsx - Auth screens → Client state: updates
frontend/src/auth/login.jsx - Dashboard → Client state: reads
frontend/src/pages/dashboard.jsx - Join room → Client state: updates
frontend/src/pages/joinRoom.jsx - Editor room → Code editor: renders
frontend/src/pages/editorRoom.jsx - Editor room → Room chat: renders
frontend/src/pages/editorRoom.jsx - Editor room → Video grid: renders
frontend/src/pages/editorRoom.jsx - Code editor → Client state: updates
frontend/src/components/codeblock/codeBox.jsx - Code editor → Socket client: emits code
frontend/src/components/codeblock/codeBox.jsx - Room chat → Socket client: sends messages
frontend/src/components/chatBox.jsx - Socket client → Socket events: exchanges events
- HTTP server → Auth routes: mounts
backend/server.js - HTTP server → Room routes: mounts
backend/server.js - HTTP server → User routes: mounts
backend/server.js - HTTP server → Socket events: registers
backend/server.js - Auth routes → Authentication: dispatches
backend/routes/auth.js - Room routes → Room operations: dispatches
backend/routes/roomRoutes.js - Room routes → Route protection: protects
backend/routes/roomRoutes.js - Room routes → Code execution: dispatches
backend/routes/roomRoutes.js - User routes → User lookup: dispatches
backend/routes/userRoutes.js - Authentication → User records: reads/writes
backend/controllers/authController.js - Room operations → Room records: reads/writes
backend/controllers/roomController.js - Room operations → User records: reads/writes
backend/controllers/roomController.js - User lookup → User records: reads
backend/controllers/userController.js - Socket events → Room records: references
backend/utils/socketHandler.js - Code execution → Judge0: submits code
- HTTP server → MongoDB: connects
backend/server.js - User records → MongoDB: persists
- Room records → MongoDB: persists