About

Code-X is a full-stack collaborative web IDE platform built for seamless developer workflows and instant coding. It empowers users to authenticate, manage project files, and collaborate on code changes in near real-time. By providing an in-browser terminal experience and isolated, per-user runtime environments powered by Kubernetes, Code-X delivers a complete, cloud-native development experience directly in the browser.

Tech Stack

React
Vite
Monaco Editor
Xterm.js
Node.js
Socket.IO
node-pty
PostgreSQL
Drizzle ORM
Azure Blob Storage
Kubernetes
Nginx
JWT

Features

Real-Time Collaboration

Multi-user editing and synchronization via Socket.IO delta events.

In-Browser Terminal

Interactive terminal streaming powered by node-pty.

Isolated Cloud Workspaces

Kubernetes-managed, per-user runtime environments.

Secure File Storage

Durable project file storage backed by Azure Blob Storage.

Robust Authentication

JWT-based authentication and protected APIs with PostgreSQL user management.

Advanced Routing

Nginx-based routing for API, sockets, and user container proxying.

Multi-Language Support

Comprehensive code editing support through the Monaco Editor.

Architecture

01

Client Layer

A React + Vite SPA hosting the Monaco editor, Xterm terminal, file explorer, and authentication screens.

02

Gateway Layer

Nginx acts as a single traffic entry point, routing API requests, WebSocket connections, and container lifecycle events without exposing internal cluster topology.

03

Main API Service

Handles user authentication, protected APIs, database operations via Drizzle/Postgres, and Azure Blob integration. It also hosts the socket hub for editor deltas.

04

Runtime Service

Manages local workspace files, applies editor deltas, and runs shell sessions via node-pty for terminal interactivity.

05

Orchestrator Service

Creates, proxies, and deletes per-user Kubernetes deployments and services.

06

Data Flow (Editing)

Code edits in Monaco emit delta events via sockets → broadcasted to clients → applied to local files → saved and persisted to Azure Blob Storage.

07

Data Flow (Execution)

Frontend requests a spawn → K8s orchestrator creates a user pod → an Init container hydrates the workspace from Azure Blob → terminal/editor sockets connect.

Future Improvements

Advanced Collaboration Tools

Implement features like active user cursors, presence indicators, and inline commenting for a richer collaborative experience.

Enhanced Compute Management

Introduce auto-hibernation or scaling policies for Kubernetes pods to optimize resource usage and reduce infrastructure costs during idle periods.

Version Control Integration

Integrate native Git commands directly into the UI, allowing users to commit, push, and pull directly from their web workspaces.