Cryptocurrency Price Tracking App Using React. React Project

In this video tutorial, we will learn how to create a cryptocurrency price tracking app using React.

The app will allow users to view real-time prices of various cryptocurrencies such as Bitcoin, Ethereum, and Litecoin. We will utilize the Coinstats API to fetch the data and display it in a user-friendly interface.

Throughout the tutorial, we will cover key concepts of React such as components, state management, and data fetching. We will also implement features like search functionality and refresh button to update the prices.

By the end of the tutorial, you will have a fully functional cryptocurrency price tracking app built using React, which you can customize and extend according to your requirements.

#reactProject #CryptoCurrency #bitcoin

Hello everyone welcome back to code with your of YouTube channel in this video we will create a cryptocurrency app using reactjs okay so this is the demo and the app that we will build okay using reactjs we will use an API and you will become familiar with the how to use API

How to use parameter with API and how to use heater and also how to fix the data and record in a table like this okay and also the cryptos data uh data interface that okay like this okay the first one second one okay these are all the

Cryptos that you see and also how to apply the search and the filter on that okay this is the real time data of the cryptos so now let’s okay first of all uh write here U for example I would like Bitcoin just Bitcoin okay ethereum see and Salon no records Sol

Okay so whatever you are searching so it will just uh print the data based on that data okay based on that you have searched so this is the cryp data data and the crypto up that we will build in this video and let’s get started okay so after creating your react

Project react app okay just we should install um one package our library I have already installed that okay come here to the package Tes and this access okay just install install npm in the terminal write npm install AXS after installing the AXS uh now we will start

Our coding okay so to create this um cryptocurrency app so let’s yeah in this op. jsx I will write the whole code in this one okay so for this currency up so first of all we will let’s assign a class name to this D element which is up

And after that here we will just write a name for example crypto curreny up or I will just separate these two word and and after that we will have an input Fields where we will search Okay placeholder search WR something like this okay and after that we will create a table okay

Where we will display the whole cryptocurrencies that we have okay so for that we have the table and the T head and inside the table row and inside the table H okay the header of the table so the first thing that we would like to

Display and F from the API that is uh to rank okay and the second thing let’s copy this one and here we will write the second thing is the name of the cryptocurrency and the third thing is to display the symbol and the fourth let’s edit them

Now yeah the fourth thing is the the market with us okay market cap let’s come down here and the fifth thing is that which is price with us okay and the sixth thing with us is the um available Supply and the last thing is volume 24hour okay so let’s do

It so these are something crypto related to the cryptocurrencies that we will pit okay volume part 24hour like this so this is the heater of our table that we will display okay so now down from that we will display our data okay we will let’s T bu so before displaying the data right

Now we don’t have any data because we didn’t fit the data so to fit the data for that first first of all we should create um two State variable const first search sit search is equal to use State hook okay uh this search is used whenever we write something in this

Input field we will store that inside this search okay to store that for that we will use onchange event on change and we will call now we will just pass event create an arrow function and here we will call the sit search method and we will pass e. target. value whatever we

Are writing in this input fields that will be stored inside this search and let’s create a second um State variable which is um that will be our um currency okay current C and sit currency uh which we will fix from the API sit current C and this is an array with

Us now we will fix the recards Okay so to fit the records for that we will automatically whenever we come here to the run the application so we will fit the recard so for that we are using the uh use effect hook so let’s use use effect it has two parameter the first

One is a call back function and the second parameter is array dependency okay this array dependency means that it will render just at the first time whenever we run our application so now let’s uh first of all we will import the axis axus okay let’s name it axus uh from AXS

Okay so after importing XS now we will use the git method with XS okay XS that has imported let’s remove this one okay dog so now let’s write our URL so which API we should use okay to get the um data of Cs okay so for that let’s move

To the browser uh this okay uh open API coin states. op okay this website we will just use this website okay just create an account simply just after creating account you will come here to the dashboard and the dashboard generate a key here you will see the instead of

Delete API key button you will see generate key okay so press that it will generate a key for you okay this is your key and copy this key after copying this key now we will use this API okay so let’s um so adj just um this is in

Examples okay this is the documents that you can configure so I have already used it now I will just copy the URLs let’s copy the URL contrl C okay after copying the URL let’s let’s paste it here so after pasting the URL uh now let’s pass the

Heers okay so for the heaters in the heaters we will pass the apepi key okay heaters here we will pass the API key let’s move back to the browser and we will pass this one okay this is our API key and that is name of the API key like this we

Will write like this so after writing this okay uh passing the API key then we will get a response. then we will get a response now we will console.log response first of all we will check our response okay do cat if there was any error so then we will console.log the

Error so let’s see it and now let’s move okay first of all we will check let’s run our application CD client folder and npm run de so we will run our react application let’s open this URL so it came to the let’s move to the uh console

So after coming to the console see we got this data okay so let’s open it in the data do result okay in the result we got this data okay this is our data we have 20 records Bitcoin etherum tther binance coin and so a lot of um cryptocurrencies okay that you see but

Let’s uh add some parameters okay for example you would like to change the currency and also you want to just to um uh pass for example the limit okay so for that we will pass the parameter to our URL um question mark then for example limit is equal to 10 okay so

Let’s save it now let’s check the result now we will see 10 okay let’s check it the data and the result now we have 10 records okay so we can limit it let’s make it back remove it by default we have 20 and also we can pass the

