Back to projects
Transcribatron
Professional

Transcribatron

Affaq Ahmed · Frontend Engineer · DevCache · Web App / June 27, 2026

  • Next.js
  • Y.js
  • Tiptap
  • WebSockets

Overview

Transcribatron is a collaborative transcription platform with real-time document editing, similar to Google Docs. Multiple people can work on the same transcript at once, seeing each other's changes live.

My Role & Contributions

I built the frontend from scratch:

  • Frontend from scratch — the full client application.
  • Real-time collaboration — multiple users editing the same document simultaneously.
  • Y.js integration — CRDT-based syncing for conflict-free collaboration.
  • Tiptap editor — implemented the rich-text editing experience.
  • WebSocket communication — the live sync transport.
  • Figma-to-code — implemented the UI faithfully from Figma designs.

Key Features

  • Real-time collaborative editing of transcripts.
  • Rich-text editing via Tiptap.
  • Live sync across collaborators with conflict-free merging.

Tech Stack & Architecture

  • Frontend: Next.js.
  • Collaboration: Y.js (CRDT) over WebSockets.
  • Editor: Tiptap.

Challenges & Solutions

  • Conflict-free collaboration — real-time co-editing is hard; using Y.js (CRDTs) over WebSockets keeps everyone's changes merged consistently without conflicts.
  • Editor integration — wiring Tiptap together with Y.js for a smooth, Google-Docs-style editing experience.
  • Pixel-accurate UI — implementing the interface faithfully from Figma.

Timeline

May 2026 – Present · Ongoing

Links

No public link is available for this project.