I Built My Own CodeSandbox Because Real-Time Collaboration Died

The Problem

I conduct a lot of technical interviews at Metafic. For years, CodeSandbox was my go-to tool — share a link, code together in real-time, see the candidate's cursor moving around. Perfect.

Then CodeSandbox killed real-time collaboration.

StackBlitz? Same story. Replit? Laggy and bloated. Every alternative either:

• Removed real-time features
• Required candidates to create accounts
• Had unreliable connections
• Lacked proper session control

I was stuck using screen share on Zoom, watching candidates type in their local VSCode. No visibility into their thought process. No way to jump in and help. Terrible experience for everyone.

So I built my own.

Introducing code.rajkar.me

code.rajkar.me is a real-time coding interview platform built specifically for technical interviews. Here's what makes it different:

Real-Time Collaborative Cursors

See exactly where the candidate is typing. Multiple colored cursors, just like Google Docs. When a candidate moves to a different file, you see it. When they're stuck on line 42, you know it.

// Remote cursors update in real-time via WebSockets
// Debounced to 50ms to reduce network traffic
// Color-coded per user with name labels

Zero Friction for Candidates

No sign-up. No account. No "verify your email" nonsense.

You share a 6-character passcode. Candidate enters it. They're coding in 3 seconds.

Instant Session Control

This was a game-changer for me. As an interviewer, I can:

• End sessions instantly — candidate's screen blocks immediately (no refresh needed)
• Toggle hints on/off during the interview
• View auto-saved code even if the candidate closes the tab

The instant termination uses WebSockets to push a "session ended" event. The UI blocks immediately with a graceful overlay. No waiting, no page refresh required.

Multi-Framework Support

Not every interview is React. The platform supports:

• React with TypeScript
• React Native (yes, with preview)
• Node.js (console output mode)

Each framework has customizable templates with pre-configured dependencies.

The Tech Stack

Here's what powers it:

| Layer | Technology | |-------|------------| | Frontend | Next.js 16, React 19, TypeScript | | Code Editor | CodeMirror 6 + Sandpack | | Real-time | PartyKit (WebSockets) | | Database | Supabase (PostgreSQL) | | Styling | Tailwind CSS 4 | | State | Zustand |

Why PartyKit?

I needed WebSockets for real-time features, but didn't want to manage infrastructure. PartyKit is serverless WebSockets — deploy a JavaScript file and you have a globally distributed real-time server.

// PartyKit handles all the complexity
// - Connection management
// - Room-based messaging
// - Automatic reconnection
// - Global edge deployment

Why Sandpack?

Sandpack is CodeSandbox's embeddable editor. Ironic, right? But it's the best option for:

• Browser-based code execution
• Live preview
• Node.js support via Nodebox
• Zero server-side compilation

The Architecture

The flow is simple:

1. Admin creates session → 6-char passcode generated
2. Share link → code.rajkar.me?code=ABC123
3. Candidate joins → WebSocket connection established
4. Real-time sync → Cursors, files, state all synchronized
5. Auto-save → Code saved to localStorage + Supabase every 30 seconds
6. Admin ends session → Instant block, code preserved

Dual Persistence Strategy

Data loss is unacceptable in interviews. So I implemented dual persistence:

• Immediate: Every keystroke saves to localStorage
• Background: Every 30 seconds, sync to Supabase

If the connection drops, candidate's code is safe. If the browser crashes, I can still see their last auto-save in the admin panel.

Challenges I Faced

1. Remote Cursor Positioning

CodeMirror 6 doesn't have built-in remote cursor support. I had to build a custom extension using StateEffects to inject cursor widgets as decorations without modifying the document.

2. Multi-File Cursor Awareness

When a candidate switches files, their cursor shouldn't show in the file I'm viewing. Each cursor tracks which file it belongs to, and only renders in the correct context.

3. Session Expiry Edge Cases

What happens if an admin sets a 1-hour session, but the interview runs 5 minutes over? The system now has grace periods and manual override controls.

What's Next

I'm planning to add:

• Recording — replay the entire coding session
• AI hints — optional LLM-powered hints for candidates
• More frameworks — Vue, Python, Go

Try It

If you conduct technical interviews and want a better experience, check out code.rajkar.me.

It's the tool I wished existed. So I built it.

---

Have questions or feedback? Reach out on Twitter or LinkedIn.