CodeCafé

A hyper-collaborative, real-time development environment right in your browser. CodeCafé makes pair programming, teaching, and building web projects together as fluid and instant as sharing a thought.

Why CodeCafé?

We saw coding classes juggling tools built for essays, not engineers. Existing solutions felt clunky for the dynamic nature of real-time programming. CodeCafé was born from the need for a seamless, browser-based coding space designed from the ground up for true collaboration. Learn, teach, and build—together, instantly.

Core features:

• Pixel-Perfect Live Preview: See your HTML, CSS, and JavaScript changes render instantly in an integrated Web View. What you code is what you see!
• True Real-Time Collaboration: Powered by Operational Transformation, multiple users can type in the same files simultaneously, with conflicts resolved seamlessly.
• VS Code Feel: Enjoy a familiar, rich editing experience (via Monaco Editor) with syntax highlighting, smart suggestions, and error checking.
• Zero Setup: Dive straight into coding. Everything runs in the browser.

Tech stack:

• Frontend: React, TypeScript, Zustand (State Management), Tailwind CSS, Monaco Editor, Xterm.js (Integrated Terminal), Framer Motion, Axios, WebSocket Client
• Backend: Java Spring Boot, WebSocket API, Jackson (JSON Processing)
• Real-time Collaboration: Custom Operational Transformation (OT) Implementation
• State Management / Messaging: Redis (AWS ElastiCache) utilizing Lua Scripting for atomic operations
• Hosting: AWS EC2 (Backend), Vercel (Frontend), AWS ElastiCache (Redis)

At the heart of CodeCafé's seamless collaborative editing is our custom-built Operational Transformation (OT) system, implemented on both the frontend and backend.