Tricount Web: Turning Your Existing Ledger into Your Own Reporting Tool

Conclusion#

By using GitHub Pages for the user interface and reports, and Cloudflare Worker to connect with Tricount, you can extend its functionality to include adding expenses, settlement, statistics, and export features.

Where It’s Suitable#

You already have a Tricount ledger and wish to continue using its existing data.
You want to add custom reports such as category statistics, expense trends, and member contributions.
The frontend aims to maintain static deployment via GitHub Pages.
You are comfortable using a non-official API and accept the risk of needing adjustments if the API changes.

Workflow Steps#

1. Connecting to Tricount with Cloudflare Worker#

The overall architecture remains simple:

1
GitHub Pages
2
    ↓ HTTPS
3
Cloudflare Worker
4
    ↓
5
Tricount API

The frontend only needs to call its own Worker:

1
const API_BASE = "https://example.workers.dev";
2

3
// 前端透過 Worker 取得帳本資料
4
const response = await fetch(`${API_BASE}/api/group`);
5
const data = await response.json();

The Worker is mainly responsible for:

Calling the Tricount API.
Handling necessary Request Headers.
Controlling allowed API operations.
Preventing sensitive configurations from appearing directly in frontend code. The Worker doesn’t need to be a full backend; it only serves as an API Proxy.

2. Implementing Accounting, Settlement, and Reports on the Frontend#

After obtaining ledger data, most statistical functions can be processed directly in the browser.

Feature	Processing Location
Read Ledger	Worker → Tricount
Add / Modify Expense	Worker → Tricount
Member Data	Worker → Tricount
Category Statistics	Browser
Monthly Expense Trend	Browser
Individual Payments / Contributions	Browser
Settlement Suggestions	Browser
CSV Export	Browser

For example, calculating category totals:

1
const totals = {};
2

3
expenses.forEach(item => {
4
  // 依分類累計支出
5
  totals[item.category] =
6
    (totals[item.category] ?? 0) + item.amount;
7
});

Features like pie charts, monthly expense trends, and member statistics can all be calculated on the frontend and then displayed using charting libraries like Chart.js.

3. Automating Website Publication with GitHub Actions#

If the source code is in a private repository and GitHub Pages is in another public repository, you can use GitHub Actions for automatic deployment.

1
Private Repository
2
      ↓ git push
3
GitHub Actions
4
      ↓ build
5
Public Pages Repository
6
      ↓
7
指定子目錄
8
      ↓
9
GitHub Pages

The deployment token is stored in:

1
Settings
2
→ Secrets and variables
3
→ Actions
4
→ Repository secrets

For example:

1
TOOLS_DEPLOY_TOKEN = ********

Non-sensitive settings like the Worker URL are stored in Repository Variables:

1
API_BASE = https://example.workers.dev

After that, you only need to:

1
git push

GitHub Actions will automatically build and update GitHub Pages.

Flowchart#

1
flowchart TD
2
    A[使用者開啟 GitHub Pages] --> B[輸入 Tricount 分享連結]
3
    B --> C[前端呼叫 Cloudflare Worker]
4
    C --> D[Worker 呼叫 Tricount API]
5
    D --> E[取得帳本資料]
6
    E --> F[回傳 GitHub Pages]
7
    F --> G[記帳 / 結算]
8
    F --> H[報表 / 統計]

Additional Notes#

Non-official API carries maintenance risks: After Tricount updates, the Endpoint or Header originally used might need adjustment.
Do not put tokens in the frontend: JavaScript sent to the browser can essentially be viewed by anyone.
Worker should restrict API behavior: Do not make it a public proxy that can forward any URL.

Commands / Examples Summary#

Click to expand

1
# 前端
2
GitHub Pages
3
→ 呼叫 API_BASE
4

5
# API Proxy
6
Cloudflare Worker
7
→ 呼叫 Tricount API
8

9
# GitHub Actions Secret
10
TOOLS_DEPLOY_TOKEN
11

12
# GitHub Actions Variable
13
API_BASE=https://example.workers.dev
14

15
# 發布
16
git push

Wrap-up#

The core of this architecture is simple: Tricount handles ledger data, GitHub Pages manages operations and reports, and Cloudflare Worker handles API integration.

Each component does its part, making it much cleaner and less likely to evolve into a backend monolith ( ˘ω˘ )