Building a Personal Finance Tracker Using ToolJet
Tags: webdev, javascript, beginners, tutorial
Published: 2024-05-16 14:10:38

Building apps on [ToolJet](https://github.com/ToolJet/ToolJet) is fast and convenient, but it gets even better when you couple it with ToolJetDB (ToolJet's Internal Database). In this tutorial, we will build a **Personal Finance Tracker** application using ToolJet and ToolJetDB.

Here's a preview of what we are going to build:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la5ytn11q6zs2zrdj14i.png)

**Prerequisites**:

- **ToolJet** (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform that streamlines the process of building and deploying internal tools. Sign up for a free ToolJet cloud account [here](https://app.tooljet.com/).
- **Basic JavaScript**: Knowledge of basic JavaScript can be handy for implementing dynamic functionality in your ToolJet applications.

-------------------------------------------------------------
        

## 1. Creating the Database 
Let's jump right into the development process. Log in to your ToolJet account and click on the [ToolJet Database](https://docs.tooljet.com/docs/tooljet-db/tooljet-database) icon in the left sidebar.

Create a new database table with the following columns and rename it to _personalFinanceTracker_:

- id (primary key/auto-generated)
- month(varchar)
- income (int)
- description (varchar)
- expense (int)

Add some dummy data to the table so that we have something to work with when we begin the app-development process.

-------------------------------------------------------------

## 2. Developing the UI
Once the database is ready, click on the **Apps** icon to move to Applications section and create a new application named _Personal Finance Tracker_. 

Now we will utilize ToolJet's pre-built components to quickly spin-up the UI of the app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cufnqvwz7nwj7j0cr06x.png)

Let's begin with the header of the application.

- Drag and drop a **Text** component on the canvas from the [components library](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components) on the right and rename it to _header_.
- Click on the Text component to see its configuration options in the Properties Panel on the right.
- Enter **Personal Finance Tracker** under its **Data** property, change its color to dark blue (Hex code - #36405B) and font size to 20.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3amp5v62lyw42o1btlh2.png)

Time to create the income and expense input sections.

- Drag and drop a **Container** component. Containers are used to group related components in the App-Builder.
- Inside the Container component, add a Text component for the **Income** header.
- Under the Text component, add a **Text Input** component followed by a **Number Input** component.
- Rename them to _incomeDescriptionInput_ and _incomeInput_ respectively. Set the default value of _incomeInput_ component to 0.
- Add a **Button** component below the Number Input component and rename it to _addIncomeButton_. Also change its **Button Text** property to **Add/Update Income**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/salmcqppthnkez4pxkkj.png)

_Renaming the components can be handy when you want to refer the values inside them in queries._

- Copy the Text, Text Input, Number Input and Button components and paste them right below the Income section to create the **Expense** section.
- Rename the Text Input, Number Input and Button components to _expenseDescriptionInput_, _expenseInput_, and _addExpenseButton_ respectively.
- Also add two **Statistics** Components below the _addExpenseButton_ component.
- Rename the Statistics components to _monthlyIncome_ and _monthlyExpense_. We will use them to display the monthly income and expenses.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qonhymq9dz09qf89rvn3.png)

We also need to list all the income and expense entries. We can handle that with the **Table** component.

- Add a Table component next to the Container component. Rename it to _entriesTable_ and remove the sample data under its **Data** property.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbb1xcdcttged9g2qfwb.png)

-------------------------------------------------------------

## 3. Fetching and Binding the Data
We had created a database table named _personalFinanceTracker_ with some dummy data in the first step. Let's use the low-code query builder to create a query that fetches the data from the database. We will then use it to populate the Table component with it.

- Expand the [Query Panel](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries) at the bottom and click on the **Add** button to create a query.
- Rename the query to _listEntries_.
- Select _personalFinanceTracker_ as the **Table name** and **List rows** under **Operations**.
- Enable **Run this query on application load?** to ensure the query runs every time the app is loaded.
- Click on the **Run** button to run the query and check the response under **Preview**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqscku5tuw6x0drholas.png)

To populate the _entriesTable_(Table) component using the data returned by the _listEntries_ query, follow the below steps.

