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.