/projects · Project showcase
A private, installable money-in / money-out tracker built as an offline-first PWA. It runs entirely on-device with no backend or account — transactions persist locally and can be sealed behind a passcode with AES-256-GCM encryption at rest, so the data never leaves the phone and stays unreadable without the PIN. Installs to the home screen and works fully offline.
— Project highlights
A quick look at the parts of the product that best show the balance of design direction, frontend craft, commerce logic, and admin tooling.
— Feature gallery
The app centres on a clean, at-a-glance balance view paired with fast money-in / money-out entry and month-by-month breakdown.
S01
Balance readout with the running-balance trend line.
S02
Fast entry sheet for logging money in or out.
S03
Month view with in / out breakdown.
Optional passcode protection with at-rest encryption keeps sensitive financial data locked on-device and unreadable without the PIN.
S04
Passcode lock protecting on-device data.
S05
Enabling AES-GCM encryption at rest.
S07
Fully offline: no backend, no account.
Installed to the home screen as a standalone PWA, Ledger works fully offline with a native app feel.
S06
Installed to the home screen as a standalone PWA.
— How it came together
Built on Next.js App Router with TypeScript and React 19. Theming runs through a single token module applied via inline styles for deterministic rendering across environments, with a small framework-free component set.
The dark HUD-inspired interface pairs financial readouts with an animated running-balance trend line that respects reduced-motion preferences.
A local-first storage abstraction keeps all transactions on-device and acts as a clean swap-point for IndexedDB or a synced backend later. The Web Crypto API (PBKDF2 → AES-GCM) provides at-rest encryption behind an optional passcode, with an explicit no-recovery tradeoff surfaced in the UI.
Without a passcode, data persists in plaintext localStorage. With a passcode, the encrypted blob is unreadable in dev tools and requires the PIN on app launch.
A web app manifest, maskable icons, and a service worker (network-first for navigations, stale-while-revalidate for assets) make it installable and offline-capable, with standalone display mode and iOS safe-area insets for a native feel.
The app continues to function identically whether online or offline — there is no network fallback logic to break.
— Build notes
Challenge
Privacy without a backend.
Solution
Local-first storage plus a PIN-derived AES-GCM key means the data is private by construction and encrypted at rest — there's no server to breach and nothing leaves the device.
Challenge
Native feel and offline survival.
Solution
PWA manifest, service-worker caching, safe-area handling, and an install flow so it lives on the home screen and runs fully offline.
Challenge
Consistent rendering without colour drift.
Solution
Token-driven inline styling avoids build-step class stripping, paired with reduced-motion fallbacks for the trend-line and sheet animations.
This showcase highlights the privacy engineering, local-first architecture, and offline capability that make Ledger distinct. The live PWA lets you add entries and see how the app works with zero setup and zero account.