CompletedDeveloper Tools / DevEx

DevCollab — Real-Time Code Review Platform

Code review turnaround from 48 hours to under 2 hours — for teams that ship fast

A real-time code review and pair programming platform built for distributed engineering teams. DevCollab combines Google Docs-style collaborative editing with GitHub PR workflows, live cursors, inline threaded comments, peer-to-peer video chat via WebRTC, and session recording for async review. The platform reduced code review turnaround from an average of 48 hours to under 2 hours for CodeBridge's 40+ person engineering team, and now serves 120+ active teams with 8,000+ review sessions monthly.

Role: Full-Stack Developer & Architect

Client: CodeBridge

Team: 2-person team (1 full-stack architect, 1 frontend developer)

Started: May 2024

Completed: October 2024

<2 hrs

Review Turnaround

Down from 48-hour average — a 96% reduction in PR cycle time

<50ms

Sync Latency

Cursor and keystroke synchronization across all connected clients

120+

Active Teams

Engineering teams using DevCollab for daily code reviews and pairing

8K+

Sessions/Month

Average session length: 34 minutes. 92% of sessions include video chat

The Challenge

CodeBridge was a 40-person distributed engineering team spread across 4 time zones (US West, US East, Europe, India). Their code review process was broken in three fundamental ways. First, async reviews on GitHub took an average of 48 hours to complete — reviewers would leave comments, the author would respond 8 hours later (different timezone), the reviewer would re-review the next day, and the cycle repeated 2-3 times per PR. Second, when developers tried to pair program over Zoom, they couldn't share editor state — one person would screen share while the other watched passively, unable to make edits or point to specific lines. Third, context from review discussions was lost. Comment threads on GitHub PRs often devolved into "can you explain what you mean?" because reviewers couldn't annotate code inline or demonstrate alternatives in real-time. The result: PRs sat open for days, merge conflicts accumulated, feature velocity dropped 40% over 6 months, and developer satisfaction scores plummeted.

The Approach

I built DevCollab as a real-time-first platform where live collaboration is the default, not an afterthought. The core is a CRDT-based collaborative code editor using Y.js (after initially prototyping with Operational Transform and hitting data loss issues with 5+ concurrent users). The Y.js document is synced via Socket.IO with sub-50ms cursor updates, conflict-free character insertion, and automatic offline reconciliation. Each editing session is tied to a GitHub PR via the GitHub API — when a reviewer opens a PR in DevCollab, the code is loaded into the collaborative editor with full syntax highlighting (Tree-sitter for 40+ languages), and any changes made during the session can be committed back to the PR branch with one click. The video chat layer uses WebRTC for peer-to-peer connections with SFU (Selective Forwarding Unit) fallback for groups larger than 4. I deployed TURN relay servers in 3 regions (US-East, EU-West, AP-Southeast) for corporate firewall traversal, with automatic quality adaptation based on bandwidth detection. Every session is recorded (audio, video, editor state, and cursor movements) as a lightweight event stream that can be replayed at variable speed for async review — recording a 1-hour session uses only ~15MB of storage versus ~500MB for a video recording.

Key Features

CRDT-based real-time collaborative code editing (Y.js) with conflict-free merging

Live cursors with color-coded presence indicators and username labels

Inline threaded code comments with @mentions, reactions, and resolution tracking

WebRTC peer-to-peer video chat with screen sharing and SFU group calls

GitHub PR integration: load PR code, review, commit changes back to branch

Syntax highlighting for 40+ languages via Tree-sitter (JS, TS, Python, Go, Rust, etc.)

Session recording & playback: replay reviews at 1x-4x speed with full editor state

Code annotation tools: highlight, draw arrows, add sticky notes on code blocks

Team dashboard with review metrics: avg. turnaround, sessions/week, reviewer load

Slash commands (/suggest, /approve, /request-changes) for quick review actions

Scope:10 pages, CRDT real-time collaboration engine, WebRTC video/audio layer with TURN servers, GitHub API integration, session recording & playback system, team analytics dashboard, admin panel

Built With

Next.jsTypeScriptSocket.IOWebRTCY.js (CRDT)PostgreSQLRedisDocker

Challenges & Solutions

Challenge

The initial Operational Transform (OT) implementation caused silent data loss when 5+ users edited the same file simultaneously — characters would disappear or appear in wrong positions, and the document state would diverge between clients

Solution

Migrated from OT to Y.js (a CRDT library) which provides mathematically-guaranteed conflict-free concurrent editing. Y.js uses a Lamport timestamp-based algorithm that ensures all clients converge to the same document state regardless of network ordering. The migration required rebuilding the sync protocol but eliminated 100% of collaboration data loss issues. Added periodic state checksums to detect and auto-repair any divergence within 500ms

