React API Project - Cryptocurrency Finance Price Tracker App Using Hooks and Axios

yo what is up everyone so today i made this app in react and pretty much it is a cryptocurrency price tracker and you can see this is actually data from the api so if i were to refresh the page which i'll do right here you will see that the prices and also the percentages in terms of whether it's positive or negative aka the red or green they will change so you can see there these some of these updated here and also the prices here updated too and this is very similar i say to the design of the actual site where i got the api from so this is a real site where the api is from you can see it's the same concept with the rows and then the price i didn't add all the fancy like charging stuff but you get the point and then also if we were to go ahead and let's type in bitcoin if you guys don't know anything about cryptocurrency does it not matter if you're just trying to learn react and apis then definitely this video is for you and then also i searched like any other one ethereum let's see litecoin i just type in random letters you can see that they update in real time and you can see right now the prices are they're not updating but obviously but at least the search for specific um currencies on here and also if i were to i can change the amount i show like for instance if i only want to have 10 because right now it's at 100 so i can just scroll for 100 but i sit here and just change that to 10 now we go back scroll it back now we only have 10 so that's cool little effect there so you can't control which how much uh things you want to show on your page and this is super simple the api is public so literally you just copy the link and you're set to go so no logging into anything and no having to create an account this is probably the easiest tutorial to follow along with so if you want to learn how i created this and definitely watch the video already to the very end without further ado let's hop into my code editor and let me show you how i made this all right so here i am on my terminal so i'm gonna go ahead and type in npx create react app and then let's just call this react api and let's just say crypto tracker v1 right that's a lot of type in but you can name me whatever you want to that's what i'm just name it for here and then once this decides to finish uploading i will see you on the other side all right so i'm gonna go ahead and cd into the file we just created so mine is react api i support crypto wrong do you use ol as long as you type in whatever you name the file here and then i'll press enter and then i'm gonna go ahead and i'm gonna say code space dot if you don't have this set up then quick google search on how to have it implemented but pretty much just opens up my vs code automatically from the terminal and then once once i have vs code opened up i'm just going to go and do command j shortcut key and then i have yarn so if you have yarn obviously do yarn start but if you don't have yarn it's gonna say npm start so just do whatever the second line says so mine is pretty much yarn start press enter and have this arrow that pops up so it says skip free free flight check let me copy this line if you don't have this error don't worry about this but i'm gonna go over to this left side right click click on new file and then i'm gonna say dot env just paste this error code in here save it and then let me just press the up arrow yarn start one more time again if you don't have yarn just do mpm start alright so here we have the react app loaded up perfect so if you have react before you've used it you know the drill pretty simple self-explanatory and now let's go ahead and let's start cleaning up some files really quick so go over to the src folder let's click on setup test i'm gonna hold shift and click on the logo so i can automatically delete all three of these files we don't need these three and then also index.css i don't need this uh let's see app.test i don't need that and then let's go to index.js let's get rid of this code below let's get rid of this code here let me also index.css save it here and then let's go to app.js get rid of the logo line and then let's go in here and let's just do api save it see perfect all right so now the code is cleaned up everything is working fine so now let's go ahead and start editing this code so in this function we're going to actually get the api so let me show you where to get the api so we can actually get started alright so let's go over to this site called coingecko.com and pretty much here let me just make this full screen here once you're on the site here's the namecoingecko.com all you need to do is go and hover over to the resources tab and then you'll see the api here and i'll probably i'll probably put a link somewhere in the comments or if someone wants to do it they can too in case you don't want to type this in and then once this loads up just click on get started and then i'll bring you down here it's on the same page just scroll down and then you have all these different options the one i utilize is under coins i went to the second row right here this one says coin slash markets then i click on it and then now this is going to open up here now you might be overwhelmed like what's going on all you need to do is click on this try it out and then in here you type in your currency i'm in the us so i'm going to go with usd feel free to do euros i think that's japanese currency and then the rest you can skip this here this is auto filled by default this is telling you how many searches you want to show or i guess how many different cryptocurrencies you want to display at a time is default by a hundred but you can edit this in the actual code if you want to and then everything else here is false there and then all you need to do is go to this execute button click on execute and then what's going to happen is going to showcase these links and the one you want is basically the same thing just you need this link right here so get the request url copy this command c and then if i were to paste this into a browser you'll see the data so here i went ahead and pasted it and now you can see all of the data is here and you can see here we have the id so the name this id and then also the name so bitcoin here there's the image aka this was the logo picture we saw the current price market cap volume price change etc you know supply all that stuff and then this goes down rinse and repeat for every other cryptocurrency here so you know nothing about cryptocurrencies it doesn't really matter all that matters is how to actually access this data in this api so looking back at the actual request url you can go back and check it but pretty much it starts after the v3 coin markets and then it shows currency we have the usd and then market cap description per page you want to have 100 displaying and then all this other code right here so now we have once you have this link so make sure you have this copied so command ceiling keyboard now let's go ahead and let's just paste this above the function for right now and just just have it there but we're not actually going to keep it there and then what i want to do is go inside of the function the app function press enter and then we're going to place this inside of use effect and we're also going to need to install axios and all we're going to do here is go and type in or on your keyboard command j we can go ahead and click on the plus sign open up another terminal and i have yarn so i'm gonna say yarn add axios if you don't have yarn you would say npm install and then say axios and then press enter and this pretty much allows us to get the data from the api and it's super similar to fetch but it's just the way you write the code a little different but once you have that installed just go to the top and then let me place this right here inside and say import axios from axios and then also while we're here we're going to be utilizing use state and use effect hooks so might as well add this up here so we're going to say use state and then use effects and then here let's go ahead and just write the function for the actual api and then after that we'll add the state and all that fun stuff so now let's just go ahead and i'm going to say use effect and use effect i'm going to take in an arrow function and then here's where we utilize axios so pretty much you can do some further research on this but it's pretty basic once you do one time and then after that you can obviously learn more about it but you're just going to say axios dot get and then in parentheses this will pass in the api url we have here so go ahead i'm gonna command x that to take it and before we paste it in put some quotes and then paste it in and then outside this parentheses we utilize promises so if you don't know about promises there's a bunch of really good videos on youtube that show like a in-depth definition i would say more of an explanation of it but pretty much we're going to say dot then and then in parentheses here grab the response so res for short here then the error function and it's pretty much short answer it's like think of it as something has to happen and then this is gonna happen so that's like the easiest way to say but you'd have to watch alternative resources if you still don't know too much about it to get the full understanding but pretty much in here in this then we're going to say set coins now so we're using state again here and we're actually going to create the state up below this function so let's just say const and then an array or brackets and you say coins is the value and then the function that's going to update it is going to be set coins and then equals to use state i'm going to pass it in as an array now here's set coins in parentheses we're going to say rest.data now if i were to go in console.log res.data you'll see so let's actually save this really quick and see if we have any errors no errors and then i'm gonna do command shift c go to console and now you can see that we have this data showing but it's doing it like infinitely but pretty much you can see here that this shows all of our data for the 100 the coins that we have and then we can access in here but let me actually go ahead and exit this out and that's the data that we're getting right there and then after that let me insert this little semicolon i want to have a catch so this is just a way to let you know if there's an error and then i was going to pass an air as the parameter and the error function and usually you'll see people say console.log air so if i were to say console.log error and then i save well actually let's put in an empty right here because i only wanted to render this one time and then let's go ahead and you're not going to see an error right now but if i were to like misspell something in the url for instance let me just put like random numbers and save it nothing's going to show up yet but when i open up the console you'll see that there's this error and if you're never seen it or you're just first time using promises or just seeing that catch you probably won't get you might think this is like part of the code so an easier way to show it is if i just show you an alert not all was that right there and then inside of it's yo there's an air actually let me just say let me just say air keep it short and then i save and now you can see that it automatically just shows this alert saying there's an error because this url right here is random there's random numbers that i added that should not be there so now if we save it then there's nothing happening so pretty much that's just showing the error in case something went wrong but since you're following along this tutorial you just follow whatever i type and you wouldn't have to worry about that so now you have your good here so no errors perfect and then let's go ahead and let's start editing let's start adding the jsx so here let's go into this actual return and let me command b this out let's get rid of this h1 and for the class app let's just change this to now volumes do coin dash app and then in here i'm going to create a div and just call this dot coin dash search press tab so my auto fills it for me if you don't have that just type it out manually and then here i'm going to say h1 dot coin dash text and feel free to name these classes whatever you want to and let me just say search a currency and then under here we're going to create the form so someone press tab and i don't need any action on here classes so inside of the form now let me scroll up real quick i'm gonna do input dot coin dash input press tab here i'll leave the type as text and then place holder let's set that equal to search and then also i'm gonna add a on change function on this eventually but let's keep that off for now and then underneath the form then the next div and then underneath this div let's press enter so actually my bad underneath this last dip but inside we're still inside of the coin app and then here is where we're actually going to map through the coins and then display all of the different values that we showcase but since we haven't created that component yet let's just wait off on that and then also we're gonna have to add some more code but let's just go ahead and before we do anything let's just save this right now it's probably gonna see yeah we have this simple little ui right here and then let's go into the src right click and just do a new file and then we're going to call this coin.js and then here is a snippet that i highly recommend you install if you don't have this just type es7 and then you'll have it this one right here and then pretty much whenever you do a little shortcut for instance let me go right here and let's do r f c and this is creating an error function for you automatically and you export import just like that you don't do anything like besides just type that shortcut in and then what i want to do is actually i want to return a bunch of jsx so let's do div in here let's just say class name equals to coin dash container and then underneath this i'm going to create the row so i'm going to say coin dash row and then under that we're going to create the coin and then here's the image so i'm going to say img press tab and then in the src let's do curly braces and let's target the actual image for the oh let me just say crypto we just put that for now and then underneath that i want to put an h1 and then i want this to be the curly braces and i don't know why it's shifted over there but inside this curly braces i want to have the names let me save this really quick so it fixes and then underneath this i just have a p tag let me just call this with the class of coin dash symbol and let me make it bigger and then here do curly braces again and then i'm gonna pass in symbol save it there and then underneath this div i'm gonna press enter and then i create another div called coin dash data press tab then underneath that i'm gonna have p tag dot coin dash price and then i have a dollar sign curly brace price closing dollar uh curly brace and then underneath this p tag i'm gonna do another p dots coin dash volume and then here i'm new dollar sign curly brace and we're going to target volume dots and i want to make this to where it displays the actual commas inside of the numbers so i'm going to say two locale string and then parentheses and then the curly brace here and then let's make this a little bigger and then underneath this we're gonna have some more jsx so let me actually go ahead and let me just save this really quick and then let's destructure this too so we can pass in some data because i want to be able to show you like what's actually showing right now and then we can go back and then refinish this off but pretty much i'm doing curly braces here and i say pass in what we have so far so we got the image name symbol price and volume so let's just say name image symbol price comma volume for now let's keep it for now and then let me do command b and let's go to app.js and then inside of here let's create a function that gets the values and also it maps through all the data so let's go ahead and let's just say const search and then let's do set search here let me fix my spelling and then let's just set the equal to use state and i just want that to be empty string and now let's go under the use effect right here and i'm going to say handle change let's create a handle change function say const handle change is equal to e which is equal to curly braces and i'm going to use the set search and then i want to set that to the e to target that value so whatever you're typing in and then i want to have this on the actual input so here i can say on change equal to curly brace handle change and then underneath that one i want to create a function that allows us to filter the actual coins and then displays whatever we type in so say cons and i just call this filtered coins so this equal to coins dot filter and then i'll pass in coin as the parameter here and then i want to say let me just go on another line and get rid of this little thing and then i'm going to say coin dot name so if it matches coin.name dot i want it to be two lowercase and dot includes search dot to lowercase so this is essentially making everything we type in to lowercase so that it matches it doesn't matter if we like misspell it or capitalize it and then now underneath this div with the form right here so under form next div press enter then we're going to do some curly braces action here and we're going to say filtered coins and now we're going to map through this we're going to say mapping and we're going to pass in coin error function here and then we're going to return in parentheses the coin component so i'm going to do the opening tag coin and then i'll press enter and it should auto import it at the top so i have it auto imported here if it doesn't auto import for you just go ahead and type that in import coin from dot slash coin or you can do control space it automatically shows it up here just press enter there and then when i pass in you have to have a key so that react doesn't yell at you and then we're gonna say coin which is the parameter we have up right here this one and then we'll say dot id and that was if you go back to the data file i'm just using this one right here and then on the next one let's do name is equal to coin.name which again if we go back to coin this is this is what we're targeting right here so we named it name so we're gonna say coin.name and then i have price is equal to and i don't think i have price added so let's just add uh i think i have well let's do image yeah let's do image first image equal to curly brace curlybracecoin.image let me see let's close it out really quick save it one second let me put these on a different line so you can see what's going on save it yes for some reason let me do it so let me just do it like this manually i have to add more code to make it work but let's go ahead and do symbol equal to curly braces of coin dot symbol and then let's do it's telling me right now we have to do volumes let's do actually i have yes so let's do volume equals to curly brace coin dot market underscore cap so volume is what i called it but if i show you market cap that's pretty much where is it at i think yeah that's the one right here it's pretty much the volume in terms of how much money is being circulated at that point and then let's do uh price yeah let's do price equals to curly brace coin dot current underscore price which again we go here that's what they call it here and let's save this now let's see if we have any errors so now you can see we have some visuals going up so now you don't go crazy and then we can finish up now so pretty much here this function lets us filter through it and i don't think let's see if it works right now yes it looks like it's working fine right here perfect so it's already working everything's there all we need to do is just finish up the coin component so i'm gonna go back here and again if right now if you see the all the volume right here you're probably wondering what is this two locale string so if i were to erase this and save it notice how the commas just disappear and we don't want that so let's go ahead and command z that and put that back and now we have it looking like this and then under this volume dot locale string and press enter and now we're going to pass in the jsx that pretty much if you saw in the original application how it's like red and green this is what the code i wrote for this i'm sure there's ways to write it differently but pretty much going to pass into curly braces i'm going to say price change and if it's less than zero so this is true meaning it's negative pretty much let me use chennai operators with the question mark then in parentheses i'm going to pass in p dot coin dash percent so this is a class name i'm gonna say dot red and press tab and then inside of this p tag i'm gonna have the curly braces again and then i'm gonna say price change that two fixed parentheses two so this is pretty much stating to put it to two decimal places and then also add the class of red and the css which is gonna just color it red pretty much and then outside of the print so here we have the p tag and then go to the parentheses before the curly brace and then you add the colon semi semicolon i'm gonna do another parentheses and then pretty much let's just copy and paste this code here and then you guessed it we're going to change the class to green and then price change to fix is the same and also one thing i forgot to add is the outside of this price change jsx add the percent so like this so now if i save it nothing's gonna happen because price is not defined so we go back to app.js and let's go ahead and add that really quick so it doesn't get mad at us so i'm just gonna say let's call this price change and then set that equal to curly brace coin dot and this one's pretty long price underscore change underscore percentage i spent that per not what did i type percentage underscore 24h and this is this uh data point right here price change percent 24. so you literally say whatever you pass in coin dot whatever you want to show and if i say this it's still not going to work because in coin we have to destructure this and let's pass it in here so price change and then i'll save it and now it should work and now you can see that we have the percentages which are right here this one right there same thing down here and then all you need to do is add the css and you'll be able to see visually and then the last one i want to add here underneath this curly brace and you should have three dibs from the bottom to know you're in the right spot i'm going to say p dot coin dash market cap and then in here i'm gonna pass in m k t cap colon dollar sign curly brace market cap dot 2 locale string parenthesis and then it's going to say mark caps not defined so we're going to go up to the top here make sure we add it save it here and then we need to go to the actual app.js file let's just call this market cap equal to curly brace coin dots and then if i go check it it should be which one did i put just straight up market cap so let's see where is that right here yeah this one right here and then let's go back and i think actually my bad that's not the right one it should be total volume yeah because that volume is market cap so this one yeah here maybe i mixed and i mix things up yeah i'm pretty sure it mixes up but pretty much this total volume and then let's go ahead and just put coin dot total underscore volume let's save that and i think i yeah mix those these should be differently so let's switch these out this one so let's commit x that should be market cap and then this one should be volume let's make sure we have everything right so now we have coin the symbol and then here yeah so this one technically is the uh mark cap now here so you can see so i think i did a reverse on the actual um actually no i think i did it right we'll see let me make sure our cap is 209. yeah so this should be reversal okay yeah so i just missed type but again this is just getting the data and then obviously we can switch that out but pretty much we have the finished data part now we need to just add in our css so here i created another file so new file coin.css and there's not that much css so i'm just going to go ahead and type it out it really is not going to take that long let's just say dot coin dash container equal to display flex and then justify content to be center and then i have to import this too so let's go to coin.js go here is do import quotes dot slash coin dot css save it here and then let's do dot coin dash row display flex flex direction to be row justify content be start align items to be center should fix that here heights to be 80 pixels border bottom to be one pixel solid hashtag d7077 and then i want the width to be 900 pixels so now this is looking pretty crazy and now i need to go in it looks insane right now but let's go ahead and do dot coin display flex align items not content items to be center let's do padding dash rights to be 24 pixels and i want the min width to be 300 pixels and let's just go ahead and do dot coin h1 let's do height to be 30 pixels width to be 30 pixels margin dash right to be 10 pixels and then this should fix this the craziness of the image so let's do dot coin img i want this to be the height of 30 pixels actually yeah i wrote the wrong code this should be the image here this should be font size of 16 pixels and then width to be 150 pixels so now you can see you're looking much much cleaner how much much we're almost there and then let's do dot coin dash symbol and let's just do text transform to be uppercase and then dot coin dash data to be display flex let me read this up here and then we have text align to be center justify content2b space between and then let's do a width of 100 percent now i should be using a coil here looking much better and then let's do dot coin dash price want the width to be 1 110 pixels and then that coin dash volume i want that to be width of 155 pixels and then that coin dash market cap let's do a width of 230 pixels so it looks like it fits perfect here all right so good and then let's do almost we have like three more lines on here so that coin dash percent or not perfect percent i want that to be the width of a hundred percent and then let's do the dot red and let's do hashtag f zero zero wait why didn't put a color it should be color colon that and then dot green should be color colon 1 1 d 8 1 1. so you can see this green like this now i think i made my uh my css based off of the market cap being the other position so technically i should make the let's see my app.js volume should have a different class name on here so let's see market cap here so volume and market cap should be replaced so this width should be here and then this width should be here let's see if that fixes it it doesn't look like it fixes it let me let me inspect this really quick all right i'll go back to this i'll figure out the perfect width for that but for now let's go back to the uh app.css now and then here is a url imported from google fonts let's go ahead and command ai these and then i'm gonna paste this in this is just a font i mean you don't have to use this font but um that's just a monster rat and then let's do the star little multiply let's say box dash sizing equal to border dash box then margin to be zero padding to be zero and then font family to be monster rat so wants rats commas and serif so fonts updated and then i want the background color to be hashtag one a one a one c and then i want the color of the text to be hashtag fff so now i have the dark mode going and then under here let's do this one's pretty short too so let's just say dot coin dash app and let's just say display flex flex direction column align items to be center margin dash top to be 64 pixels and then color to be white and then dot coin dash search let's do margin dash bottom to be 64 pixels display flex flex direction 2b column and then justify content center align items to be centered as well so we're adding some little styling to this let's do coin dash text let's do margin dash bottom to be 32 pixels text line to be center and then let's do coin input so dot coin dash inputs padding dash left i want this to be 16 pixels so again we're editing this stuff at the top right here this search section up here width of it i want to be 300 pixels height to be 50 pixels and then border dash radius to be 4 pixels border to be none and then i want the background dash image colon linear dash gradient parentheses i'm going to say negative 2 2 5 d g comma a c 3 2 e 4 0 percent comma hashtag seven nine one eight f two forty eight percent comma hashtag four eight zero ff a hundred percent and then after that we're just going to say color to be hashtag e2 e2 e2 save that there so now it's a little different than last last css we're literally done here and they have to just tweak up the uh with stuff place holder i just want the color to be hashtag e2e2e2 so pretty much everything is working fine now we just have to fix this little width problem and then we'll pretty much be done so let's go back to going to css so i made some tweaks and this is the code to make it look much better on my screen at least so make sure coin volumes width 200 pixels coin market cap is 240 pixels and then coin percent is width of just 80 pixels and that should fix the difference because beforehand when i code it up i made the width in correspondence to this instead of this one and since these numbers are much bigger actually yeah these are a little bigger that they make it just slightly off but now it looks like it works and then we can just say bitcoin searches up here eth light etc so this pretty much completes the react api project tutorial so if you did enjoy this definitely give this video a thumbs up subscribe if you're new to the channel i'm pretty much documenting myself learning code and just building projects and showing you what i'm creating and also comment down below what you think and also share this video with your friends and i will see you in the next video

Channel: Brian Design

Views: 47,226

Rating: 4.952045 out of 5

Keywords: react api project, react api, react api fetch, react api call axios, react js, react, react project, react project api, beginner react project, react js projects, react website, react app, api react, axios, axios api, react axios, react api request, react api fetch data, finance app, crypto, cryptocurrency app, price tracker app, react api tutorial, react tutorial, react portfolio project, react projects for portfolio, react project from scratch, apis, api, react hooks

Id: 9ohK7CapmIs

Length: 38min 52sec (2332 seconds)

Published: Wed Aug 26 2020