Why Your Budget App Fails: Plan vs Reality Tracking with DonFlow

Source: Dev.to

I Had a Perfect Budget. It Lasted Three Days.

Last January, I sat down with a spreadsheet and planned every dollar of my monthly budget.
Groceries: $400. Dining out: $150. Subscriptions: $50. Transportation: $120. It felt good. Organized. Adult.

By January 4th, I’d already blown past my dining budget because of a friend’s birthday dinner I forgot about. By January 15th, I had no idea where I stood. The spreadsheet was abandoned. Sound familiar?

The Problem with Existing Budget Apps

I tried every budget app out there—Mint, YNAB, Toshl, you name it. They all do one thing well: record what already happened. They’re digital receipts. But none of them answered the question that actually matters:

“How far am I drifting from my plan, right now?”

Most apps treat your finances like a rear‑view mirror. You categorize transactions, see pie charts, maybe get a notification that you overspent. By then, the money’s already gone.

Introducing DonFlow

DonFlow is a forward‑looking tool that lets you:

1. Set a budget plan – define how much you intend to spend per category.
2. Import actual spending – from bank exports or manual entry.
3. See the drift – plan vs. reality, updated in real‑time.
4. Get warned early – before you blow past a category, not after.

It runs entirely in your browser—no server, no sign‑up, and no data leaves your machine. Everything is stored in IndexedDB, so your financial data stays exactly where it should: on your device.

How It Works

1. Create a budget plan – add categories and monthly amounts.
2. Import transactions – paste them, upload a CSV/Excel file, or enter manually.
3. Visual feedback – DonFlow overlays the data and shows:
   • 🟢 On track – spending within plan
   • 🟡 Drifting – approaching the limit
   • 🔴 Over budget – you’ve exceeded the plan

No waiting for end‑of‑month reports.

Handling Bank Exports

Banks export in wildly different formats—CSV, XLSX, OFX, you name it. DonFlow uses SheetJS to parse spreadsheets:

import * as XLSX from 'xlsx';

async function parseTransactionFile(file) {
  const buffer = await file.arrayBuffer();
  const workbook = XLSX.read(buffer, { type: 'array' });
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });

  // Auto-detect columns: date, description, amount
  const headers = rows[0].map(h => String(h).toLowerCase());
  const dateCol = headers.findIndex(h =>
    h.includes('date') || h.includes('날짜'));
  const amountCol = headers.findIndex(h =>
    h.includes('amount') || h.includes('금액'));

  return rows.slice(1).map(row => ({
    date: row[dateCol],
    amount: parseFloat(row[amountCol]),
    description: row[headers.findIndex(h =>
      h.includes('desc') || h.includes('memo') || h.includes('적요'))]
  }));
}

The parser auto‑detects common header patterns in both English and Korean, eliminating manual column mapping.

Storing Data Locally with IndexedDB

All plans and transactions live in IndexedDB—no cookies, no localStorage limits, no cloud:

const DB_NAME = 'donflow';
const DB_VERSION = 1;

function openDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains('transactions')) {
        db.createObjectStore('transactions', {
          keyPath: 'id', autoIncrement: true
        });
      }
      if (!db.objectStoreNames.contains('budgetPlans')) {
        db.createObjectStore('budgetPlans', {
          keyPath: 'id', autoIncrement: true
        });
      }
    };
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

Your data survives browser refreshes and works offline. Close the tab, come back next week—everything’s still there.

Why No Server?

• Privacy by architecture – Your financial data never touches a server I control. No database breach risk.
• Zero friction – No sign‑up form means you can start in literally 5 seconds.
• No recurring costs – I don’t need to charge a subscription to cover server bills. It’s free, forever.
• Works anywhere – Behind a corporate firewall? On a plane? Doesn’t matter. It’s just HTML, CSS, and JavaScript.

Try the Demo

The fastest way to see DonFlow in action is the “Try Demo Data” button. It loads a sample budget plan and three months of transactions so you can immediately see:

• How the plan vs. actual comparison works
• What drift warnings look like
• How categories break down over time

No fake email or credit card required—just click and explore.

👉 Try DonFlow (replace with actual demo URL)

Roadmap & Open‑Source

DonFlow is open source and actively developed. Upcoming features include:

• OFX/QFX import — direct bank statement support
• Multi‑currency — for those who earn in one currency and spend in another
• Budget templates — pre‑built plans for common scenarios (student, freelancer, family)
• Export to PDF — shareable monthly reports

The code is on GitHub:

🔗

Feel free to contribute, file issues, or just peek under the hood.

Call to Action

I built DonFlow to solve my own frustration with budget apps that only look backward. If you’ve felt the same pain, give it a spin.

What financial data format would you like supported? OFX? QIF? Direct API connections to specific banks? Drop a comment—your answer might shape the next release.

DonFlow is free, open source, and runs entirely in your browser. Your money, your data, your device.