ShopOS

ShopOS

Frontend EngineerFull-time·Jan 2026 - Present

Frontend engineer at ShopOS, an AI-native commerce platform. Shipping merchant-facing surfaces across AI agents, workflow authoring, and chat for create, manage, market, and sell flows.

Key contributions
  • Migrated the Enterprise dashboard from a separate iframe-hosted repo into the main app.
  • Built Canvas Builder for visual workflow authoring and the content-rich tiptap chat input.
  • Shipped the media carousel for AI asset review and the Skills Library across two apps.

What I built

5 featured
  1. 01

    Enterprise dashboard in-app migration

    Apr 2026

    Brought the Enterprise UI out of a separate iframe-hosted repo and into the main app as native routes.

    Context

    The Enterprise dashboard was a standalone project served inside the main product through an iframe. That meant separate auth, separate theme, separate deploy cadence, and a cross-origin wall that blocked any deeper UX integration.

    Contributions
    • Migrated routes and components from the standalone repo into the main Next.js app.
    • Unified auth so Enterprise inherits the same session and workspace context as the rest of the product.
    • Re-platformed the UI on the shared design system, removing a parallel set of styles and primitives.
    • Wired enterprise-aware routing so admins land on the right shell without per-feature flags.
    Impact

    One auth layer, one design system, no cross-origin tax. Faster loads and a real path to deeper UX for enterprise clients.

    Next.jsReactTypeScriptTailwind CSSReact Query
  2. 02

    Canvas Builder for visual workflow authoring

    May 2026

    Drawer-based visual editor that lets non-engineers compose workflow templates without writing code.

    Context

    Workflow templates power large chunks of the product, but authoring them was an engineering-only task. Canvas Builder turns that into a visual surface.

    Contributions
    • Shipped v2: drawer-based form editor architecture, unified field schema across the form and the canvas.
    • Performance pass on the canvas runtime and a theme overhaul to bring it under the shared design system.
    • Reusable form-editor primitives now shared across the canvas and the admin console.
    Impact

    Non-engineers can author and iterate on workflow templates directly. Unified schema removed a class of drift between the canvas and the form editor.

    Next.jsReactTypeScriptTailwind CSSZustand
  3. 03

    Content-rich chat input

    May 2026

    Rebuilt the chat input on tiptap with slash commands, skill mentions, and structured serialization.

    Context

    The previous chat input was a fragile contenteditable that could not express anything richer than plain text. New flows (skills, structured commands, mentions) demanded a real editor.

    Contributions
    • Built a tiptap-based editor from the core extensions up: custom skill-tag node, slash-command extension, placeholder, serializer.
    • Wired it behind a feature flag, then enabled it by default after a stabilization pass.
    • Hardened keyboard handling (IME, accessibility), file validation, filename sanitization, and a toggle-race fix surfaced during code review.
    Impact

    Agent invocations and skill workflows are now first-class inside chat. Replaced a fragile editor with a structured one the team can extend.

    ReactTypeScriptTailwind CSS
  4. 04

    Media carousel for AI asset review

    Jan 2026

    Editing and reconciliation surface for AI-generated images, with a refine modal and hash-routed deep-linking.

    Context

    Merchants review and refine AI-generated assets every day. The surface had to support comments, refinements, and shareable deep links into a specific asset.

    Contributions
    • Built the media carousel: navigation, asset preview, refine modal, comment overlay.
    • Hash-routed deep-linking so a specific asset and modal state survives a reload or a shared link.
    • Wired the refine flow end-to-end with the modal lifecycle and the cleanup paths it required.
    Impact

    Core to the review-and-publish loop merchants run daily. Stable deep-linking made the surface easy to share and embed in other flows.

    ReactTypeScriptTailwind CSS
  5. 05

    Skills Library across two apps

    May 2026

    End-to-end Skills Library in both the main app and the admin console.

    Context

    Skills extend agent capability. The product needed an authenticated surface to upload, preview, manage, and toggle skill packs in both the merchant app and the admin tooling, sharing as much as possible.

    Contributions
    • Types, API client, React Query hooks with optimistic updates.
    • Dialogs for upload, preview (with markdown + syntax highlighting), overwrite confirmation, delete.
    • Settings page integration in the main app; standalone Skills Library page in the admin console.
    • Hardened error handling, mobile layout, and a feature-flagged rollout.
    Impact

    A new product capability surface delivered end-to-end across two apps in one pass. Users can extend agent capability through uploaded skill packs.

    Next.jsReactTypeScriptTailwind CSSReact Query