ÉTUDE DE CAS · FRONTEND
Suivi de cryptomonnaies
Un tableau de bord crypto rapide et privé, avec cours en direct, chandeliers, P&L du portefeuille et alertes de prix sur tous les exchanges.
- RÔLE
- Développeur frontend
- DURÉE
- 6 semaines
- ÉQUIPE
- En solo
- PLATEFORME
- Application web
IDENTITÉ PRODUIT
ledgr
Suivez chaque coin. Ne ratez rien.
01 · APERÇU
Aperçu du projet
TEMPS DE DÉVELOPPEMENT
6 semaines
Du prototype à la bêta publique
TAILLE DE L'ÉQUIPE
En solo
Design et frontend
RÉSULTAT CLÉ
+2 400 actifs
En streaming à 60 fps
LE PROBLÈME
La plupart des trackers crypto sont lents, bourrés de pubs et réclament vos clés d'exchange. Les cours sont en retard, les graphiques saccadent et les totaux du portefeuille correspondent rarement à ceux de l'exchange.
L'APPROCHE
Ledgr reçoit les cours directement depuis les WebSockets des exchanges dans un store en mémoire, regroupe les mises à jour en un rendu par frame et calcule le P&L en local : aucune clé ne quitte le navigateur.
60 fps
sur les graphiques en streaming
< 50 ms
de latence entre le tick et l'écran
0
clé d'API stockée sur un serveur
02 · FONCTIONNALITÉS
Ce qu'il fait
Cours en direct
Flux WebSocket des principaux exchanges, mis à jour à chaque tick.
Graphiques en chandeliers
Bougies de 1H à 1A avec volume, zoom et réticule.
P&L du portefeuille
Plus-values réalisées et latentes calculées dans le navigateur.
Alertes de prix
Alerte sur un prix, une variation en pourcentage ou un pic de volume.
Listes de suivi
Regroupez vos coins et triez-les par variation, volume ou capitalisation.
Import depuis l'exchange
Import CSV en lecture seule depuis Coinbase, Binance et Kraken.
03 · PROCESSUS
Comment il a été conçu
SEMAINE 1
Découvrir
Benchmark de cinq trackers sur la latence, la précision et la confidentialité.
- Rapport de benchmark
- Sources de données
SEMAINE 2
Concevoir
Mise en page façon terminal, états des graphiques et parcours d'alerte.
- Prototype Figma
- Styles des chiffres
SEMAINE 3–5
Développer
Couche sockets, rendu des graphiques, moteur de portefeuille et alertes.
- Application web
- Store de flux
SEMAINE 6
Lancer
Bêta publique sur Vercel avec suivi des erreurs et des performances.
- Bêta publique
- Budget de performance
04 · STACK TECHNIQUE
Technologies
FRONTEND
- TypeScript
- React
- Zustand
GRAPHIQUES
- Chart.js
- Financial plugin
- Canvas
DONNÉES
- WebSocket feeds
- CoinGecko API
- IndexedDB
OUTILLAGE
- Vite
- Vercel
- Vitest
ARCHITECTURE
Application web Ledgr
React + Zustand
Store de flux
Batching + moteur de P&L
Sockets des exchanges
Ticks en direct
CoinGecko API
Métadonnées, historique
IndexedDB
Portefeuille, alertes
05 · ENSEIGNEMENTS
Défis et enseignements
Des milliers de ticks par seconde
DÉFI
Afficher chaque variation de prix figeait l'interface quand les marchés s'agitaient.
RÉSULTAT
Regrouper les ticks en une mise à jour du store par frame a gardé l'interface fluide.
Des clés qui restent privées
DÉFI
Personne ne ferait confiance à un tracker qui stocke les clés d'API des exchanges.
RÉSULTAT
L'import CSV en lecture seule et le P&L calculé dans le navigateur font qu'aucune clé ni aucun solde n'atteint jamais un serveur.
Ce projet vous intéresse ?
Je vous présente volontiers le code, les choix qui l'ont guidé ou la façon dont une solution similaire pourrait servir votre équipe.