Skip to content
Thnkers

Fabrico · E-commerce

A PDF pattern shop, rebuilt as a native mobile store

Fabrico sells sewing patterns you download and print at home. We turned its WooCommerce storefront into a fast, branded app — browsing, sizing, checkout, account and content in one place — wrapped in a soft "liquid glass" look, shipping to iOS, Android and Web from a single codebase. The interesting work wasn't the screens; it was making a third-party WordPress store behave like a first-class mobile backend.

3
platforms, one codebase
18
screens & routes
~3 wk
core rebuild

Inside the product

Fabrico app — merchandised home
Fabrico app — catalogue browsing
Fabrico app — product & size picker
Fabrico app — seamstress quiz
Fabrico app — learning hub
Fabrico app — checkout

The gap

Fabrico's WooCommerce web store capped what mobile-first customers would do, and an earlier FlutterFlow build never felt right. Rebuilding separately for each platform was off the table — and the store had to behave natively: a cart that truly syncs, variable products with live pricing, and a payment that actually settles.

The insight

One codebase could serve every platform. The win wasn't three apps — it was a single build shipping natively to iOS, Android and Web, with a thin service layer making WooCommerce feel first-class on mobile.

A product tour

01

Merchandised home & browsing

The home screen leads with a story, not a grid — a hero, curated bestsellers and bundles. Browsing is a proper catalogue with search, category chips, wishlist hearts and a live product grid pulled straight from the store.

02

Buy the right size, not just the pattern

Patterns are variable products — sold as individual sizes or an "all sizes" bundle at a different price. The detail page builds a multi-attribute picker (size, height) from the live variations and updates the price as you choose, with a sticky glass add-to-cart bar.

03

Personal from the first tap

A built-in "what kind of seamstress are you?" quiz turns a cold catalogue into a guided experience — ten questions, six personality types, tailored recommendations and a 20% coupon saved to the account.

04

The whole brand, in-app

Not just a shop: a native Learning Hub renders the blog, and the profile hub links size charts, printing guides and FAQ, plus orders and a real downloads library. A project tracker generates a sewing checklist per make with on-device progress.

05

Checkout that works end to end

Rather than a fake success screen, checkout drives a real Stripe payment through WooCommerce's hosted order-pay page and polls the order until it settles — because the payment page blocks being embedded in an iframe. Free and 100%-coupon orders are set paid instantly.

Under the hood

A cart that actually syncs

CoCart bridged guest and account carts by token, adding the correct variation id — after tracking down a silent string-vs-number param failure. TanStack Query owns all server state; Zustand holds only auth and cart.

Three targets, one source

A signed Android release off a clean ASCII path, iOS via EAS/TestFlight, and a web build — fixing import.meta, a WebView web shim and non-ASCII header handling along the way. All on top of the earlier FlutterFlow → React Native port.

Stack & channels

React Native · Expo SDK 54 · React 19TypeScript · Expo RouterTanStack Query v5 · Zustand (persisted)WooCommerce REST · CoCart · JWTStripe checkout · Reanimated · expo-blur

The outcome

A real e-commerce product — live products, real payments, persistent accounts and a bespoke design system — designed, engineered and shipped to three platforms from a single source.

Start a project

Tell us what's missing.

One form, a real reply within 24 hours. Or book a call directly.

Other ways to reach us

  • Emailhello@thnkers.com
  • LinkedIn@thnkers
  • Book a callcalendly.com/thnkers