React API Project — Cryptocurrency Finance Price Tracker App Using Hooks and Axios
we are going to create Cryptocurrency Price tracker app using React Api
So use create-react-app command in your system drive to create app.
npx create-react-app react-api-crypto-tracker-v1
Now our app is created.now i have to go inside our project directory.
cd react-api-crypto-tracker-v1
Next we can start our project using below command
npm start
Now our project has started
Next our project will open in internet explorer by default
and we can also open our project using localhost:3030 in any browser.localhost:3030 is default port of our project.
Next open our project in Visual Studio Code.
Next Click on Src folder and delete some file which is highlighted.
Next delete some code from index.js file
Next delete some code from app.js file
import ‘./App.css’;
function App() {
return (
<div className=”App”>
<header className=”App-header”>
</header>
</div>
);
}
export default App;
Next open terminal using ctrl+j
Next install axios in our project to fetching data from api
npm install axios
Using below Link we are fetching data.
Next we are using axios method to fetching data in useEffect
below our complet code.
import React,{useState,useEffect} from ‘react’
import axios from ‘axios’
import ‘./App.css’;
import Coins from ‘./Coins’;
//https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false
function App() {
const[coins,setCoins]=useState([]);
const[search,setSearch]=useState(‘’);
useEffect(()=>{
axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false`)
.then(res=>{
setCoins(res.data);
console.log(res.data);
}).catch(error=>console.log(error));
},[]);
const handleChange=e=>{
setSearch(e.target.value);
}
const filteredCoins=coins.filter(coin=>
coin.name.toLowerCase().includes(search.toLowerCase())
)
return (
<div className=”coin-app”>
<div className=”coin-search”>
<h1 className=”coin-text”>Search a Currancy</h1>
<form>
<input type=”text”
onChange={handleChange}
placeholder=”Search”
className=”coin-input”/>
</form>
</div>
{filteredCoins.map(coin=>{
return(
<Coins key={coin.id}
name={coin.name}
image={coin.image}
symbol={coin.symbol}
marketcap={coin.market_cap}
price={coin.current_price}
priceChange={coin.price_change_percentage_24h}
volume={coin.total_volume}
/>
)
})}
</div>
);
}
export default App;
Next we are handling event for search button.
Next we have to filter data in lowercase whatever we typed in search button in App.js
Next create one file inside src folder file name Coins.js
import React from ‘react’
const Coins = () => {
return (
<div>
</div>
)
}
export default Coins
Next create form inside App.js for taking input
Next import Coins.js in App.js
And passing props from app.js to Coins.js as input
Next whatever props we have sent as argument in Coins as input
we have to fetch all this in Coins.js
Coding will be below of Coins.js
import React from ‘react’
import ‘./Coins.css’
export const Coins = ({name,image,symbol,price,volume, priceChange,marketcap}) => {
return (
<div className=”coin-container”>
<div className=”coin-row”>
<div className=”coin”>
<img src={image} alt=”crypto”/>
<h1>{name}</h1>
<p className=”coin-symbol”>{symbol}</p>
</div>
<div className=”coin-data”>
<p className=”coin-price”>${price}</p>
<p className=”coin-volume”>${volume.toLocaleString()}</p>
{
priceChange < 0 ?(
<p className=”coin-percent red”>
{priceChange.toFixed(2)}%
</p>
):(
<p className=”coin-percent green”>
{priceChange.toFixed(2)}%
</p>
)
}
<p className=”coin-marketing”>
Mkt Cap: ${marketcap.toLocaleString()}
</p>
</div>
</div>
</div>
)
}
export default Coins;
Next we have desing our App.js and Coins.js in css.
Coins.css Code:
.coin-container{
display:flex;
justify-content:center;
}
.coin-row{
display:flex;
flex-direction: row;
justify-items: start;
align-items: center;
height:80px;
border-bottom:1px solid #d7d7d7;
width:900px;
}
.coin{
display:flex;
align-items: center;
padding-right: 24px;
min-width:300px;
}
.coin h1{
font-size:10px;
width:150px;
}
.coin img{
height:30px;
width:30px;
margin-right:10px;
}
.coin-symbol{
text-transform: uppercase;
}
.coin-data{
display: flex;
text-align:center;
justify-content: space-between;
width:100%;
}
.coin-pirce{
width:110px;
}
.coin-volume{
width:200px;
}
.coin-marketing{
width:240px;
}
.coin-percent{
width:100%;
}
.red{
color:#f006
}
App.css Code
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap');
*{
box-sizing: border-box;
margin:0;
padding:0;
font-family: ‘Montserrat’,sans-serif;
background-color:#1a1a1c;
color:#fff;
}
.coin-cap{
display:flex;
flex-direction: column;
align-items:center;
margin-top:64px;
color:#fff;
}
.coin-search{
margin-bottom:64px;
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
}
.coin-text{
margin-bottom: 32px;
text-align:center;
}
.coin-input{
padding-left:16px;
width:300px;
height:50px;
border-radius:4px;
border:none;
background-image: linear-gradient(
-225deg,
#ac32e4 0%,
#7918f2 48%,
#4801ff 100%
);
color:#e2e2e2;
}
.coin-input::placeholder{
font-size:large;
}
Now we can see finally our project is ready in browser
