04 · Projects

Work & case studies

A timeline of products I helped build and ship — newest first. Each entry covers the product context, the result, and what I optimized or owned. Names and links appear only when the work can be shared publicly.

Frontend is the core craft. The recurring thread is still dense product UI — dashboards, CMS, multistep flows — but the job is wider: choose the stack, design the architecture, test what ships, and cut cost in the code and in what it costs to run. More recently that means realtime AI, agent-directed implementation under a plan, and products I still support after launch.

What I built

React Native app for iOS and Android — UI, navigation, and platform-specific behavior
App Store and Google Play pipeline — builds, submission, and publication control
Voice AI support flow — ElevenLabs speech + OpenAI for conversational assistance
Vision Camera integration — photo capture, on-device recognition, and search help for physical objects
Authenticated voice and text chat with user settings and in-app update handling
Dashboard integration for support workflows — real-time sync with backend and admin tooling

Approaches

Native camera module for vision capture and object lookup
Streaming voice and text AI with low-latency playback
SSE and real-time event patterns for live support sessions
Cross-platform release via EAS — dev clients, store builds, and OTA where applicable

Live site

Gallery

live

ComVis — Local-first Identity Verification

Live identity-verification product built around a deliberate local-first boundary. MediaPipe Tasks scores blink, turn, nod, and smile challenges in the browser without uploading the continuous camera stream. Short-lived selfie and document captures go through server-side OpenCV YuNet and SFace ONNX matching, then document pixels are discarded. Company workspaces configure pipelines, client links, retry policy, and signed result webhooks.

2026 · Frontend · architecture & computer vision flows

Next.jsTypeScriptTailwind CSSMediaPipe TasksOpenCV YuNetSFace ONNXBetter AuthOCRSigned Webhooks

What I built

Next.js product surface — account flows, verification UX, company workspaces, admin, and privacy documentation
Browser-side liveness — MediaPipe Face Landmarker derives challenge metrics while raw camera video stays on-device
Guided capture flow — selfie and document framing, review, retake, upload validation, and mobile camera switching
Configurable verification pipelines — ordered challenges, timeouts, retry policy, and capability controls
B2B integration — company-scoped client links, reusable verification policy, and HMAC-signed result webhooks
Privacy boundary — document images are processed once for face matching and discarded instead of archived

Approaches

Local-first split — landmarks and liveness in the browser; only derived metrics and short-lived captures cross the API boundary
Closed-model face match — OpenCV YuNet detection plus SFace ONNX embeddings on the controlled server
Plan-driven implementation — define data boundaries and verification states first, then direct and review agent output
Role-aware product architecture — platform admin, company operators, team members, and end clients on one system

Live site

live

HelpGenie — Marketplace Web & Admin

Public web companion to a mobile product line. React SPA on a shared Supabase stack for auth, data, and storage. Marketplace structure with categories, product catalogs, mixed content types, and outbound links — plus a dedicated admin for fast project customization without redeploys. AI generation is designed so the expensive model runs once per session; a cheaper model and cache handle the rest. Owned the flow from React UI through Supabase, with agents implementing under that architecture.

2026 · Frontend · admin & AI pipelines

ReactTypeScriptSupabaseViteTailwind CSSOpenAIReplicate

What I built

Public React SPA — category navigation, product catalogs, and content pages on Supabase auth and data
Shared Supabase backend with the mobile app — auth, Postgres, and storage for both surfaces
Admin panel for site customization — layout, content, and configuration without code changes
Product & category analysis tools in admin — insights to structure catalogs and fill gaps
AI-generated titles and descriptions for products and categories from admin workflows
AI image generation for assets — industry presets, model selection, and preview before publish
End-to-end admin UX tuned for quick project launch and ongoing content updates

Approaches

SPA + Supabase client — RLS-aware reads/writes and role-based admin access
Marketplace catalog patterns — nested categories, product cards, and flexible content blocks
Configurable AI pipelines in admin — pick model, preview output, then commit to catalog
Admin-first setup flow — minimize time from empty project to publishable storefront

Live site

Gallery

confidential

Social Content Studio — CMS & Publishing

