Back to Portfolio

Technical Case Study

Kodezi

AI-Powered Web IDE & Developer SaaS — 200K Users, Product Hunt Launch of the Month, v1 through v4

Kodezi, an AI-powered Web IDE I built across four versions — from a Next.js MVP to a platform with 200,000 active users. It analyzes your full codebase to debug, generate, refactor, translate, and document code in real time. I built the Monaco Editor integration, KodeziChat with Socket.io streaming, Stripe subscription billing with a credits system, the VS Code extension UI, and a separate automated system status tracker.

Kodezi is not a thin wrapper around an LLM API. It's a full in-browser IDE — Monaco Editor with multi-tab state, diff views, codebase-aware context — with OpenAI integration that understands your actual project, not just the snippet you paste in. I built it from v1 through v4: the initial MVP, KodeziChat with real-time Socket.io streaming, a credits-gated subscription system enforced at the API level, a VS Code extension with native-feeling Webview UI, and separately, an automated system status tracker that replaced manual monitoring entirely. The 200K user milestone and Product Hunt Launch of the Month were outcomes of getting the product architecture right across four iterative versions.

Kodezi production interface — AI-Powered Web IDE & Developer SaaS — 200K Users, Product Hunt Launch of the Month, v1 through v4

The Problem

Developers lose significant time context-switching between their IDE, documentation, and AI tools that don't understand their codebase. Existing AI coding tools either worked only on single files, required copy-pasting code out of the editor, or had no understanding of the broader project context. There was no in-browser IDE that combined a professional editor with AI that actually knew what was in your project.

The Solution

Built Kodezi across four versions: a Monaco-based in-browser IDE with OpenAI integration that operates on full codebase context, real-time AI chat via Socket.io streaming, a credit-gated subscription system enforced server-side, PDF-to-code generation, cross-language translation, a VS Code extension with a native-feeling Webview UI, and a separate automated system status tracker. Each version built on a stable foundation rather than rewriting what worked.

Results & Impact

200K active users. Product Hunt Launch of the Month (February 2023), Launch of the Week, and two Launch of the Day awards. The platform scaled from a single-developer MVP to a multi-version SaaS with real-time AI, gated premium features, in-editor tooling, and fully automated infrastructure monitoring — without requiring a rewrite of the core architecture between versions.

My Role

Responsibility

Core full stack engineer across all four versions. V1: built from scratch — website, Web IDE, backend APIs, Stripe subscriptions. V2: led KodeziChat UI and Socket.io streaming integration, built the VS Code extension Webview UI. V3: contributed to Kodezi Cloud in a team. V4: rebuilt the dashboard, implemented multi-subscription Stripe handling. Built the Auto System Status Tracker independently as a separate deployment.

Kodezi team profile, archived Oct 2024
Executive_Narrative

Assad didn't just write code, he thought through the architecture before the first line was typed. He joined us for the initial MVP and performed so well that we brought him on as a founding full-stack engineer. Over four major versions, he shipped the AI-powered IDE, the real-time KodeziChat experience, the VS Code extension, and a completely automated system status tracker, all while we scaled to 200,000 users and won Product Hunt Launch of the Month.

Ishraq K.CEO & Founder

Key Highlights

Monaco-Based Web IDE with Full Codebase AI Context

Built a professional in-browser IDE using Monaco Editor — the same editor that powers VS Code — with multi-tab state, diff views, and OpenAI integration that operates on the full project context, not just the open file. Features include bug detection with fix suggestions, code generation from natural language, cross-language translation, documentation generation, and PDF-to-code conversion.

KodeziChat — Real-Time AI Streaming via Socket.io

Built the complete KodeziChat UI and Socket.io integration for token-by-token AI streaming. The assistant is codebase-aware — it understands the files you have open and can generate, modify, and explain code in context. Real-time streaming keeps perceived latency low even when the model response takes several seconds to complete.

API-Level Subscription Gating with Credits System

Implemented a daily credits system (25 free per day) with all premium AI features enforced at the API layer against live Stripe subscription status. The frontend doesn't control access — the backend does, on every request. This pattern prevents the common bypass of disabling frontend checks.

Scaled to 200K Users Across Four Versions

