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.

Minty App Dashboard

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

Statement of Work
Model-Driven App Development
Build
Preview
Enhance
Download

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.

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!

How to Build a Budgeting App Like Mint With RemixFast

Contents

Statement of Work

Model-Driven App Development

Build

Create Model

Budget

Income

ExpenseCategory

Expense

Budget (Enhance)

Expense By Category View

Add Routes

Budget

Budget List View

Budget Form View

Income

Income List View

Income Form View

Expense

Expense List View

Expression Form View

Config

Dashboard

Stat List Widget

Income Expense Chart

Security - Authorization

Preview

Create Expense Categories

Create Budget

Create Income

Create Expense

Dashboard

Enhance

Dashboard

Expense By Category

List of Latest Expenses

Download

Credits

Next Steps