Featured Work

Case Studies

A selection of projects that showcase my expertise in building scalable, high-performance applications for real-world businesses.

Frontend Dev Helper — Browser Extension DevTools Suite

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
Read Case StudyView Code
RAG Starter Kit — Production-Grade AI Document Chat Platform

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
Read Case StudyView Code
React Perf Profiler — DevTools Extension for React Performance Engineering

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
Read Case StudyView Code

Have a project in mind?

Let's discuss how I can help bring your ideas to life with the same quality and attention to detail.

Start a Project