A browser-based real-time code editor with multiuser collaboration powered by operational transformation (OT).

Try CodeCafé Live

Video overview: OT system and editor behavior

• Live Preview: Instantly renders HTML, CSS, and JavaScript.
• Real-Time Collaboration: Concurrent editing with OT-based conflict resolution.
• Monaco Editor: Syntax highlighting, autocomplete, and basic diagnostics.
• Browser-Based: No installation required.

• Client: React, TypeScript, Zustand, Tailwind CSS, Monaco Editor, Xterm.js, Framer Motion, Axios, WebSocket client
• Server: Spring Boot, WebSocket API, Jackson
• Collaboration Layer: Custom Operational Transformation implementation
• State / Messaging: Redis (AWS ElastiCache) with Lua scripts for atomic operations
• Hosting: AWS EC2 (server), Vercel (client), AWS ElastiCache (Redis)

CodeCafé uses a custom OT implementation on both the client and server to keep all participants’ views of a document consistent.

OT enables:

• Adjusting operations (insert/delete) when concurrent changes occur
• Ensuring all clients converge to the same document state
• Preserving each user’s intended edits

The system handles:

• Concurrent edits from multiple users
• Deterministic conflict resolution
• Consistent document state across sessions

The project includes a GitHub Actions pipeline with:

• Continuous Integration: Tests for client and server on each PR and push
• Continuous Deployment: Automatic deployment to EC2 (server) and Vercel (client) on merges to main
• Quality Checks: Basic safeguards against regressions before deployment

Run CodeCafé locally using Docker:

git clone https://github.com/mrktsm/codecafe.git
cd codecafe
docker-compose up

Access the app at http://localhost:80

For more detailed setup and development guidelines, see CONTRIBUTING.md.

• User authentication & persistent projects
• Integrated voice/text chat
• Session rewind & history playback
• Expanded language support & tooling

Contributions are welcome. Please see CONTRIBUTING.md for guidelines.

MIT License