Live platform for creating, planning, and publishing social content. Users customize a brand profile; generation and planning adapt to that profile. Supports one-off posts, week- or month-long content stories, image and video assets, and outbound publishing through a social connection provider. Built around one interactive chat with tools and widgets — instead of a stack of separate generation screens — so create, plan, and publish share the same context.

2025 · Frontend · AI content workflows

ReactTypeScriptSupabaseVercel AI SDKOpenAIReplicateMCP

What I built

Content management and publishing — create posts, schedule flows, and push to connected social networks via a third-party provider
Profile-based customization — brand voice and settings drive generated copy, visuals, and content plans
Content calendar planning — thematic story arcs for a week or a month with generated post sequences
Image generation via Replicate — multiple models, industry-aware presets, and preview before publish
Video generation support for social-ready assets
Manual post composer — full user control over text, media, and publish targets
OneFlow interactive chat — OpenAI-powered assistant with tools, in-chat widgets, and click-to-choose helpers instead of typing everything
MCP-style tool & widget layer — precursor patterns later aligned with OpenAI widget/MCP approaches; portable enough to drive content creation from other chat surfaces
Natural-language publishing — e.g. “create a post on this topic” with the stack handling tools, generation, and draft assembly

Approaches

Vercel AI SDK for streaming chat, tool calling, and multi-step generation flows
Widget-driven UX inside chat — surface choices as interactive cards, not only free-form prompts
Profile context injected into every generation and planning step
Replicate as the image/video model gateway — swap models per use case
Provider-based social OAuth and publish pipeline — one integration, many networks

confidential

Error Monitoring & Uptime Platform

Side product built in about a month and run on personal projects for free monitoring. Two surfaces: a tracking layer for client sites and a Next.js admin to manage properties, incidents, and notifications. Shipped with uptime checks, multi-channel alerts, and an AI chat that inspects errors and suggests concrete fixes for the IDE. Owned ingest, alerts, and admin end to end.

2025 · Frontend · solo, one-month build

Next.jsTypeScriptSupabaseOpenAIVercel AI SDKTelegram API

What I built

Next.js admin dashboard — add sites, browse error reports, and manage monitoring settings
Client-side error capture package — ingest frontend and runtime errors into Supabase
Uptime monitoring — availability checks alongside error tracking in one place
Alert channels — Telegram and additional notification targets configurable from the UI
Report and channel management — update routing, thresholds, and delivery preferences per site
Interactive AI chat — search and explore incidents in natural language
Automated error analysis — AI parses stack traces and returns step-by-step fix instructions for the IDE
End-to-end loop tested on own projects — ingest, alert, triage, and resolve

Approaches

Next.js App Router for admin UI and API routes on the same stack
Supabase for auth, incident storage, and realtime-friendly reporting
Channel plugins chosen incrementally — Telegram first, extensible surface for more providers
AI triage pipeline — error context in, actionable remediation hints out

confidential

GitHub Repository Explorer — Code Map & Analysis

Web app for understanding how a codebase is built. Connect via GitHub OAuth or a personal token, pick a public or private repository, and get a full structural map with guided analysis. Designed for learners and reviewers who need to see how files, components, and dependencies relate — not just read raw source. Heavy parsing runs in a PM2 worker so clone, parse, and graph builds stay off the Next.js process.

2025 · Frontend · analysis engine & educational UX

Next.jsTypeScriptReact FlowGitHub APIPM2Python

What I built

Next.js app — repo onboarding, GitHub OAuth, token-based access, and repo picker for public or owned repositories
Background worker via PM2 ecosystem config — heavy parsing off the Next.js process to avoid long-lived connections and server load
VS Code–style explorer UI — sidebar file tree, in-panel viewing, and per-component analysis summaries
Import graph engine — worker parses JS/TS frameworks and Python projects using dedicated packages to resolve imports and module links
React Flow diagrams — project-wide, folder-level, and single-component views; select a node to trace what it imports and what depends on it
Analysis toolkit — problem search, error-pattern hints, and a security advisor over the parsed codebase
On-demand diagram generation — project map, component map, or folder scope when the user needs a visual overview
Educational UX — clear structure for newcomers learning how real projects are organized

Approaches

Split web and worker — Next.js for UI/API, PM2-managed worker for clone, parse, and graph builds
GitHub API + optional PAT — OAuth for “my repos”, token entry for ad-hoc private repos
AST and import-resolution pipelines per language — JavaScript/TypeScript ecosystems and Python
Interactive graph as the mental model — React Flow for explore-by-clicking instead of static docs

