Case StudyE-commerceOperations

Case Study: How a DIY Brand Uses Mobile to Scale Production and Distribution

rreactnative

2026-02-03

9 min read

How Liber & Co. used mobile apps, analytics, and UX to scale from stove-top batches to 1,500-gallon tanks and global sales.

How a DIY Brand Used Mobile to Scale Production and Distribution — a React Native-focused Case Study

Hook: If your app team is struggling with brittle inventory sync, long fulfillment cycles, and no clear data path from mobile orders to factory floor operations, this case study is for you. Learn how Liber & Co. turned a hands-on, DIY production model into a global supply chain by focusing on mobile-first operations, thoughtful UX, and a tight analytics feedback loop.

Why mobile mattered for a production-first brand

Liber & Co. started in 2011 with a single pot on a stove and scaled to 1,500-gallon tanks and worldwide buyers by leaning into operations they could control: manufacturing, warehousing, ecommerce, and logistics. Crucially, the team treated React Native and mobile not just as a sales channel but as an operational interface that linked storefront orders to real production actions.

For product and engineering teams building for scale in 2026, that perspective remains essential: mobile is an operations surface, and it must be instrumented, resilient, and integrated into the supply chain.

Snapshot: the problem they solved

Orders from multiple channels caused fulfillment mismatches and oversells.
Limited visibility between ecommerce conversions and production batches.
Manual warehouse tasks created bottlenecks when volume spiked.
Their DTC and wholesale buyers demanded faster fulfillment and traceability.

What Liber & Co. prioritized

Real-time inventory fidelity across web, mobile, and POS.
Operational events — every order had a provenance from batch to pallet.
Fast mobile UX for both consumers and internal operators (warehouse staff).
Lean analytics that linked marketing channels to production decisions.

Quote from the founder

“We handle almost everything in-house: manufacturing, warehousing, marketing, ecommerce, wholesale, and even international sales.” — Chris Harrison, Liber & Co.

Product strategy: mobile as a single source of truth

Rather than building a separate operations app later, Liber & Co. designed mobile flows to be authoritative for order placement, batch selection, returns, and fulfillment. This reduced reconciliation steps and accelerated the time from checkout to production scheduling.

Key decisions:

Single event taxonomy: both consumer and warehouse apps emit the same events (order.created, order.picked, batch.assigned).
Optimistic UX for ordering: immediate confirmation in the UI with background reconciliation to avoid blocking high-conversion flows.
Worker-mode mobile: an internal app UI for pick/pack that shows batch-lot numbers and shelf locations.

Recommended architecture (practical blueprint)

Below is a compact architecture that reflects what worked for Liber & Co. and is realistic for React Native teams in 2026.

React Native app(s) (public storefront + worker app) — built with modern RN runtime (Fabric + TurboModules matured by RN 0.72+)
Edge CDN + GraphQL gateway — low-latency reads, API layer for mobile
Event pipeline (RudderStack/Snowplow/Raspberry events) into a streaming layer (Kafka / serverless event bus)
Warehouse OMS (off-the-shelf or custom) integrated via message bus
ERP and shipping carriers linked with webhooks and batch syncs
BI lakehouse (Delta/Parquet) for analytics and ML models that predict reorder cycles

Why GraphQL + events?

GraphQL covers low-latency data needs for the UI (catalog, product details, availability), while events create a reliable audit trail from mobile actions to physical batches. This dual approach avoids the stale inventory problem that plagues many ecommerce stacks.

React Native engineering patterns and code examples

Below are two practical snippets you can adopt: an offline-first order queue and an analytics event schema.

1) Offline-first order queue (React Native)

Use NetInfo + AsyncStorage (or MMKV) to queue orders when connectivity is poor, then flush on reconnect. This reduces failed orders and eliminates manual retries.

// Pseudo-code: Order queue flush
import NetInfo from '@react-native-community/netinfo';
import AsyncStorage from '@react-native-async-storage/async-storage';

const QUEUE_KEY = 'order:queue';

async function enqueueOrder(order) {
  const raw = await AsyncStorage.getItem(QUEUE_KEY) || '[]';
  const queue = JSON.parse(raw);
  queue.push({order, ts: Date.now()});
  await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
}

async function flushQueue() {
  const raw = await AsyncStorage.getItem(QUEUE_KEY) || '[]';
  const queue = JSON.parse(raw);
  if (!queue.length) return;

  for (const item of queue) {
    try {
      await fetch('https://api.example.com/graphql', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({query: `mutation submit($input: OrderInput!){ submitOrder(input:$input){id}}`, variables: {input: item.order}})
      });
      // success -> remove from queue
      queue.shift();
      await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
    } catch (err) {
      // stop on first failure to avoid rapid retries
      break;
    }
  }
}

NetInfo.addEventListener(state => {
  if (state.isConnected) flushQueue();
});

2) Minimal analytics event schema

Keep your events flat and consistent across apps (consumer + worker). Below is a sample event for when a mobile order triggers production.

{
  "event": "order.created",
  "user_id": "u_12345",
  "order_id": "o_98765",
  "revenue_cents": 2499,
  "items": [
    {"sku": "S-LEMON-01", "qty": 3, "batch_id": null}
  ],
  "channel": "mobile_app",
  "campaign": "email_jan2026",
  "device": {"os": "iOS", "app_version": "4.1.0"},
  "ts": "2026-01-14T15:12:00Z"
}

