markcwatson/budgetpals_client

A mobile client for budgetpals

budgetpals_client (WIP)

A mobile client for budgetpals.

Uses the budgetpals API (which is WIP).

This app is my first ever attempt at creating a mobile application, and my first time using Flutter/Dart. The state-management architecture is based on the BLoC pattern. Hive is used for caching API data reducing the number of network requests.

Internal testing: TestFlight

This app is available from Apple for internal testing for registered testers using TestFlight.

Demo (Sept 17, 2023)

Here is a demo of the app running in an iOS simulator connected to the budgetpals backend. First, here is the basic account creation flow where the user enters an email, name, and password.

Next, when a user signs in for the first time, they are prompted to setup their first budget. The user specifies their starting account balance, the budget period (bi-weekly, monthly, etc.), and the starting date.

Next, the user can build out their budget by adding "planned items" (expenses and incomes). The user specifies dates for the planned items, and the app automatically determines which bi-weekly/monthly/etc. period you are in, then displays planned expenses/incomes that apply to the current period. The summary card shows you planned vs "actual" income/expenses and the starting/ending account balances.

Finally, as money exits the user's bank account, these "actual" transactions are recorded on the Expenses and Income tabs. The user can add unplanned items or they can select planned items that were added to their budget. The summery card in the Budget tab will update the charts and projections based on the actual incomes/expenses as they occur.

Shoutout to ezgif.com for helping me create these GIFs!

Running app on iOS simulator

First, you need to run the budgetpals API on the same network. Instructions can be found there for how to build and run all of the Docker containers. All of the networking is taken care of using Docker's networking functionality.

You can use VS Vode and the Flutter plugin to manage running the app, but it can also be run in the terminal. Assuming you have Xcode and a simulator installed, run the simulator.

open -a Simulator

Next, get a list of the devices recognized by Flutter

flutter devices

Here is a partial representation of the response I get (to fit everything in small space):

3 connected devices:

iPhone 14 Pro (mobile) • 9DB1D9E8-8F0A-4FC8-B8ED-9D944B7CDE09
macOS (desktop)        • macos
Chrome (web)           • chrome

Finally, run the app on the iPhone 14 Pro (mobile) with a device ID of 9DB1D9E8-8F0A-4FC8-B8ED-9D944B7CDE09, in my case.

flutter run -d 9DB1D9E8-8F0A-4FC8-B8ED-9D944B7CDE09

budgetpals_client's Issues

Use abstract classes to avoid code duplication

See the example I did for budget lists.

class BudgetedList

where FinanceEntry is an abstract class implemented by Expense and Income. I think the Expense and Income cards can benefit from this.

Setup automated tests for PRs

Need to track history of expense and incomes

Should be managed by budget service

Budget item not shown if date is start of period

1. Configure budget by setting start of period to x date
2. Add an expense with date x
   Expect: show up in period
   Actual: does not

Add "Create your first budget" screen on budget tab

For a user with no budget, they should see a screen telling them to create their first budget

Add unit, widget, and integration tests

Here are two tutorials about testing flutter apps

https://youtu.be/hUAUAkIZmX0?si=TFS8da5NxffLvHaZ

https://youtu.be/Ghqry5dtgH4?si=aAGoAB3zvU96S528

Flutter docs: https://docs.flutter.dev/testing

Design flow for creating a budget

I'm thinking when the user starts the "create your first budget" flow, they will see the following prompts:

1. Start date
2. Period (weekly, bi-weekly, or monthly)
3. Starting account balances (chequing, savings, credit cards, etc.)
4. isPlanned = true expenses list
5. isPlanned = true incomes list
6. Chart selection

Refactor how token is passed

Pass the token to the BLoC instead of having to post a separate event. See example below in budget_list.dart

Add ability to delete budget

Should be able to delete a budget from the budget tab

Load expense/income items into period based on frequency

Currently, the items that get loaded into the current budget period is based on date, but it also needs to take into account frequency. For example, if an income/expense is added with a date of Jan 1st and a monthly period, then any time a period includes the first of the month, then the period should include this income/expense.

Enter password twice on create account

The user should have to confirm their password by entering it password twice when they create an account and they should match.

Include isPlanned field in expense/income models and BLoC

This field will be used to distinguish between planned and actual expense/income items,. A "budget" will consist of the planned elements.

Design layout for how a budget will be presented

We need to figure out how the budget will be presented in the budget tab

If no planned incomes/expenses, no way to add them

The cards (with Add button) should show

BlocBuilder not rebuilding budget tab when expense/income added

When I add expenses/incomes form the budget tab using the modals, on the return, the list items are not updated with the new item.

As you can see below, the API call is successful, so the GetBudgetEvent event is firing and the BudgetState should be updated. Not sure why it's not rebuilding the widget.

Release/debugs builds don't run on real phone using TestFlight

When I try to open a release build of the app on my phone with TestFlight, I get a white screen; however, it runs in thr simulator. Also, debug doesn't run on my phone with a debug build when connected to my Mac. 🤔

"Hi <name>" doesn't update on new signin

1. sign in in using account A
2. note Hi message for account A first name
3. sign out
4. sign in using account B
   Expect: Hi message shows account B first name
   Actual: Hi message shows account A first name

Select planned item when entering expense/income

When a user goes to enter an income or expense from the inc/exp tabs, they should be shown a list of the planned items and should be able to select one instead of having to fill in all of the info again.

Allow entering of income/expense once

Logic in BLoC should include checking if an income/expense item repeats, and if so, extending the date by the appropriate amount. If it belongs in the active period, the item should be used in calculations and show up in lists.

This will allow the user to only enter the item once.

Duel loading indicators

When signing in, as request is sent to API, the submit and create an account buttons both get replaced with loading indicators

Cache queries

In a few places, we are fetching data where we could be caching