Building a Crypto Finder App with React-CSS Tutorial-php.cn

Building a Crypto Finder App with React

Introduction

Cryptocurrencies are all the rage these days, and with the plethora of coins available, it’s essential to have a tool to easily search and view details about them. The Crypto Finder app does just that. Built with React, this app provides a seamless experience for users to search, filter, and view cryptocurrency details.

Project Overview

The Crypto Finder app consists of:

A Search Interface: Users can search for cryptocurrencies by name.
A List of Cryptocurrencies: Displayed as cards, showing basic information.
Detailed View: Clicking on a cryptocurrency card shows more detailed information about that coin.

Features

Search Functionality: Filter cryptocurrencies by name.
Dynamic Routing: View detailed information of a selected cryptocurrency.
Responsive Design: Ensures the app looks good on different screen sizes.
Loading Indicators: Show a loader while data is being fetched.

Technologies Used

React: For building the user interface.
Axios: For making HTTP requests.
React Router: For routing and navigation.
CoinGecko API: For fetching cryptocurrency data.

Project Structure

Here’s a quick overview of the project structure:

src/
- components/
- CryptoFinder.js
- CryptoDetails.js
- Navbar.js
- Footer.js
- App.js
- App.css

Installation

To get started with the Crypto Finder app, follow these steps:

Clone the Repository

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

Copy after login

Install Dependencies

   npm install

Copy after login

Start the Development Server

   npm start

Copy after login

Open your browser and navigate to http://localhost:3000 to see the app in action.

Usage

Search for Cryptocurrencies: Type in the search box and click "Search" to filter the list of cryptocurrencies.
View Details: Click on a cryptocurrency card to view detailed information.

Code Explanation

App Component

The App.js component sets up the routing and includes the Navbar and Footer components.

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;

Copy after login

CryptoFinder Component

The CryptoFinder.js component handles fetching and displaying the list of cryptocurrencies. It includes a search bar for filtering results.

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;

Copy after login

CryptoDetails Component

The CryptoDetails.js component fetches and displays detailed information about a selected cryptocurrency.

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;

Copy after login

Navbar Component

The Navbar.js component provides a header for the app.

import React from 'react'

const Navbar = () => {
  return (
    <div className="navbar">
    <h1>Crypto Finder</h1>
  </div>
  )
}

export default Navbar

Copy after login

Footer Component

The Footer.js component provides a footer for the app.

import React from 'react'

const Footer = () => {
  return (
    <div className="footer">
    <p>Made with ❤️ by Abhishek Gurjar</p>
  </div>
  )
}

export default Footer

Copy after login

Live Demo

You can view the live demo of the Crypto Finder app here.

Conclusion

Building the Crypto Finder app was a fun and educational experience. It demonstrates how to use React for fetching and displaying data, handling routing, and creating a responsive and user-friendly interface. I hope you find this project helpful and that it inspires you to create your own applications with React!

Credits

React Documentation: React Docs
CoinGecko API: CoinGecko
Axios Documentation: Axios Docs

Author

Abhishek Gurjar

Feel free to adjust or add more details based on your preferences or additional features you might have implemented.

The above is the detailed content of Building a Crypto Finder App with React. For more information, please follow other related articles on the PHP Chinese website!