finui

A browser UI for financial data generated by finsynth. Browse accounts and transactions by date, with balances calculated from the transaction ledger.

Tech stack

Backend — Bun + Hono. Serves the Vue app in production and exposes two API routes: /api/accounts and /api/transactions. Connects to Postgres via postgres.js.

Frontend — Vue 3 with Vue Router and Pinia. Styled with Tailwind CSS v4 and DaisyUI v5. Icons from @solar-icons/vue. Built with Vite.

Database — Postgres 18, running in Docker.

Project structure

finui/
├── src/
│   ├── index.ts              # Hono server
│   └── frontend/
│       ├── main.ts
│       ├── main.css
│       ├── App.vue
│       ├── router.ts
│       ├── pages/
│       │   ├── Accounts.vue
│       │   └── Transactions.vue
│       ├── stores/
│       │   ├── app.ts
│       │   ├── accounts.ts
│       │   └── transactions.ts
│       └── utils/
│           └── format.ts
├── docker/
│   ├── init/
│   │   ├── 01_schema.sql     # table definition
│   │   └── 02_seed.sql       # loads CSV from docker/seed/
│   └── seed/
│       └── transactions.csv  # finsynth output goes here
├── docker-compose.yml
├── vite.config.ts
├── tsconfig.json
└── package.json

Setup

1. Install dependencies

bun install

2. Configure environment

Create a .env file at the project root:

POSTGRES_USER=finui
POSTGRES_PASSWORD=finui
POSTGRES_DB=finui
DATABASE_URL=postgresql://finui:finui@localhost:5432/finui

3. Add transaction data

Put a finsynth-generated CSV into docker/seed/transactions.csv. The file should have this shape:

id,date,from_account_id,to_account_id,amount,category,description,is_recurring
7624e641-...,2023-01-01,acc_checking,acc_external,1400.0,rent,Monthly rent,True

4. Start Postgres

bun run docker:up

This starts a Postgres 18 container. On first run it creates the transactions table and loads the CSV automatically via docker-entrypoint-initdb.d.

If you need to reset and reload from scratch:

bun run docker:down
docker volume rm finui_postgres_data
bun run docker:up

Dev commands

Command	What it does
bun run dev	Starts Vite (:5173) and Hono (:3001) in parallel. Vite proxies /api/* to Hono.
bun run build	Builds the Vue app into public/
bun run start	Builds then serves everything from Hono on :3001
bun run docker:up	Starts Postgres in the background
bun run docker:down	Stops Postgres

During development, open http://localhost:5173. The Hono server on :3001 only matters for bun run start.

API

GET /api/accounts

Returns all accounts with their balance as of the given date.

Param	Default	Description
date	today	Calculate balances up to and including this date (YYYY-MM-DD)

GET /api/transactions

Returns transactions in ascending date order.

Param	Default	Description
date	—	Return only transactions on or after this date
limit	12	Number of rows to return
page	1	Page number (1-indexed)

License

MIT