myExpense 💵

Personal web app expense application.

What is this sh*t? 🤔

This code is part of myExpense application, an Expense and Income tracker.

The intent behind this application is to create an expense application that can support multi currency, so we can utilise a single application to track our expense.

The code here is the front-end part of the myExpense which compiled and serve as web app.

What WEB APP? 😡

Yes web app, I knew a lot of people will say that Web App on Flutter is not "production" ready, but as this application is going to be used by my self only, so the liability of the bug free application is not really that demanding.

Thus, I can ensure you that this application most likely is sh*t one. I am not an expert in Flutter, and I can say that this is my first project that I create using Flutter, after trying them once or two on the early Flutter (and forget about it afterwards).

I was trying a lot of other framework (Ionic, Vue, React either with Onsen or Antd ) before decide to Flutter just because Flutter have Cupertino Date Time Picker (Antd also have, but I am not really good at reading chinese, so, Flutter it is), and I think my decision is correct one as I can focus on creating a simple UI without needed a hefty knowledge of design.

Note: The backend part of this application currently is not being open-source yet, but as the function of the application is simple enough, I think creating a backend application is not as hard nor as demanding also.

What is the Application looks like? 😎

Below is the screenshot of the application in action.

Login Page 🔑

Pin Page ⌨

This page will be showed if user setup PIN for their configuration. PIN is stored in a secured box using Hive.

Pin Page	Pin Input

Home Page 🏠

Transaction List 📃

In transaction list page, you can navigate all your expense using Calendar.

Transaction List	Table Calendar

If you click the Month and Year title on the AppBar it will showed the calendar for you to jump to distant date, instead navigating and scrolling one by one.

Click Appbar	Navigate On Calendar	Click OK

All the transaction being fetched from server will be cache on the local storage.

Statistics 📈

Summary Stats 📊

This page will showed you the summary of the all the account you have, how much income and expense (in total and in average) that you have on the current month.

Summary Stats	Stats Bar Chart

You can navigate to the other month, either by click the month arrow on the header or by swiping left and right on the screen.

Detail Stats 🧿

You can also perform query of all your expense and income, based on currency, date, and account that you want to see the statistics.

To do this, you can click on the Pie Chart icon on the top right, and it will showed you the Filter Stats Page.

Filter By Month	Filter By Year	Filter By Custom

When you press the "Filter Statistics" button or the "Start" icon on the top right, it will send request to backend, and backend will perform calculation based on the filter statisctics given by user input. Once finished, it will be showed on the Detail Statistic Page.

Stats Income	Stats Expense

If you clicked on the income/expense category it will showed you the detail transaction that you performed during the date that you input.

Budget 💯

In budget page, you can control the budget for specific category, and you can configure a different budget category for each currency that you have on your wallet.

The first page that will be showed on the budget page is the "default currency" budget that you can configure on the User page.

Here you can see how much is your expense related to the total budget, and each category to see which category is already passed the budget.

To select different currency, you can tap on the Currency Selection on the Budget Bar header, and it will showed you the list of currency that we have on our Wallet/Account.

When you click the expense category, you will directed to detail transaction for that expense category. In there you can see what is the detail of the expense you performed on that category.

To configure the expense category on the budget, you can click on the "Settings" icon on the top left. It will direct you to the Budget List page.

Budget List 📃

The page will listed all your budget list on the currency currently selected on the budget page. To add new category, you can press the Add Category button, to Edit the current expense category you can double tap the expense category, and once finished you can press the Save button on the top left.

Budget List	Add New Budget	Edit Budget

Account 🎫

In here you can see all your wallet/account, it will showed you the current balance of your wallet/account also.

Account List 📃

There are several action on the account that you can do, such as Edit, Disable, and Delete. You can do this by slide the account and it will give you the options.

The account that disabled will not going to be showed when you adding the transaction, or in the statistics pages. Account that disabled will be marked with dark grey color.

Account Detail ℹ

You can see the detail transaction of each account, by tap the account, and it will showed you the transaction that performed on that account on the current month.

Add Account ➕

On the add account page, you can give the account name, account type, starting balance, and what is the currency of the account. You can also decide whether you want to include the account on the statistics computation or not, or whether the account already disabled or not?

Add Account	Account Type	Currency Type

Transaction 💸

When you adding/edit the transaction, you can choose either this 3 type of transaction:

• Expense
• Income
• Transfer

Expense	Income	Transfer

Input Transaction 🔠

When you input the transaction, it will showed you custom Pin Pad that that also act as calculator, and you can choose the category, and date of the transaction. You can also define this transaction is performed on which account, and whether there are any description on the transaction or not. This Cupertino Date Time Picker is the first reason why I am choosing Flutter when I create this application.

Custom Calc	Date Time Picker	Account Selection	Description

There are also "auto complete" feature during the transaction input, that will be generate based on the expense or income that you already performed. This will be only showed if only the virtual keyboard is being open on the screen.

When you perform Transfer, in case it have different currency, it will showed you the exchane rate box.

Transfer Same Currency	Transfer Different Currency

Search 🔎

You can perform search on the transaction, and the result for the tranasction will be showed lazy loading, so we will not fetch too many data.

Search Fields	Search Result

User Page 👤

The user configuration page, here you can configure all the default value.

• Default Expense: Expense category that will be automatically populated during add expense transaction
• Default Income: Income category that will be automatically populated during add income transaction
• Default Budget Currency: Used on the budget page to showed which currency will be showed first
• Default Wallet: Wallet/account that will be automatically populated during add expense/income/transfer transaction. In the transaction transaction the default wallet will be put on the "Transfer To"

Here you can also control whether you want to change your password, or enable/disable the PIN.

Run...Run...Run...

Before you press your F5, change the .dev.env files, so it will point to the correct backend-server.

Build It!

Use ./docker_build.sh to build the application for production.

It will clean your flutter project, perform pub get, and build it using main.prod.dart instead of main.dart.

The main.prod.dart will load the Production ENV Configuration file.