WhereCash — Liquid Glassmorphic Mobile Wealth Ledger
A high-performance, offline-first personal finance ledger featuring liquid spring physics, multi-store state synchronization, and fixed-point money math.
Engineered Stack & Libraries
Clean & Headless Architecture Pattern
Core Product Capabilities
Challenges & High-Impact Optimizations
React Native screens took up to 3 seconds to mount and compile styles during boot, creating a jarring blank flash after the native splash screen completed.
Engineered an absolute Splash overlay pre-rendering index routes while JS initialized. Once fonts and assets signaled appReady, a gapless Reanimated opacity fade transitioned the user onto the live screen.
Standard JavaScript floats (e.g., 0.1 + 0.2 = 0.30000000000000004) produced cumulative balance drift when calculating thousands of ledger records.
Implemented a cents-based fixed-point integer math system. All database writes, balances, and analytics compute as raw integers and format only at the visual boundary.
Navigating between tabs containing heavy SVG charts and extensive transaction feeds dropped frame rates below 35 FPS on mid-range devices.
Deferred intensive SVG chart mounts using delayed frame worklets, allowing transition spring animations to complete first at a locked 60 FPS before rendering heavy visual nodes.
Verified Source Code Showcase
// Fixed-Point Integer Precision Money Math Engine
export function toCents(dollars: number): number {
return Math.round(dollars * 100);
}
export function fromCents(cents: number): number {
return cents / 100;
}
export function computeLedgerBalance(transactions: Array<{ amountCents: number; type: "INCOME" | "EXPENSE" }>): number {
return transactions.reduce((acc, t) => {
return t.type === "INCOME" ? acc + t.amountCents : acc - t.amountCents;
}, 0);
}
export function formatCurrency(cents: number, symbol: string = "$"): string {
const dollars = fromCents(cents);
return `${symbol}${dollars.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}