hona / upblazor

🏦 I built this site to integrate with Up bank (an Australian digital bank), to assist users with budgeting and to gain powerful future insights.

https://upblazor.com

What is this?

🏦 I built this site to integrate with Up bank (an Australian digital bank), to assist users with budgeting and to gain powerful future insights.

Epics

• ⚡ Leverage the Up API (using Up.NET) to:

  • Fetch existing Transactional and Saver accounts to make selecting which account to save/expense simple
  • Use existing account balances for more accurate insights
  • Track actual vs intended savings
  • Automatically set savings in app when created on the site (this API does not exist on Up yet...)

• 💲 Track incomes

  • Exact ($)
  • Allow multiple

• 🧾 Track expenses

  • Exact ($) or Relative (%) cost
  • Source from Income streams/Up accounts
  • One off + Recurring

• 🪣 Create savings plans

  • Create multiple, per income
  • Exact ($) or Relative (%) cost
  • Choose which Saver account to put the amount into

• 📈 Insights + analytics

  • Show a breakdown of how the calculations work (relative -> absolute), rolling totals, etc

  • Forecast graphs

    • Income (in each Up account) - account for all income streams
    • Expenses (aggregate recurring and one offs)
    • Net Balances (Income - Expenses, in each account)

  • Suggested Budgetting

  • Daily Breakdown

  • Actual vs Intended

  • Reports

Examples

Layout + Notifications

Graph

Responsive Sider

Form

Result

Table

Code Architecture

This project follows a simplistic take on Clean Architecture.

UpBlazor.Core

• Contains the core models that are stored in the database/not dependent on anything
• Repository interfaces to abstract the infrastructure layer
• Helper methods/extensions
• Services

UpBlazor.Infrastructure

• Contains repository implementations using Marten DB

UpBlazor.Web

• Frontend is Blazor server-side
• Authentication is using Microsoft OAuth2
• UI Framework is AntBlazor, with AntBlazor Charts (based on G2Plot)

Getting Started

Development

1. Install a local instance of Postgres
2. Create a database called upblazor, and a user with access
3. Update the Marten connection string in appsettings.json
4. Build and run UpBlazor.Web

Production

1. Install Docker and docker-compose
2. Run docker-compose up -d --build
3. The program is exposed on port 9994, so reverse proxy your domain to that port

Acknowledgments

• AntBlazor
• Up bank

Contributors

LukeParkerDev

Andrzej Bakun

Imgbot

upblazor's Issues

Fix savings plan only showing table on update

[UX] Recurring expense doesn't have a month selector

When creating recurring expenses, the only way to select 'monthly' is to either decide on 30 or 31 days which isn't accurate. It should probably be done daily, weekly, fortnightly, monthly, yearly with amount selection for each e.g. 1 monthly, 2 monthly/1 year, 2 years, etc.

At the moment for yearly expenses you have to select 365 days as another example, would be nicer to just be 1 Year.

I think this might be throwing out forecasting in the long term, so probably something worthwhile looking at since it will have a profound effect on what you see over a 365 day period.

Transactions training extensions

Based on #26

• Edit row
• Duplicate row
• Randomize part of transaction name (e.g. 'Uber 03623636' -> 'Uber XXXXXXX')

[UX] Edit Expenses

The ability to edit existing expenses or anything input on the site.

At the moment to edit an expense or anything else I need to delete it and then re-do every step, this is a bit painful if I accidently mess up an expense by a day and have to redo it.

🚑️ Marten Timeout causes all Budget pages to not work

Error Message:

