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
- Install Dependencies
npm install
- Start the Development Server
npm start
- 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;
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;
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;
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
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
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
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.