KubeMini: Interactive Kubernetes Control Plane & Orchestration Simulator

KubeMini is a high-fidelity, interactive full-stack Kubernetes simulator. It features a declarative YAML manifest editor, simulated Master/Control Plane and Worker Node topologies, a real-time kubectl CLI console, dynamic pod scheduling algorithms, live diagnostics container log streaming, and simulated traffic burst generators.

🚀 How to Run this Project in VS Code

Follow these step-by-step instructions to get the project set up and running locally on your machine in Visual Studio Code.

📋 Prerequisites

Before starting, ensure you have the following installed on your local machine:

• Node.js (v18.x or v20.x+ recommended) — Download Node.js
• NPM (comes pre-bundled with Node.js)
• Visual Studio Code — Download VS Code

🛠️ Step 1: Open the Project in VS Code

1. Download or clone this project repository to your local computer.
2. Open VS Code.
3. Go to File ➔ Open Folder... (or Cmd+O on macOS / Ctrl+O on Windows).
4. Select the root directory containing package.json and click Open.

⚙️ Step 2: Configure Environment Variables

The server uses environment variables to communicate with services like the Gemini API.

1. In the root directory of the project, create a new file named .env:

   cp .env.example .env

   (Or manually create a file named .env and copy the contents of .env.example into it).

2. Open the .env file and replace the placeholder values with your credentials:

   # Your Google Gemini API Key
   GEMINI_API_KEY="your-actual-api-key-here"
   
   # Your Local Development Server URL (Defaults to port 3000)
   APP_URL="http://localhost:3000"

📦 Step 3: Install Dependencies

Open the integrated terminal in VS Code:

1. Press Ctrl + ` (backtick) or go to Terminal ➔ New Terminal from the top menu.
2. Run the following command to install all necessary client-side and server-side dependencies:

   npm install

🏃 Step 4: Start the Development Server

With dependencies installed, spin up the unified full-stack development environment:

1. In the terminal, execute:

   npm run dev

2. The terminal will output that the server is running. Vite and Express are configured together to run on a single port:

   Server running on http://localhost:3000
   

3. Open your browser and navigate to http://localhost:3000.

Changes made in src/ or server.ts will trigger an instant rebuild and reload in the browser!

🏗️ Production Build and Deployment

If you want to compile and run KubeMini in a production-ready, bundled state:

1. Build the production assets and backend server:

   npm run build

   This compiles the React SPA static files into dist/ and compiles the Node backend into a highly optimized, self-contained CommonJS file at dist/server.cjs via esbuild.

2. Start the production server:

   npm start

   The compiled application will run in standalone mode on http://localhost:3000.

🎨 Recommended VS Code Extensions

For the best developer experience while editing and exploring the codebase, we recommend installing these VS Code extensions:

1. Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — Provides auto-completion and linting for utility classes.
2. TypeScript Nightly (ms-vscode.vscode-typescript-next) — Out-of-the-box support for strict typing.
3. YAML (redhat.vscode-yaml) — Ideal for editing manifest templates in the editor workspace.
4. Prettier (esbenp.prettier-vscode) — Keeps spacing, brackets, and code syntax consistently formatted.

📂 Project Architecture Directory

├── .env.example # Environment variables template ├── .gitignore # Git ignored folders (node_modules, dist) ├── index.html # Main SPA mount canvas ├── package.json # Node scripts and package dependencies ├── server.ts # Express backend server (handles state, logs proxy) ├── tsconfig.json # TypeScript configuration mapping ├── vite.config.ts # Vite build tool with integrated Tailwind CSS ├── src/ # Client-side React Application │ ├── devopsDocs.ts # Static documentation and architecture guide content │ ├── index.css # Global Tailwind imports and font-faces │ ├── main.tsx # React application bootstrapping │ ├── types.ts # Declarative TypeScript Interfaces │ └── App.tsx # Main control dashboard containing KubeMini client layouts