System.TimeoutException: The operation has timed out.
   at Marten.Util.TimedLock.Lock(TimeSpan timeout)
   at Marten.Storage.Tenant.generateOrUpdateFeature(Type featureType, IFeatureSchema feature, CancellationToken token)
   at Marten.Storage.Tenant.ensureStorageExists(IList`1 types, Type featureType, CancellationToken token)
   at Marten.Storage.Tenant.EnsureStorageExists(Type featureType)
   at Marten.Internal.StorageCheckingProviderGraph.StorageFor[T]()
   at Marten.Internal.Sessions.QuerySession.StorageFor[T]()
   at Marten.Internal.Sessions.QuerySession.StorageFor(Type documentType)
   at Marten.Linq.Parsing.LinqHandlerBuilder..ctor(MartenLinqQueryProvider provider, IMartenSession session, Expression expression, ResultOperatorBase additionalOperator, Boolean forCompiled)
   at Marten.Linq.MartenLinqQueryProvider.ExecuteAsync[TResult](Expression expression, CancellationToken token)
   at Marten.Linq.MartenLinqQueryable`1.ToListAsync[TResult](CancellationToken token)
   at Marten.QueryableExtensions.ToListAsync[T](IQueryable`1 queryable, CancellationToken token)
   at UpBlazor.Infrastructure.Repositories.IncomeRepository.GetAllByUserIdAsync(String userId) in /src/src/UpBlazor.Infrastructure/Repositories/IncomeRepository.cs:line 27
   at UpBlazor.Web.Shared.Components.RepositoryWrapper`2.OnParametersSetAsync() in /src/src/UpBlazor.Web/Shared/Components/RepositoryWrapper.razor:line 58
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

Graph scaling isn't readable

The example recording is just the most notible example of how the graph scales on the highest figure.

The graphs should also default to the Spending being selected and the rest un-selected so the label listing doesn't overflow on expenses/totals.

Screen.Recording.2023-02-08.at.3.18.33.pm.mov

Wrong operator

Hi there,
Could you check this code in RedirectToLogin.razor.
You are checking IsAuthenticated. but when it return true your method redirect to "access-denied" page or am i wrong ?
if (user.Identity?.IsAuthenticated ?? false) { _navigationManager.NavigateTo("/access-denied"); return; }

up:demo token raising errors

Noticed 500 errors being raised when trying the "up:demo" token earlier today.

Show expenses in income planner

Epic: Insights

• #10
• #1

Time elapsed vs Actual savings (vs Goal)

Double donut graph

Allow combined view of savers with your 2UP player/s

🐛 Logout Callback not working

When attempting to logout, I'm shown the logout callback page, but am not logged out :)

Logged in with: Google,
Browser: Chrome

Epic: Multiple banks

Transactions model training page

Strip out dates and amounts

• Use the #25 for
  • Training dataset
  • Verification dataset
• Run training in the client browser
• Dropdown on each transaction (in table), with options:
  • Random (default)
  • Training
  • Verification
  • Training & Verification
  • Ignore
• Manually add transaction

All graphs need to scale monthly instead of auto

Import Transactions from a Spreadsheet

Store transactions in the database

• Create a TransactionResource Repository

Allow importing transactions from a spreadsheet

• Work out abstracted format for the spreadsheet
• Create a parser
• Create a settings page to import from a spreadsheet - save to repository

Abstract Up API to some generic interface

• Create generic interface for generic bank models, as separate NuGet package
• Create an aggregate generic interface, for accessing this data: IBankApi
• Up.NET needs to implement this generic interface
• ICurrentUserService should return IBankApi instead of IUpApi
• Refactor Blazor components to use IBankApi instead of IUpApi

Extend randomizer functionality

Add drawer to support more complicated logic to the randomizer

• Create a SelectRandomizerComponent
• Opens a modal
• Support random character sets
  • Letters only
  • Numeric only
  • Alphanumeric
  • Custom string input, into char array
• Variable length

Future: ML model to figure out the 'custom string input'

Create admin site wide feature flags

Extends #18

• Create admin page for the same concept as #18
• Customise the feature disabled redirect page to show whether it is side wide or admin

Add 'Months' to income cycle

Many people are paid on a monthly cycle; the income cycle should support this.
By implementing this it should also cover edge-cases such as quarterly or yearly incomes.

🧱 Migrate to Azure Infrastructure

Add support for Open Banking

[UX] Graph Tags overlap and cause viewing issues on the Forecast page

Attached an example when you have a lot of expenses and they begin to overlap with each other.

Epic: Budget

Create feature flags in user settings

• Create a Features Enum (flags)
• Create a RequireFeatureAttribute, that takes a Features
• Customise Sider to hide navigations for disabled features
• Add a custom page redirect when navigating to a page that is using a disabled feature

Create Transactions Dataset Selector Component

• Allow inputs from Cache (uploaded spreadsheet in repo), or API, new upload of spreadsheet, or all- Switch?
• Allow daterange selection
• Show preview count of items (from all sources applicable)
• Add a preview button which shows a drawer of the transactions

Transaction Tags

Is there potential to have transaction tags visible/editable from UpBlazor? I've been looking into solutions to get specific merchants tagged automatically e.g. Starbucks tagged with "Work Coffee" and then every occurrence of it tagged as well.

Epic: Machine Learning on Transactions

• #15
• #14

✨ Add inline table editing of all budget data

Import 2Up Savers for use with budgeting

Hey! Firstly, amazing tool! Will be experimenting with using this over my existing Excel spreadsheet 😂

So, my partner and I split our bills into 2Up Savers that we run, which don't seem to get imported by your tool for me to actually add in? Without those I actually can't correctly add in a complete budget picture (I wish I could get as rich as it tells me!)

No rush, I know this is clearly a hobby thing for you but thought I'd put the idea into the air for the future of the project! Good luck :)

Add a README before the user group

Epic: Feature flags

• #18
• #19

Fix totals graph

• Start at amount you have
• Fix logic

[Bug] When changing forecast get 500 error

When you adjust the slider and press load, you get a 500 error. This seems to occur on any number under 340 days, it doesn't effect going beyond 365 days.

> Microsoft.AspNetCore.Components.Web.ErrorBoundary[0]
>       HTTP Response: 
>       
>       {"title":"An unexpected error occurred.","status":500}
>       
>       UpBlazor.ApiClient.ApiException: The HTTP status code of the response was not expected (500).
>       
>       Status: 500
>       Response: 
>       {"title":"An unexpected error occurred.","status":500}
>          at UpBlazor.ApiClient.ForecastClient.GetExpenseForecastAsync(Nullable`1 totalDays, CancellationToken cancellationToken)
>          at UpBlazor.WebUI.Pages.Insights.Forecast.Index.ReloadAsync()
>          at UpBlazor.WebUI.Pages.Insights.Forecast.Index.HandleLoadClick()
>          at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
>          at MudBlazor.MudBaseButton.OnClickHandler(MouseEventArgs ev)
>          at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
>          at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )
> HTTP Response: 
> 
> {"title":"An unexpected error occurred.","status":500}
> 
> UpBlazor.ApiClient.ApiException: The HTTP status code of the response was not expected (500).
> 
> Status: 500
> Response: 
> {"title":"An unexpected error occurred.","status":500}
>    at UpBlazor.ApiClient.ForecastClient.GetExpenseForecastAsync(Nullable`1 totalDays, CancellationToken cancellationToken)
>    at UpBlazor.WebUI.Pages.Insights.Forecast.Index.ReloadAsync()
>    at UpBlazor.WebUI.Pages.Insights.Forecast.Index.HandleLoadClick()
>    at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
>    at MudBlazor.MudBaseButton.OnClickHandler(MouseEventArgs ev)
>    at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
>    at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

Create flashy landing page (unauthorized)

Epic: 2Up

• #12

Transactions Page

View all transactions in a new page, under Insights

• Paginate the recent transactions (time span)
• add tags for Up 'Categories'/'Tags'
• Fetches and aggregates from
  • Repository (cached from excel spreadsheet, or cached from the API?)
  • API call - live, and paginated

[UX] Make an expense from a transaction

The ability to take the amount + date + name of a transaction and set it as a recurring expense with a modal for selecting how often it occurs (mimicking the functionality of creating a Regular in the app)