wiki/Catalogue-Self-Hosted/apps/app-budget-board.md

---
title: Budget Board
created: 2026-06-07
updated: 2026-06-07
type: app
tags: [catalogue, budgeting, typescript, react, dashboard, budget, visualisation]
confidence: medium
contested: false
sources: [https://selfh.st/apps/?tag=budgeting, https://github.com/aaanh/budget-board, https://budget-board.app/]
---

# Budget Board 📈

> **Tableau de bord budgétaire** moderne écrit en TypeScript/React, focalisé sur la **visualisation claire** des revenus, dépenses, et budgets. Idéal comme alternative légère à Firefly III pour qui veut un dashboard lisible.

| Métadonnée | Valeur |
| :--- | :--- |
| **Site web** | https://budget-board.app/ |
| **GitHub** | https://github.com/aaanh/budget-board |
| **License** | AGPL-3.0 |
| **Langage** | TypeScript (React + Express) |
| **Étoiles** | ⭐50 |
| **Dernière MAJ** | 2026-04-12 |
| **Catégorie** | [[cat-budgeting]] |

## Description

Budget Board est une application web de **gestion budgétaire** qui mise tout sur la **visualisation claire** et l'**UX moderne**. Conçue par un développeur solo (aaanh), elle offre une expérience rafraîchissante par rapport aux interfaces parfois austères d'autres outils de budgeting. L'**objectif** : voir en un coup d'œil où va son argent, sans la complexité d'un ERP financier.

Les fonctionnalités principales : **dashboard central** avec vue d'ensemble des comptes, **transactions** (ajout, édition, catégorisation), **catégories** avec icônes, **budgets** mensuels par catégorie avec barre de progression, **comptes** multiples (chèque, épargne, cartes, crédit), **transferts** entre comptes, **graphiques** (revenus vs dépenses, répartition par catégorie, tendance mensuelle, camembert des dépenses), **objectifs d'épargne** avec barre de progression, **revenus/dépenses récurrentes** (abonnements, salaires), **multi-devises** basique, **recherche/filtres**, **mode sombre** natif.

La **stack** est classique et efficace : **React** pour le frontend (avec Vite pour le build), **Express.js** (Node.js) pour l'API, **Prisma** comme ORM, **PostgreSQL** ou **SQLite** comme base. L'**avantage** : code TypeScript cohérent frontend/backend, démarrage rapide, déploiement Docker simple. L'**inconvénient** : le projet est jeune (auteur solo, ~50⭐), donc moins battle-tested que Firefly ou Actual — à surveiller pour la production critique.

L'**intérêt** principal de Budget Board par rapport à Actual/Firefly est son **focus visuel** : les dashboards et graphiques sont particulièrement soignés. Si vous cherchez un outil "beau" et fonctionnel sans la complexité d'un Firefly III, c'est un excellent choix.

## Installation

### Via Docker (recommandé)

```yaml
# docker-compose.yml
services:
  budgetboard:
    image: ghcr.io/aaanh/budget-board:latest
    container_name: budget-board
    restart: unless-stopped
    depends_on:
      db:
        condition: service_healthy
    ports:
      - "3500:3500"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=postgresql://budget:***@db:5432/budget
      - JWT_SECRET=***      - PORT=3500
    healthcheck:
      test: ["CMD", "wget", "--spider", "-q", "http://localhost:3500/api/health"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: postgres:16-alpine
    container_name: budget-board-db
    restart: unless-stopped
    environment:
      - POSTGRES_DB=budget
      - POSTGRES_USER=budget
      - POSTGRES_PASSWORD=***    volumes:
      - budget-db:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U budget -d budget"]
      interval: 10s
      timeout: 5s
      retries: 10

volumes:
  budget-db:
```

> ⚠️ Vérifier le tag exact sur le [GHCR](https://github.com/aaanh/budget-board/pkgs/container/budget-board) (le tag `latest` peut évoluer).

### Installation manuelle (Node.js)

1. **Pré-requis** : Node.js 20+, npm ou pnpm, PostgreSQL 14+ (ou SQLite).
2. `git clone https://github.com/aaanh/budget-board.git && cd budget-board`
3. Installer : `cd backend && npm install && cd ../frontend && npm install && cd ..`
4. Configurer `backend/.env` :
   ```env
   DATABASE_URL=postgresql://budget:****@localhost:5432/budget
   JWT_SECRET=***
   PORT=3500
   ```
5. Migrations : `cd backend && npx prisma migrate deploy && cd ..`
6. Build frontend : `cd frontend && npm run build && cd ..`
7. Démarrer : `cd backend && npm start` (sert aussi le frontend buildé).
8. Reverse proxy Nginx/Caddy/Traefik en front.

## Configuration

- **Premier lancement** : créer le compte owner via l'UI d'inscription.
- **Comptes** : créer un compte par produit bancaire, saisir le solde initial.
- **Catégories** : avec icônes, personnalisables.
- **Budgets** : par mois, par catégorie, avec barre de progression visuelle.
- **Récurrences** : configurer salaires, abonnements, charges fixes.
- **Devise principale** : configurée au global.
- **Mode sombre** : natif, à activer dans les préférences.
- **HTTPS** : obligatoire via reverse proxy.
- **Backups** : `pg_dump` quotidien + copie du volume (fichiers téléversés éventuels).

## Alternatives

### Open Source
- [[app-actual-budget]] — référence local-first (TypeScript aussi)
- [[app-firefly-iii]] — gestion finances complète (PHP)
- [[app-sure]] — plateforme Elixir moderne
- [[app-monetr]] — alternative Go, plus jeune
- [[app-ocular]] — autre option TypeScript minimaliste
- [[app-expenseowl]] — minimaliste Python
- **Buckwheat** / **Cashcog** — envelope budgeting Python
- **Wealthfolio** — tracker investissement TypeScript

### Propriétaires
- **YNAB** — référence zero-based (~14$/mois)
- **Monarch Money** — UX premium (~99$/an)
- **Mint** (ex-Intuit) — abandonné
- **PocketGuard**, **Rocket Money** — apps grand public

## Sécurité

- **HTTPS obligatoire** via reverse proxy.
- **JWT_SECRET** : token critique pour l'auth — générer aléatoirement (64 caractères min), ne jamais commit.
- **PostgreSQL** : user dédié, mot de passe fort, limiter au réseau Docker interne.
- **2FA** : à confirmer selon la roadmap, sinon passer par reverse proxy (Authelia).
- **Backups 3-2-1** : `pg_dump` + volumes, tester la restauration.
- **Updates** : suivre la branche stable, projet jeune → vérifier les releases notes avant upgrade.
- **CSP et headers** : configurer via reverse proxy (Caddy/Traefik).
- **Logs** : Winston/Pino côté Node.js, monitorer via Grafana Loki ou équivalent.

## Ressources
- Site officiel : https://budget-board.app/
- GitHub : https://github.com/aaanh/budget-board
- Démo en ligne : https://demo.budget-board.app/
- selfh.st : https://selfh.st/apps/?tag=budgeting

## Pages Liées
- [[cat-budgeting]] — catégorie parente
- [[app-actual-budget]] — concurrent direct (TypeScript aussi)
- [[app-firefly-iii]] — référence du marché (PHP)
- [[app-monetr]] — alternative Go
- [[app-ocular]] — autre option TypeScript
- [[recettes-docker-compose]] — templates de déploiement
- [[securisation-home-lab]] — bonnes pratiques