A comprehensive, production-ready video recording script and LinkedIn post package designed to showcase the CodeSpace cloud-native AI sandbox & Web IDE project.
- Target Duration: 2 minutes to 2 minutes 30 seconds
- Tone: Technical, confident, articulate, engineering-focused
- Target Audience: Engineering managers, recruiters, full-stack & DevOps engineers, tech leads
- Setup Requirements:
- Screen recording tool (OBS / Loom / CleanShot)
- Split screen: Browser running CodeSpace (Landing page → IDE layout) + Terminal / Lens / K8s dashboard
- Good microphone and 1080p/4K 60fps screen capture
Legend:
[VISUAL] -> What to display on screen / camera action
[SPEECH] -> What to say verbatim (or adapt naturally)
[TIMING] -> Estimated timestamp
[TIMING]: 0:00 - 0:15
[VISUAL]: Screen capture starts on the CodeSpace IDE. You type a prompt into the AI Assistant: "Build a modern real-time Kanban board with drag-and-drop and dark mode." The AI immediately starts streaming file operations in real time, and the live preview iframe instantly updates with the running React app.
[SPEECH]:
"Imagine giving an AI prompt, and within seconds, having a dedicated Kubernetes container spun up, code streamed in real-time, an interactive terminal running bash, and a live web application preview running on its own subdomain — all directly inside your browser.
This is CodeSpace, an end-to-end cloud-native development sandbox I built from scratch."
[TIMING]: 0:15 - 0:35
[VISUAL]: Cut to landing page. Click "Create Sandbox" → Show the slick loading transition while the backend provisions the Kubernetes Pod. Transition into the IDE layout with 3 resizable panels: File Explorer + Monaco Editor, Live Preview + Terminal, and AI Chat Assistant.
[SPEECH]:
"CodeSpace solves the friction of local environment setups. Instead of configuring toolchains, node versions, and dependencies locally, CodeSpace provisions isolated, containerized React sandboxes on-demand.
Users get a complete Web IDE powered by React 19, Monaco Editor, and xterm.js, integrated directly with an autonomous AI coding agent."
[VISUAL]: Zoom in on the right AI Assistant panel. Show the Server-Sent Events (SSE) streaming output: tool calls (list_files, read_files, update_files, create_files) showing green status pills as files are created and edited in real time.
[SPEECH]:
"Under the hood, the AI Orchestration service runs LangGraph and Mistral AI. Instead of just returning raw markdown code blocks, the agent executes structured tools directly against the sandbox filesystem. Every file creation and modification is streamed to the frontend via Server-Sent Events with zero lag."
[VISUAL]: Click on src/App.jsx in the File Explorer. Open the file in Monaco Editor. Edit a heading text. Point out the subtle Unsaved → Saving... → Saved status indicator. Show the iframe instantly updating via Vite HMR.
[SPEECH]:
"For manual code changes, I integrated Monaco Editor with local Web Worker bundling. As you type, a custom 600-millisecond debounced auto-save hook safely patches file changes to the container agent's REST API, triggering instant Vite Hot Module Replacement in the preview window."
[VISUAL]: Expand the bottom Terminal panel. Type ls -la, npm list, or run a command. Resize the terminal panel and show smooth terminal refitting.
[SPEECH]:
"At the bottom, developers have a full Linux shell. This is powered by
node-ptyrunning inside the sandbox pod and streamed to xterm.js over WebSockets with bi-directional resize synchronization."
[TIMING]: 1:20 - 1:55
[VISUAL]: Show the architecture diagram (from Excalidraw or README) or switch to a Kubernetes terminal / K9s showing the microservices and active pods: sandbox-pod-..., router-deployment, auth-deployment, ai-deployment.
[SPEECH]:
"Let's look at the engineering under the hood:
1. Dynamic Pod Lifecycle: When a user creates a project, the Sandbox Server uses
@kubernetes/client-nodeto spin up a dedicated Pod containing the Vite application, a Node.js management agent, and an AWS S3 file-sync sidecar.2. Automatic Lifecycle Cleanup: To manage cloud compute costs, each sandbox creates a Redis TTL key. Redis keyspace expiration events trigger automatic teardown of idle pods and services after 20 minutes.
3. Dynamic Host Routing: I built a custom reverse proxy router that dynamically inspects host headers, routing
previewsubdomains to the Vite dev server andagentsubdomains to container management APIs.4. Event-Driven Microservices: Authentication handles Google OAuth 2.0, publishes login events to RabbitMQ, and a decoupled notification worker dispatches security emails via Nodemailer."
[TIMING]: 1:55 - 2:20
[VISUAL]: Quick montage showing:
- Path traversal validation in
sandbox/agent/src/app.js - AWS S3 sync debouncing in
sandbox/sync-agent/sync.js - Skaffold build / deployment terminal
[SPEECH]:
"Building a multi-tenant cloud IDE comes with unique distributed systems challenges:
- Eliminating WebSocket frame corruption by replacing dual upgrade listeners with a unified HTTP/WS proxy layer.
- Ensuring strict container security with path traversal protection on all filesystem endpoints.
- And architecting bi-directional file synchronization using Chokidar and AWS S3 with parallel download pipelines and write-finish stability checks."
[TIMING]: 2:20 - 2:35
[VISUAL]: Return to camera / CodeSpace landing page with repository link on screen.
[SPEECH]:
"CodeSpace is fully containerized, deployed using Skaffold on Kubernetes, and completely open-source.
Check out the GitHub repo linked in the comments below for the full architecture breakdown, and let me know what you think in the comments! Thanks for watching!"
Use the text below as your LinkedIn post caption alongside the uploaded video:
Spent the last few weeks building CodeSpace — a cloud-native dev platform that provisions isolated, AI-assisted coding sandboxes on Kubernetes.
Built as part of Cohort 2.0, with guidance from my mentor Ankur Prajapati on the sandbox lifecycle design and pushing me to get the Kubernetes RBAC and pod teardown logic right. Genuinely made the project sharper.
The idea: open a browser, get a full VS Code-style environment with a live terminal, a running dev server, and an AI assistant that can edit your files in real time — no local setup.
What's under the hood:
1.AI coding assistant (LangGraph + Mistral AI) that streams file edits over SSE as you chat with it
2.Monaco Editor in-browser, with local Web Worker bundling and 300ms debounced auto-save straight to container storage
3.Live terminal via node-pty and xterm.js, streamed over WebSockets
4.Instant live previews — wildcard subdomain routing (*.preview.domain.com) proxies straight to each sandbox's Vite dev server
5.Kubernetes-native lifecycle: pods and services spin up per session, with Redis TTL keyspace events tearing them down automatically after 20 minutes idle
6.Files sync bidirectionally to S3 via a chokidar-based sidecar, so nothing's lost when a pod dies
7.Google OAuth + JWT for auth, RabbitMQ + Nodemailer for login notifications
Stack: React 19, Vite 8, Tailwind v4, Monaco, xterm.js, Socket.io on the frontend. Express 5, LangGraph, LangChain, Zod on the backend. Kubernetes, Docker, Skaffold, AWS EKS/S3 for infra. MongoDB, Redis, RabbitMQ for data and messaging.
Repo + full architecture breakdown: https://github.com/DeveloperHarshal92/The-CodeSpace
Would genuinely like feedback on the sandbox lifecycle design — happy to talk through trade-offs in the comments.
#WebDevelopment #CloudComputing #Kubernetes #ReactJS #NodeJS #DevOps #SystemDesign #FullStack #SoftwareEngineering #LangChain #AI #Microservices #Docker- Clean Screen Resolution: Record at 1920x1080 (1080p) or 2560x1440. Zoom in the browser to 110%–125% so file names and code are crisp on mobile feeds.
- Speed & Pacing: Aim for a steady, energetic cadence. Don't linger on loading states — trim 1-2 second connection pauses in post-editing.
- Audio Quality: Use a decent external microphone with noise suppression.
- Thumbnail: Create a high-contrast thumbnail featuring the CodeSpace IDE screenshot + clean title text: "I Built a Cloud-Native AI Sandbox on Kubernetes".
Use these prompts in Midjourney, DALL-E 3, Flux, or Ideogram to generate eye-catching, high-CTR video thumbnails:
A futuristic, ultra-modern developer workspace with a floating holographic multi-window Web IDE displaying clean glowing code, terminal, and live React preview, high contrast dark theme, neon cyan, electric blue and purple accent lights, glowing Kubernetes steering wheel logo and cloud infrastructure icons subtly floating in the background, sleek glassmorphism panels, 3D geometric isometric vibe, cinematic lighting, ultra-sharp 8k resolution, photorealistic studio tech photography style, YouTube tech thumbnail aesthetic, 16:9 aspect ratio --ar 16:9 --style raw --v 6.1
A high-impact YouTube video thumbnail featuring a dark modern code editor interface with glowing neon lines of code, an integrated AI assistant chat panel, and a live web app preview. In the center-right, glowing holographic badges for Kubernetes, Docker, and React. Dark sleek gradient background (obsidian black to deep midnight blue with electric cyan backlight). Left third of the frame leaves clean negative space for bold typography overlay: 'I Built a Cloud AI Sandbox'. Cinematic depth of field, vibrant lighting, ultra high definition.
3D isometric render of a glowing cloud platform hosting microservice containers, Kubernetes pods, and a futuristic floating laptop displaying a code IDE, vibrant cyberpunk neon blue and neon emerald green lighting, glossy dark glass pedestal, floating tech particles, clean premium tech product render, Octane render, Blender 3D style, Unreal Engine 5, 16:9 ratio.