étude de cas · 2026

Aplicación a medida / PWA
Finances personnelles

tous les projets
Finances personnelles

01

le défi

Il me fallait ma propre application de finances : qu'elle suive mon argent à ma façon et, surtout, qu'elle ne m'oblige pas à payer l'abonnement mensuel d'une application tierce. Les applications du marché règlent le cas moyen, et le mien ne l'est pas. Je vis à Paris et je suis payé en euros, mais j'ai toujours des comptes et des dettes en pesos colombiens ; je déclare en France comme salarié et auto-entrepreneur à la fois, avec des obligations en Colombie aussi. Aucun outil générique ne gère bien trois devises, ni ne comprend qu'acheter un ETF chez son courtier n'est pas une dépense. Et le vrai problème de toute appli de finances, ce n'est pas le graphique, c'est la saisie. Si noter un café oblige à ouvrir l'appli et à choisir compte, catégorie et date, on arrête au bout de trois semaines et les chiffres ne valent plus rien. Le vrai défi, c'était que noter une dépense ne coûte presque rien.

02

la solution

J'ai construit une application complète pour mon propre usage, à l'image de ma marque et de ce site : la même mosaïque vert citron et gris, sans majuscules, installable sur le téléphone comme n'importe quelle appli. Six sections (résumé, comptes, revenus et dépenses, dettes, investissements et conseiller) sur un modèle de données pensé pour mon cas : chaque montant est enregistré dans sa devise et converti seulement à l'affichage, aux taux du jour ; les virements entre mes comptes et les versements en investissement ne comptent pas comme dépenses ; et une dépense payée depuis un compte forme une seule paire liée, quelle que soit la porte par laquelle elle entre. Pour que la saisie ne coûte rien, il y a quatre entrées : le formulaire, une zone de texte libre que l'IA transforme en lignes modifiables, les paiements Apple Pay, qui arrivent tout seuls via un raccourci de l'iPhone, et Siri, à qui je dicte la dépense. Par-dessus, deux conseillers IA, l'un financier et l'autre fiscal, qui lisent mes chiffres du mois et répondent par un résumé, pas par un sermon.

03

le résultat

Je m'en sers tous les jours, sur l'ordinateur comme sur le téléphone. Les paiements Apple Pay apparaissent dans l'appli quelques secondes après, marqués « à vérifier » ; une dépense en espèces, je la dicte à Siri sans rien ouvrir ; et le conseiller me dit où j'en suis, mes propres chiffres sous les yeux. Aucun abonnement : l'IA tourne sur l'offre gratuite de Groq, les données sur Firebase et le serveur sur mon propre VPS avec Coolify, à côté de ce site. C'est une appli privée : seul mon compte Google y entre, avec deux verrous vérifiés séparément, les règles Firestore et le serveur. 12 065 lignes de TypeScript, 30 commits et 37 tests sur l'arithmétique de l'argent, la seule partie où une erreur ne se voit à l'écran qu'une fois qu'il est trop tard.

dimension

le projet en chiffres

12 065

lignes de TypeScript, appli et serveur

37

tests sur l'arithmétique de l'argent

3

devises : euro, dollar et peso colombien, converties à l'affichage

4

façons de noter une dépense

2

conseillers IA : financier et fiscal

0 €

d'abonnement par mois

ce que ça change

coût récurrent

Aucun. Pas d'abonnement à une appli tierce : l'IA tourne sur l'offre gratuite de Groq et le serveur partage le VPS de ce site.

la saisie

Presque sans friction. Apple Pay entre tout seul, Siri prend la dictée et le texte libre devient des lignes. La saisie n'est plus la partie qu'on abandonne.

sur mesure

Trois devises, des dettes en pesos, une double fiscalité France–Colombie et un courtier dont les achats ne sont pas des dépenses. Rien de tout cela ne rentrait dans une appli générique.

mobile

pensée pour le téléphone

chiffres simulés

C'est là qu'elle sert le plus : je l'utilise tous les jours sur mon téléphone. Installable en PWA, vérifiée jusqu'à 360 px de large sans défilement horizontal, avec la navigation dans une barre de six icônes en bas. À gauche, le résumé du mois ; au centre, la saisie rapide ; à droite, les investissements.

saisie

quatre façons de noter une dépense

