The problem

Interior designers needed a way to collect products from different websites, curate options with clients and turn approved selections into orders. The workflow crossed product data, collaboration, payments and brand-specific fulfillment.

My role

As the first hire and sole engineer, I owned product discovery, architecture and full-stack delivery. The initial platform reached production in four months with 40+ REST endpoints and designer, administrator and client workflows.

Architecture / TradeLiv

From a product link to a brand purchase order

A complete procurement workflow, with extraction and payment processing as separate subsystems.

Request / data flowEvent / ingestion flowControl / fallbackSwipe to explore →
From a product link to a brand purchase orderA complete procurement workflow, with extraction and payment processing as separate subsystems. Designer workspace: Product sourcing + shortlists; React / TypeScript. Client portal: Token-based access; Review + approve selections. Administrator workspace: Platform operations; Order / fulfillment oversight. Browser rendering: Puppeteer; External product pages. AI extraction: Structured product fields; Variants / pricing / images. Extraction controls: 10-minute result cache · bounded concurrency; Explicit parse, network and product-page failures. Consolidated order: Approved selections; Order + line items. Stripe Checkout: Payment collection; Webhook processing. Brand purchase orders: Split order items by brand; Track brand-level fulfillment. Express API: 40+ REST endpoints; Application access boundaries. PostgreSQL + Prisma: Products · clients · orders; Shared application data. Scoped SSE streams: Live designer / client updates; In-process event distribution. 01 / PRODUCT EXPERIENCEDistinct designer, client and administrator workflows02 / PRODUCT EXTRACTIONTurn external product pages into structured records03 / PROCUREMENT & PAYMENTSApproved selections become orders and brand POs04 / APPLICATION SERVICESShared backend, persistence and live updatesSEPARATE EXPERIMENTParent/child retrieval prototype — outside the production workflowproduct URLapproved selectionpayment webhookDesigner workspaceProduct sourcing + shortlistsReact / TypeScriptClient portalToken-based accessReview + approve selectionsAdministrator workspacePlatform operationsOrder / fulfillment oversightBrowser renderingPuppeteerExternal product pagesAI extractionStructured product fieldsVariants / pricing / imagesExtraction controls10-minute result cache · bounded concurrencyExplicit parse, network and product-page failuresConsolidated orderApproved selectionsOrder + line itemsStripe CheckoutPayment collectionWebhook processingBrand purchase ordersSplit order items by brandTrack brand-level fulfillmentExpress API40+ REST endpointsApplication access boundariesPostgreSQL + PrismaProducts · clients · ordersShared application dataScoped SSE streamsLive designer / client updatesIn-process event distribution
Conceptual view of the production procurement workflow. The retrieval prototype is intentionally outside this production diagram.
Read the architecture as text

A complete procurement workflow, with extraction and payment processing as separate subsystems.

  • Designer workspace: Product sourcing + shortlists. React / TypeScript.
  • Client portal: Token-based access. Review + approve selections.
  • Administrator workspace: Platform operations. Order / fulfillment oversight.
  • Browser rendering: Puppeteer. External product pages.
  • AI extraction: Structured product fields. Variants / pricing / images.
  • Extraction controls: 10-minute result cache · bounded concurrency. Explicit parse, network and product-page failures.
  • Consolidated order: Approved selections. Order + line items.
  • Stripe Checkout: Payment collection. Webhook processing.
  • Brand purchase orders: Split order items by brand. Track brand-level fulfillment.
  • Express API: 40+ REST endpoints. Application access boundaries.
  • PostgreSQL + Prisma: Products · clients · orders. Shared application data.
  • Scoped SSE streams: Live designer / client updates. In-process event distribution.

Turn product URLs into usable data

The extraction pipeline combines browser-rendered pages with AI-assisted parsing to produce structured product details. Product variants, pricing, materials and images need a consistent representation before they can enter a shortlist.

Replacing per-site scrapers reduced new e-commerce integration time from two days to under 15 minutes. The implementation includes a ten-minute result cache, bounded concurrency and explicit extraction error categories. These controls reduce repeated work and make failures easier to diagnose.

Carry the decision through to an order

Designers curate room-by-room selections and share token-based client portals for review. Scoped server-sent event streams deliver updates without repeated page refreshes.

Approved selections flow into consolidated orders, Stripe Checkout and webhook processing. Brand-based splitting produces purchase-order records for fulfillment. React and TypeScript provide the interface; Express, PostgreSQL and Prisma support the backend and data model.

An earlier retrieval experiment

I also explored heading-based parent/child retrieval in a prototype, adapting the approach first implemented at Microsoft. It was an experiment in preserving document context, not part of the current production application.

The production story here centers on product extraction, client collaboration and procurement. The prototype is kept separate so its status and contribution are clear.

Outcomes

  • Delivered a B2B SaaS platform from zero to production in four months, spanning 40+ REST endpoints and designer, administrator and client workflows, by owning product discovery, architecture and full-stack implementation as the first hire and sole engineer.
  • Reduced new e-commerce integration time from two days to under 15 minutes by replacing per-site scrapers with a reusable AI-assisted product-extraction pipeline combining browser rendering and structured product parsing.
  • Enabled end-to-end procurement across product curation, client approval, checkout and brand-specific purchase orders by implementing the React/TypeScript frontend, Express APIs and PostgreSQL/Prisma data model.
  • Enabled clients to review designer shortlists and receive live updates without repeated page refreshes by implementing token-based client portals and scoped server-sent event streams.

Tradeoffs

An in-process SSE event bus is a straightforward fit for a single application instance, but does not itself provide cross-instance event distribution. Browser and AI extraction also need limits and explicit failures because external product pages differ in structure and availability.

Tools and technologies

TypeScriptReactViteNode.jsExpressPostgreSQLPrismaStripePuppeteerAI-assisted extractionSSE

Related work