Currency currency is equal to for example in IND D INR okay Indian rupees so you can change it also let’s save it and let’s check it okay uh before let’s check it first of all the Bitcoin price this is um 42763 okay so now let’s check in the ndn

Rupes the price of uh let’s where yeah just come here here down this result data do result and the first one Bitcoin see now the price 35 and something like 3 lakh or 35 lakh okay like this one so it is that you can change the currency also so now let’s I

Will remove it also Let’s uh save it and now let’s go back okay um to print our data now instead of consoling it let’s assign it to the currency okay so we will WR sit currency or sit crypto okay sit currency uh response. data. result okay result that we got so

Now let’s print the data okay using let’s print the data here so let’s use the currency do filter I will use first of all the filter method okay I will show you the purpose of filter method okay uh filter then we will get a value let’s write here return a value

Dot name dot uh to lower case first of all I will change it to the lower case because the filter it means that I’m filtering whenever I would like to search something in the input Fields so first I will filter the data okay it means that filter I used for searching

Purpose do lower case do includes includes uh value uh sorry search do to lower case okay it means that it will filter our records based on this search okay okay search okay search at to lower case convert them to the lower case and search that data and

Return just those records which we have searched and now here I will use map okay map function okay to return all the recards uh map and here we will get again a value and let’s return uh now we will return a table row to print the records in the

Table so first of all we will print the rank okay first we have the rank so for that let’s write table data and here we will print uh value. Rank and let’s add a class name class name rank to this one okay uh and the second one is that we will print

The name of our um um crypto okay so to print that let’s write table data and to this table data Data before the name we will print the logo of our crypto okay so to print the logo for that first of all we will print the logo inside a link

Okay whenever we press that link so we will move directly to that website and inside this we will print the image of this it means that we will print the logo first of all okay so the logo is to print the logo for that we have value do um image okay

Do icon okay value. icon will print the logo of that um crypto and here we will assign crypto HRI is equal to um and value. website URL okay like this value. website URL so it will move whenever we click on the icon it will move directly

As to the website of that crypto and now down from this we will print the uh let’s write ptag print the name of the crypto value Dot name close it so this was for in here I will add a class name uh which is logo now down from that we will print the

Third which is a symbol okay so to print the symbol for that let’s move come here and table data inside the table data uh we will print the symbol okay value do symbol symbol and here we will assign a class name to this table data class name

Symbol and another one is that after symbol we will print market cap okay so for that let’s table data and we will print the um value market cap okay so after printing it let’s uh for example this is we are uh now printing the data in US dollar okay

So I will just write the dollar sign before that then we will print table data which which one is after that the price okay so for the price we will use value. price uh so for the price we will use now a twoof fixed uh method okay it

Means let’s first of all I will use that what it do this twoof fixed method first of all convert this our price to number to string after that it fixed the decimal points the decimals okay so to fix the decimal for example we want just to print two decimals okay with the

Price so this was the usage of uh two fixed method let’s write here the dollar sign and after that we have the available Supply okay so let’s do it table data and let’s print that value. available Supply available Supply Supply okay and the last one is

The volume okay so to print the volume table data and that is value value do volume dot we will also fix this one okay to fix the volume okay the decimal finds will be zero okay no decimal finds with this this was the volume that we

Has printed so it was all about the data that we have sprinted I think there is no error yeah let’s see it now we will check it let’s come here to the browser uh let’s check it uh to low spilling mistake okay lowercase spilling mistake just come

Here that two lower no we should remove this s Al so this one lower case let’s save it let’s check it now see right now we have the data okay but right yeah we didn’t get the data and C cannot read properties if I reading to lower case uh a in

Up again uh we think to lower case it means again we faced with this error let’s check it okay let’s check it so let’s first of all convert this um search by the default value should be string empty string let’s check it now so yeah we got that okay before that was

Undefined so whenever we were using this to lower case with undefined or n so uh it was just generating an error so this is our recards now let’s close it okay so now I will add some CSS code okay so to Print and Design the uh front end

Okay so for that I will just write some CSS code I just come here and here I will add up. CSS file CSS and here I will write some CSS code now so I have added this CSS code okay so let’s first of all R this is for up

Component for up element okay for H1 for input field for the table and for the T table head and table head T okay fting and T table Row for the rank for the logo and logo image and for the symbol so then I have imported it inside the

Up. GSX okay after importing it now let’s check it okay it looks like this okay the design is very well right now so we have these 20 cryptos now let’s search okay first of all for example to apply the filter the filter methods that we have applied

At the start yeah let’s check it okay this is the work of the filter method okay if we search something so it will first of all filter our data then it will display to us for example we would like to search BN b c th C ethereum

Tther Le just whatever contains the th we search Bitcoin C Bitcoin so whatever you are searching so it will display that records to you by default okay so this was um a cryptocurrency app a first okay we used API and we displayed the recards and um these are the prices and

Also if you would like to convert the U currency so you can convert it to PKR usdt INR or other um crypto currency that you would like so you can convert to that also right now we displayed that inside in the usdt dollar okay so I hope

This video was helpful for you if you like this video Don’t forget to subscribe our YouTube channel thanks for watching one thing else that we press on this um icon so okay we will move directly to the website of this um Bitcoin okay and which one you click so

It will directly move you there