Afzan Khan
afzanlearns
Back to Projects
ReactViteTailwind CSSIndexedDBPWA

Flux

About the Project

A personal finance tracker built on a simple premise: your money data doesn't need a bank account linked, a server, or an internet connection to be useful. Flux runs entirely offline, storing everything locally, and installs as a native-feeling app on phone or desktop.

Overview

Most finance-tracking apps assume you want bank sync, cloud accounts, and a subscription. Flux strips that away — no linking, no login, no third-party access to your financial data at all. Every transaction, subscription, and debt entry lives locally in the browser via IndexedDB, and the whole app is wrapped as a Progressive Web App so it installs and behaves like a native app while still being a single static frontend under the hood. The tradeoff is deliberate: less automation, in exchange for full data ownership and zero dependency on connectivity or a backend.

Core Features

  • Dashboard — a single "True Balance" view combining cash, online, and owed amounts into one net-worth figure, alongside quick income/expense entry
  • Transactions — log and categorize every inflow and outflow, forming the ledger that every other view derives from
  • Subscriptions — tracks recurring payments and flags likely duplicates, so forgotten or overlapping subscriptions don't quietly drain money
  • Debts — monitors active loans and surfaces milestones as they're paid down, turning debt tracking into something with visible progress rather than just a number
  • Insights — spending charts, category breakdowns, and monthly snapshots for pattern-spotting over time, built with Recharts
  • Offline-First Architecture — every read and write goes through IndexedDB (via the idb wrapper) rather than a network call, so the app is fully functional with no internet at all
  • Installable PWA — Workbox-powered service worker enables install-to-home-screen on mobile and desktop, giving it app-like launch behavior and offline caching of the app shell itself

Design Philosophy

Flux treats "offline-first" as a first-class constraint rather than a fallback mode. There's no server round-trip anywhere in the core flow — every dashboard number, chart, and balance is computed client-side from what's stored in IndexedDB. That keeps the app fast (no network latency on any interaction), private by default (data never leaves the device unless explicitly exported), and usable in places or moments where connectivity isn't guaranteed — which is arguably where a lot of real day-to-day expense-logging actually happens.

Tech Stack

React · Vite · Tailwind CSS v4 · Recharts · Lucide Icons · IndexedDB (idb) · Workbox (PWA)

Running Locally

npm install
npm run dev

Production Build

npm run build
npx vite preview

Installing as a PWA: build the app, open the preview URL in Chrome or Edge on your phone, and use the install banner or Add to Home Screen from the browser menu.