Une appli de finances vaut ce que valent ses données, et les données dépendent d'une saisie qui ne rebute pas. La moitié du travail n'est donc pas dans les écrans mais dans les entrées : quatre chemins, du plus au moins laborieux, qui aboutissent tous au même enregistrement.

  1. 01

    le formulaire

    Le chemin classique, avec compte, catégorie, date et notes. Une dépense payée depuis un compte crée en même temps la dépense, le mouvement du compte et le nouveau solde, en une seule écriture atomique : tout est enregistré, ou rien.

  2. 02

    texte libre

    « déjeuner 12 revolut et uber 8,50 hier ». Le serveur transmet la phrase à un petit modèle qui renvoie du JSON avec plusieurs dépenses, des dates relatives et le compte nommé ; il la valide, et l'appli l'affiche en lignes modifiables avec ce qui reste du budget de chaque catégorie. Si l'IA ne répond pas, une analyse locale prend le relais : le premier nombre, plus les noms de catégorie et de compte présents dans le texte.

  3. 03

    apple pay, automatique

    Une automatisation Raccourcis de l'iPhone se déclenche à chaque paiement Wallet et envoie montant, commerçant et carte au serveur. Celui-ci associe la carte au compte par son nom, demande la catégorie à l'IA et enregistre dépense, solde et mouvement dans une transaction, marquée « à vérifier ». Dans l'appli apparaissent la pastille « à vérifier · ok » et une alerte dans les notifications.

  4. 04

    siri, sous la dictée

    « Dis Siri, note une dépense » : ce que je dicte passe par le même interpréteur que le texte libre et le même enregistrement qu'Apple Pay. Le serveur répond par une phrase courte que le raccourci lit à voix haute, pour savoir ce qui a été noté sans regarder l'écran.

fonctionnalité

ce qu'il y a dedans

résumé

« tu mes »
  • Quatre chiffres du mois choisi (disponible, revenus, dépenses et solde), dans la devise de mon choix : la conversion ne sert qu'à la lecture.
  • Budgets par catégorie avec leur barre et ce qui reste ou ce qui déborde, puis les dernières dépenses avec catégorie et date.
  • En dessous, la répartition du mois, un diagnostic de santé financière et un bloc d'analyse repliable : patrimoine, projection à douze mois, défi d'épargne et catégories.
  • Export CSV des revenus, des dépenses, des dettes ou de tout à la fois, préparé pour qu’Excel respecte les accents.
Le résumé du mois. Les mêmes tokens que deeagonal.com : fond vert citron, tuiles gris foncé séparées par des joints de 4 px, et pas une majuscule.

revenus et dépenses

« gastos variables · gastos fijos · ingresos »
  • Dépenses variables, dépenses fixes et revenus, chacun dans sa devise.
  • Quatre stratégies de budget pour les dépenses variables : règle 50/30/20, frugale, trésorerie réelle ou limite manuelle, avec le plan du mois détaillé et une alerte en cas de dépassement.
  • Chaque mouvement porte un type (variable, fixe, dette ou investissement) modifiable depuis sa pastille ; le reclasser préserve la paire dépense ⇄ mouvement sans rien dupliquer.
Avec la règle 50/30/20, la limite découle des revenus moins les charges fixes et les dettes, et la barre montre ce qui a déjà été consommé.

comptes, dettes et investissements

« cuentas · deudas · inversiones »
  • Comptes bancaires et espèces, chacun dans sa devise, avec des virements entre eux qui ne comptent ni comme revenu ni comme dépense.
  • Dettes avec taux, mensualité minimale et jour de prélèvement, triables par taux pour attaquer d'abord la plus chère, et un simulateur de remboursement.
  • Investissements par classe d'actifs, avec projection à intérêts composés et objectifs. Le mouvement se saisit avec le solde affiché par le courtier, et l'appli en déduit la différence : rendement, versement ou retrait.
Répartition par classe d'actifs et projection sur quinze ans, avec rendement, horizon et versement mensuel réglables.

conseiller

« asesor financiero · planificación fiscal »
  • Un conseiller financier qui reçoit le résumé du mois choisi, avec les dépenses par catégorie, les revenus et dépenses réels, les soldes et les dettes, et commence toujours par « En résumé », avec trois sections au plus et de petits tableaux.
  • Questions rapides en un geste et historique du plus récent au plus ancien, les précédentes repliées sur leur ligne de résumé.
  • Un conseiller fiscal qui connaît les régimes espagnol, français, américain et colombien, et la double résidence : salarié et auto-entrepreneur à la fois, convention France–Colombie, déclaration des actifs à l'étranger.
  • Les prompts sont compactés, sans identifiants, horodatages ni champs vides, et l'historique est limité à dix échanges, pour tenir dans l'offre gratuite.