Contributed core engineering from v1 (MVP built from scratch) through v4 (multi-subscription billing rebuild). Each version shipped on a working foundation rather than a rewrite. Product Hunt Launch of the Month in February 2023. The architecture was designed to scale, which is why it didn't need replacing as the user count grew.

VS Code Extension with Native-Feeling Webview UI

Built the full VS Code extension UI using the Webview API with React and TypeScript. The extension surfaces Kodezi's AI debugging, code generation, and KodeziChat directly inside VS Code with theme-aware styling — it adapts to the user's active editor theme rather than looking like an embedded webpage.

Automated System Status Tracker — Zero Manual Ops

Built and deployed a separate monitoring system that pings every Kodezi service API on a schedule, stores response status in a database, and renders a 90-day color-coded health history per service. Green = fully up, orange = down under 12 hours, red = down over 12 hours. AWS EC2 + Nginx + SSL + GitHub Actions CI/CD. No human updates the status page — the system does it.

Key Features

  • Monaco Editor: multi-tab state management, Diff Editor, in-browser code execution

  • AI-powered bug detection with explanation and fix suggestions

  • Code generation from natural language instructions

  • Cross-language and cross-framework code translation

  • Automated documentation generation from existing code

  • PDF-to-code conversion via OpenAI

  • KodeziChat: codebase-aware AI assistant with Socket.io token-by-token streaming

  • Daily credits system: 25 free credits, premium features server-side gated by Stripe subscription

  • Stripe recurring subscription billing with webhook handling

  • Paddle payment gateway as secondary provider

  • Multi-subscription support tied to single Stripe customer ID (v4)

  • User dashboard: file management, subscription management, credits tracking

  • Google Auth and email authentication

  • Amazon SES for transactional email delivery

  • Intercom for in-app support and behavioral analytics

  • GSAP and Lottie animations across marketing and dashboard UI

  • VS Code extension: Webview panels for AI debugging, generation, and KodeziChat in-editor

  • VS Code theme-aware styling via CSS variables for native editor feel

  • Automated status tracker: scheduled API pinging, database-backed 90-day health history

  • Color-coded daily bars per service: green (up), orange (<12h down), red (12h+ down)

  • AWS EC2 + Nginx + SSL infrastructure for status tracker

  • GitHub Actions CI/CD pipeline for automated status tracker deployments

Key Metrics

Active Users

200K

Product Hunt

Launch of the Month — February 2023

Versions

v1 built from scratch through v4

AI Features

Debug, generate, translate, docs, PDF-to-code

Credits Model

25 free/day — premium gated server-side by Stripe status

Status Tracker

90-day automated health history, zero manual ops

Complex Systems Engineering

Assad is honest, reliable and trustworthy. I had quite a complicated bit of coding that was required and Assad made light work of it. The project was scheduled to be completed within 3 days but Assad worked all through the night to get my work complete in 1 day. An absolute pleasure to work with and highly recommended.

Nab Z.

Software Engineer

Verified Client

System Architecture

Next.js frontend with MUI component system

MongoDB for user data, code files, credits state, and subscription records

Monaco Editor: multi-tab management, Diff Editor, in-browser execution context

OpenAI API pipeline with full codebase context for AI feature requests

Socket.io streaming layer for KodeziChat real-time token-by-token delivery

Stripe Subscription API with webhook handling and server-side credits enforcement

Paddle as secondary payment gateway

Google Auth + Amazon SES for authentication and transactional email

VS Code Webview API with React + TypeScript for extension UI

Extension host / Webview message-passing for bidirectional communication

Automated API health pinging system with database status persistence

90-day health history with threshold-based color classification per service

AWS EC2 + Nginx reverse proxy + SSL for status tracker infrastructure

GitHub Actions CI/CD for automated status tracker deployments

Frequently Asked Questions

Kodezi is an AI-powered Web IDE that analyzes your entire codebase — not just the current file — to detect bugs, suggest fixes, generate new code from natural language, translate between languages and frameworks, and produce documentation. The core problem it solves is context switching: developers constantly jump between their IDE, documentation, Stack Overflow, and ChatGPT. Kodezi collapses that into one environment that already understands your project.

