Skip to main content

Personal Finance WebApp: Finance

Author

Rafiq Islam

Published

October 30, 2026

Finance

Your money, at a glance. Private by design.

A free, open-source personal finance app with no server.
Your data stays on your device and, if you choose, in a private folder in your own Google Drive.

Open the app

tests pages License: MIT PWA Sync Server Vanilla JS Last commit

About · Privacy policy · Terms · Report a problem


Finance overview on desktop: monthly spending, net worth, debt, assets, category donut, cash flow



Overview on iPhone  Earnings on iPhone  Credit cards on iPhone  Overview in dark mode

Screenshots use made-up demo data.

✨ Features

🧾 Spending Categories and subcategories, a monthly donut chart (tap for subcategories and 12-month history), a 12-month trend, search, filters, four sort orders, CSV import/export
💵 Earnings Paychecks, side income, interest and refunds; monthly totals, savings rate, year-to-date, a 12-month earned-vs-spent chart, filters, sorting and CSV
🎯 Budgets An overall monthly limit plus lines you name yourself (“Groceries”, “Netflix, YouTube”), matched automatically to your spending; pace marker; copy last month
💳 Credit cards Balances, limits, utilization, charges, payments and refunds, limit-change history, monthly summary, CSV
🚗 Loans Car, mortgage, student and personal loans; each payment is split into interest (estimated from balance × APR × days) and principal
🏠 Assets & net worth Car, home and savings with value history and equity against linked loans; stocks and ETFs with live prices; uninvested cash
🔄 Sync Optional: keeps your phone, tablet and computer in sync through your Google Drive
📴 Offline Opens instantly and works with no connection; changes sync when you’re back online
🌗 Light & dark Follows your device’s appearance

📲 Install

Finance is a web app you add to your home screen. It then opens full-screen like any other app. There’s no app store and nothing to download.

👉 Step-by-step guide with pictures: iPhone (including iOS 26’s new Safari), Android and computers.

📱 iPhone / iPad 🤖 Android
  1. Open rispace.github.io/my-finance in Safari
  2. Tap ⋯ next to the address bar, then Share (older iOS: tap Share directly)
  3. Tap Add to Home Screen, keep Open as Web App on, tap Add
  4. Open Finance from your home screen
  1. Open rispace.github.io/my-finance in Chrome
  2. Tap Install app (or ⋮ → Add to Home screen)
  3. Open Finance from your home screen
💻 Mac 🖥️ Windows / Linux
  • Safari: open the app, then File → Add to Dock
  • Chrome / Edge: click the install icon at the right of the address bar
  • Chrome / Edge: click the install icon in the address bar, or menu → Install Finance

Then, in the app:

  1. Tap Start with starter categories. You can rename or delete them any time.
  2. (Optional) Settings → Sign in with Google on each device to sync them.
  3. (Optional) Paste a free Finnhub key in Settings → Stock prices to get live stock prices.

Tip: use the installed app rather than a browser tab. Browsers may clear data from websites you haven’t visited in a while, but not from installed apps. Signing in to Google adds a second copy, and Settings → Full backup gives you a file you control.

🔒 Privacy & data

  • There is no Finance server. The app is static files on GitHub Pages, and nothing you enter is ever sent to the developer.
  • On your device: all data is stored in the browser’s private storage (IndexedDB).
  • In your Google Drive (optional): signing in grants one permission, drive.appdata. It lets the app keep its own file in a hidden app folder in your Drive. It can’t see any of your other files, and nobody else can read that folder.
  • No ads, analytics, trackers or cookies.
  • Delete anytime: Settings → Erase this device. In Google Drive, go to Settings → Manage apps → Finance → Delete hidden app data. To revoke access, use myaccount.google.com/permissions.

Full details are in the privacy policy. Finance’s use of information received from Google APIs adheres to the Google API Services User Data Policy, including the Limited Use requirements.

⚙️ How it works

 Your phone / laptop                                  Your Google Drive
┌──────────────────────────────────┐   1-hour pass    ┌────────────────────────┐
│  App ─▶ IndexedDB (all your data)│ ◀─────────────▶ │ hidden app folder/     │
│          ▲ instant, works offline│ merge by record │   finance-data.json    │
└──────────────────────────────────┘                 └────────────────────────┘
  • Every record has an id, a last-changed time and a deleted flag. A sync merges your device’s copy with the Drive copy record by record, and the newest edit wins.
  • Syncs run when the app opens, about 2 seconds after each change, when you return to the app, and when the connection comes back.
  • Google sign-in renews silently while you’re signed in to Google. You see Tap to sync only when it can’t.

🧑‍💻 For developers

No build step and no dependencies: the files in this repo are the app.

git clone https://github.com/rispace/my-finance.git && cd my-finance
python3 -m http.server 8080          # then open http://localhost:8080
node tests/merge.test.mjs && node tests/calc.test.mjs && node tests/earnings.test.mjs
Project structure
Path What it does
index.html, styles.css App shell and design system (light and dark)
about.html, privacy.html, terms.html Public homepage, privacy policy, terms
config.js Google OAuth client ID (public; there’s no secret)
js/app.js Start-up, hash routes, sync scheduling, status chip
js/calc.js All money math: dashboard, budgets, cards, loans, portfolio, earnings
js/store.js, js/db.js In-memory data and on-device storage (IndexedDB)
js/sync.js, js/merge.js, js/drive.js, js/auth.js Google Drive sync and sign-in
js/importer.js, js/csv.js, js/quotes.js Backup and CSV import/export, Finnhub prices
js/views/*.js Screens: overview, activity, earnings, budget, debt, assets, settings
sw.js, manifest.webmanifest Offline support and installability
tests/ Unit tests with a synthetic backup (no real data)
Releasing a change
  1. Make the change and test locally.
  2. Bump CACHE in sw.js (for example finance-drive-v4). Installed apps only pick up new files when it changes.
  3. Run git add -A && git commit -m "…" && git push. GitHub Pages redeploys in about a minute, and open apps switch to the new version automatically.
Run your own copy

Fork the repo and enable GitHub Pages (Settings → Pages → Deploy from branch → main / root). Then create your own Google OAuth client:

  1. In Google Cloud Console, create a project and enable the Google Drive API.
  2. Go to Google Auth Platform → Get started. Choose External and fill in the app name and emails.
  3. Under Data Access, add the scope https://www.googleapis.com/auth/drive.appdata.
  4. Under Clients → Create client → Web application, set the JavaScript origin to https://<you>.github.io and the redirect URI to https://<you>.github.io/<repo>/.
  5. Put the client ID in config.js.

docs/GOOGLE_SETUP.md covers publishing and brand verification.

Coming from the older Django “Personal Finance” app?

In the old app, go to Settings → Full backup → Download. In Finance, go to Settings → Import backup (JSON). Transactions, categories, payment methods, cards, card activity, limit history, loans, payments, stocks and cash all come across. Importing twice doesn’t create duplicates. Budgets and assets weren’t part of the old backup, so set those up once.

📄 License

MIT © 2026 Mohammad Rafiqul Islam

Figures in the app come from what you enter and from third-party price data. They aren’t financial advice.

Back to top

Citation

BibTeX citation:
@online{islam2026,
  author = {Islam, Rafiq},
  title = {Personal {Finance} {WebApp:} {Finance}},
  date = {2026-10-30},
  url = {https://rispace.github.io/portfolio/spd/finance/},
  langid = {en}
}
For attribution, please cite this work as:
Islam, Rafiq. 2026. “Personal Finance WebApp: Finance.” October 30. https://rispace.github.io/portfolio/spd/finance/.