DEV Community

Cover image for Building a Crypto Finder App with React
Abhishek Gurjar
Abhishek Gurjar

Posted on

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:

  1. Clone the Repository
   git clone https://github.com/abhishekgurjar-in/Crypto-Finder
   cd crypto-finder
Enter fullscreen mode Exit fullscreen mode
  1. Install Dependencies
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Start the Development Server
   npm start
Enter fullscreen mode Exit fullscreen mode
  1. 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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Author

Abhishek Gurjar


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

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.