Building CoTally — A Privacy-First Family Expense Tracker PWA with Offline Sync & Multi-Currency

Most expense-splitting and budgeting apps today have become bloated, locked behind subscription paywalls, or require constant internet connectivity. More importantly, existing tools rarely balance shared household spending with personal financial privacy.

To solve this, I built CoTally — a modern Progressive Web App (PWA) designed for families and households to track shared budgets, balance debts, and auto-convert currencies in real time, even without an internet connection.

Here is a breakdown of the architecture, key technical challenges, and how I built it using React, Vite, TypeScript, and Supabase.

🛠️ The Tech Stack

• Frontend: React 18, Vite, TypeScript
• Styling & Components: Tailwind CSS, shadcn/ui (Radix UI primitives), Lucide Icons
• Animations & Charts: Framer Motion, Recharts
• Backend & Database: Supabase (PostgreSQL with Row-Level Security, Supabase Auth)
• Data Fetching & Caching: TanStack React Query
• PWA & Offline: VitePWA (Workbox Service Worker) + LocalStorage event queue

💡 Key Architectural Features

1. Privacy-First Household Accounting

In typical household budgeting apps, either everything is shared or everything is private. CoTally introduces a hybrid privacy model:

• Shared Household Spend: Groceries, utilities, and dining out are shared with real-time totals and budget limits visible to all family members.
• Private Financial Privacy: Personal spending, private debts, and individual savings goals remain completely hidden from other household members using Supabase Row-Level Security (RLS).

2. Live Multi-Currency Normalization

Living in an international environment means family members frequently spend across different currencies (e.g., AED, INR, USD, EUR, GBP, SAR).

• Built a client-side exchange rate layer using open.er-api.com with in-memory caching to avoid redundant API polling.
• When expenses are recorded in any currency, CoTally auto-calculates an amount_base in the household's chosen base currency.
• If a household changes its base currency (e.g. from AED to GBP), an automated migration converts all existing past records and recalculates budget progress bars in real time.

3. True Offline-First Logging & Auto-Sync

Financial logging needs to happen at the exact moment of purchase, regardless of cell reception or airplane mode.

• Offline Caching: Static assets are precached using Workbox, while recent transactions and category data are cached locally. The app shell opens in 0ms offline with zero loading spinners.
• Optimistic Offline Queue: When an expense is recorded offline, it is instantly assigned a local ID, queued in localStorage, and prepended to the live transaction feed with a "Waiting to sync" badge.
• Background Sync: An event-driven useOfflineSync hook listens for browser reconnection events, sequentially flushing queued expenses to Supabase and replacing local records with permanent database entries seamlessly.

4. 2-Second Hardware Quick-Add

To make expense tracking effortless, I set up a dedicated Supabase Edge Function (quick-add) paired with an iOS Apple Shortcut and Android shortcut:

• Users can simply Double-Tap the back of their iPhone (Back Tap) or double-press their power button.
• The shortcut prompts for amount, category, and note, and sends a lightweight payload to the server.
• The backend automatically resolves categories using a contextual dictionary (e.g., Stationary ➔ Education, Shein ➔ Shopping, Karak ➔ Dining) and saves the entry in under 2 seconds.

🚀 Check It Out

CoTally is live and free to use:

👉 Live Web App: https://cotally.vercel.app

I'd love to hear your thoughts and feedback on the architecture, offline handling, and multi-currency approach!