From Idea to App Store: Building a Cross-Platform Packing List App

• Soft deletes on all main entities (trips, items, categories) – preserving data integrity across sync
• Many-to-many relationships – Items can belong to multiple categories; trips reference reusable category templates
• Denormalized packing state – Each trip preserves item names and quantities at packing time, so editing a master item doesn’t retroactively alter a completed trip’s history
• Database abstraction layer – A unified interface allows transparent switching between LocalDatabase (free tier, no sync) and SyncedDatabase (premium, with PowerSync)

Each platform has its own payment flow, but all converge to a single user_subscriptions table:

Web (Stripe): Stripe Checkout Session → webhook → Edge Function updates subscription status

iOS (Apple IAP): StoreKit purchase → App sends receipt to Edge Function → Apple receipt verification → Subscription updated

Android (Google Play): Google Play purchase → App sends token to Edge Function → Google API verification → Subscription updated

All receipt validation happens server-side via Supabase Edge Functions. The client never self-validates a purchase, preventing tampering and ensuring a single source of truth.

Using Capacitor 8, the React web app runs inside a native WebView on iOS and Android, with access to native plugins for:

• Apple Sign-In and Google Sign-In
• In-App Purchases (via cordova-plugin-purchase bridging StoreKit / Google Play Billing Library)
• App review prompts at optimal moments
• Safe area handling for modern device notches and home indicators

95%+ code sharing across all three platforms. Platform-specific code is isolated to thin service wrappers (e.g., appleBillingService.ts, googlePlayBillingService.ts, stripeBillingService.ts).

Problem: Apple’s StoreKit 1 uses “unified receipts” (not the newer StoreKit 2 JWS tokens). The receipt data lives at an unexpected path, and sandbox vs. production receipt endpoints must be handled with a fallback strategy.

Solution: Built a validation Edge Function that attempts production validation first, then falls back to sandbox on status code 21007. Parses the unified receipt to extract original_transaction_id and expires_date for subscription tracking.

Takeaway: Apple IAP documentation is fragmented across StoreKit 1, StoreKit 2, and App Store Server API. Real-world implementation requires reading between the lines.

Problem: Free-tier users store data only in local SQLite. When they upgrade to premium, their existing local data must be uploaded to Supabase without losing anything, and without creating duplicates if the migration is interrupted.

Solution: Built a dedicated MigrationService with explicit state management (disabled, initializing, migrating, connecting, syncing). The service detects user changes, clears stale local data when switching accounts, and performs a one-time upload of local data to the cloud on first premium sync.

Problem: Supabase’s API gateway rejects valid ES256-signed JWTs from the auth service with a 401 error – a known edge case with certain token configurations.

Solution: Deployed Edge Functions with gateway JWT verification bypassed, then implemented token verification inside the function code itself. This provides the same security guarantee while avoiding the gateway bug.

Problem: Vite’s code-splitting produces dynamic import calls that break inside Capacitor’s iOS WebView when they use a Function constructor internally – blocked by WebView’s stricter CSP.

Solution: Configured the build to use standard import syntax and adjusted Vite’s chunking strategy to avoid the problematic construction pattern.