Technical Case Study7 min read

Building FlipCalc: An Offline-First Margin Engine for Retail Resellers

How direct field friction in concrete warehouse deadzones led me to build a 100% client-side calculation PWA with zero backend latency.

Daniel Giovinazzo
Daniel Giovinazzo
Full-Stack Software Engineer

The Field Reality: Concrete Deadzones & Sourcing Stress#

In August 2024, after being impacted by a corporate layoff at PowerSchool, I did what I have always done when faced with unexpected hardship: I went to work. I founded DDG Enterprises, an independent e-commerce sourcing business, while stepping up as a secondary caregiver for my family during my father’s illness.

Operating an e-commerce business quickly exposed me to severe operational friction. When you are sourcing inventory inside massive industrial liquidation warehouses and retail thrift outlets, cellular reception is practically zero. Thick concrete walls and metal shelving create complete deadzones.

Traditional margin calculators and marketplace apps rely on cloud backends. Standing in an aisle with other buyers around you, trying to calculate tiered platform commissions, payment processing fees, sales taxes, and dimensional shipping costs on a phone with one bar of signal is a recipe for expensive buying mistakes.

I built FlipCalc to eliminate that friction: an offline-first, mobile-friendly calculation engine that runs 100% in the browser with zero backend roundtrips.

Architectural Decision: Why I Abandoned the Database (ADR 0001)#

When planning FlipCalc, the initial instinct might have been to set up an Express API with PostgreSQL or DynamoDB to store user inputs and marketplace fee tables. But as an operator standing in a warehouse aisle, I realized a database was an anti-feature.

A remote database introduces network latency, requires authentication roundtrips, and fails completely when cellular service drops. In Architecture Decision Record (ADR 0001), I decided to make FlipCalc a 100% client-side application.

Marketplace fee matrices (eBay, Amazon FBA, Mercari, Poshmark), shipping estimation tables, and tax tiers are modeled as deterministic TypeScript functions compiled into the bundle. User session data is persisted locally via custom React hooks synced with browser localStorage and IndexedDB, utilizing the native Web Crypto API (`crypto.randomUUID()`) to generate unique item keys offline.

Target-Based Math & Profit Protection (ADR 0002)#

Most resale calculators force the user to guess a selling price first and then tell them what profit they might make. In the field, that approach backwards increases cognitive load.

Under ADR 0002, I shifted FlipCalc to a Target-Based Pricing Model with a flat-dollar profit protection threshold. The user inputs their purchase cost and their target profit margin. The engine instantly computes the exact minimum listing price needed to hit that goal after factoring in all platform commissions, shipping costs, and transaction fees.

To ensure low-cost items are worth the physical effort of packing and shipping, the engine dynamically enforces a minimum flat-dollar profit floor, preventing users from wasting hours on low-yield inventory.

useMarginMath.ts
typescript
export interface MarginCalculationInput {
  buyCost: number;
  targetMarginPercent: number;
  minProfitFloor: number;
  estimatedShipping: number;
  marketplaceFeeRate: number; // e.g. 0.1325 for eBay
  paymentProcessingFlat: number; // e.g. 0.40
}

export function calculateTargetListingPrice(input: MarginCalculationInput): {
  requiredSalePrice: number;
  netProfit: number;
  isFloorApplied: boolean;
} {
  const { buyCost, targetMarginPercent, minProfitFloor, estimatedShipping, marketplaceFeeRate, paymentProcessingFlat } = input;
  
  // Calculate raw target profit based on percentage
  const desiredPercentProfit = buyCost * (targetMarginPercent / 100);
  const effectiveProfitGoal = Math.max(desiredPercentProfit, minProfitFloor);
  const isFloorApplied = minProfitFloor > desiredPercentProfit;

  // Solve for listing price: Price = (BuyCost + Shipping + ProfitGoal + FlatFee) / (1 - FeeRate)
  const requiredSalePrice = (buyCost + estimatedShipping + effectiveProfitGoal + paymentProcessingFlat) / (1 - marketplaceFeeRate);
  const netProfit = effectiveProfitGoal;

  return {
    requiredSalePrice: Math.ceil(requiredSalePrice * 100) / 100,
    netProfit: Math.round(netProfit * 100) / 100,
    isFloorApplied
  };
}

PWA Offline Caching & 100/100 Lighthouse Performance#

To guarantee the application launches instantly even if a user clears their browser tab while deep in a warehouse basement, I configured FlipCalc as an installable Progressive Web App (PWA) using Service Workers.

The Service Worker permanently caches all production HTML, CSS, fonts, and JavaScript chunks. When added to an iOS or Android home screen, it opens in standalone mode without browser chrome, launching in under 200ms with zero network requests.

By leveraging Tailwind CSS, atomic components, and keeping external dependencies strictly trimmed, FlipCalc achieved a perfect 100/100 score across all Google Lighthouse audits (Performance, Accessibility, Best Practices, and SEO).

Reflections: Building as an Operator and an Engineer#

Building FlipCalc taught me that the best software is born from real, lived friction. My years managing restaurant rushes, knocking on doors in direct sales, and sourcing products in warehouses taught me that users don’t care about technology for its own sake—they care about speed, clarity, and reliability.

Whether collaborating on enterprise micro-frontends at PowerSchool or building standalone offline utilities for warehouse operators, my goal is always the same: write clean, maintainable code that removes real-world friction and makes people’s work easier.

Topics:ReactTypeScriptClient-Side EngineOffline-FirstPerformance OptimizationPWA
Let's Build Together

Have an engineering challenge or role in mind?

I'm open to full-stack software engineering and AI engineering opportunities. Reach out to discuss technical architecture, system design, or team collaboration.