How to Build a Budgeting App Like Mint With RemixFast
Learn how to build a personal finance app for income and expense tracking using RemixFast's Visual Builder.
This tutorial will walk you through step-by-step process of building a budgeting app like Mint, YNAB, or PocketGuard with RemixFast Visual Builder. Idea is to build out some of the core foundation features that can be used in a personal finance app or other apps that utilize similar process flow.
Steps to build a Mint clone with RemixFast:
- Identify and Create Models
- Create UI by adding Route
- Preview running app
- Enhance functionality
- Download codebase and run it locally
Contents
Statement of Work
Build a Personal Budget Tracking application, will allow user to create different budgets to track and for each budget, enter list of income and expenses by category. This will be our MVP
Model-Driven App Development
We will use the model-driven app development concept to design and build our app! Lets start by figuring out which models we want to create.
Here is our goal statement again with potential models:
Build a Personal Budget Tracking application, will allow user to create different budgets to track and for each budget, enter list of income and expenses by category.
Following are models that we will use:
- Budget
- Income
- Expense
- ExpenseCategory
Build
Lets build our Mint Clone Visually! Login to RemixFast and create a new app. Enter following
AppName: Minty
Type: Business App
Create Model
Select newly created Minty app and ensure you are on Models tab.
Budget
How to Build Mint on RemixFast Part 1 - Create App and Budget Model
Click Add and create model as shown below
Model Name: Budget (tab/enter)
Fields:
budgetId (number) (auto added)
budgetName (text) (Is Required > Check)
budgetDescription (text)
spendLimit (number)
budgetMonth (number) (Is Required > Check)
budgetYear (number) (Is Required > Check)
userId (number)
Click Edit for userId and expand Advance Properties panel and enter following
Default Value: Select > UserId (field)
No Update: Check (true)
With Default Value, we are ensuring that whenever budget is created, it is always associated with current user by inserting current user id. We also exclude user id from any updates!
💡 RemixFast will convert userId field to a relation with User table in Prisma schema definition, ensuring proper Foreign Key enforcement at database level!
Click Add Audit Fields to add fields to track and audit. Click Save to create Budget model.
Income
How to Build Mint on RemixFast Part 2 - Create Income Model
Click Add and create model as shown below
Model Name: Income (tab/enter)
Fields
incomeId (number) (auto added)
incomeName (text) (Is Required > Check)
incomeAmount (number)
incomeDescription (text)
incomeMonth (number) (Is Required > Check)
incomeYear (number) (Is Required > Check)
Click Add Relation and enter following
Model Name: Select > Budget
Is Required: Check (true)
Related Field: Budget Name (default selected)
Click Add to create relation between Income and Budget.
Click Save to create Income Model. Select newly created Income model and click Include Field From Relation and enter following
Related Model: Select > Budget
Related Field: Select > userId
Click Add to add userId field from Budget to Income as related field. We will use userId field to ensure that user can see only their own data by filtering all data request.
Click Add Audit Fields to add fields to track and audit. Click Save to update Income model.
ExpenseCategory
Click Add and create model as shown below
Model Name: ExpenseCategory (tab/enter)
Fields
expenseCategoryId (number) (auto added)
categoryName (text) (Check > Is Required)
categoryDescription (text)
Click Add Audit Fields to add fields to track and audit. Click Save to create ExpenseCategory model.
Expense
How to Build Mint on RemixFast Part 3 - Create Expense Model
Click Add and create model as shown below
Model Name: Expense (tab/enter)
Fields
expenseId (number) (auto added)
expenseName (text) (Is Required > Check)
expenseAmount (number)
expenseDescription (text)
expenseMonth (number) (Is Required > Check)
expenseYear (number) (Is Required > Check)
Click Add Relation and enter following
Model Name: Select > ExpenseCategory
Is Required: Check (true)
Related Field: Category Name (default selected)
Click Add to create relation between Expense and ExpenseCategory
Click Add Relation and enter following
Model Name: Select > Budget
Is Required: Check (true)
Related Field: Budget Name (default selected)
Click Add to create relation between Expense and Budget.
Click Save to create Expense Model. Select newly created Expense model and click Include Field From Relation and enter following
Related Model: Select > Budget
Related Field: Select > userId
We will use userId field to ensure that user can see only their own data by filtering all data request.
Click Add Audit Fields to add fields to track and audit. Click Save to update Expense model.
Budget (Enhance)
How to Build Mint on RemixFast Part 4 - Enhance Budget and Add Expense By Category View
It will be useful to show user total income and total expense for a given budget. Lets add calculated columns to aggregate data by budget. Note that these columns won't be in database, they are just derived columns.
Select previously created Budget model and click Include Field From Relation and enter following
Related Model: Select > Income
Related Field: Select > incomeAmount
Aggregate Function: Select > Sum
Click Add to create new aggregate field incomeAmountSum.
Click Include Field From Relation and enter following
Related Model: Select > Expense
Related Field: Select > expenseAmount
Aggregate Function: Select > Sum
Click Add to create new aggregate field expenseAmountSum.
In above to columns, we are aggregating total income and total expense for given budget. Click Save to update Budget model.
Expense By Category View
Now that we have created models, lets create a helper view to track expenses by category, which will show user total expenses, aggregated by category. Click drop down for Add button and click Add View and enter following
Model: Select > Expense
Name: expenseByCategoryView
Label: Expense By Category View
Expand Expense model in right pane and drag following fields
userId
categoryName
expenseYear
expenseMonth
expenseAmount
Click expenseAmount field and in Properties pane, click Add Aggregate Function and enter
Aggregate Function: Select > Sum
Click OK This will convert expenseAmount field to an aggregated field. We are summing expanses by category so that we can show how much was spent for each category! Click Save to update expenseAmount field
Next update Group By:
Check userId
Check categoryName
Check expenseYear
Check expenseMonth
And modify Sort By by clicking Add a Sort
Select > userId > Add a Sort >
Select > categoryName > Add a Sort >
Select > expenseYear > Add a Sort >
Select > expenseMonth
Click Save. This will create an aggregate (virtual) model view that aggregates expenses by category for a user!
Add Routes
Now that we have defined models, it is time to add routes and ui!
When you add a route in RemixFast, it will generate loaders, actions and views based on the selected route template. We will use Visual Builder to configure and design generated views as well as changing various default behaviors.
Budget
How to Build Mint on RemixFast Part 5 - Add Budget Route
Click Routes tab in Visual Builder and Click Add Route and enter following:
Template: Card List + Detail Form
Model: Select > Budget
Lable: Budget (default)
Click Save, this will create backend routes (list and detail) and corresponding UI Views, Card List View for list route and Form View for detail route.
Budget List View
Lets modify Budget UI Views. Select Budget List View (first route) and select Components panel. Drag Expression Field and Drop it under Budget Name field. Select newly added field and enter
Field Label: Month Year
Field Expression: ${budgetMonth}-${budgetYear}
Budget Form View
Select Budget Form View (second route) and enter
Select > User Id > Check > Is Hidden
Select > Income Amount > Label > Total Income > Check > Is ReadOnly
Select > Expense Amount > Label > Total Expense > Check > Is ReadOnly
We don't need to show field userId as it is only used for tracking (you can even delete it). Fields Total Income and Total Expense are calculated fields and hence Read Only
Let rearrange and clean up the UI
Drag last section containing Total Income and Total Expense and Drop it above section containing Created By and Created Date
Drag Budget Month and Drop it before Budget Year
Drag Budget Description and Drop it after Spend Limit
Drag Spend Limit and Drop it after Budget Name
Select Budget Description and enter
Type: Select > Multi Line Text
Select Budget Month and enter
Type: Select List
List Values: Name And Value: Check
Jan > 1 > Add
Feb > 2 > Add
Mar > 3 > Add
Apr > 4 > Add
May > 5 > Add
Jun > 6 > Add
Jul > 7 > Add
Aug > 8 > Add
Sep > 9 > Add
Oct > 10 > Add
Nov > 11 > Add
Dec > 12 > Add
Click Save to save list of months.
Select Budget Year and enter
Type: Select List
List Values:
2022 > Add
2023
Click Save to save list of years.
Alternatively you can also create lookup tables for month and year in database and user Type: Picker to create lookup list for each field.
Select Section with Total Income and Total Expense and enter
Display Condition > Select > Add Field Condition
Select Field > Select > budgetId
Select Criteria > Select > Exists
Click Done to setup a display condition to ensure that we show section only after budget has been created. (budgetId exists!)
We can make more changes, but lets leave it for later and continue with building rest of the application.
Income
How to Build Mint on RemixFast Part 6 - Add Income Route
Click Add Route and enter following:
Template: Card List + Detail Form
Model: Select > Income
Label: Income (default)
Click Save This will create backend routes (list and detail) and corresponding UI View, Card List View for list route and Form View for detail route.
Income List View
Lets modify Income UI Views. Select Income List View and select Fields panel.
Drag Budget Name and Drop it above Income Name field.
Drag Income Amount and Drop it under Income Name field.
Select Components panel. Drag Expression Field and Drop it under Income Amount field. Select newly added field and enter
Field Label: Month Year
Field Expression: ${incomeMonth}-${incomeYear}
Let rearrange UI a bit. From Components panel Drag Stack component and Drop it below Budget Name field. Now Darg Income Name and Income Amount fields and Drop them on/inside Stack. Select Stack field and in Properties panel, enter
Horizontal: Check;
💡 Stack is a flex box div and hence you can utilize all flex box properties for layout!
Income Form View
Select Income Form View (route just below Income List View)
Select User Id and enter
Is Hidden: Check
Select Budget Name and enter
Is Required: Check
Select Income Description and enter
Type: Select > Multi Line Text
Select Income Month and enter
Type: Select List
List Values: Name And Value: Check
Jan > 1 > Add
Feb > 2 > Add
Mar > 3 > Add
Apr > 4 > Add
May > 5 > Add
Jun > 6 > Add
Jul > 7 > Add
Aug > 8 > Add
Sep > 9 > Add
Oct > 10 > Add
Nov > 11 > Add
Dec > 12 > Add
Click Save to save list of months.
Select Income Year and enter
Type: Select List
List Values:
2022 > Add
2023
Click Save to save list of years.
Arrange Form UI so that it looks like following:
Budget Name | User Id
Income Name | Income Amount
Income Description
Income Month | Income Year
Created By | Created Date
Updated By | Updated Date
Expense
How to Build Mint on RemixFast Part 7 - Add Expense Route
Click Add Route and enter following:
Template: Card List + Detail Form
Model: Select > Expense
Lable: Expense (default)
This will create backend routes (list and detail) and corresponding UI View, Card List View for list route and Form View for detail route.
Expense List View
Modify Expense Card to have following fields
Budget Name
Category Name
Expense Name | Expense Amount
Month Year
Darg Budget Name from Fields panel and Drop it above Expense Name.
Darg Category Name from Fields panel and Drop it under Budget Name.
Next Darg Stack component from Components pane and Drop it under Category Name.
Drag Expense Name and Expense Amount and Drop them in Stack and change Stack to display horizontally (flex-direction: row).
Finally Drag Expression Field component from Components pane and Drop it under Stack and set field expression to be ${expenseMonth}-${expenseYear} (label: Month Year)
Expression Form View
Modify Expression Form view
User Id > Is Hidden: Check
Budget Name > Is Required: Check
Category Name > Is Required: Check
Expense Description > Type: Multi Line Text
Select Expense Month and enter
Type: Select List
List Values: Name And Value: Check
Jan > 1 > Add
Feb > 2 > Add
Mar > 3 > Add
Apr > 4 > Add
May > 5 > Add
Jun > 6 > Add
Jul > 7 > Add
Aug > 8 > Add
Sep > 9 > Add
Oct > 10 > Add
Nov > 11 > Add
Dec > 12
Click Save to save list of months.
Select Expense Year and enter
Type: Select List
List Values: Select
2022 > Add
2023
Click Save to save list of years.
and rearrange UI as follows
Budget Name | Category Name | User Id
Expense Name | Expense Amount
Expense Description
Expense Month | Expense Year
Created By | Created Date
Updated By | Updated Date
Config
How to Build Mint on RemixFast Part 8 - Add Config Route
Click Add Route and enter following:
Template: Config (List of List)
Label: Config (default)
Click Save to create Configuration route. Select Config route and click Add and enter following:
Table: Select > Expense Category
Label: Expense Category
Description: Expense Category
Click Save, this will create configuration item for Expense Category, allowing user to create and manage different Expense Categories.
Dashboard
How to Build Mint on RemixFast Part 9 - Add Dashboard Route
Click Add Route and enter following:
Template: Dashboard
Label: Dashboard (default)
Click Save to create Dashboard route.
Stat List Widget
Select Dashboard route and drag Stats from the Components panel and enter following:
Model: Select > Budget
Stat Data Field: Select > Income Amount (incomeAmountSum)
Click Save to create Total Income Stat.Select Income Amount and in Properties pane (right side), and change Label to Total Income. Expand Style panel and enter:
Conditional: {
color: '#10b981';
}
We will show Total Income in green color. Click Budget Stats and then select Fields property pane. Drag Expense Amount from Fields panel and Drop it after Total Income Stat. Select Expense Amount stat and in Properties pane enter
Label: Total Expense
Expand Style panel and enter
Conditional: {
color: '#ef4444';
}
We will show Total Expense in red color. Click Budget Stats and then select Fields property pane. Drag budgetId and Drop it after Total Expense Stat. Select budgetId stat and in Properties pane enter
Label: Balance
Is Custom: Check (true)
Field Expression: =(${incomeAmountSum} - ${expenseAmountSum})
Field Expressions that being with = (equal to) sign are considered calculated field! Fields name are from Budget model.
Expand Style panel and enter
Conditional: function(item){
let balance = item.incomeAmountSum - item.expenseAmountSum;
if(balance < 0){
return {
color: '#ef4444'
}
}else {
return {
color: '#10b981'
}
}
}
We will show balance in red if it is less than zero otherwise in green!
Select Budget Stats and in Properties pane, select Filter and click Add Field Condition
Select Field > Budget Month
Select Criteria > Equal to
Value: $CURRENT_MONTH
click Add Field Condition
Select Field > Budget Year
Select Criteria > Equal to
Value: $CURRENT_YEAR
Click Done. This filter condition allows us to show budget stats for current month/year.
Income Expense Chart
Select Components pane and Drag Chart and Drop on Dashboard area and enter
Model: Select > Budget
Chart Type: Select > Bar
Chart Data Field: Select > Income Amount
Chart Label Field: Select > Budget Month
Label: Budget By Month
Select Fields pane and Darg Expense Amount field and Drop it on Income Amount field. We will show two sets of data on the chart, one is income by month and another is expenses by month.
Select Income Amount and in Properties pane, enter
Label: Total Income
Select Expense Amount and in Properties pane, enter
Label: Total Expense
Security - Authorization
How to Build Mint on RemixFast Part 10 - Add Security
We want to ensure that user can only see their own records. We will do that by ensuring that all data access have userId set to current user id.
Select Security tab in Visual Builder and next select Roles. On Roles dialog, click Add (bottom left corner) and enter following:
Label: User;
Click Add on Rights panel and enter following in Data Rights panel:
Check > Budget
Access Level: Select > Read, Create, Update, Delete
Data Filter: Select > Add Filter >
Select Field > userId > Equal to > Select User Field > User Id
Click Done to add data filter for Budget. Now repeat same steps for following models.
Check > Expense
Access Level: Read, Create, Update, Delete
Data Filter: Select > Add Filter >
Select Field > userId > Equal to > Select User Field > User Id
Check > Expense By Category View
Access Level: Read
Data Filter: Select > Add Filter >
Select Field > userId > Equal to > Select User Field > User Id
Since Expense By Category View is a view, we leave Access Level as read as you can't change a view!
Check > Expense Category
Access Level: Read
We don't want user to make any changes to Expense Category, and hence we set Access Level as read, this way only Admin will be able to manage Expense Category (alternatively, you can create another role and give that role, rights to manage Expense Category)
Check > Income
Access Level: Read, Create, Update, Delete
Data Filter: Select > Add Filter >
Select Field > userId > Equal to > Select User Field > User Id
Click Add to add rights to User role, and click Add to add new User role!
When a user is assigned User role, all their data access will be filtered and they will only be able to see their own records. This functionality to dynamically filter data based on current user can also be used for Personalization and Multi Tenancy, specially useful in SaaS apps.
💡 While we are dynamically filtering data reads, data writes are already protected by way of default value. When we created models, we had explicitly set Default Value for userId field and made it insert only!
Click Done to exit and return to Security section.
Preview
Select Routes tab on Visual Bulder and Click Preview button to instantly run (preview) the application.
Create Expense Categories
Select Config tab and select Expense Category and click Add on Expense Category list view and enter following
Category Name: Bills & Utilities > Add > Add
Category Name: Entertainment > Add > Add
Category Name: Groceries > Add > Add
Category Name: Restaurants > Add > Add
Category Name: Health & Fitness > Add > Add
Category Name: Mortgage & Rent > Add > Add
Category Name: Everything Else > Add > Done
Create Budget
Select Budget tab and click Add and enter following
Name: Aug Home
Limit: 8000
Month: Select > Aug
Year: Select > 2022
Click Add. Lets add two more budgets
Name: Sep Home
Limit: 8000
Month: Select > Sep
Year: Select > 2022
Name: Oct Home
Limit: 8000
Month: Select > Oct
Year: Select > 2022
Create Income
Select Income tab and click Add and enter following
Budget Name: Aug Home
Income Name: Job
Income Amount: 10000
Income Month: Select > Aug
Income Year: Select > 2022
Budget: Aug Home
Income Name: Other
Income Amount: 1000
Income Month: Select > Aug
Income Year: Select > 2022
Budget: Sep Home
Name: Job
Amount: 10000
Month: Select > Sep
Year: Select > 2022
Budget: Sep Home
Name: Other
Amount: 800
Month: Select > Sep
Year: Select > 2022
Budget: Oct Home
Name: Job
Amount: 10000
Month: Select > Oct
Year: Select > 2022
Budget: Oct Home
Name: Other
Amount: 1200
Month: Select > Oct
Year: Select > 2022
Create Expense
Select Expense tab and click Add and enter following
Budget: Aug Home
Category Name: Mortgage and Rent
Name: Mortgage
Amount: 3000
Month: Select > Aug
Year: Select > 2022
Budget: Aug Home
Category Name: Bills & Utilities
Name: Utilities
Amount: 120
Month: Select > Aug
Year: Select > 2022
Budget: Aug Home
Category Name: Groceries
Name: Groceries
Amount: 2000
Month: Select > Aug
Year: Select > 2022
Budget: Aug Home
Category Name: Health & Fitness
Name: Gym
Amount: 60
Month: Select > Aug
Year: Select > 2022
Budget: Aug Home
Category Name: Entertainment
Name: Entertainment
Amount: 100
Month: Select > Aug
Year: Select > 2022
Budget: Sep Home
Category Name: Mortgage and Rent
Name: Mortgage
Amount: 3000
Month: Select > Sep
Year: Select > 2022
Budget: Sep Home
Category Name: Bills & Utilities
Name: Utilities
Amount: 110
Month: Select > Sep
Year: Select > 2022
Budget: Sep Home
Category Name: Groceries
Name: Groceries
Amount: 2200
Month: Select > Sep
Year: Select > 2022
Budget: Sep Home
Category Name: Health & Fitness
Name: Gym
Amount: 60
Month: Select > Sep
Year: Select > 2022
Budget: Sep Home
Category Name: Restaurants
Name: Restaurants
Amount: 200
Month: Select > Sep
Year: Select > 2022
Budget: Oct Home
Category Name: Mortgage and Rent
Name: Mortgage
Amount: 3000
Month: Select > Oct
Year: Select > 2022
Dashboard
Select Dashboard and see Budget for current month as well as Chart of monthly income and expenses.
Click Done to return to Visual Builder
Enhance
Dashboard
Select Dashboard route.
Expense By Category
Select Components pane and Drag Chart and Drop on Dashboard area and enter
Model: Select > Expense By Category View
Chart Type: Select > Pie
Chart Data Field: Select > Expense Amount Sum
Chart Label Field: Select > Category Name
Label: Expense By Category
Filter: Select > Add Field Condition
Select Field > Select > Expense Month
Select Criteria > Select > Equal to
Value: $CURRENT_MONTH > Add Field Condition
Select Field > Select > Expense Year
Select Criteria > Select > Equal to
Value: $CURRENT_YEAR
Click Done to set filter. We will be showing expenses by category for current month and year. Click Save to create Pie chart of expenses by category.
Select Expense By Category and in Properties pane, expand Style panel and enter
Flex Grow: 0
Flex Shrink: 1
Flex Basis: 30%
Select Budget By Month and in Properties pane, expand Style panel and enter
Flex Grow: 0
Flex Shrink: 1
Flex Basis: 48%
Click Preview to instantly run the app and Select Dashboard to view just added Pie chart of expenses by category! Click Done to exit preview.
List of Latest Expenses
Select Components pane and Drag Card List and Drop on Dashboard area and enter
Model: Select > Expense
Read Only: Check (true)
Click Save, this will create list of expenses. Select List View and in Properties pane, change Sort By to Created Date and Sort Direction to be Descending. This will show latest 20 expenses.
Select List View and then select Fields pane. Drag Expense Amount and Drop it below Expense Name
Click Preview and select Dashboard We are now showing list of latest expenses!
Download
Click Export Code and enter
Version: 1.0.0
And Click Export Code in dialog. Once code has been exported, select Code tab in Visual Builder. Code tab shows exported Minty project. Explore files included in codebase. Click Download to download codebase. Once downloaded, expand it and open in editor.
Run npm run init to initialize the project. This will download node modes and create prisma client and seed the database. Once completed, run the project with npm run dev. Add data and test the app.
Credits
This was inspired by the bubble.io blog post While concepts are similar, the approach and end goals are very different as bubble.io is a no-code platform where as RemixFast is codebase generator!
Next Steps
RemixFast can help you build app similar to a Mint clone or any other app your choose remarkably fast. Jumpstart your next project with a generated codebase that covers 60% to 80% of traditional development and concentrate on engineering your core functionality!