Muhammad Rafi Arsya
All Projects
Completed · 2026
RafiFinance
A complete personal finance tracker built as a single HTML file — no server, no database, no framework. Works offline as a PWA.
Finance PWA Single-File Vanilla JS localStorage
Type
Personal Tool
Year
2026
Status
Live
Deployed
finance.rafiarsya.com
File size
1 HTML file
Overview

RafiFinance v4 is a personal finance tracker I built because I couldn't find an existing app that worked the way I think about money. Most apps are too complex, require an account, or send your data to a server.

So I built my own — with a deliberate constraint: one HTML file. No npm. No build step. No server. Open it in a browser and it just works. Your data stays on your device in localStorage, exportable as a single JSON file at any time.

The single-file constraint forced better code. When you can't hide complexity behind folder structures, you have to actually understand what you're building.

Deployed on Cloudflare Pages at finance.rafiarsya.com — free hosting, global CDN, automatic HTTPS, zero configuration.

Screenshots
Dashboard
Dashboard
Transactions
Transaksi
Budget
Budget
Goals
Goals
Reminder
Reminder
Analysis
Analisis
Settings
Settings

Tap screenshot to zoom

Features
Transactions
Log income and expenses with category, date, and notes. Filter and search across all history.
Budget Tracking
Set monthly budgets per category with visual progress bars and over-budget alerts.
Saving Goals
Set a target and deadline. Auto-calculates required monthly savings to hit the goal on time.
Recurring Reminders
Set browser notifications for bills and subscriptions with configurable frequency.
6-Month Analysis
Visual income vs expense trends across the last 6 months with spending breakdown by category.
Financial Health Score
A real-time 0–100 score based on savings rate, budget adherence, and goal progress.
Export / Import
Full data export as JSON. Import on any device and all history, budgets, and goals are restored instantly.
Single-File Architecture

The entire app — HTML structure, 800+ lines of CSS, and 1800+ lines of vanilla JavaScript — lives in one file. State is managed with a single global object persisted to localStorage under the key rfv4.

The PWA manifest is embedded inline as a data: URL. The service worker is generated from a Blob URL at runtime — no external sw.js file needed. Everything is self-contained.

78
Financial Health Score
Savings Rate+31
Budget Adherence+28
Goal Progress+19
Tech Stack
Vanilla JS CSS Custom Props PWA localStorage Lucide Icons Inter Font JetBrains Mono Cloudflare Pages
Links
Live App
Download APK
Android · Signed · v4.0
 Read Blog Post GitHub