# How to design a budget tracker app in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build a budget tracker app in Bubble with transaction entry, category-based budgets, monthly summaries, and visual spending charts. This tutorial covers creating the data model for income and expenses, building entry forms, calculating budget vs actual spending, and displaying results with Chart.js.

## Overview: Budget Tracker in Bubble

A budget tracker helps users monitor income and expenses against category-based budgets. This tutorial builds a personal finance app in Bubble with transaction logging, category management, monthly summaries, and visual charts — all using native Bubble features and the Chart.js plugin for data visualization.

## Before you start

- A Bubble account with user authentication set up
- The Chart.js plugin installed from the Plugins tab
- Basic understanding of Data Types, Workflows, and Repeating Groups

## Step-by-step guide

### 1. Create the data model for budgets and transactions

Go to Data tab and create these Data Types. 'Category' Option Set with options: Housing, Food, Transportation, Entertainment, Utilities, Healthcare, Savings, Other. Create 'Transaction': user (User), amount (number), type (Option Set: Income/Expense), category (Category option set), description (text), date (date). Create 'Budget': user (User), category (Category), monthly_limit (number), month (date — store the first day of each month).

**Expected result:** Data Types and Option Sets are created for tracking transactions and budgets.

### 2. Build the transaction entry form

Create a 'dashboard' page. Add a Group containing: a Dropdown for type (Income/Expense), a Dropdown for category (data source: All Categories), an Input for amount (number format), an Input for description (text), and a Date Picker defaulting to today. Add an 'Add Transaction' button with workflow: Create a new Transaction → user = Current User, amount = Input's value, type = Dropdown's value, category = Category Dropdown's value, description = Input's value, date = Date Picker's value. Clear all inputs after creation.

**Expected result:** Users can log income and expense transactions with category, amount, and date.

### 3. Display the transaction history

Below the entry form, add a Repeating Group with data source: Do a search for Transaction (constraint: user = Current User), sorted by date descending. In each cell, display the date, category, description, and amount. Color the amount green for Income and red for Expense using a conditional on the Text element. Add filter dropdowns above the list for category and month to narrow results.

**Expected result:** A scrollable, filterable list of all transactions with color-coded amounts.

### 4. Set up monthly budgets per category

Create a 'budgets' page. Add a Repeating Group listing all Categories. In each row, display the category name and an Input for the monthly budget amount. Pre-populate the input with any existing Budget record for this category and current month. Add a 'Save Budget' button per row with workflow: Create or make changes to Budget → user = Current User, category = Current cell's Category, monthly_limit = Input's value, month = Current date/time :rounded down to month.

**Expected result:** Users can set and update monthly spending limits for each category.

### 5. Calculate and display budget vs actual spending

On the dashboard, add a section showing each category's budget status. Use a Repeating Group of Categories. In each cell, display: category name, budget limit (search for Budget where category and month match), actual spending (search for Transaction where type = Expense, category matches, date is within current month :each item's amount :sum), and remaining (budget - actual). Color the remaining amount red when negative. Add a progress bar showing actual/budget as a percentage.

**Expected result:** Users see at a glance which categories are under or over budget for the current month.

### 6. Add visual charts for spending breakdown

Install the Chart.js plugin if not already done. Add a Pie chart element with data source: Do a search for Transaction (user = Current User, type = Expense, date within current month) :group by category. Map category names to labels and sum of amounts to values. Add a Line chart showing monthly spending over time: group transactions by month, display total expenses per month. These charts provide instant visual insights into spending patterns.

**Expected result:** A pie chart shows category spending distribution and a line chart shows monthly spending trends.

## Complete code example

File: `Workflow summary`

```text
BUDGET TRACKER — ARCHITECTURE SUMMARY
======================================

DATA TYPES:
  Transaction: user (User), amount (number), type (Income/Expense),
              category (Option Set), description (text), date (date)
  Budget: user (User), category (Option Set), monthly_limit (number),
          month (date — first of month)

OPTION SETS:
  Category: Housing, Food, Transportation, Entertainment, Utilities,
           Healthcare, Savings, Other
  TransactionType: Income, Expense

PAGES:
  dashboard  — Transaction form + history + budget status + charts
  budgets    — Set monthly limits per category

KEY CALCULATIONS:
  Monthly spending per category:
    Search Transaction (user, type=Expense, category, date in month)
    :each item's amount :sum

  Budget remaining:
    Budget's monthly_limit - monthly spending

  Total income this month:
    Search Transaction (user, type=Income, date in month)
    :each item's amount :sum

  Net savings:
    Total income - Total expenses

CHARTS:
  Pie: Expense transactions :group by category → sum of amount
  Line: Expense transactions :group by month → sum of amount
  Bar: Budget limit vs actual per category

PRIVACY RULES:
  Transaction: user = Current User
  Budget: user = Current User
```

## Common mistakes

- **Not filtering transactions by the current month for budget calculations** — Without month filtering, the budget comparison shows all-time spending instead of the current month Fix: Add date constraints: date >= Current date/time :rounded down to month AND date < Current date/time :rounded down to month +(months) 1
- **Storing budgets without a month field** — Users cannot set different budget limits for different months or track budget history Fix: Include a month field on the Budget type storing the first day of each month
- **Using :filtered instead of search constraints for category totals** — :filtered processes every record client-side, consuming more WU and time than server-side constraints Fix: Use search constraints for category and date range instead of loading all transactions and filtering

## Best practices

- Use search constraints (not :filtered) for all transaction queries to minimize workload units
- Store the first day of the month as the date value in Budget records for clean month matching
- Add default budget amounts for common categories to simplify onboarding
- Use color coding (green/red) for amounts to make income vs expense instantly distinguishable
- Paginate the transaction history to 20-30 items per page
- Add a CSV export button for users who want to analyze data in spreadsheets
- Schedule a monthly backend workflow to create next month's Budget records from current values

## Frequently asked questions

### Can I track multiple currencies?

Yes. Add a currency field to Transaction and Budget. Display amounts with the appropriate currency symbol. For comparison, convert to a base currency using a stored exchange rate.

### How do I handle recurring transactions?

Create a RecurringTransaction data type with frequency (weekly/monthly/yearly). Schedule a backend workflow that creates new Transaction records automatically based on the recurring rules.

### Can I import bank transactions?

Yes, via CSV import in the Data tab or by integrating with Plaid (banking API) through the API Connector. Plaid can pull transactions automatically from connected bank accounts.

### Will the charts update in real time?

Chart.js charts refresh when their data source changes. After adding a new transaction, the charts update automatically when Bubble's real-time data binding refreshes the search results.

### Can I set up budget alerts?

Yes. Add a backend workflow triggered when a Transaction is created. Check if the category spending exceeds 80% or 100% of the budget. If so, send an email or create an in-app notification.

### Can RapidDev build a custom financial app?

Yes. RapidDev builds financial applications in Bubble including budget trackers, expense managers, and invoicing systems with bank integrations and automated reporting.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/design-a-budget-tracker-app-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/design-a-budget-tracker-app-in-bubble