Un tableau de bord financier SPA (Single Page Application) permettant de suivre les cryptomonnaies, les taux de change et simuler des prêts.
- KPIs crypto (Market Cap, Bitcoin, taux EUR/USD, EUR/GBP)
- Top 5 cryptomonnaies par capitalisation
- Taux de change majeurs en temps réel
- Accès rapide aux autres sections
- Conversion entre 15 devises
- Taux de change fournis par la BCE (Frankfurter API)
- Graphique historique (7j, 30j, 90j)
- Tableau des taux EUR vs principales devises
- Top 10 cryptomonnaies par market cap
- Graphiques interactifs (7j, 30j, 90j, 1an)
- Sparklines 7 jours dans le tableau
- Données globales du marché (dominance, market cap)
- API: CoinGecko
- Calcul de mensualité (formule amortissement)
- Tableau d'amortissement (vue annuelle/mensuelle)
- Graphique d'évolution capital/intérêts
- Support assurance emprunteur
| Technologie | Usage |
|---|---|
| Vanilla JS | ES6+ Modules, Pas de framework |
| CSS3 | Variables CSS, Grid, Flexbox, Animations |
| APIs | CoinGecko, Frankfurter (BCE) |
| Fonts | Sora (UI), JetBrains Mono (nombres) |
projet2_finova/
├── index.html # Point d'entrée HTML
├── css/
│ ├── reset.css # Reset CSS
│ ├── variables.css # Design tokens + Dark Mode
│ ├── layout.css # Structure (sidebar, topbar)
│ ├── components.css # Composants UI
│ └── animations.css # Animations
├── js/
│ ├── app.js # Point d'entrée JS
│ ├── api/ # Services API
│ │ ├── exchange.js # Taux de change
│ │ ├── crypto.js # Données crypto
│ │ └── loan.js # Calculateur prêt
│ ├── pages/ # Pages SPA
│ │ ├── dashboard.js
│ │ ├── currency.js
│ │ ├── crypto.js
│ │ └── loan.js
│ ├── components/ # Composants
│ │ └── chart.js # LineChart, Sparkline
│ └── utils/ # Utilitaires
│ ├── router.js # Gestionnaire de navigation
│ ├── http.js # Client HTTP (cache, retry)
│ ├── format.js # Formatage nombres/devises
│ ├── toast.js # Notifications
│ ├── clock.js # Horloge temps réel
│ └── sidebar.js # Navigation mobile
└── README.md
- Navigateur moderne (Chrome, Firefox, Safari, Edge)
- Serveur HTTP local (ES Modules requis)
- Ouvrir le projet dans VS Code
- Installer l'extension "Live Server"
- Clic droit sur
index.html→ "Open with Live Server"
# Python 3
python -m http.server 8000
# Ouvrir http://localhost:8000# Installer serve
npm install -g serve
# Lancer
serve .
# Ouvrir http://localhost:3000/* Primaire */
--color-primary: #2563eb (blue-600)
/* Success/Danger */
--color-success: #10b981 (emerald-500)
--color-danger: #ef4444 (red-500)
/* Fond */
--color-bg: #f8f9fc (gray-50)
--color-bg-card: #ffffff
--color-bg-sidebar: #111622 (gray-900)- UI: Sora (Google Fonts)
- Nombres: JetBrains Mono (monospace)
Le projet supporte automatiquement le mode sombre via prefers-color-scheme:
@media (prefers-color-scheme: dark) {
:root { /* Variables adaptées */ }
}| API | Endpoint | Usage |
|---|---|---|
| Frankfurter | api.frankfurter.app |
Taux de change (EUR) |
| CoinGecko | api.coingecko.com |
Crypto market data |
- Crypto: 30 secondes TTL
- Taux de change: 5 minutes TTL
- Retry: 3 tentatives avec backoff exponentiel
- Desktop: > 900px (sidebar visible)
- Mobile: < 900px (sidebar drawer, menu hamburger)
Les erreurs sont loguées avec le préfixe du module:
console.error('[Dashboard] Error:', err);
console.log('[HTTP] Cache hit:', url);Les données sont mises en cache. Pour forcer un refresh:
- Vider le cache navigateur
- Utiliser "Hard Reload" (Ctrl+Shift+R)
Georges NTCHANGA Étudiant en Bachelor Développeur Web/Mobile — IPI Toulouse
Projet personnel — 2026