Le conseiller, sur les chiffres du mois : le résumé en tête, le diagnostic ensuite, sans émojis et avec des montants arrondis.

écrans

le reste de l'application

Comptes : le solde de chacun dans sa devise, converti dans la devise de lecture pour pouvoir les comparer.
Le conseiller fiscal part d'un profil : pays, régime (ici salarié et auto-entrepreneur à la fois) et, si besoin, un second pays de déclaration.

stack

ce qu'il y a dessous

Interface

React 19 · TypeScript 5.8 · Vite 6 · Tailwind CSS 4 avec le design system deeagonal · Motion · Recharts 3 · react-markdown avec tableaux GFM · PWA via vite-plugin-pwa

Données

Firebase Auth avec Google · Firestore avec cache persistant en IndexedDB, y compris hors ligne · règles limitées à une seule adresse e-mail vérifiée · firebase-admin côté serveur

IA et intégrations

Groq via son API compatible OpenAI, sans SDK · gpt-oss-120b pour les conseillers, gpt-oss-20b pour interpréter les dépenses et en secours en cas de limite d'usage · Raccourcis iOS (Wallet et Siri) · ExchangeRate-API

Serveur / déploiement

Express 4 · bundle esbuild · Docker multi-étapes sur node:22-slim · Coolify sur un VPS Hostinger, avec healthcheck · Vitest

architecture

trois couches et deux verrous

L'appli lit et écrit ses données directement dans Firestore ; le serveur n'existe que pour ce qui ne peut pas vivre dans le navigateur : les clés de l'IA, le compte de service des raccourcis et les taux de change. Et comme il s'agit de mon argent, tout a deux verrous indépendants : les règles Firestore n'ouvrent mon arbre de données qu'à mon e-mail vérifié, et chaque route /api du serveur vérifie de son côté le jeton de session et l'e-mail.

Client

PWA React · un seul utilisateur

Toute l'interface. Le cache local de Firestore ouvre l'appli instantanément avec les dernières données, même hors ligne, et s'efface de l'appareil à la déconnexion. À chaque déploiement, l'appli ouverte se recharge d'elle-même sur la nouvelle version.

↕ Firestore en direct, sous règles · /api avec le jeton ID Firebase

Serveur

Express sous Docker · Coolify

Conseillers et interpréteur de dépenses, taux de change avec cache de 6 h et deux sources de secours, points d'entrée des raccourcis et un proxy de /__/auth pour que la connexion Google parte du domaine même dans l'appli installée.

↕ les clés ne vivent que sur le serveur

Services

Firebase

Auth Google et Firestore. Règles : seul mon e-mail vérifié, seul mon propre arbre.

Groq · ExchangeRate-API

Modèles ouverts pour conseiller et interpréter, avec secours en cas de limite d'usage. Taux de change quotidiens, avec attribution.

Les raccourcis de l'iPhone n'ont pas de session Firebase : ils utilisent leur propre jeton, d'au moins 32 caractères et comparé en temps constant, et le serveur écrit avec firebase-admin dans mon arbre de données.

ingénierie

six problèmes réels et comment ils ont été réglés

Tous sont apparus en utilisant l'appli avec mon propre argent, pas en test. Dans une appli de finances, les erreurs graves ne se voient pas : l'écran affiche un chiffre parfaitement formaté, et faux.

un raccourci qui disait « fait » et n'enregistrait rien

intégration
symptôme
L'automatisation Apple Pay se terminait sans erreur, mais la dépense n'apparaissait pas dans l'appli et le serveur ne journalisait rien.
cause
L'action « Obtenir le contenu de l'URL » de Raccourcis envoie un GET par défaut. Le GET ne trouvait pas la route de l'API et tombait sur la route générique de l'application, qui répondait 200 avec le HTML de la page : pour le raccourci, tout allait bien.
solution
Les routes des raccourcis répondent 405 à toute méthode autre que POST, avec un message qui indique laquelle utiliser, et chaque appel laisse une ligne de journal avec son motif : jeton absent, jeton différent, montant invalide ou dépense enregistrée.

la même dépense, deux fois

données
symptôme
Les budgets du mois ne tombaient pas juste : selon la façon dont une dépense était saisie, elle comptait deux fois ou pas du tout.
cause
Une dépense payée depuis un compte pouvait entrer comme dépense variable ou comme mouvement du compte, et c'étaient deux enregistrements indépendants. Les budgets ne lisaient que les premiers, alors que je saisis presque tout comme mouvement.
solution
Ce sont désormais une paire liée, où chaque côté garde l'identifiant de l'autre, créée, modifiée et supprimée ensemble en une écriture atomique, qu'elle vienne du formulaire, de la saisie rapide ou d'Apple Pay. La dépense du mois réunit les deux sources sans rien compter deux fois, et les anciennes paires sans identifiants sont reconnues par compte, date, nom et catégorie. Avec test.

changer de devise réécrivait l'argent

devise
symptôme
En changeant la devise de base, les montants enregistrés étaient recalculés à un taux fixe et écrasés.
cause
La devise de base était traitée comme une donnée, alors que c'est une préférence d'affichage.
solution
Chaque montant est enregistré dans sa devise (celle de son compte, pour les mouvements) et n'est converti qu'à l'affichage, aux taux du jour, avec des valeurs de repli marquées comme anciennes si la source tombe. Les budgets portent leur propre devise. Règle écrite : ne jamais réécrire un montant en changeant de devise.

acheter un etf n'est pas dépenser

modèle
symptôme
Chaque achat chez le courtier apparaissait comme une dépense et plombait le solde du mois.
cause
Un mouvement sortant ne pouvait être qu'une dépense ou un virement.
solution
Un quatrième type, investissement : il fait baisser le solde du compte mais ne compte dans aucun total, aucun budget, ni dans ce que voit le conseiller. Et côté investissements, le formulaire demande le solde affiché par le courtier, pas la différence : l'appli la calcule et décide s'il s'agit d'un rendement, d'un versement ou d'un retrait.

pesos et dollars, même symbole

devise
symptôme
Un montant en pesos colombiens et un montant en dollars se ressemblaient trait pour trait : tous deux avec « $ ».
cause
C'est le symbole local des deux devises.
solution
Le peso s’affiche « COP », y compris dans la phrase de confirmation du raccourci Apple Pay.

safari zoomait pendant la saisie

mobile
symptôme
Sur l'iPhone, toucher un champ agrandissait la page et la laissait ainsi, débordant sur la droite.
cause
Safari zoome quand on active un champ dont le texte fait moins de 16 px.
solution
Deux défenses, et il faut les deux : des champs à 16 px sur écran tactile et maximum-scale=1 dans le viewport. Le pincement pour zoomer fonctionne toujours.

code

où se loge la complexité

App.tsx
10 461
server.ts
942
services/aiService.ts
196
lib/spend.ts
150
AuthContext.tsx
138
5 fichiers restants
178

Lignes par fichier, sur 12 065 au total. Toute l'interface tient dans un seul App.tsx de plus de dix mille lignes : c'est la dette technique assumée du projet. Ce qu'on ne peut pas toucher sans test, c'est-à-dire mois, devises, appariement des dépenses et mouvements d'investissement, est déjà sorti dans src/lib/ avec ses 37 tests ; découper App.tsx par écran, c'est la suite.

critère

ce que j'en retiens

la saisie, c'est le produit

Les graphiques sont la partie facile. Ce qui rend une appli de finances utile, c'est qu'une dépense se note en un geste : tout le reste en dépend.

la devise, c'est l'affichage

Un montant s'enregistre dans sa devise, une fois pour toutes. Convertir, c'est l'affaire de l'écran ; toute autre règle finit par réécrire de l'argent.

les erreurs d'argent ne se voient pas

Un chiffre mal calculé sort aussi bien formaté qu'un chiffre juste. D'où une arithmétique hors de l'interface, testée, et un conseiller qui reçoit exactement les totaux que je vois.

Les chiffres de toutes les captures sont fictifs : chaque montant est multiplié par un même facteur, si bien qu'ils restent cohérents entre eux, mais ce ne sont pas les miens. Application privée, dépôt privé.

Installable (PWA) Application mobile Connexion à des API Saisie automatique des paiements Apple Pay Dépenses dictées à Siri Conseiller financier IA Multidevise
technologies

React·TypeScript·Vite·Tailwind CSS·PWA·Express·Firebase·Groq·Vitest·Node.js·Docker

un projet
similaire ?

parlons-en