Design a Budgeting App – Frontend System Design

We’ll walk through the frontend system design for a personal budgeting app like YNAB: a web app where a household tracks every transaction, assigns money to categories each month, and sees what is left to spend. You’ll see why the browser’s IndexedDB is the source of truth instead of the server, why money is never a float, how the envelope math stays instant with ten years of history, and how two partners editing the same transaction on two offline phones end up with the same numbers.

This question looks like CRUD. It isn’t. The interviewer is waiting to see whether you notice three traps: floating-point money, totals that are recomputed from all history on every keystroke, and a sync story that silently loses someone’s edit to a dollar amount.

Problem Statement

Design the frontend for a personal budgeting web app like YNAB or Mint.

Requirements:

• Accounts (checking, savings, credit cards, cash) with a transaction register
• Envelope budgeting: assign money to categories each month and see what is available
• Import transactions from... premium content.