Des tableaux de bord financiers en temps réel, clairs même pour un portefeuille complexe

Début 2025, j’ai reconstruit le front d’une plateforme de stratégies de trading automatisées : tout ce que l’utilisateur voit pour suivre son portefeuille, ses stratégies et ses revenus, sur ordinateur portable comme sur mobile.

L’ancien front était lent, faisait des erreurs de calcul et présentait mal l’information, alors qu’un utilisateur peut avoir plusieurs stratégies en cours, chacune avec ses positions, sur plusieurs exchanges. Il fallait des calculs justes et rapides, dans une interface simple et épurée où les données utiles restent claires même dans ces cas complexes.

Une interface épurée, même pour un portefeuille complexe

L’utilisateur vient vérifier où en sont son argent et ses stratégies. Chaque écran montre d’abord l’essentiel, et le détail s’ouvre à la demande :

• Tableau de bord : valeur totale du portefeuille, part allouée aux stratégies, positions en cours, allocation et PNL de chaque stratégie active.
• Stratégies : une marketplace où chacun peut publier ses propres stratégies et être rémunéré quand d’autres utilisateurs les louent. Chaque stratégie a sa carte, avec son PNL live face à un simple achat-conservation et son drawdown ; tri et filtres par exchange ou type de marché pour s’y retrouver quand elles sont nombreuses.
• Analyse d’une stratégie, ouverte depuis sa carte : les indicateurs (profit factor, ratios de Sharpe et de Sortino, CAGR, winrate, risk/reward), puis la courbe de backtest, le drawdown, les rendements mensuels, un diagramme de Pareto et la liste des trades, positions longues et courtes séparées.
• Revenus : projection mensuelle et sources de revenus, dont la location de ses stratégies.

Les courbes reprennent les graphiques de TradingView, familiers des traders, et les tableaux se trient et se filtrent par colonne. Sur grand écran, le menu latéral se réduit à ses icônes pour laisser la place aux graphiques.

L’interface est traduite en neuf langues, sans librairie : français, anglais, espagnol, allemand, italien, russe, chinois, japonais et coréen. Chaque langue a son dictionnaire ; la langue du navigateur est détectée à la première visite, puis le choix de l’utilisateur est mémorisé.

Le temps réel, calculé dans le navigateur

Trop de données brutes arrivaient au front : historiques de trades, séries de performance, positions de chaque stratégie. Pour ne pas modifier le backend critique qui exécutait les stratégies, le choix a été fait de laisser les calculs au navigateur, rafraîchis chaque minute : les positions et tous les indicateurs de performance. Le navigateur devait donc tenir la charge sans ralentir l’interface.

• Protobuf : j’ai implémenté ce format binaire compact pour les données les plus volumineuses. Le volume transféré baisse, et le navigateur les décode directement.
• React : à chaque rafraîchissement, seule la partie de l’écran dont les données ont changé est redessinée, et les résultats des calculs lourds sont mémorisés.

Côté serveur, le front dialogue avec une application .NET par 26 appels, pour lire les données comme pour agir : démarrer une stratégie, enregistrer une clé d’exchange ou effectuer un retrait. Le client imposait un fichier unique pour tout le front : depuis une interface dédiée, ses utilisateurs pouvaient modifier ce code dans le navigateur pour personnaliser leur affichage.

Ce que j’en retiens

Simple dehors, compliqué dedans. Masquer la complexité combinatoire par un front épuré est la voie à suivre pour un usage moderne.