Overview
A visual drag-and-drop page builder for Shopify storefronts, built at Seal Commerce. Shop owners compose pages and edit metadata directly on a live canvas — no code — and the builder publishes the result into their Shopify store. I led the technical direction for a team of 10.
The problem
Merchants wanted to customise their storefront layouts without touching Liquid or hiring a developer. The stock Shopify theme editor was too limited for bespoke pages, while code changes were slow and risky. They needed a what-you-see-is-what-you-get editor that produced real, publishable Shopify pages.
Architecture
The editor is a React + Redux Toolkit canvas where blocks are dragged, dropped, and configured. The page tree lives in one Redux store — the single source of truth — so editing, serialization, and publishing all read from the same model. A Ruby on Rails backend persists the page and metadata definitions and talks to the Shopify APIs to sync the result into the merchant's store, with a companion dashboard for storefront management.
Shop owner
└── React + Redux Toolkit drag-drop canvas · page-tree state
↕ save / publish
Ruby on Rails backend pages · metadata · persistence
↕ Shopify APIs
Shopify storefront published pages
Key decisions & trade-offs
- Redux as the document model. The whole page tree lives in one predictable store, so drag-drop edits, serialization, and publishing all derive from a single source.
- Builder separate from the storefront. The editor is an admin tool; its output is standard Shopify pages, so merchants aren't locked into a proprietary runtime.
- Rails for persistence + Shopify sync. A conventional backend kept the data model and API integration straightforward, while the React canvas carried the interactive complexity.
Stack
ReactJS · Redux Toolkit · jQuery · Ruby on Rails · Shopify API
Role: Technical Leader, team of 10 · Seal Commerce, 2021.