- Select the _entriesTable_ component.
- Navigate to its properties and pass the below value under its Data property:
`{{queries.listEntries.data}}`
- Delete the id column under the **Columns** property and re-arrange the columns so that we have the columns in the following order:
_Month || Income || Expense || Description_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3ikvtouc6npbyqn2io8.png)

_In ToolJet, you can use [double curly braces](https://docs.tooljet.com/docs/tooljet-concepts/how-to-access-values) to refer dynamic values or use custom code._

Let's create two more queries to add income and expenses. We will bind them to the _addIncomeButton_ and _addExpenseButton_ respectively.

- Create a new query named _addIncome_ with the below configuration:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/842g6st2l7z2fsahb9sg.png)

We have used the following mappings in the query:

- month - `{{moment().format('MMMM')}}`
- income - `{{components.incomeInput.value}}`
- expense - 0
- description - `{{components.incomeDescriptionInput.value}}`

Create another query and name it _addExpense_ with the below configuration:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1rpmnz073j2ndm28isl.png)

Below are the mappings:

- month - `{{moment().format('MMMM')}}`
- income - 0
- expense - `{{components.expenseInput.value}}`
- description - `{{components.expenseDescriptionInput.value}}`

Now let's bind these queries to the _addIncomeButton_ and _addExpenseButton_ components.

- Select the _addIncomeButton_, navigate to its properties and create a new [event](https://docs.tooljet.com/docs/tooljet-concepts/what-are-events) by clicking on New event handler.
- Select **On click** as the **Event**, **Run Query** as the **Action** and _addIncome_ as the **Query**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3yn0kkxcwacu7mpi8hb.png)

- Add another event to the _addIncomeButton_ that runs the _listEntries_ query on click.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk05mzpj7vphq9w2i25r.png)
_Now clicking the addIncomeButton triggers the addIncome and listEntries queries. This setting adds a new income record to the database and refreshes the entriesTable with updated data._

Use the same logic for the _addExpenseButton_ and trigger the _addExpense_ and _listEntries_ queries when the _addExpenseButton_ component is clicked.

Now every time you enter values and click on the related buttons, new entries will be added to the table.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx6bprklqw3wnp2xl620.png)

The main functionality of our application is ready. Let's update the **Statistics** components so that they display the monthly overview.

- Create a new **Run JavaScript code** query and rename it to _monthlyOverview_.
- Paste the below code in the code input field:

```
await queries.listEntries.run();

let allData = queries.listEntries.getData();

function calculateCurrentMonthTotals(data) {
    // Get the current month in 'MMMM' format, e.g., 'May'
    const currentMonth = moment().format('MMMM');

    // Initialize sums for income and expense
    let totalIncome = 0;
    let totalExpense = 0;

    // Iterate through each data entry
    data.forEach(entry => {
        // Check if the entry's month matches the current month
        if (entry.month === currentMonth) {
            // Sum up income and expense
            totalIncome += entry.income;
            totalExpense += entry.expense;
        }
    });

    // Return the calculated totals in an object
    return {
        income: totalIncome,
        expense: totalExpense
    };
}

const currentMonthTotals = calculateCurrentMonthTotals(allData);
return currentMonthTotals
```

_This code retrieves all entries from a database, then calculates and returns the total income and expenses for the current month._

Pass the returned data to the **Primary value** property of the Statistics components.

- Enter `{{queries.monthlyOverview.data.income}}` for the _monthlyIncome_ component and enter `{{queries.monthlyOverview.data.expense}}` for the _monthlyExpense_ component.
- Adjust the color of the _monthlyIncome_ component's primary value to light green( hex code #36AF8B), and set the _monthlyExpense_ component's primary value to dark red (hex code - #D0021B).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r79ue9q4ry97bl230lsk.png)

With that, our personal finance application is fully complete🎉.

-------------------------------------------------------------

## Summary

With the completion of this tutorial, we now have a functional Personal Finance Tracker application, built using [ToolJet](https://www.tooljet.com/) and [ToolJetDB](https://docs.tooljet.com/docs/tooljet-db/tooljet-database). This application demonstrates how you can use ToolJet's visual app-builder and low-code query builder to create apps 10x faster. To explore more, checkout [ToolJet docs](https://docs.tooljet.com/docs/) or join us on [slack](https://tooljet.slack.com/).