Introduction

Les crypto-monnaies font fureur ces jours-ci, et avec la pléthore de pièces disponibles, il est essentiel de disposer d'un outil pour rechercher et afficher facilement les détails les concernant. C'est exactement ce que fait l'application Crypto Finder. Construite avec React, cette application offre aux utilisateurs une expérience transparente pour rechercher, filtrer et afficher les détails des crypto-monnaies.

Aperçu du projet

L'application Crypto Finder comprend :

• Une interface de recherche : les utilisateurs peuvent rechercher des crypto-monnaies par nom.
• Une liste de crypto-monnaies : affichée sous forme de cartes, affichant des informations de base.
• Vue détaillée : cliquer sur une carte de crypto-monnaie pour afficher des informations plus détaillées sur cette pièce.

Caractéristiques

• Fonctionnalité de recherche : filtrez les crypto-monnaies par nom.
• Routage dynamique : affichez des informations détaillées sur une crypto-monnaie sélectionnée.
• Conception réactive : garantit que l'application s'affiche correctement sur différentes tailles d'écran.
• Indicateurs de chargement : affiche un chargeur pendant la récupération des données.

Technologies utilisées

• React : pour créer l'interface utilisateur.
• Axios : pour effectuer des requêtes HTTP.
• React Router : pour le routage et la navigation.
• API CoinGecko : pour récupérer des données de crypto-monnaie.

Structure du projet

Voici un aperçu rapide de la structure du projet :

• src/
  • composants/
  • CryptoFinder.js
  • CryptoDetails.js
  • Navbar.js
  • Pied de page.js
  • App.js
  • App.css

Installation

Pour démarrer avec l'application Crypto Finder, suivez ces étapes :

1. Cloner le référentiel

   git clone https://github.com/abhishekgurjar-in/Crypto-Finder
   cd crypto-finder

1. Installer les dépendances

   npm install

1. Démarrer le serveur de développement

   npm start

1. Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir l'application en action.

Usage

• Rechercher des crypto-monnaies : saisissez dans le champ de recherche et cliquez sur "Rechercher" pour filtrer la liste des crypto-monnaies.
• Afficher les détails : cliquez sur une carte de crypto-monnaie pour afficher des informations détaillées.

Explication du code

Composant d'application

Le composant App.js configure le routage et inclut les composants Navbar et Footer.

import React from "react";
import CryptoFinder from "./components/CryptoFinder";
import "./App.css";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import {Route,Routes} from "react-router-dom"
import CryptoDetails from "./components/CryptoDetails";
const App = () => {
  return (
    

      
      
        }/>
        }/>
      

      
    
  );
};

export default App;

Composant CryptoFinder

Le composant CryptoFinder.js gère la récupération et l'affichage de la liste des crypto-monnaies. Il comprend une barre de recherche pour filtrer les résultats.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

const CryptoFinder = () => {
  const [search, setSearch] = useState("");
  const [crypto, setCrypto] = useState([]);
  const [filteredCrypto, setFilteredCrypto] = useState([]);

  useEffect(() => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/markets`, {
        params: {
          vs_currency: "inr",
          order: "market_cap_desc",
          per_page: 100,
          page: 1,
          sparkline: false,
        },
      })
      .then((res) => {
        setCrypto(res.data);
        setFilteredCrypto(res.data);
      });
  }, []);

  const handleSearch = () => {
    const filteredData = crypto.filter((data) => {
      return data.name.toLowerCase().includes(search.toLowerCase());
    });
    setFilteredCrypto(filteredData);
  };

  if (crypto.length === 0) {
    return (
      

        

      
    );
  }

  return (
    

      

         setSearch(e.target.value)}
          onKeyDown={handleSearch}
          placeholder="Search for a cryptocurrency"
        />
        Search
      
      

        {filteredCrypto.map((val, id) => (
          

            
            
{val.name}
            
{val.symbol.toUpperCase()}
            
₹{val.current_price.toFixed(2)}
            
              View Details
            
          
        ))}
      
    
  );
};

export default CryptoFinder;

Composant CryptoDetails

Le composant CryptoDetails.js récupère et affiche des informations détaillées sur une crypto-monnaie sélectionnée.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

const CryptoDetails = () => {
  const { id } = useParams();
  const [cryptoDetails, setCryptoDetails] = useState(null);

  useEffect(() => {
    axios
      .get(`https://api.coingecko.com/api/v3/coins/${id}`, {
        params: {
          localization: false,
        },
      })
      .then((res) => {
        setCryptoDetails(res.data);
      });
  }, [id]);

  if (!cryptoDetails) {
    return (
      

        

      
    );
  }

  return (
    

      

        

          
{cryptoDetails.name}
          
{cryptoDetails.symbol.toUpperCase()}
          

            Current Price: ₹
            {cryptoDetails.market_data.current_price.inr.toFixed(2)}
          
        
        

          
        
      
      

      
Description :
      
{cryptoDetails.description.en}
      


  

  

        
Market Data
        

          Market Cap: ₹
          {cryptoDetails.market_data.market_cap.inr.toLocaleString()}
        
        

          Total Volume: ₹
          {cryptoDetails.market_data.total_volume.inr.toLocaleString()}
        
        
24h High: ₹{cryptoDetails.market_data.high_24h.inr}
        
24h Low: ₹{cryptoDetails.market_data.low_24h.inr}
        

          Price Change (24h): ₹
          {cryptoDetails.market_data.price_change_24h.toFixed(2)}
        
        

          Price Change Percentage (24h):{" "}
          {cryptoDetails.market_data.price_change_percentage_24h.toFixed(2)}%
        
      

      

        
Additional Information
        
Genesis Date: {cryptoDetails.genesis_date || "N/A"}
        

          Homepage:{" "}
          
            {cryptoDetails.links.homepage[0]}
          
        
        

          Blockchain Site:{" "}
          
            {cryptoDetails.links.blockchain_site[0]}
          
        
      
  
    
  );
};

export default CryptoDetails;

Composant de barre de navigation

Le composant Navbar.js fournit un en-tête pour l'application.

import React from 'react'

const Navbar = () => {
  return (
    

    
Crypto Finder
  
  )
}

export default Navbar

Composant de pied de page

Le composant Footer.js fournit un pied de page pour l'application.

import React from 'react'

const Footer = () => {
  return (
    

    
Made with ❤️ by Abhishek Gurjar
  
  )
}

export default Footer

Démo en direct

Vous pouvez voir la démo en direct de l'application Crypto Finder ici.

Conclusion

Créer l'application Crypto Finder a été une expérience amusante et éducative. Il montre comment utiliser React pour récupérer et afficher des données, gérer le routage et créer une interface réactive et conviviale. J'espère que ce projet vous sera utile et qu'il vous inspirera pour créer vos propres applications avec React !

Crédits

• Documentation React : React Docs
• API CoinGecko : CoinGecko
• Documentation Axios : Documents Axios

Auteur

Abhishek Gurjar

N'hésitez pas à ajuster ou à ajouter plus de détails en fonction de vos préférences ou des fonctionnalités supplémentaires que vous avez peut-être implémentées.