Blankpage: Real-Time Collaborative Code Review

I built a real-time collaborative editor for code review. Here's the story and tech behind it.

The Problem

Ever tried to review code with someone over Zoom? You share your screen, they say "scroll up... no, down... go to line 47..." It's painful.

The Solution

Blankpage is a real-time collaborative text editor. Think Google Docs but for code review sessions.

Features

• **Rooms** - Create a named room, share the URL
• **Real-time sync** - See changes as they happen
• **Syntax highlighting** - Multiple language support
• **Ephemeral** - Rooms expire, nothing stored permanently
• **No accounts** - Just create and share

The Tech Stack

Frontend

• Vanilla JavaScript (no framework needed)
• CodeMirror for the editor
• Socket.io client for real-time

Backend

• Node.js + Express
• Socket.io for WebSockets
• In-memory room storage

Key Implementation

Room Management

const rooms = new Map();

io.on('connection', (socket) => {
  socket.on('join-room', (roomId) => {
    socket.join(roomId);
    
    if (!rooms.has(roomId)) {
      rooms.set(roomId, { content: '', users: 0 });
    }
    
    const room = rooms.get(roomId);
    room.users++;
    
    // Send current content to new user
    socket.emit('init', room.content);
  });
  
  socket.on('edit', ({ roomId, content }) => {
    rooms.get(roomId).content = content;
    socket.to(roomId).emit('update', content);
  });
});

Conflict Resolution

For simplicity, I went with last-write-wins. For a production app, you'd want operational transforms (OT) or CRDTs.

Why Build This?

1. **Learning** - Real-time sync is a great exercise 2. **Need** - I actually use this for pair programming 3. **Portfolio** - Shows I can build beyond CRUD apps

Try It

The code is open source: github.com/chrishacia/blankpage.org

Deploy your own instance or use it as a starting point for something bigger.

Back to Journal