WealthFlow
Une application financière React Native pour transactions, budgets et épargne, avec Supabase et politiques d’accès PostgreSQL.
Conçu comme une démonstration fonctionnelle pouvant servir de base à une solution métier personnalisée.
Consulter les preuves
Consultez le code, le modèle de données et les tests dans le dépôt.
Ce que j’ai construit
- Architecture de données relationnelle pour transactions, catégories, budgets et objectifs d'épargne sous Supabase PostgreSQL
- Row Level Security (RLS) au niveau base appliquant un cloisonnement strict par utilisateur sur l'ensemble des 6 tables
- Cycle de vie d'authentification persistant avec hydratation AsyncStorage et découplage des états d'initialisation
- Budgets mensuels par catégorie avec calculs de seuils d'alerte à 3 niveaux (sain, alerte à 80%, dépassement à 100%)
- Objectifs d'épargne ciblés avec suivi relationnel des versements et validation mathématique de la progression
- Moteur de formatage multi-devises centralisé sur 7 devises gérant les règles de décimales spécifiques par monnaie
- Export structuré des données financières personnelles en JSON via Expo FileSystem et feuille de partage native
- Suite de vérification automatisée de 114 tests Jest sur 11 suites couvrant arithmétique, formatage et authentification
- Architecture de compilation native Android avec correctifs de codegen et Babel runtime reproductibles via patch-package
Limites de Sécurité Client, Déconnexions & Erreurs de Calcul
Les applications financières mobiles se reposent souvent sur un simple filtrage côté client (where user_id = ...) comme unique frontière, exposant les données utilisateur à l'inspection d'API et à la falsification. De plus, une restauration de session naïve provoque des scintillements de navigation ou déconnecte l'utilisateur au redémarrage, tandis que les calculs en virgule flottante et la gestion désordonnée des devises introduisent des dérives d'arrondi sur les soldes et budgets.
RLS au Niveau Base, Sessions Hydratées & Calculs Validés
WealthFlow applique des politiques PostgreSQL Row Level Security (RLS) basées sur auth.uid() sur ses 6 tables, garantissant que le moteur de base de données rejette tout accès non autorisé indépendamment du client mobile. Le cycle de vie d'authentification dissocie la restauration initiale de session AsyncStorage des états de chargement pour stabiliser React Navigation, tandis qu'un moteur de calcul déterministe standardise décimales de devises et seuils budgétaires sous le contrôle de 114 tests Jest.
03 / EXPÉRIENCE PRODUIT
Fonctionnalités & Parcours Utilisateur
Journal des Transactions & Résolution Catégorielle
Enregistrement chronologique des revenus et dépenses avec résolution des catégories canoniques, détails commerçant, regroupement par date et recherche instantanée.
Calcule le solde net de trésorerie de façon déterministe (revenus moins dépenses), éliminant tout décalage lors du suivi comptable.
Livre-journal chronologique des transactions avec catégorisation par commerçant, filtrage par type et recherche instantanée
Budgets Mensuels & Seuils de Consommation
Plafonds mensuels par catégorie évalués en temps réel avec trois états de seuil distincts : sain, alerte (>= 80%) et dépassement (>= 100%).
Alerte l'utilisateur avant le dépassement des plafonds grâce à des barres de progression visuelles et des notifications d'analyse budgétaire.
Allocation budgétaire par catégorie avec suivi en temps réel de la consommation et alertes de seuil
Objectifs d'Épargne & Versements Relationnels
Objectifs d'épargne avec suivi du capital accumulé par rapport à la cible, avec enregistrement des versements protégés par clés étrangères en base.
Maintient la cohérence mathématique entre versements et progression de l'objectif, sous la protection des règles RLS vérifiant la propriété du projet.
Analyse Financière & Télémétrie des Tendances
Tendances mensuelles de trésorerie déterministes, calculs du taux d'épargne et visualisation de la répartition des dépenses via React Native SVG.
Génère des observations financières objectives (évaluation du taux d'épargne, postes majeurs de dépense) calculées directement sur les transactions réelles.
Tableau de bord d'analyse financière présentant l'épargne nette, le taux d'épargne de référence et la répartition catégorielle en SVG
Formatage Multi-Devises & Export Natif de Données
Moteur de formatage centralisé sur 7 devises gérant les règles de décimales (ex : 0 décimale pour JPY, 2 pour USD/EUR), associé à l'export JSON via Expo FileSystem et Sharing.
Garantit la portabilité complète des données personnelles en générant une sauvegarde JSON dans le cache mobile et en ouvrant la feuille de partage native de l'OS.
Préférences financières personnelles avec prise en charge de 7 devises, sélection du thème et export intégral des données en JSON
04 / ARCHITECTURE TECHNIQUE
Fondations Techniques & Architecture
Cycle de Vie d'Authentification Mobile & Découplage de la Navigation
Sur un client mobile, les écouteurs d'authentification naïfs créent souvent des conditions de concurrence lorsque l'hydratation de session depuis AsyncStorage chevauche les actions de connexion ou de déconnexion, provoquant le remontage intempestif des conteneurs React Navigation. WealthFlow résout ce problème en isolant un indicateur d'initialisation (isInitializing) qui stabilise le conteneur racine jusqu'à la résolution de getSession(). De plus, l'écouteur onAuthStateChange déduplique les événements redondants pendant l'hydratation et utilise des références pour distinguer une déconnexion volontaire d'une expiration de session.
Isolation des Données au Niveau Base via PostgreSQL Row Level Security
Les applications mobiles s'exécutant dans des environnements clients non fiables, filtrer les requêtes côté client avec .eq('user_id', user.id) n'offre aucune protection contre l'altération de requêtes ou l'inspection d'API. WealthFlow impose la sécurité directement dans le moteur de base de données via PostgreSQL Row Level Security (RLS) sur ses 6 tables : profiles, categories, transactions, budgets, savings_goals et savings_contributions. Chaque opération est cloisonnée par auth.uid() = user_id, et les insertions de versements vérifient que l'objectif d'épargne cible appartient bien à l'utilisateur authentifié.
Correctifs de Codegen Natif Android & Interopérabilité des Modules
Lors de la compilation native sous React Native 0.76.9 et Expo SDK 52, les builds Android ont rencontré des incompatibilités de chaîne d'outils : @react-native/codegen échouait lors de l'analyse des annotations TypeScript Readonly et ReadonlyArray sur les composants, tandis que @babel/runtime générait des erreurs d'interopérabilité CommonJS/ESM. Plutôt que de maintenir des forks instables, des correctifs reproductibles ont été créés via patch-package et appliqués automatiquement lors du cycle postinstall d'npm, assurant une compilation native Android fluide et déterministe.
Moteur de Calcul Financier Vérifié (114 Tests Jest sur 11 Suites)
Les applications de finances personnelles exigent une rigueur numérique absolue pour éviter tout décalage entre écritures, budgets mensuels et formatage multi-devises. WealthFlow centralise ses calculs dans des modules utilitaires purs validés par 114 tests automatisés Jest répartis sur 11 suites. Cette suite valide de façon déterministe le calcul du solde net (revenus moins dépenses), la répartition catégorielle mensuelle, les transitions d'état budgétaire (sain, alerte à 80%, dépassement à 100%), la progression des objectifs d'épargne, le respect des décimales par devise (ex : 0 pour JPY) et la sérialisation de l'export natif.
05 / IMPLÉMENTATION VÉRIFIÉE
Preuves d'Ingénierie & Architecture Mobile
Sécurité Row Level Security au niveau base, mutations financières atomiques et durcissement natif vérifiés directement dans le code source.
Cloisonnement PostgreSQL Row Level Security (RLS)
L'isolation est garantie au niveau du moteur PostgreSQL, et non par le client mobile. WealthFlow applique des politiques Row Level Security (RLS) sur ses 6 tables relationnelles. Même si le code client était décompilé ou modifié, le moteur de base de données rejette systématiquement toute tentative de lecture ou d'écriture hors du périmètre auth.uid() de l'utilisateur authentifié.
6 Tables Relationnelles & Contraintes de Propriété
Protection anti-injection inter-comptes
La politique RLS vérifie non seulement l'identité de l'émetteur mais exige également que l'objectif parent appartienne au même utilisateur (clause EXISTS).
RPC de versement atomique côté base
La fonction PL/pgSQL add_savings_contribution insère le versement et met à jour le solde dans une seule transaction atomique sans calcul client.
Hydratation Asynchrone & Stabilité de Session
Gestion rigoureuse des états asynchrones : L'état isInitializing maintient un écran d'attente natif (RootSplash) jusqu'à la fin de l'hydratation AsyncStorage. Les références intentionalSignOutRef et hadActiveSessionRef évitent les alertes intempestives d'expiration lors d'une déconnexion volontaire.
Correctifs Reproductibles pour React Native 0.76
Analyseur de types Flow / TypeScript
Corrige l'analyseur de composants natifs qui n'acceptait que les alias Flow ($ReadOnly, $ReadOnlyArray). Le patch autorise les formes TypeScript Readonly et ReadonlyArray, débloquant la compilation Gradle Android.
Interopérabilité ESM / CommonJS
Résout les conflits d'export dans Metro où interopRequireDefault utilisait une syntaxe ESM pure, causant des erreurs d'exécution en environnement CommonJS au démarrage de l'APK.
7 devises globales avec règle de précision stricte pour le Yen japonais.
Prise en charge de USD ($), EUR (€), GBP (£), MAD (DH), JPY (¥), CAD (CA$) et AUD (A$). Le Yen japonais applique automatiquement 0 décimale (ex. ¥1,500), tandis que les 6 autres devises conservent 2 décimales exactes.
Alertes visuelles déterministes calculées à 80% et 100% d'utilisation.
La fonction getBudgetStatus classe les dépenses : Sain (< 80%), Alerte (80% à 99.9%) et Dépassé (≥ 100%). L'export JSON via expo-file-system et expo-sharing assainit les données en excluant jetons et mots de passe.
114 Tests Validés sur 11 Suites Dédiées
La suite de tests automatisée valide les calculs arithmétiques financiers, la précision du Yen japonais à 0 décimale, les conversions de dates locales, l'assainissement des exports JSON, l'accessibilité des contrastes, les 15 catégories canoniques, le cycle de vie d'authentification et la traduction des erreurs techniques PostgREST en messages conviviaux.
05 / DÉCISIONS TECHNIQUES
Choix techniques et compromis
PostgreSQL Row Level Security comme Frontière de Sécurité Principale
Appliquer l'isolation des données utilisateur directement dans le moteur PostgreSQL via des politiques Supabase RLS basées sur auth.uid(), plutôt que de faire confiance aux requêtes du client mobile.
Les clients mobiles s'exécutent hors d'un périmètre sécurisé et peuvent être interceptés. Appliquer RLS dans le moteur de base de données garantit qu'aucune requête altérée ne peut accéder aux données financières d'un tiers.
Découplage de l'Hydratation de Session et de la Navigation
Maintenir un indicateur isInitializing dédié pendant la restauration AsyncStorage et dédupliquer les événements de souscription avant d'exposer l'état d'authentification à React Navigation.
Associer le chargement initial du jeton aux états de chargement de formulaire provoquait le démontage et le clignotement de la navigation au démarrage. Isoler l'initialisation garantit une transition fluide entre l'écran de lancement et l'application.
Application Reproductible de Correctifs via patch-package
Versionner les correctifs dans le répertoire patches/ et exécuter patch-package automatiquement au postinstall d'npm pour résoudre les blocages de codegen React Native 0.76 et de Babel runtime.
Créer des forks de dépendances alourdit la maintenance et complique les montées de version. Utiliser patch-package préserve les versions officielles dans package.json tout en garantissant une chaîne de compilation Android déterministe et reproductible.
Architecture Fonctionnelle Pure pour les Calculs Financiers
Structurer tous les calculs arithmétiques, agrégations de catégories et formatages de devises sous forme de fonctions pures dans des utilitaires dédiés, indépendants du cycle de vie des composants React.
Découpler la logique financière du rendu de l'interface permet des tests automatisés rapides et déterministes sous Jest sans simuler de composants mobiles, garantissant des calculs mathématiquement fiables et sans régression.
06 / ENSEIGNEMENTS & RETOUR D'EXPÉRIENCE
Ce que ce projet a démontré
La Sécurité Mobile Doit Résider au Niveau Base de Données
Le développement de WealthFlow a confirmé qu'un client mobile ne peut en aucun cas constituer une frontière de sécurité. L'application de PostgreSQL Row Level Security (RLS) garantit que le cloisonnement des données est assuré par le moteur de base de données, indépendamment des manipulations côté client.
Maîtrise de la Chaîne de Compilation Native et des Incompatibilités Amont
Le développement React Native moderne dépasse la simple écriture de composants : la compilation native Android révèle fréquemment des divergences d'interopérabilité et de codegen. Diagnostiquer ces erreurs et appliquer des correctifs reproductibles via patch-package est indispensable pour stabiliser les builds natifs.
La Vérification Déterministe Protège la Logique Financière Critique
Isoler la logique métier dans des fonctions pures validées par 114 tests Jest s'est révélé indispensable pour maintenir la cohérence des calculs à travers le formatage multi-devises, les seuils budgétaires et les objectifs d'épargne.
Page de présentation WealthFlow déployée sur Vercel, avec aperçu du produit, fonctionnalités, détails techniques et téléchargement de l'aperçu Android.
Consultez l’implémentation et son historique.
Consultez les mises en page dans les captures et la démo.
Découvrez l’architecture et les choix de cette étude de cas.
Explorer le Site Produit WealthFlow
Page de présentation WealthFlow déployée sur Vercel, avec aperçu du produit, fonctionnalités, détails techniques et téléchargement de l'aperçu Android.
🔒 Environnement en lecture seule · Données de test
DÉVELOPPEMENT MOBILE & PERSISTANCE CLOUD
Intéressé par les applications mobiles cross-platform ou la persistance de données ?
Échangeons sur le développement mobile React Native, l'intégration backend Supabase, la modélisation de données financières ou les opportunités de développement.
Vous recherchez le développement d'une application web full-stack ou d'un outil métier ? Découvrir la plateforme BusinessOS →