CodeMeet

Inspiration

The technical interview process is often stressful and fragmented. Interviewers and candidates usually have to juggle multiple tools a video call on one screen, a messy shared document on another, and a separate compiler. I wanted to build a unified, developer-friendly ecosystem that makes collaborative coding feel natural. The inspiration was to bridge the gap between how developers actually write code and how they are evaluated, ensuring a seamless experience that focuses purely on problem-solving.

What it does

CodeMeet is a real-time technical interview and collaboration platform that replicates an in-person interview in a fully remote setting. It operates on a session-based model supporting up to 4 simultaneous users per room. It combines three parallel real-time systems into a single split-screen interface: WebRTC Video/Audio communication, a collaborative Monaco-based code editor, and sandboxed code execution. Additionally, the platform includes Razorpay integration to handle payment processing for premium study materials.

How we built it

I built the platform utilizing a robust MERN stack (MongoDB, Express.js, React, Node.js) with Vite as the frontend build tool.

Real-time Communication: I integrated the Stream Video SDK for WebRTC peer connections and media routing, alongside the Stream Chat SDK for dedicated messaging channels.  

Code Editor & Execution: The platform uses the Monaco Editor to support 6 programming languages. For execution, the backend safely proxies code to the JDoodle API for remote, sandboxed compilation.  

Authentication & Data: Clerk was integrated for secure, drop-in authentication and session management. TanStack Query manages all API data fetching and caching on the frontend.  

Background Jobs: Inngest is integrated via an Express route to handle serverless background job processing for asynchronous tasks.

Challenges we ran into

Building a synchronized real-time system is inherently tricky. One major challenge was preventing race conditions when multiple users tried to join a room simultaneously; I solved this using MongoDB's atomic findOneAndUpdate operations to ensure strict participant limits. Another challenge was safely executing user-generated code without exposing API secrets; I built a secure backend proxy to the JDoodle API to handle this and manage rate limits. Furthermore, managing the Stream Video Client state within React's lifecycle without causing multiple re-renders or memory leaks required implementing a module-level singleton pattern and cancellation-safe useEffect cleanup logic.

Accomplishments that we're proud of

I am incredibly proud of achieving a truly low-latency, real-time synchronization system where up to 4 participants can seamlessly collaborate. Successfully implementing atomic database operations for flawless and concurrent room joining is a major technical win. I am also proud of successfully integrating complex third-party SDKs (Stream, Clerk, JDoodle, Razorpay) into a cohesive and performant Single Page Application.

What we learned

This project deeply solidified my understanding of advanced WebRTC architectures and managing complex, real-time global states in React. I learned how to strictly separate frontend and backend environment variables for security, keeping Vite public keys separate from Node.js server secrets. I also mastered creating cancellation-safe React hooks to prevent state updates on unmounted components and building Express 5 regex-based catch-all routes for SPA navigation.

What's next for CodeMeet

The immediate next steps involve expanding the sandboxed execution environment to support more niche programming languages and further refining the UI/UX of the split-screen collaborative workspace.

Built With

• clerk
• express.js
• inngest
• javascript
• jdoodle-api
• monaco-editor
• mongodb
• mongoose
• node.js
• razorpay
• react
• stream-chat-sdk
• streaming-video-provider
• tanstack-query
• vite
• webrtc