HyperStack

HyperStack is a powerful, microservices-based Cloud IDE and sandbox platform. It provides a complete web-based development environment that dynamically provisions isolated Kubernetes pods for users, allowing them to write, run, and collaborate on code instantly without any local setup.

💻 Technologies Used

Frontend (Web IDE):

• React 19 & Vite
• Redux Toolkit for state management
• Monaco Editor (@monaco-editor/react) for an exceptional coding experience
• Xterm.js for a fully functional in-browser terminal
• Socket.io Client for real-time syncing
• React Flow & Mermaid for diagrams

Backend (Microservices):

• Node.js & Express.js
• MongoDB & Mongoose for persistent data
• RabbitMQ for asynchronous event-driven communication
• Redis for fast caching and session state
• Passport.js for Google & GitHub OAuth authentication
• LangChain integrated with OpenAI, Groq, MistralAI, and Cohere for AI capabilities

Infrastructure & DevOps:

• Kubernetes for orchestrating user sandbox pods
• Docker & Skaffold for local development and deployment
• AWS S3 for persistent workspace syncing

✨ Features (What Users Can Do)

• Instantly Spin Up Environments: Create isolated, containerized environments for React, Next.js, Vite, or Node.js in seconds.
• Write Code in the Browser: Use a VS Code-like experience powered by the Monaco Editor.
• Run Commands: Use the fully integrated, real-time terminal (Xterm.js) to run npm install, start servers, or execute shell commands.
• Clone from GitHub: Automatically clone and start working on existing GitHub repositories.
• AI-Assisted Coding: Leverage integrated AI models to explain code, generate boilerplate, or debug errors.
• Real-Time Notifications: Stay updated on sandbox deployment status and system events via WebSockets and email.

⌨️ Keyboard Shortcuts

Note: These are standard Monaco Editor shortcuts supported in the IDE.

• Ctrl + S / Cmd + S: Save current file
• Ctrl + P / Cmd + P: Quick file search/open
• Ctrl + F / Cmd + F: Find in file
• Ctrl + / / Cmd + /: Toggle line comment
• Ctrl + \`` / Cmd + ``: Toggle terminal

🛠️ The Process: How I Built It

Building HyperStack involved architecting a scalable, distributed system from the ground up:

1. Microservices Architecture: I separated concerns into distinct services (auth, sandbox, notification, ai-orchestration) to ensure each could scale independently.
2. Kubernetes Orchestration: I used @kubernetes/client-node in the backend to programmatically generate manifests and spawn pods on demand. Each pod runs multiple containers (user code, agent, sync-agent) sharing a workspace volume.
3. Real-time Bridge: I implemented a robust WebSocket architecture using Socket.io to stream terminal output, file changes, and server logs from the isolated pod back to the user's browser.
4. Resilient Communication: I introduced RabbitMQ to handle inter-service communication (like triggering emails or scaling events) to prevent system bottlenecks.

🧠 What I Learned

• Kubernetes Resource Management: Managing multi-tenant environments taught me how critical cgroups, requests, and limits are to prevent noisy-neighbor problems and node crashing.
• Event-Driven Architecture: I learned how to decouple systems using RabbitMQ, ensuring that failures in one service (like notifications) don't crash the core application.
• WebSocket Streaming: Handling bidirectional data streams for a terminal requires careful buffer management to avoid overwhelming the client or the server.

🚀 How It Could Be Improved

• Security & Isolation: Implement strict Kubernetes Network Policies (like sandbox-network-policy.yml) to ensure sandboxes are completely isolated from internal cluster traffic.
• Performance Optimization: Pre-warm Kubernetes pods or implement a pod pool to reduce environment startup times from seconds to milliseconds.
• Collaborative Editing: Integrate CRDTs (Conflict-free Replicated Data Types) like Yjs to support real-time multiplayer code editing (Google Docs style).

⚙️ How to Run the Project

Prerequisites

• Docker & Kubernetes (e.g., Docker Desktop with Kubernetes enabled, or Minikube)
• Skaffold installed locally
• Node.js & npm

Setup

1. Clone the repository:

   git clone https://github.com/yourusername/HyperStack.git
   cd HyperStack

2. Configure Environment Variables: Add a .env file in each microservice directory (or configure Kubernetes secrets) with your MongoDB URI, Redis URL, RabbitMQ URI, AWS credentials, and OAuth tokens.

3. Deploy with Skaffold: Run the following command from the root directory to build and deploy all microservices to your local Kubernetes cluster:

   skaffold dev --port-forward

4. Access the Application: Once deployed, Skaffold will port-forward the services:

   • Frontend/Auth: http://localhost:3000
   • Sandbox Router: http://localhost:80