Active Allocator - React & .NET Core API

An API and Web App for managing budgets with allocations (buckets of funds based on history) and interfacing with Banks, and FireFlyIII.

I started with this tutorial. Here is another one that is handy for good structure.

Reference for adding JWT authentication is here.

Docker Repository Usage

On-Boarding / Learning the Framework

I recommend learning (or at least familiarizing yourself with) these concepts before diving into the source code of a project like this.

Basic Overview

• What is ASP.NET?
• What is .NET Core?
• Web Request basics
• What is a JSON API?
• What is REST or a RESTful API?
• What is a Relational Database?
  • What are migrations?

Intermediate Comprehension

• Entity Framework
  • Code-First migrations
• Dependency Injection
• C# Attributes

Back End

Api Key guide

User Interface

Use layoutit.com.

React Select

Source

React Select is a dropdown input react component.

Here is how you load up a default value: ('value' is the important property on the 'Select' component)

{
    parseAccountValue(debitAccount) !== undefined && 
    <div className="form-group">
        <label className="control-label">Debit Account: </label>
        <Select onChange={(e) => setDebitAccount(e.value)} name="debitAccount" options={accounts} isSearchable="true" isLoading={loading} value={parseAccountValue(debitAccount)} />
    </div>
}

• View Income overview

  • Projected Income - Based on statistical metrics (with controls for fine-tuning sample date range)
  • Historical Income (with source breakdown)

• View Allocations (Budgets)

  • View balances for any given date (defaulting today)
  • Show total allocated amount for each account in the given timeframe
  • Detail View for each account
    • Recent Transactions
  • Edit allocation rules for a given account

• Broad Settings

  • Timescale of App (month? 2-week? quarter?)
  • Choose statistical metrics for estimating allocation amount (default to simple average (with lookback range))

Guides and References

Easy background worker guide

Settings / Configuration

Adding Settings with Docker and appsettings.json. Link

.NET 7 Configuration with Minimal API

API Token vs Key

Security analysis / basic overview

Puppeteer

.NET Puppeteer Implementation - Puppeteer Sharp

React

Reactstrap

Dev Environment Setup

On Archlinux install the following to use dotnet: sudo pacman -Sy dotnet-sdk dotnet-runtime aspnet-runtime.

For Archlinux install docker with sudo pacman -Sy docker docker-compose.

Then run systemctl start docker.service and systemctl enable docker.service to start and enable on boot the docker engine.

When running pgAdmin (a container in the docker compose stack) if there are errors about permission denied, you will need to set the owner of the directory to user 5050. You can do this with:

sudo chown -R 5050:5050 ./Postgres/pg-admin_data

You may also need to allow full rwx (Read, Write, and Execute) rights on the directory.

sudo chmod -R 777 ./Postgres/pg-admin_data

Install React dependencies if needed - npm install in the ClientApp directory.

Download 'Reverse Engineering' Tools

dotnet tool install --global dotnet-ef
dotnet tool install --global dotnet-aspnet-codegenerator

Confirm it is working with dotnet ef.

Scaffolding

1. Create Entity (or Model) for object.
2. Add DbSet<object> entry in your DbContext.
3. Migration
4. Endpoints (if needed)

To add Migration for new entity:

dotnet ef migrations add InitialCreate
dotnet ef database update

For generating API endpoints for an entity called Note:

$HOME/.dotnet/tools/dotnet-aspnet-codegenerator controller -name NotesController -async -api -m Note -dc MyDBContext --relativeFolderPath Controllers

Deploying

Create Docker Image

Running sudo dotnet publish will create a docker image targetting linux x64 with the "DefaultContainer" profile and image name of "cavaliercraftsmen.site". Edit the .csproj file to change the version of the image.

To create a docker image explicitly run sudo dotnet publish --os linux --arch x64 -p:PublishProfile=DefaultContainer -p:ContainerImageName=cavaliercraftsmen.site in the same folder as the dotnet solution. Because we added the Microsoft.NET.Build.Containers package, we don't actually need to use the Dockerfile.

Pushing Docker Image

You will have to be logged in. sudo docker login gitea.veritablevalor.com

First tag sudo docker tag <image_id> gitea.veritablevalor.com/blizliam/cavaliercraftsmen.site:latest (check that the version is right).

Then push sudo docker push gitea.veritablevalor.com/blizliam/cavaliercraftsmen.site:latest.

Using API

API should be something like - https://localhost:7260/swagger