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
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)
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)
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)
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)
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
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)
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)
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)
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)
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
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
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
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
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
userId
categoryName
expenseYear
expenseMonth
expenseAmount
Click expenseAmount
field and in Properties pane, click Add Aggregate Function
and enter
Aggregate Function: Select > Sum
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
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
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)
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}
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
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
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
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
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
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)
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}
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;
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
Is Hidden: Check
Select
Budget Name and enter
Is Required: Check
Is Required: Check
Select
Income Description and enter
Type: Select > Multi Line Text
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
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
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
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)
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
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
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
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
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
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)
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
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)
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)
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';
}
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
Label: Total Expense
Expand
Style panel and enter
Conditional: {
color: '#ef4444';
}
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})
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'
}
}
}
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
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
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
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
Label: Total Income
Select Expense Amount and in Properties pane, enter
Label: Total Expense
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;
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
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
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
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
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
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
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
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: Sep Home
Limit: 8000
Month: Select > Sep
Year: Select > 2022
Name: Oct Home
Limit: 8000
Month: Select > Oct
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 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: 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: Job
Amount: 10000
Month: Select > Sep
Year: Select > 2022
Budget: Sep Home
Name: Other
Amount: 800
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: Job
Amount: 10000
Month: Select > Oct
Year: Select > 2022
Budget: Oct Home
Name: Other
Amount: 1200
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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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
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
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%
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%
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)
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!