Note the presence of null batch_id — the backend assigns a production batch after the order is validated and schedules manufacturing based on combined demand.

Analytics: how they tied orders to production

Liber & Co. used a lean set of metrics to make production decisions:

Order-to-batch conversion: % of orders that matched existing stock vs. needed a new production run.
Days-of-inventory (DOI) per SKU at current demand velocity.
Channel latency: time from order placed (mobile) -> batch assigned -> picked -> shipped.
Cost per fulfillment: labor + packaging + shipping per order segment.

Example SQL for a quick cohort view (pseudo-SQL):

SELECT
  DATE_TRUNC('week', o.ts) AS week,
  SUM(CASE WHEN b.batch_id IS NOT NULL THEN 1 ELSE 0 END) AS matched_stock,
  COUNT(*) AS total_orders,
  (SUM(CASE WHEN b.batch_id IS NOT NULL THEN 1 ELSE 0 END)::float / COUNT(*)) AS matched_rate
FROM orders o
LEFT JOIN batches_assigned b ON o.order_id = b.order_id
WHERE o.ts >= '2025-12-01'
GROUP BY 1
ORDER BY 1;

UX decisions that improved conversion and operations

High-level UX choices that had quantifiable impact:

Transparent inventory labels: show whether an item is available now, available in X days (backorder), or ships with the next batch. This reduced cancellations.
Batch-level tracking in worker app: pickers scan items, and the app attaches lot numbers to the order.
Simplified ordering flow: one-tap reorder and subscription options for repeat buyers reduced friction for B2C and for bar/restaurants.
Contextual failure messaging: if an order could not be assigned to stock, the app offered alternatives (substitution, waitlist, refund) inline.

Operations integrations — the plumbing that scales

Mobile is only useful if it connects to the systems that produce, store, and ship physical goods. Liber & Co. focused on these integrations:

Event bridge to warehouse OMS: mobile-generated events route to the OMS for pick/pack jobs.
ERP sync for raw materials: demand signals from orders drove raw material purchase suggestions.
Carrier APIs and rate shopping: dynamic shipping options in the app preserved conversion while optimizing cost.

Outcomes — measurable wins

By treating mobile as an operational layer and instrumenting it end-to-end, Liber & Co. achieved results that scaled their DIY model into a robust business:

From stove-top batches to 1,500-gallon tanks and worldwide buyers — reduced oversells by a significant margin through real-time inventory and improved batching (internal KPI improvements were observable within 12 weeks).
Reduced fulfillment time for mobile-originated orders by 30–50% through worker app optimizations and pre-batching logic.
Better demand forecasting: a compact event model and lakehouse analytics reduced stockouts on flagship SKUs during peak season.

Advanced strategies and 2026 trends to adopt

Looking at late 2025 and early 2026 trends, here are tactics to future-proof your mobile operations stack:

Edge compute and server-side rendering for APIs: reduce latency for mobile apps and improve cacheability for catalog reads.
First-party data and privacy-forward analytics: cookieless measurement and deterministic event streams using authenticated mobile events.
On-device ML for predictions: infer user reorder patterns or optimal packing strategies on-device to reduce roundtrips and improve latency.
Local-first and conflict-free syncing: resilient local data stores (MMKV/SQLite with CRDTs) prevent app breakage in poor connectivity environments.
React Native performance wins: take advantage of modern runtimes (Hermes improvements, Fabric) and use native modules for scanning and printing to keep worker apps snappy.

Practical checklist: launch a mobile-first operations flow (30–90 days)

Define a single event taxonomy for both consumer and worker apps.
Implement offline queueing and optimistic UI for orders.
Build a GraphQL gateway for catalog and availability with a cheap edge cache layer.
Integrate a streaming events pipeline to the OMS and BI lakehouse.
Ship a worker-mode mobile UI with barcode scanning and batch assignment.
Run a 4-week pilot, monitor orders->batch latency, iterate on UX and batch logic.

Common pitfalls and how to avoid them

Over-instrumentation: too many events without an ownership model creates noise. Start small and standardize names.
Stale caches: caching inventory aggressively without invalidation leads to oversells. Use short TTLs and on-write invalidation.
Ignoring traceability: not assigning batch IDs at shipping makes recalls and quality control expensive. Add batch IDs early in the order lifecycle.

Final lessons from Liber & Co. for engineering teams

There’s a clear throughline from Liber & Co.’s culture to their product choices: a DIY mentality that emphasizes tight feedback loops, small experiments, and doing the operational work themselves. For engineering teams building mobile-first operations in 2026, the key takeaways are:

Design mobile as an operational interface, not just marketing.
Instrument everything that affects production and fulfillment. Make events the contract between apps and operations systems.
Prioritize UX for both customers and workers. Fast, clear, and resilient flows win at scale.

Actionable next steps

Start by mapping your critical order lifecycle events. Implement an offline queue for orders and pilot a worker-mode app for one SKU family. Measure order->batch latency and iterate until your matched-stock rate improves.

Call to action

If you’re a React Native team building a mobile operations surface, we’ve curated production-ready components, worker app templates, and event taxonomy blueprints optimized for ecommerce and operations. Visit reactnative.store to explore starter kits and enterprise integrations that accelerate this exact playbook — get a demo, download a template, or request a custom architecture review.

reactnative

Contributor

Senior editor and content strategist. Writing about technology, design, and the future of digital media. Follow along for deep dives into the industry's moving parts.