VS Code Extension UI & API Systems

Designed a Material UI integration with a custom theme adapter for a VS Code webview. Architected an inheritance model for API test execution that eliminated 60% of manual setup code and resolved critical Content Security Policy conflicts.

Technologies:

TypeScriptReactNode.jsMaterial UI

Educational ERP & AI Admin

Led a 5-member frontend team architecting a React/Redux system for an ERP platform serving 5,000+ concurrent users, reducing load times by 40%. Engineered a LangChain RAG application processing 10,000+ documents with 85% retrieval accuracy.

Technologies:

ReactReduxLangChainOpenAI GPT-4Vitest

Frontend Dev Helper — Browser Extension DevTools Suite

A unified Chrome and Firefox Manifest V3 browser extension that consolidates 27 professional frontend debugging tools into a single, Shadow DOM–isolated, keyboard-first developer experience — replacing the fragmentation of 8–12 separate legacy MV2 extensions with one cohesive layer over every page you debug. Ships with an AI-powered DOM analysis engine, an interactive Canvas flame graph, a multi-framework component tree, and Stripe-powered licensing.

Key Results:

Consolidated 27 professional debugging tools into a single Shadow DOM–isolated extension, eliminating dependency on 8–12 legacy MV2 extensions and guaranteeing zero CSS leakage on any host page
Built a single-pass TreeWalker DOM analysis engine with requestIdleCallback yielding and a 2-second timeout guard that audits 50+ accessibility, performance, SEO, and security patterns without blocking the page thread
Implemented a Canvas-rendered interactive flame graph using PerformanceObserver with mouse-wheel zoom (0.1×–10×), drag-to-pan, per-category color coding, and JSON export
Developed a framework-agnostic component tree visualizer that auto-detects React, Vue, Angular, and Svelte via dedicated introspection modules, with MutationObserver auto-refresh and keyboard-accessible search
Engineered race-condition-safe promise serialization in the MV3 service worker to prevent concurrent tool toggle conflicts caused by rapid user input
Integrated Stripe checkout and chrome.alarms–based license revalidation fully within the background service worker context, keeping API keys isolated from content scripts

Technologies:

TypeScriptReact 18Chrome MV3Firefox MV2ViteCRXJSTailwind CSSZodShadow DOMWeb WorkersVitestPlaywrightBiomeStripe

RAG Starter Kit — Production-Grade AI Document Chat Platform

A full-stack, production-ready Retrieval-Augmented Generation platform built on Next.js 15 App Router that lets teams ship an AI-powered document chatbot with hybrid retrieval, enterprise authentication, and real-time collaboration — using 100% free-tier AI providers by default. The architecture spans a 5-stage document ingestion pipeline, pgvector hybrid search with Reciprocal Rank Fusion, SAML 2.0 SSO, Inngest background jobs, and full OpenTelemetry tracing, making it equally usable as a weekend side project or a commercial SaaS foundation.

Key Results:

Implemented Hybrid Retrieval combining parallel vector cosine similarity and BM25 keyword search fused via Reciprocal Rank Fusion (RRF) with Jaccard-similarity deduplication — production information retrieval engineering that outperforms naive single-strategy RAG
Built a 5-stage document ingestion pipeline with magic-bytes binary validation across 12+ file formats, ClamAV virus scan integration, Tesseract.js OCR fallback for scanned PDFs, and parameterized pgvector raw SQL inserts to eliminate SQL injection risk
Integrated SAML 2.0 SSO via samlify (Okta/Azure AD) alongside NextAuth v5 credential and OAuth flows, and TOTP — enterprise-grade authentication infrastructure from day one
Designed fault-tolerant background processing with Inngest event-driven jobs, a dead-letter queue, and exponential-backoff retry logic for non-recoverable ingestion failures
Instrumented full distributed tracing with OpenTelemetry (OTLP HTTP exporter) and structured Pino logging, plus Ably WebSocket real-time collaboration with RBAC workspace isolation
Defaults to 100% free-tier AI (Google Gemma 3 12B via OpenRouter + Gemini embeddings) while remaining fully provider-agnostic across OpenAI, Anthropic, Ollama, and self-hosted models

Technologies:

Next.js 15React 19TypeScriptPostgreSQLpgvectorPrismaRedisVercel AI SDKLangChain.jsOpenAIGoogle GeminiInngestAblyNextAuth v5SAML 2.0StripeOpenTelemetryTailwind CSS 4shadcn/uiZodCloudinaryTesseract.jsVitestPlaywright

React Perf Profiler — DevTools Extension for React Performance Engineering

A Chrome and Firefox DevTools extension that hooks directly into __REACT_DEVTOOLS_GLOBAL_HOOK__ to profile React component render behavior at scale — detecting wasted renders with fiber bitmask decoding, quantifying memoization effectiveness, parsing RSC wire payloads, and predicting render times with TensorFlow.js. All heavy analysis is offloaded to three dedicated Web Workers, keeping the DevTools panel at 60fps across component trees with 10,000+ nodes.

Key Results:

Hooked directly into __REACT_DEVTOOLS_GLOBAL_HOOK__ to intercept React fiber commits without modifying application source code — enabling zero-instrumentation profiling of any React app including production builds
Decoded React fiber flags bitmask (0x040 | 0x1000) for React 17/18 cross-version context-change detection — requires deep knowledge of React internals not exposed by any public API
Offloaded all heavy analysis to three dedicated Web Workers (wasted render detection, RSC analysis, timeline generation), keeping the DevTools panel UI at 60fps across component trees with 10,000+ nodes
Implemented a custom O(1) LRU cache using Map insertion-order guarantees and a bounded CircularBuffer for commit history — zero external dependencies for performance-critical data structures
Built an RSC wire-format parser that tracks server/client boundary crossings, payload sizes, and cache hit/miss rates — filling the visibility gap left by React DevTools' limited RSC support
Shipped a perf-check CI CLI binary that validates render budgets and per-chunk bundle sizes against perf-budget.json, generates GitHub PR comment markdown, and exits with structured error codes — the profiler enforces its own budgets in CI

Technologies:

TypeScriptReact 18Chrome MV3Firefox MV2ZustandD3.jsThree.jsReact Three FiberTensorFlow.jsWeb WorkersIndexedDBViteCRXJSImmerReselectVitestPlaywrightBiome

Case Studies

VS Code Extension UI & API Systems

Educational ERP & AI Admin

Frontend Dev Helper — Browser Extension DevTools Suite

Live Fleet Management System

RAG Starter Kit — Production-Grade AI Document Chat Platform

React Perf Profiler — DevTools Extension for React Performance Engineering

Have a project in mind?