Connected series

Enterprise DNA

2022–2025 · 3 parts · Shipped with a backend architect — product-sized system, not an isolated frontend

livePart 1 of 3

Enterprise DNA — Learning Platform & Mentor

Production-facing training platform built with a partner since 2022 (support through 2025). Public Nuxt/Vue SSR site with course catalogs, sign-up flows, and SEO as a core product advantage — structured data, organic landing pages, and performance tuning that sustained strong free traffic over years. Later extended on a subdomain with early AI integrations.

2022–2025 · Vue/Nuxt · product surfaces with backend architect

Nuxt.jsVue.jsJavaScriptSCSSOpenAISEO

What I built

Nuxt.js SSR catalog — courses, categories, registrations, and training flows
SEO & structured data — schema markup, organic page strategy, and search-friendly course URLs
Performance and redesign cycles — multiple UI passes while keeping stability and load times
AI subdomain on the same Nuxt stack — prompt-style helpers for analytics and code questions
Threaded AI sessions — categorized problem threads, deep analysis, save/edit/share workflows
Interactive learning quests — topic-based paths with progress, checkpoints, and knowledge upgrades
Free public access model — organic growth without paid acquisition dependency

Approaches

SSR-first Nuxt for crawlable training content and fast first paint
Schema.org and on-page SEO baked into templates, not bolted on later
Subdomain isolation for experimental AI features without risking main catalog
Thread storage model — persistent AI conversations tied to user goals and categories

Live site

Gallery

What I built

Vue.js learner dashboard embedded in Laravel — catalogs, passes, resources, and showcases
Course player UX — structured review flow with complete activity tracking
Quizzes and assessments — knowledge checks integrated into course progress
Video.js integration — in-browser playback for lesson and course video
Podcast and blog content types — mixed media learning beyond video courses
Progress and completion state — per-user history across courses and materials

Approaches

Vue SPA islands inside Laravel monolith — shared API, no separate deploy for learners
Activity ledger pattern — every view, quiz attempt, and completion recorded for coaches
Reusable catalog components across courses, resources, and marketing showcases

What I built

QSR admin framework — hook-driven CRUD for fast resource screens across the product
End-to-end content management — categories, courses, assets, and publishing workflows
Marketing banner builder — designs, placements, timers, and live appearance on public sites
Team activity analytics — review what content staff changed and when
Large media upload — Uppy + Tus resumable uploads for course video
Transcode pipeline — backend conversion with admin visibility and manual manager controls
AI-generated quizzes from course material — supplemental assessment creation
SEO inspector — validate search setup as dynamic course pages ship
Single admin controlling public SSR catalog, learner dashboard content, and marketing output

Approaches

CRUD hooks over one Laravel API — consistent patterns for dozens of resource types
Resumable uploads + async transcode — managers upload once, track progress in admin
Marketing assets as first-class entities — schedule, target, and preview before go-live
SEO checks in the publishing loop — catch indexing issues before courses go public

confidential

Online Car Insurance — Multi-step Quote Flow

Live car insurance platform in active use since 2020, with several refactor cycles over the years. Vue.js SPA on a partner-built API. The core challenge is a large wizard where every step’s rules depend on earlier answers — vehicle data, driver details, selected coverage, and add-ons all chain together before payment and policy delivery.

2020–present · Vue.js developer · long-term support & refactors

Vue.jsVeeValidateWebSocketsStripeJavaScriptSCSS

What I built

Vue.js SPA — multi-step quote wizard with deeply linked user and vehicle data
VeeValidate (ValidationProvider) — conditional validation schemas that change based on prior step selections
WebSocket pipeline — quote requests, option lists, and final policy payloads without long-lived HTTP polling
Quote flow — collect data, fetch insurance options, adjust parameters and upgrades, re-price in place
Third-party verification steps — identity and data checks through connected providers mid-flow
Stripe checkout — customized on-site payment form aligned with product design
Policy delivery via sockets — final insurance package with documents when underwriting completes
Portal extras — mini-store for add-on services and separate payment forms for other product lines
Ongoing maintenance — production stability across multiple renovation passes since launch

