Retour aux projets
Termine

Dashboard Crypto

Un tableau de bord complet pour le suivi des crypto-monnaies en temps reel. Integration de multiples APIs pour les donnees de marche, graphiques interactifs avec Chart.js, et systeme d'alertes personnalisees. L'application offre une vue d'ensemble claire de son portefeuille crypto.

Annee2024
RoleFull-Stack Developer
TypeProjet personnel
Voir sur GitHub
Stack technique

Technologies utilisees

Next.js

Framework React SSR

Web3.js

Interaction blockchain

Chart.js

Graphiques interactifs

CoinGecko API

Donnees de marche

Tailwind CSS

Styling rapide

Vercel

Deploiement

Fonctionnalites

Points cles

Suivi en temps reel

Prix, volumes et variations en direct

Graphiques interactifs

Courbes, chandeliers, comparaisons

Alertes personnalisees

Notifications de seuils de prix

Portfolio tracker

Suivi des gains/pertes

Multi-blockchain

Support ETH, BTC, SOL, etc.

Mode sombre natif

Design optimise pour le trading

Approche

Processus de developpement

01

API Research

Evaluation des APIs crypto, choix CoinGecko pour la fiabilite

02

Architecture Next.js

Setup SSR, API routes, gestion du state

03

Data Visualization

Integration Chart.js, widgets de prix, animations

04

Optimisation

Caching, WebSocket pour le temps reel, performance

Code

Apercu technique

useCryptoPrice.ts
1import { useState, useEffect } from 'react';
2
3interface CryptoPrice {
4 id: string;
5 symbol: string;
6 price: number;
7 change24h: number;
8 volume: number;
9}
10
11export function useCryptoPrice(coinId: string) {
12 const [data, setData] = useState<CryptoPrice | null>(null);
13 const [loading, setLoading] = useState(true);
14 const [error, setError] = useState<string | null>(null);
15
16 useEffect(() => {
17 const fetchPrice = async () => {
18 try {
19 const res = await fetch(
20 `https://api.coingecko.com/api/v3/coins/${coinId}`
21 );
22 const json = await res.json();
23
24 setData({
25 id: json.id,
26 symbol: json.symbol,
27 price: json.market_data.current_price.usd,
28 change24h: json.market_data.price_change_percentage_24h,
29 volume: json.market_data.total_volume.usd,
30 });
31 } catch (err) {
32 setError('Failed to fetch price data');
33 } finally {
34 setLoading(false);
35 }
36 };
37
38 fetchPrice();
39 // Refresh every 30 seconds
40 const interval = setInterval(fetchPrice, 30000);
41 return () => clearInterval(interval);
42 }, [coinId]);
43
44 return { data, loading, error };
45}