How I Built a Private Finance Tool with Vanilla JS and Local Storage

#javascript #css #showdev #privacy

I work in e-commerce and SEO by day, so I spend a lot of time dealing with complex stacks, databases, and user tracking.

But when I wanted to build a simple tool to track my own subscription spending, I didn't want any of that. I didn't want a database. I didn't want user accounts. And I definitely didn't want to handle sensitive financial data on a server.

So I built FinTech Lite, a suite of financial tools that runs 100% in the browser. Here is how (and why) I built the Subscription Auditor using nothing but Vanilla JS, Tailwind, and the Local Storage API.

The Constraint: Privacy by Architecture

Most fintech apps follow the same pattern:

User signs up (email/password).
App requests bank credentials (Plaid/Yodlee).
App sucks data into a database.

I wanted the opposite. I wanted a "dumb" calculator that remembers you but doesn't know you.

The Stack

HTML5: Semantic structure.
Tailwind CSS: For rapid styling (loaded via CDN to keep it dead simple).
Vanilla JavaScript: No React, no Vue, no build step. Just an engine.js file.
Local Storage: The "database."

The "Database" Logic

Instead of a complex backend, I use a simple state object and persist it to localStorage.

Here is the core logic from my subscription-engine.js

const DB_KEY = 'fintechLiteAuditorData';

let state = {
    subscriptions: [], // { id, name, amount, frequency }
    currency: 'USD',
    customSymbol: ''
};

function saveState() {
    const data = {
        subscriptions: state.subscriptions,
        currency: state.currency,
        customSymbol: state.customSymbol
    };
    localStorage.setItem(DB_KEY, JSON.stringify(data));
}

function loadState() {
    const data = localStorage.getItem(DB_KEY);
    if (data) {
        try {
            const parsedData = JSON.parse(data);
            state.subscriptions = parsedData.subscriptions || [];
            // ... rest of state hydration
        } catch (e) { console.error("Error loading state"); }
    }
}

It’s incredibly simple. When a user adds a Netflix subscription, it pushes to the state array and immediately syncs to localStorage. When they refresh the page, loadState() runs on DOMContentLoaded, and their data is right where they left it.

The Challenge: "Data Safety"

The biggest downside to Local Storage is that it's ephemeral. If the user clears their cache, the data is gone.

To solve this without adding a server, I added two features:

JSON Export/Import: A simple "Backup" button that dumps the state object into a JSON file.

CSV Report: A function that loops through the state and generates a downloadable CSV for Excel users.

// Simple JSON Export
function handleExportJson() {
    const data = localStorage.getItem(DB_KEY);
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    // ... create anchor tag and click it
}

Why "Lite" Matters

We are so used to spinning up Next.js apps for everything that we forget how powerful the browser is on its own. By removing the server:

Hosting is free (static files).
GDPR compliance is automatic (I don't process the data).
Trust is built-in (Network tab shows zero API calls).

If you want to see it in action, check out the Subscription Auditor.

Let me know what you think. Does a "local-only" approach make you feel safer using financial tools, or do you miss the cloud sync?

DEV Community