andrii.dev
Back to portfolio

03 · Projects

Work & case studies

A timeline of products I helped build and ship — newest first. Each entry covers the product context, what I implemented, and the stack behind it. Names and links appear only when the work can be shared publicly.

Across these projects, the recurring themes are complex dashboards, deep integrations, and communication-heavy interfaces — multistep forms with branching validation, content management, and admin architecture that fits a lot into a minimal UI. Owner-facing CMS tooling, user dashboards, and Vue micro-frontends inside larger backends show up again and again. More recently the focus moved toward realtime delivery and AI-assisted chat — streaming, tools, and customizable assistants — while the core stays the same: structured data, dependable UX, and admin panels that scale with the product.

live

HelpGenie — Mobile Client

Production mobile app for a real-time customer-support product. Owned the React Native client end to end: iOS and Android builds, platform-specific adaptation, store submission, and release management alongside feature delivery.

2026 · React Native developer · store release & ongoing support

React NativeExpoTypeScriptElevenLabsOpenAIVision CameraiOSAndroid

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

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.

2026 · React developer · public SPA & admin panel

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 multiple creation flows — from manual compose to a guided interactive chat.

2025 · React developer · AI content workflows & chat platform

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.

2025 · Next.js developer · solo build in one month

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.

2025 · Next.js developer · 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 · Long-term product with Laravel backend (partner)

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 developer · collaborator with backend partner

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
confidentialPart 2 of 3

Enterprise DNA — Learner Dashboard

User-facing dashboard inside the Laravel monolith (API-backed, Vue UI). Organized learning catalogs with courses, passes, resources, and showcases. Full visibility into what each learner completed or skipped — built for a training product with heavy content and assessment needs.

2022–2025 · Vue developer · Laravel-integrated dashboard

Vue.jsLaravelVideo.jsJavaScriptSCSS

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
confidentialPart 3 of 3

Enterprise DNA — Content Builder & Admin

Internal content builder and operations hub — a Vue SPA inside the Laravel monolith on a QSR-style admin framework with CRUD hooks. Managed everything from course taxonomy to on-site marketing, large media pipelines, and SEO validation for dynamically published courses.

2022–2025 · Vue developer · admin tooling & content ops

Vue.jsLaravelQSRUppyTusJavaScriptSCSSOpenAI

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 refactors 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; 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
confidential

Regional Job Board — Vacancies & Subscriptions

Greenfield build from a complete design handoff. Regional job marketplace: employers register and publish announcements, job seekers browse by area, and the operator side handles subscriptions, monitoring, and inbound feedback. Compact scope, still running in production — not disclosed publicly.

2021–2022 · Vue.js developer · full implementation from design

Vue.jsBootstrapJavaScript

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.

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
confidential

Beauty Salon CRM — Admin Panel

Existing project handed over near the finish line — minimal Laravel backend, public client built by another frontend developer. My scope was the admin: the shell existed but was incomplete. Rewrote the panel in Vue.js, extended CRUD and booking flows, and delivered a live deployment.

2020 · Vue.js developer · admin rewrite & production handoff

Vue.jsLaravelWebpackBootstrapJavaScript

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.