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.
Prerequisites
- 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
Create the data model for budgets and transactions
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.
Build the transaction entry form
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.
Display the transaction history
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.
Set up monthly budgets per category
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.
Calculate and display budget vs actual spending
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.
Add visual charts for spending breakdown
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 working example
1BUDGET TRACKER — ARCHITECTURE SUMMARY2======================================34DATA TYPES:5 Transaction: user (User), amount (number), type (Income/Expense),6 category (Option Set), description (text), date (date)7 Budget: user (User), category (Option Set), monthly_limit (number),8 month (date — first of month)910OPTION SETS:11 Category: Housing, Food, Transportation, Entertainment, Utilities,12 Healthcare, Savings, Other13 TransactionType: Income, Expense1415PAGES:16 dashboard — Transaction form + history + budget status + charts17 budgets — Set monthly limits per category1819KEY CALCULATIONS:20 Monthly spending per category:21 Search Transaction (user, type=Expense, category, date in month)22 :each item's amount :sum2324 Budget remaining:25 Budget's monthly_limit - monthly spending2627 Total income this month:28 Search Transaction (user, type=Income, date in month)29 :each item's amount :sum3031 Net savings:32 Total income - Total expenses3334CHARTS:35 Pie: Expense transactions :group by category → sum of amount36 Line: Expense transactions :group by month → sum of amount37 Bar: Budget limit vs actual per category3839PRIVACY RULES:40 Transaction: user = Current User41 Budget: user = Current UserCommon mistakes when designing a budget tracker app in Bubble.io: Step-by-Step Guide
Why it's a problem: Not filtering transactions by the current month for budget calculations
How to avoid: Add date constraints: date >= Current date/time :rounded down to month AND date < Current date/time :rounded down to month +(months) 1
Why it's a problem: Storing budgets without a month field
How to avoid: Include a month field on the Budget type storing the first day of each month
Why it's a problem: Using :filtered instead of search constraints for category totals
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a budget tracker app in Bubble.io with income/expense entry, category-based budgets, monthly summaries showing budget vs actual, and spending charts. Can you design the data model and outline the calculations?
Build a budget tracker for my app. Create Transaction and Budget data types. Build a dashboard with a transaction entry form, transaction history list, budget vs actual comparison per category, and pie/line charts showing spending patterns.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation