Construire une app de gestion des dépenses au Québec avec Claude Code : du PRD au déploiement
Pourquoi construire sa propre app de gestion financière avec Claude Code
Les travailleurs autonomes et les petites entreprises du Québec jonglent avec une réalité fiscale unique : la TPS fédérale à cinq pour cent, la TVQ provinciale à 9,975 pour cent, les acomptes provisionnels trimestriels, les catégories de dépenses admissibles par Revenu Québec et les seuils d'inscription obligatoire aux fichiers de taxes. Les logiciels comptables comme QuickBooks ou Wave couvrent ces besoins, mais ils imposent des abonnements mensuels, des interfaces surchargées et peu de contrôle sur la logique métier. Pour un développeur ou un designer qui maîtrise les outils modernes, construire sa propre application avec Claude Code est devenu non seulement réaliste, mais étonnamment rapide.
Claude Code est un outil de programmation agentique qui vit dans votre terminal. Contrairement à un assistant de chat classique, il comprend votre codebase complète, exécute des commandes, crée et modifie des fichiers, lance les tests et gère les commits Git — le tout en langage naturel. Vous décrivez ce que vous voulez, et Claude Code le construit. La différence fondamentale avec le copier-coller de code depuis un chatbot, c'est que Claude Code a le contexte de votre projet entier : il sait quels composants existent, quelle base de données vous utilisez, quelles dépendances sont installées. Chaque instruction s'exécute dans le contexte réel de votre application.
Ce guide vous accompagne étape par étape dans la construction d'une application complète de gestion des dépenses et revenus adaptée à la fiscalité québécoise. Vous allez rédiger un PRD structuré que Claude Code peut interpréter, définir une architecture Next.js avec Supabase, implémenter la numérisation de factures par vision IA, automatiser le calcul TPS/TVQ et générer des rapports mensuels exportables en PDF. Chaque étape inclut le prompt exact à donner à Claude Code et le résultat attendu.
Étape 1 — Le PRD : donner à Claude Code une vision claire du produit
Avant d'écrire une seule ligne de code, Claude Code a besoin d'un document de référence structuré : le Product Requirements Document. Un PRD bien écrit pour un agent IA n'est pas un cahier des charges traditionnel en prose. C'est un document modulaire avec des sections clairement identifiées, des user stories atomiques et des critères d'acceptation formulés comme des checkpoints vérifiables. Claude Code interprète ce format comme une liste de tâches exécutables. Voici le prompt pour démarrer le projet et le PRD que vous allez créer dans un fichier PRD.md à la racine du projet.
Le prompt initial à donner à Claude Code est le suivant : « Lis le fichier PRD.md et initialise le projet Next.js avec App Router, Supabase pour la base de données et l'authentification, et Tailwind CSS pour le styling. Crée la structure de dossiers, installe les dépendances et configure le CLAUDE.md avec les conventions du projet. » Le PRD.md lui-même doit contenir ces sections : Introduction avec le contexte québécois et le public cible (travailleurs autonomes, micro-entreprises), Problème décrivant la complexité du suivi TPS/TVQ manuel, User Stories numérotées (US1 : en tant que travailleur autonome, je veux photographier une facture et voir les montants extraits automatiquement ; US2 : je veux voir mes revenus et dépenses par catégorie avec la TPS/TVQ calculée ; US3 : je veux générer un rapport mensuel PDF prêt pour mon comptable), Spécifications techniques avec le schéma de base de données, et Critères d'acceptation sous forme de bullets vérifiables.
Le fichier CLAUDE.md complémentaire — que Claude Code lira automatiquement à chaque conversation — définit les conventions techniques : « Utiliser les Server Components par défaut, réserver use client aux composants interactifs. Supabase pour l'auth et la DB. Les montants sont stockés en centimes (integer) pour éviter les erreurs d'arrondi. Les taux de taxes sont des constantes dans lib/taxes.js : TPS 5 pour cent, TVQ 9,975 pour cent. Chaque composant a son fichier dans components/ avec un nom PascalCase. Les API routes sont dans app/api/ et valident les entrées avec Zod. » Ce fichier est le plus haut levier de productivité avec Claude Code : il évite de répéter les mêmes instructions à chaque prompt.
Étape 2 — Architecture et schéma de base de données Supabase
L'architecture repose sur trois couches. La couche présentation est un frontend Next.js App Router avec des Server Components pour le chargement initial et des Client Components pour les formulaires et tableaux de bord interactifs. La couche logique métier vit dans des API routes Next.js qui gèrent le calcul des taxes, l'extraction OCR et la génération de rapports. La couche données est Supabase PostgreSQL avec Row Level Security pour isoler les données de chaque utilisateur. Le prompt à donner à Claude Code : « Crée les migrations Supabase pour les tables suivantes selon le schéma du PRD. Active le RLS sur chaque table avec une policy qui restreint l'accès au user_id de l'utilisateur authentifié. »
Le schéma de base de données comprend quatre tables principales. La table transactions contient les champs id (UUID), user_id (référence auth.users), type (enum : revenu ou depense), description (text), amount_cents (integer, montant avant taxes), tps_cents (integer), tvq_cents (integer), total_cents (integer), category (text parmi les catégories de Revenu Québec : fournitures, véhicule, bureau, télécommunications, repas_représentation, sous_traitance, publicité, formation, assurances, autres), date (date), receipt_url (text nullable, URL du fichier dans Supabase Storage), ocr_data (jsonb nullable, données brutes extraites), notes (text nullable), created_at et updated_at (timestamptz). La table categories stocke les catégories personnalisables avec un champ tax_deductible_percentage pour les catégories à déduction partielle comme les repas à 50 pour cent. La table monthly_reports stocke les rapports générés avec period (text au format YYYY-MM), total_revenue_cents, total_expenses_cents, tps_collected_cents, tvq_collected_cents, tps_paid_cents, tvq_paid_cents, net_tax_owing_cents et pdf_url.
Supabase Storage gère les fichiers de factures. Un bucket privé nommé receipts avec une policy RLS qui limite l'accès au propriétaire. Le prompt pour Claude Code : « Configure Supabase Storage avec un bucket receipts. Crée un composant ReceiptUpload qui accepte une photo (appareil photo ou fichier), la compresse côté client à 1200 pixels de large maximum, l'upload dans le bucket avec un nom unique basé sur le user_id et la date, et retourne l'URL publique signée. » Claude Code créera le composant, la logique d'upload et la compression d'image en une seule passe.
Étape 3 — Numérisation intelligente des factures avec la vision IA
La fonctionnalité qui transforme cette application d'un simple tableur en un outil véritablement utile, c'est la numérisation automatique des factures par photo. L'utilisateur prend une photo de sa facture avec son téléphone, et l'application extrait le fournisseur, la date, le montant avant taxes, la TPS, la TVQ, le total et suggère une catégorie. Deux approches techniques sont viables. La première utilise l'API Vision de Claude pour analyser l'image directement — Claude comprend le contexte des factures québécoises et distingue la TPS de la TVQ naturellement. La seconde combine Tesseract.js pour l'OCR côté client avec un appel à Claude pour structurer les données extraites.
L'approche recommandée pour la qualité d'extraction est l'API Vision de Claude. Le prompt pour Claude Code : « Crée une API route app/api/scan-receipt/route.js qui reçoit une image en base64, l'envoie à l'API Claude avec le modèle claude-sonnet-4-5-20250514 en mode vision, et retourne un objet JSON structuré avec les champs vendor, date, subtotal, tps, tvq, total et suggested_category. Le system prompt doit préciser que nous sommes au Québec, que la TPS est de 5 pour cent et la TVQ de 9,975 pour cent, et que le modèle doit extraire ces montants de la facture. Si un montant de taxe n'est pas visible, le calculer à partir du sous-total. » Le system prompt envoyé à Claude dans l'API route ressemble à ceci : « Tu es un assistant comptable spécialisé dans la fiscalité québécoise. Extrais les informations suivantes de cette facture : nom du fournisseur, date, montant avant taxes, TPS (5 pour cent), TVQ (9,975 pour cent), total. Retourne un JSON strict sans commentaires. Si les taxes ne sont pas affichées séparément, calcule-les à partir du sous-total. Suggère une catégorie de dépense parmi : fournitures, véhicule, bureau, télécommunications, repas_représentation, sous_traitance, publicité, formation, assurances, autres. »
Pour les utilisateurs qui veulent une solution sans coût d'API externe, Tesseract.js fonctionne entièrement côté client. Le prompt pour Claude Code : « Ajoute une alternative OCR locale avec Tesseract.js. Crée un hook useLocalOCR qui charge le worker Tesseract en lazy, exécute la reconnaissance sur l'image compressée, et retourne le texte brut. Ensuite, crée une fonction parseQuebecReceipt dans lib/receiptParser.js qui utilise des regex pour extraire les montants TPS et TVQ typiques des factures québécoises — cherche les patterns TPS, GST, TVQ, QST suivis de montants en dollars. » Cette approche est gratuite mais moins précise sur les factures manuscrites ou mal photographiées. L'idéal est d'offrir les deux options et de laisser l'utilisateur choisir dans les paramètres.
Étape 4 — Le tableau de bord : revenus, dépenses et solde fiscal en temps réel
Le coeur de l'application est un tableau de bord qui affiche la situation financière en un coup d'oeil. Le prompt pour Claude Code : « Crée une page app/dashboard/page.jsx qui affiche quatre cartes KPI en haut (revenus du mois, dépenses du mois, TPS/TVQ nette à remettre, bénéfice net), un graphique en barres des revenus vs dépenses par mois sur les 12 derniers mois avec Recharts, et un tableau des dernières transactions avec tri par date, filtrage par catégorie et recherche par description. Les données viennent de Supabase via des Server Components pour le chargement initial. Le graphique et les filtres sont des Client Components. » Claude Code créera l'ensemble des composants, les requêtes Supabase et le layout responsive.
Le calcul de la TPS/TVQ nette est la logique métier centrale. La formule est simple mais les cas limites sont nombreux. Pour un travailleur autonome inscrit aux fichiers de taxes, la TPS/TVQ nette à remettre égale la TPS/TVQ perçue sur les revenus moins la TPS/TVQ payée sur les dépenses admissibles — c'est le crédit de taxe sur intrants (CTI pour la TPS) et le remboursement de taxe sur intrants (RTI pour la TVQ). Mais attention : certaines catégories ont des restrictions. Les repas et frais de représentation ne donnent droit qu'à 50 pour cent du CTI/RTI. Les frais de véhicule sont limités au pourcentage d'utilisation commerciale. Le prompt pour Claude Code : « Dans lib/taxes.js, crée les fonctions calculateTPS, calculateTVQ, calculateNetTaxOwing et calculateDeductibleAmount. Cette dernière prend une catégorie et un montant, et applique le pourcentage de déductibilité selon les règles de Revenu Québec : 100 pour cent pour la majorité des catégories, 50 pour cent pour repas_représentation. Ajoute des tests unitaires dans __tests__/taxes.test.js pour chaque cas. »
Le formulaire d'ajout de transaction est l'écran que l'utilisateur voit le plus souvent. Il doit être rapide et sans friction. Le prompt : « Crée un composant TransactionForm avec les champs type (toggle revenu/dépense), description, montant avant taxes, catégorie (dropdown), date (défaut aujourd'hui), notes optionnelles et upload de reçu optionnel. Quand l'utilisateur entre le montant avant taxes, calcule et affiche automatiquement la TPS, la TVQ et le total en temps réel sous le champ. Si une photo de reçu est uploadée, pré-remplis les champs avec les données OCR extraites et laisse l'utilisateur confirmer ou corriger avant de sauvegarder. Utilise React Hook Form pour la gestion du formulaire et Zod pour la validation. »
Étape 5 — Rapports mensuels automatisés et export PDF
Chaque mois, le travailleur autonome doit préparer ses chiffres pour son comptable ou pour ses propres déclarations. L'application génère un rapport mensuel complet en un clic. Le prompt pour Claude Code : « Crée une API route app/api/reports/monthly/route.js qui accepte un paramètre period au format YYYY-MM. La route agrège toutes les transactions du mois : total des revenus, total des dépenses par catégorie, TPS perçue, TVQ perçue, TPS payée sur les dépenses (avec ajustement des catégories à déductibilité partielle), TVQ payée, solde net TPS à remettre, solde net TVQ à remettre. Stocke le rapport dans la table monthly_reports et génère un PDF avec react-pdf. Le PDF doit avoir un en-tête avec le nom de l'utilisateur et la période, un sommaire des KPI, un tableau des dépenses par catégorie et un tableau détaillé de toutes les transactions. »
Le format du rapport PDF est pensé pour le comptable. La première page affiche le sommaire : revenus bruts, dépenses totales, bénéfice net, TPS nette et TVQ nette avec le calcul détaillé montrant les montants perçus moins les CTI/RTI. La deuxième page présente les dépenses ventilées par catégorie avec le montant total, le montant de TPS récupérable et le montant de TVQ récupérable pour chaque catégorie. Les pages suivantes listent chaque transaction avec la date, la description, le fournisseur, le montant et une indication si un reçu est attaché. Le prompt : « Le PDF utilise les couleurs de la marque de l'utilisateur si définies, sinon un thème professionnel sobre. Ajoute un numéro de page en bas et la mention Généré automatiquement par l'application le [date]. Le fichier est sauvegardé dans Supabase Storage dans un bucket reports et l'URL est stockée dans monthly_reports. »
Pour l'automatisation, une tâche cron génère le rapport du mois précédent le premier jour de chaque mois. Le prompt : « Crée une API route app/api/cron/monthly-report/route.js protégée par un header CRON_SECRET. Cette route identifie tous les utilisateurs actifs, génère le rapport du mois précédent pour chacun et envoie une notification (email via Resend ou notification in-app) avec le lien de téléchargement du PDF. Configure un cron job Vercel dans vercel.json qui appelle cette route le premier de chaque mois à 6h du matin EST. » L'utilisateur se réveille le premier du mois avec son rapport complet prêt à envoyer à son comptable.
Étape 6 — Déploiement, tests et itération avec Claude Code
Le déploiement sur Vercel est la dernière étape. Le prompt pour Claude Code : « Configure le projet pour le déploiement Vercel. Ajoute les variables d'environnement nécessaires dans .env.example : NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, ANTHROPIC_API_KEY pour l'OCR vision, CRON_SECRET pour les tâches automatisées. Vérifie que le build passe sans erreur, que les types TypeScript sont valides et que les tests passent. Crée un README.md avec les instructions d'installation. » Claude Code exécutera le build, corrigera les erreurs éventuelles et préparera le projet pour la mise en production.
L'avantage majeur de Claude Code dans ce workflow est la boucle d'itération rapide. Après le déploiement initial, chaque amélioration suit le même pattern : vous décrivez le changement en langage naturel, Claude Code modifie les fichiers concernés en comprenant le contexte existant, exécute les tests et propose un commit. Par exemple : « Ajoute un graphique camembert sur le dashboard qui montre la répartition des dépenses par catégorie pour le mois en cours. Utilise les mêmes couleurs que les badges de catégorie. » Claude Code sait déjà où se trouvent les couleurs de catégorie, quel composant de graphique est utilisé dans le projet et comment requêter Supabase — il modifie uniquement ce qui est nécessaire.
En résumé, le workflow complet pour construire cette application avec Claude Code suit six étapes : rédiger un PRD structuré et un CLAUDE.md avec vos conventions, laisser Claude Code initialiser le projet et créer le schéma de base de données, implémenter la numérisation de factures avec la vision IA de Claude, construire le tableau de bord avec les calculs TPS/TVQ en temps réel, automatiser les rapports mensuels PDF et les tâches cron, puis déployer sur Vercel et itérer. Chaque étape est un prompt en langage naturel. Le plus impressionnant dans cette approche, c'est que la majorité du code est générée en comprenant votre intention — vous guidez l'architecture et les décisions produit, Claude Code se charge de l'implémentation. C'est exactement le type de projet que j'accompagne chez PASCALPOTVIN.COM : transformer une idée en application fonctionnelle en tirant le maximum des outils IA modernes.