ETF Score
Une PWA pour analyser la diversification d'un portefeuille ETF et simuler un plan DCA, designée et codée en solo, en vibe coding avec Claude.
Le problème
Les investisseurs particuliers qui constituent un portefeuille d'ETF manquent d'un outil simple pour évaluer leur niveau de diversification réel. Les brokers affichent des performances, rarement une analyse qualitative de l'exposition sectorielle, géographique ou thématique.
J'avais ce problème moi-même. La plupart des outils existants sont soit trop complexes, soit trop généralistes, soit derrière un paywall. Aucun ne répondait exactement à ce que je cherchais.
Je n'ai pas designé pour un utilisateur fictif. J'ai designé pour moi, en partant du principe que si le problème était réel pour moi, il l'était pour d'autres.
L'approche vibe coding
ETF Score est un projet de vibe coding : je conçois, je décris, Claude code. Mais cette formule simplifie beaucoup ce qui se passe réellement.
En pratique, chaque feature passe par un cycle serré : définir l'approche à l'oral → générer le code → reviewer → identifier les écarts → corriger. Ce qui fait la différence dans cette façon de travailler, c'est la précision du vocabulaire produit.
Ce que j'ai appris : l'IA accélère le travail, elle ne remplace pas le jugement. L'expérience design reste le filtre : celui qui sait quoi demander, quoi rejeter, et pourquoi.
La compétence technique de base est devenue, dans ce contexte, un vrai différenciateur. Comprendre ce qu'est un composant, une prop, un effet de bord : ça change ce qu'on peut exiger du modèle.
Vue scoring ETF et simulation DCA
Décisions de design marquantes
WCAG AA sur les deux thèmes
L'app supporte un thème sombre (principal) et un thème clair. Chaque couleur de texte a été vérifiée et ajustée pour passer le ratio de contraste AA, sur les deux thèmes indépendamment. Ce n'est pas une décision spectaculaire, mais c'est une exigence que beaucoup de side projects ignorent.
Simulation, pas conseil
Toutes les projections financières de l'app sont présentées comme des simulations, jamais comme des recommandations. C'est une contrainte délibérée, maintenue à chaque nouvelle feature, notamment sur le DCA optimizer qui redistribue le budget mensuel pour maximiser le score projeté.
Swipe-to-delete · Bottom sheets · Drag natif
L'app est une PWA pensée pour mobile first. Swipe-to-delete avec undo toast, bottom sheets full-height avec résolution du conflit scroll/drag, menu contextuel au clic droit sur desktop : chaque interaction a été travaillée pour correspondre aux conventions natives iOS.
Optimisation automatique du plan DCA
Un algorithme d'optimisation redistribue automatiquement le budget mensuel entre les positions pour maximiser le score de diversification projeté. Budget total constant, fréquences par ETF respectées, 0 € autorisé sur les positions sur-pondérées.
Ce qui a été livré
Réflexion
Ce qui a bien fonctionné
La boucle courte entre l'idée et le résultat. Pouvoir corriger des détails fins (z-index, timing d'animation, padding asymétrique) sans perdre le fil.
Tests sur device réel
Les lancer plus tôt. Plusieurs comportements iOS (clavier, focus, événements touch) n'étaient visibles qu'en situation réelle, pas en simulation navigateur.
Ce projet m'a confirmé que le vibe coding n'est pas une shortcut : c'est un nouveau mode de collaboration qui amplifie les compétences existantes plutôt qu'il ne les remplace. Le designer qui sait ce qu'il veut et pourquoi obtient des résultats radicalement différents de celui qui laisse l'IA décider.
La prochaine étape envisagée : une app native iOS en Swift/SwiftUI, pour aller chercher la qualité d'expérience qu'une PWA ne peut pas offrir.