V1: I built everything from scratch — the full website UI, Monaco-based Web IDE, backend APIs, and Stripe subscription integration. V2: I led KodeziChat, which meant building the entire chat UI and integrating the backend via Socket.io for token-by-token real-time streaming. I also built the VS Code extension UI using the Webview API. V3: Contributed to Kodezi Cloud as part of a larger team. V4: Rebuilt the user dashboard and implemented multi-subscription handling — multiple active Stripe subscriptions tied to a single customer ID, which is a non-trivial billing edge case.

Free users get 25 credits per day for standard features. Premium AI capabilities are gated behind an active paid subscription — and this is enforced at the API level, not just the frontend. The backend checks subscription status against the Stripe customer record on every request to a gated endpoint. The UI doesn't control access; the API does. This prevents the obvious bypass of removing the frontend guard.

KodeziChat is a codebase-aware AI assistant. I built the full frontend and integrated Socket.io for the streaming layer — the model response comes back token by token, not as a complete response. This matters for perceived latency: users see the answer forming rather than waiting for a spinner. The context includes the current file, open tabs, and relevant project files. It's not a generic chatbot with a code block — it knows what's in your project.

It's a separate system I built and deployed independently. It pings every Kodezi service API on a schedule, records the response status in a database, and renders a 90-day health history per service as color-coded daily bars: green for fully up, orange for down under 12 hours, red for down over 12 hours. Deployed on AWS EC2 with Nginx, SSL, and a GitHub Actions CI/CD pipeline. It replaced manual status updates entirely — no human needs to check anything or post a status page update.

A production-grade AI developer tool with a Web IDE, real-time streaming chat, subscription billing, a credits system, and a VS Code extension is a large scope. Budget $40,000 to $120,000 depending on AI integration depth, editor feature complexity, and the scale targets you're designing for. The Stripe and authentication work is a known quantity. The editor integration and streaming infrastructure are where scope varies most significantly.

Technical Authority

Architecture

  • Monaco Editor-based Web IDE with multi-tab state and Diff Editor
  • OpenAI API pipeline with full codebase context for all AI features
  • Socket.io streaming layer for real-time token-by-token AI chat delivery
  • Server-side credits-gated API access enforced against live Stripe subscription status
  • VS Code Webview React UI with extension host message-passing
  • Automated API health monitoring with 90-day database-backed history
  • Multi-version SaaS architecture from single-developer MVP to 200K users

Use Cases

  • AI-powered developer productivity SaaS platforms
  • In-browser code editors and Web IDE applications
  • Real-time AI chat tools with codebase awareness
  • Subscription-gated developer tools with credits systems
  • VS Code extensions with custom AI-integrated Webview UIs
  • Automated service health monitoring for SaaS products

Challenges Solved

  • Delivering codebase-aware AI assistance inside a browser-based IDE
  • Real-time AI response streaming with low perceived latency via Socket.io
  • Enforcing subscription-gated feature access at the API level with a per-day credits model
  • Handling multiple concurrent Stripe subscriptions under a single customer ID
  • Building a VS Code Webview UI that adapts to the user's active editor theme
  • Replacing manual status page updates with a fully automated monitoring system

Technical Specs

Platform Type
AI-Powered Web IDE & Developer SaaS
Frontend
Next.js + Material UI (MUI)
Database
MongoDB
Editor
Monaco Editor (multi-tab, Diff Editor)
AI Integration
OpenAI API — debug, generate, translate, docs, PDF-to-code
Real-Time Chat
KodeziChat via Socket.io token-by-token streaming
Payments
Stripe Subscriptions + Paddle Payment Gateway
Auth
Google Auth + Email
Email
Amazon SES
Support & Analytics
Intercom
VS Code Extension
Webview API with React + TypeScript (v2)
Status Tracker
Automated 90-day health monitor — EC2 + Nginx + CI/CD
Users
200,000 active users

Built Under

SaaS Engineering Systems

Scalable SaaS platforms, subscription systems, and production-grade architectures.

View System →

You have read what I built. Now let's talk about what you need.

Scaling an AI developer tool from zero to 200K users involves real-time streaming, subscription-gated feature access, and infrastructure that holds under load. If you're building in this space, the lessons from Kodezi apply directly.