AI Product Extraction Pipeline — Case Study

The challenge.

Designers in the interior-design industry spend hours manually entering product data from supplier websites — SKUs, dimensions, fabric requirements, lead times, pricing tiers. Each vendor site formats this information differently, and a single project can involve dozens of products from hundreds of suppliers.

The existing workflow required opening each supplier URL, copying the relevant fields by hand, and entering them into a product form — an error-prone process that consumed an estimated 60% of design time on product specification alone.

The specific problems

No way to programmatically extract structured product data from long-tail furniture vendor sites
Cloudflare-protected and CAPTCHA-gated pages blocked basic scraping approaches
Price extraction unreliable across different vendor page layouts and currency formats
Canvas editor needed to support drag-drop product placement, hotspots, z-ordering, and grouping — all in the browser

What was built.

An end-to-end pipeline from URL injection to structured product card, paired with a production-grade Fabric.js canvas editor.

AI Product Extraction

Designed and implemented an end-to-end URL → structured-product pipeline combining Firecrawl (anti-bot-aware scraping, markdown mode, content cleaning) with OpenAI structured-output prompts. Delivered a Laravel API controller returning normalized JSON (name, SKU, trade price / MSRP, lead time, dimensions, COM / SQ FT fabric requirements, variants) with deterministic price-classification rules and graceful 403 handling for Cloudflare and CAPTCHA pages.

Front-End Integration

Wired the feature into the front-end via an RTK Query mutation consumed by the "Add Own Product" modal — designers populate a full product card from any retailer URL with one click. Added structured logging (URL + stack trace), field-level 422 validation, and iterated prompts to stabilize price and dimension extraction across long-tail vendor sites.

Canvas Editor Orchestration

Architected and shipped the Concept Board editor on top of Fabric.js v7: a 16-handler orchestration layer (Transaction/Undo, Workarea, Image, Crop, Alignment, Guideline, Drawing, Shortcut, Event) supporting product placement, hotspots, drag-drop / clipboard paste, z-ordering, grouping, and CORS-safe PNG export with taint detection.

Canvas Serialization

Designed canvas serialization (exportJSON / importJSON) with async image and SVG loading, type coercion, URL normalization, and 14+ custom Fabric object types (Arrow, Node, Port, Link, Gif, Video, Cube, etc.) registered through a Fabric v6+ class-creation compatibility shim.

What shipped.

<3s

average extraction time per URL — from paste to populated product card

100%

CORS-safe PNG export with taint detection — no broken exports

14+

custom Fabric.js object types registered through v6+ compatibility shim

16

handler modules in the orchestration layer — undo, alignment, guidelines, drawing, crop, event, shortcut, and more

Graceful

403 handling for Cloudflare and CAPTCHA pages — pipeline never hard-fails

Field-level

422 validation and structured logging with URL + stack trace on every extraction attempt

Firecrawl OpenAI Laravel 10 React 18 Redux Toolkit Fabric.js v7 RTK Query PHP TypeScript

The developer.

Evgeniy Bogoyavlenskiy

Senior Fullstack Developer

10+ years of commercial experience in backend development, system architecture, and building scalable applications. Specialises in PHP, Node.js, React, PostgreSQL, and message queue architectures. Experienced in technical leadership: task decomposition, estimation, database design, and core system architecture across high-load environments.

One click from any retailer URL to a structured product card.

The challenge.

What was built.

What shipped.

The developer.

Need a similar pipeline built for your product?