Challenge

WebRTC peer-to-peer connections failed for 25% of users behind corporate firewalls, VPNs, and symmetric NATs — the ICE candidate gathering process would time out after 10 seconds, leaving users with a blank video panel

Solution

Deployed TURN relay servers across 3 AWS regions (us-east-1, eu-west-1, ap-southeast-1) as fallback when direct P2P fails. Implemented a progressive connection strategy: try P2P first (completes in <2s for 75% of users), fall back to TURN relay within 3 seconds, and degrade gracefully to audio-only if bandwidth is below 500kbps. Added quality-adaptive bitrate that dynamically adjusts video resolution (1080p → 720p → 480p) based on real-time bandwidth measurement

Challenge

Session recording generated 500MB+ video files for hour-long sessions, making storage costs prohibitive and playback slow — the client wanted to keep recordings for 90 days per team plan

Solution

Replaced traditional video recording with an event-stream approach: instead of capturing pixels, I record editor state changes (Y.js document updates), cursor movements, comment actions, and audio as separate lightweight streams. A 1-hour session generates ~15MB (97% reduction). The playback engine reconstructs the visual state by replaying events at variable speed (1x-4x), using the same rendering pipeline as the live editor. Audio is synchronized via timestamp alignment. Storage cost dropped from $0.50/session to $0.015/session

Gallery

Real-time collaborative code editor with live cursors

WebRTC video chat with code annotation tools

Team review metrics dashboard and session history

Project Timeline

CRDT Editor & Real-Time Sync

Built Y.js-powered collaborative code editor with Socket.IO sync layer. Achieved sub-50ms cursor updates and conflict-free concurrent editing for 10+ users.

Due: Jun 15, 2024Completed: Jun 12, 2024

WebRTC Video & GitHub Integration

Implemented peer-to-peer video chat with TURN server fallback. Built GitHub API integration for PR code loading, review actions, and branch commit.

Due: Aug 1, 2024Completed: Jul 28, 2024

Session Recording & Annotations

Created event-stream recording system (15MB/hr vs 500MB video). Built playback engine with variable speed. Added code annotation tools and slash commands.

Due: Sep 15, 2024Completed: Sep 10, 2024

Team Analytics & Launch

Built team dashboard with review metrics. Added onboarding flow, team management, and billing. Launched to CodeBridge's 40-person team, then opened to public.

Due: Oct 30, 2024Completed: Oct 25, 2024

TypeScriptTestedResponsiveHigh PerformanceSecureAccessible

Explore This Project

View Live Demo →View Source Code

Related Projects

Completed

FinPay — Fintech Payment Gateway

A PCI DSS Level 1 compliant payment processing platform built for PayStream, a fintech startup serving small and mid-size e-commerce merchants. The platform handles multi-currency payment processing across 15 currencies, real-time transaction monitoring with custom fraud scoring, automated daily reconciliation, and a merchant self-service onboarding portal. Currently processing $2M+ monthly transaction volume with a 99.99% success rate and 98.5% fraud detection accuracy.

$2M+ monthly volume with 99.99% success rate and real-time fraud detection

ReactTypeScriptNestJSPostgreSQL+4

Details Demo Code

In Progress

SaaS Analytics Platform

A multi-tenant product analytics platform built as an affordable alternative to Amplitude and Mixpanel for mid-market SaaS companies. The platform ingests 50M+ events daily from 500+ business tenants, provides sub-second query responses via ClickHouse, and offers a drag-and-drop dashboard builder with funnel analysis, cohort tracking, and automated reporting. Currently in active development with the event pipeline and core analytics engine complete, and the dashboard builder in its final phase.

Enterprise-grade product analytics at 1/10th the cost — processing 50M+ events daily

ReactTypeScriptNestJSClickHouse+4

Details

Completed

HealthTrack Dashboard

A real-time health monitoring dashboard for VitalSync, a fitness technology startup. The platform aggregates data from 12+ wearable device brands (Fitbit, Apple Watch, Garmin, Whoop, Oura, Samsung Galaxy Watch, and more) into a unified dashboard with interactive D3.js visualizations, personalized health insights powered by a lightweight ML model, and automated weekly health reports. Currently serving 8,000+ users with 2M+ daily data points.

Unified health insights from 12+ wearable brands — real-time, personalized, actionable

Next.jsD3.jsNestJSPostgreSQL+4

Details Demo Code

←Back to All Projects