Approaches

Validation as a graph — field rules driven by vehicle type, coverage picks, and user path through the wizard
Sockets for insurance latency — async underwriting and document generation off the critical UI thread
Step state machine — each screen knows what came before and what unlocks next
Stripe Elements styled to match brand — payment feels native to the SPA, not a redirect bolt-on

confidential

Corporate Operations CRM — Org & Equipment

Joined as an extra development team on an enterprise CRM. My scope was a management layer for offices and departments: nested company structure, people, assigned gear, and upkeep deadlines. Built for organizations that need to track staff who drive, service equipment, and rotate uniforms or kit on schedule. MVP shipped as a full vertical slice for one company profile; the product later stopped for funding reasons, not engineering quality.

2021 · Vue.js developer · additional product team

Vue.jsLaravelJavaScriptBootstrapWebpack

What I built

Vue.js admin module — company → office → department hierarchy with deep nested trees
Staff management — attach employees to units, roles, and reporting lines
Equipment assignment — link assets to people or locations, track who holds what
Maintenance reminders — scheduled alerts for service, replacement, and compliance dates
Department templates from project categories — spin up consistent org units per business line
Large data surfaces — performant lists and tree UIs over big organizational datasets
End-to-end company lifecycle UI — from creating an organization to ongoing staff and asset oversight

Approaches

Tree-first data model in the UI — expand/collapse org paths without losing context
Reminder engine tied to equipment records — proactive ops, not reactive spreadsheets
Component trees mirroring org depth — reusable nodes for department, team, and asset views
MVP scope discipline — full vertical slice for one company profile before wider rollout

What I built

Vue.js frontend from fixed designs — pixel-faithful layouts with Bootstrap
Regional job search — filter and browse vacancies by geography
Company onboarding — registration flows and announcement publishing for employers
Subscription payments — paid plans for listing and visibility
Operator monitoring — overview of activity and listings health
Feedback handling — intake and processing for user reports and messages
Full delivery — design to working product on a minimal stack

Approaches

Design-led build — implement screens as specified, no in-house product design
Region as primary navigation axis — search and SEO-friendly locality splits
Bootstrap for speed — grids, forms, and components without a custom UI kit
Thin client — business rules and billing on the backend, Vue for presentation and flows

confidential

Course Calculator & Order Portal

One of the first production projects where I grew into frontend development. A straightforward monolith: Laravel API with a Vue.js SPA on top. Users calculated course options (crypto-focused catalog), filled detailed registration forms, and submitted orders for the support team to process. No realtime layer — request/response flows and third-party API lookups were enough. Simple stack, real orders, in production 2020–2022.

2020–2022 · Vue.js developer · early frontend work

Vue.jsLaravelJavaScriptREST APIsSCSS

What I built

Vue.js SPA inside a Laravel monolith — course calculator UI and order submission flows
Dynamic pricing and catalog data — fetched from third-party APIs and reflected in the calculator
Multi-variant registration forms — long questionnaires for certain course directions
Order creation pipeline — user submits online, support picks up and processes offline
Form validation and step-by-step data entry for complex enrollment paths
Kept the product running — simple stack, but real orders and real users

Approaches

Monolith + SPA — Vue for interactivity, Laravel for persistence and integrations
Calculator-driven UX — change inputs, see updated totals before committing to an order
Direction-specific forms — show extra fields only when the selected track requires them
API-as-source-of-truth — external services supply rates and availability, UI stays thin

What I built

Full Vue.js admin rewrite — replace the unfinished panel with a working operations UI
CRUD for salon data — create, edit, and list clients, services, and staff records
Booking module — calendar-based appointments with basic scheduling rules
Notification hooks — SMS or email accommodation for confirmations and reminders
Coordination with existing client SPA — align API usage where the public site needed updates
Production release — stabilize, finish missing pieces, and hand off a live CRM

Approaches

Vue SPA admin on Laravel API — keep backend thin, put interaction logic in the panel
Webpack build pipeline — standard asset bundling for the admin bundle
Bootstrap for speed — layout and components without a custom design system
Incremental takeover — audit what existed, rewrite admin paths, ship without blocking the client app

Many of these systems are still in production under NDA or as a collaborator — the write-ups focus on engineering scope, not product marketing.