Build a Cryptocurrency Dashboard with React: Fetching API Data for Real-Time Updates

hello everyone welcome back to my Channel today we will be building a cryptocurrency dashboard using react and exos to fetch realtime data from an API we can search any cryptocurrency uh this tutorial is beginner friendly so if you are new to apis and data fetching don't worry I will teach you in the easiest way possible all the data of this cryptocurrency is coming from a remote server we will be using repeat API to fetch this cryptocurrency data so let's get started so setting up the project first let's set up our project so create a folder let's say folder any folder and open it in vs code just type CMD and then code Dot and enter so it will open our folder in vs code and close this okay so now open Terminal and create a react project so to create a react project we use npx create react app and the folder name so I will give crypto dashboard C PTO Dash b a r d okay crypto dashboard and hit enter it will take some time so till our project get installed we will talk about what is API and exos so first we will talk about API so API stands for application programming interface it's a way for different software applications to communicate with each other in simple terms an API allow us to send request to a server and get data back uh for example in our project we are using an API to fetch cryptocurrency data okay so we we are using API to face this cryptocurrency data from a remote server okay so now talk about exos what is exio so search for exos Okay so open the first uh second website exos okay so exos is a JavaScript library used to make HTTP request we can exos to fetch data from an API send data to an API update data or delete data so to install exos in our project we will use npx npm install exos Okay so our project is created so now uh open this folder in the vs code so to open the folder we use CD command and then write folder name crypto Dash board okay and now now we will install exos to install exos we use npm I exos okay so exos is installed and we can check exos installed or not in react. Json file and this is our exos okay so let's remove all the code we don't need this so okay remove and we use react fragment for this Now setting up the API we will be using the investing cryptocurrency Market API from rid API to F out data so you can search repeat API and open the first website repeat API you will need to sign up for an API key if if you are coming for the first time I already sign up and then search for an API like investing uh investing cryptocurrency Market this one open this and if you are using first time then you need to subscribe this API key I already subscribed so if subscribe and uh you should apply for free subscription plan then you you will get this end test endpoint button okay so go to the coins. list API because we need this type of all the list of cryptocurrency data and then select nodejs here because we will be using nodejs so select nodejs in Target and client use uh select exos after selecting we will check the API so click on test endpoint so what data we are getting we can check check here okay so we are getting nested data like data then zero and then data and then here is crypto data we need this data this contain ID name of coin country and there are too many data okay so we will be using this data in our API so to use this data first so copy Cy this code con option and paste it in our vs code and paste it above the function like this the con option contains like method we uh method is get because we are getting data from a server and the URL for our API and this is the header our API key all this now uh we need to import exus so write import exos from exos okay and copy this one try and catch block and come inside the function f we will be using use effect hook so write use effect and then this is the Syntax for use effect hook and we are use effect Hook is used to perform side effects in our component uh side effects include things like fetching data directly manipulating the Dome uh in our in our case we are using it to fetch data from API so and the the use effect H will return an empty array because here the empty means this effect runs only once and inside use effect we Define an asynchronous function called Fetch data so const fetch data okay and this will be a asynchronous function so a sync and then aror function and the paste our code here okay and we will call the function here fetch data so fetch data function now start our application npm by using the command npm okay and now go to the right click and go to inspect and go to console here here we are getting our API data this is object and data inside data there is zero and inside zero screen data and inside screen data we are getting our crypto data okay so this is the nested data we need to fetch this data directly to fetch this data directly we are using nested chain nested chaining like this one okay so we will write a logic const crypto data okay const crypto data equal to response FL data and if data is available then inside data we need data because here this data okay and then okay we we made some mistake inside data there is data and inside this data there is called zero because this one is so we mention zero here and then again if data is available then go inside screen data screen data this screen data and if data is available inside the data go to inside screen data that is crypto data crypto and data okay and if no data is available then return empty array so this is the and now we will console.log this data to see whether we are getting any response or not so right extracted data crypto data okay now going go to our application and refresh it and okay okay so we are getting our extracted data here so our API is working fine now we have to use use State hook and so import use State hook use State because we need to change our coins state for this we are using use State hook and create inside function f create use State H const uh coins set coins equal to use State and initialize it with empty array because at first our coin is empty and then we will set our set coins to set coins to crypto data okay so firstly our state is empty err and then we are setting set state to crypto data so our state will contain the crypto data now move on to the this section we will create a search bar first we will create a search bar like this okay so now remove this fragment and create a d with coin F uh okay create a DE and give it a class name point a [Music] [Music] and here we are getting an error uh uncode runtime error so what mistake we made okay so we have to use use estate hop instead of use effect sorry for the mistake use estate and okay so here is our search a currency and crypto currency data now we have to make a function handle submit to handle this data [Music] so write a function con handle submit and this will take a parameter of E and to to handle our search query we need to create another use State hook so come here and create just copy paste this uh sorry okay create new one const search set search and initialize this with empty string now come to our function write set search set search is e do Target dot value and write on change equal to handle submit so our search function is completed and you can search any query whenever data is display okay okay so now create a new component here create a new folder component see uh compon name and create a file point do jsx and one CSS file for this coin dot CSS uh this is a functional component that takes several props uh props are the parameters so first we will write r a f c this will give the basic template and then here here first import our CSS file import Point dot CSS in this component we will take several props props are parameters that allow us to pass data into our component from parent component so we will pass data from this coin component to this fjs component okay so for this we have to Define several props so let's start [Music] [Music] [Music] now we have to write Logic for price change so here is our app so we have to write Logic for this price change if the price is below zero then the color will be red and if the price is above zero the color will be green [Music] [Music] [Music] now we are destructuring the propes so we can use them directly okay so here we are D structuring the propes now import this component in fjs now now we will create a filtered function that filters the list of coins based on the user search input okay so come below this and create a function con filtered coin [Music] now we will use map function to map the coin data so come [Music] [Music] FL is the our our cryptocurrencies image [Music] [Music] Che [Music] [Music] so here are all the cryptocurrency coins with the the data like image coin name price and the price change Etc now we will add CSS in this coin first we will see if our search function is working or not like if you search do e Dodge so no Dogecoin is found like uh if we write Bitcoin so there is no Bitcoin in the current data and there is U mcoin is white heart carry if we search carry then what we get like carry Okay so sear function is working correctly [Music] [Music] I [Music] [Music] sh [Music] [Music] do [Music] [Music] [Music] okay so here we made a mistake we are not getting market cap okay so let check what mistake we did okay so we use this instead of this we should use this inst market cap plan okay to change in fjs file right plan here okay and check okay so now we are getting market cap data but it's very long so we will convert this value into billion dollar or let's say million dollar okay perfect we can also change this similar way so finally we have successfully built a cryptocurrency dashboard using Rea and exos fetching real time data from an API and displaying it in a well structured table so if you found this video helpful please give it a thumbs up and subscribe to my channel for more tutorials like this thanks for watching and I will see you in the next video

Channel: Sanamio

Views: 14

Keywords: React Cryptocurrency Dashboard, Build Crypto App with React, How to Fetch API Data in React, Building a Cryptocurrency Website, React Development for Beginners, React and Axios API Fetch, React.js Cryptocurrency Project, React project for beginners, React API Tutorial for Beginners, Crypto Data Fetching with Axios, Axios tutorial in react, Rapid API tutorial in react, Fetch data from Rapid API

Id: v0UwEJaQOxM

Length: 32min 54sec (1974 seconds)

Published: Mon Jul 01 2024