Créer une application Crypto Finder avec React

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 leur 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 affiche des informations plus détaillées sur cette pièce.

Caractéristiques

• Fonctionnalité de recherche : filtrez les crypto-monnaies par nom.
• Routage dynamique : affichez les informations détaillées d'une crypto-monnaie sélectionnée.
• Conception réactive : garantit que l'application s'affiche bien sur différentes tailles d'écran.
• Indicateurs de chargement : affichez 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 bref aperçu de la structure du projet :

• src/
  • composants/
  • CryptoFinder.js
  • CryptoDetails.js
  • Navbar.js
  • Footer.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émarrez 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 (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<CryptoFinder/>}/>
        <Route path="/details/:id" element={<CryptoDetails/>}/>
      </Routes>

      <Footer />
    </div>
  );
};

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 (
      <div className="loader-box">
        <div className="loader"></div>
      </div>
    );
  }

  return (
    <div className="crypto-finder">
      <div className="input-box">
        <input
          type="text"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          onKeyDown={handleSearch}
          placeholder="Search for a cryptocurrency"
        />
        <button onClick={handleSearch}>Search</button>
      </div>
      <div className="cards">
        {filteredCrypto.map((val, id) => (
          <div className="card" key={id}>
            <img src={val.image} alt={val.name} />
            <h1>{val.name}</h1>
            <h4>{val.symbol.toUpperCase()}</h4>
            <h4>₹{val.current_price.toFixed(2)}</h4>
            <Link to={`/details/${val.id}`}>
              <button>View Details</button>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

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 (
      <div className="loader-box">
        <div className="loader"></div>
      </div>
    );
  }

  return (
    <div className="crypto-details">
      <div className="basic-details-image-box">
        <div className="basic-details">
          <h1>{cryptoDetails.name}</h1>
          <h4>{cryptoDetails.symbol.toUpperCase()}</h4>
          <h4>
            Current Price: ₹
            {cryptoDetails.market_data.current_price.inr.toFixed(2)}
          </h4>
        </div>
        <div className="image-box">
          <img src={cryptoDetails.image.large} alt={cryptoDetails.name} />
        </div>
      </div>
      <div className="detail-desc">
      <h3>Description :</h3>
      <p >{cryptoDetails.description.en}</p>
      </div>


  <div className="market-and-additional">
  <div className="market-data">
        <h2>Market Data</h2>
        <p>
          <b>Market Cap: </b>₹
          {cryptoDetails.market_data.market_cap.inr.toLocaleString()}
        </p>
        <p>
          <b>Total Volume: </b>₹
          {cryptoDetails.market_data.total_volume.inr.toLocaleString()}
        </p>
        <p><b>24h High:</b> ₹{cryptoDetails.market_data.high_24h.inr}</p>
        <p><b>24h Low:</b> ₹{cryptoDetails.market_data.low_24h.inr}</p>
        <p>
         <b> Price Change (24h):</b> ₹
          {cryptoDetails.market_data.price_change_24h.toFixed(2)}
        </p>
        <p>
          <b>Price Change Percentage (24h):</b>{" "}
          {cryptoDetails.market_data.price_change_percentage_24h.toFixed(2)}%
        </p>
      </div>

      <div className="additional-info">
        <h2>Additional Information</h2>
        <p><b>Genesis Date:</b> {cryptoDetails.genesis_date || "N/A"}</p>
        <p>
          <b>Homepage:</b>{" "}
          <a
            href={cryptoDetails.links.homepage[0]}
            target="_blank"
            rel="noopener noreferrer"
          >
            {cryptoDetails.links.homepage[0]}
          </a>
        </p>
        <p>
         <b> Blockchain Site:</b>{" "}
          <a
            href={cryptoDetails.links.blockchain_site[0]}
            target="_blank"
            rel="noopener noreferrer"
          >
            {cryptoDetails.links.blockchain_site[0]}
          </a>
        </p>
      </div>
  </div>
    </div>
  );
};

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 (
    <div className="navbar">
    <h1>Crypto Finder</h1>
  </div>
  )
}

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 (
    <div className="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
  )
}

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 : Axios Docs

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!