Bitcoin Cryptocurrency Finance Price Tracker App - React + Next JS API Project Tutorial

yo what is up everyone so today i'm gonna show you how i made this super simple cryptocurrency bitcoin price tracker and we're gonna utilize react with next js and also we're gonna be messing around with an api so this one's super basic i actually made a similar project with just react a while a few months back and actually i think like half of these are almost all these prices actually have like three accents then that's that's off topic but uh essentially here we can just look up and these are pretty much cryptocurrencies so i'm sure you probably have heard of these but uh basically i can go in here i can like search and it'll just show like right now i only have 10 uh displaying but obviously you can showcase you know hundreds of them but just to save some time and then you can like hover over this and then i can click into it and then the actual route will change and it will showcase the id of the uh cryptocurrency on uh that i clicked on so this one is eth so pretty much you can see it in the actual link and then if i click this little logo i made i'll go back home and it goes right back to it so this one's super basic and simple it has almost the same styling as the previous one i did with just regular react except you don't want to add a little different um little styles too but pretty much i'm sure i made this today so without further ado let me hop into my code editor and let me show you how i made it so here i am on my terminal so go ahead and open that up or navigate to your own code editor and pretty much we can just do npx and i'll just say create dash next dash app and then we'll just name this one so i'll say this like next js uh crypto api and then i'll basically press enter and then this will just create the project and then once it is done i will see you on the other side all right so now let's go ahead and cd and then just next js dash let me make sure i spell it properly and then i'll do crypto dash epi press enter and i'm using vs code so i'm going to say code space dots opens it up for me and then we can all just drag this over here and then let me just drag the uh let me shoot this off let me just shrink my screens and drag them over really quick and then here is our project file so if you've made a next app before then uh i mean you probably already know this but it's actually there's not many tutorials out there so i'm i mean i just had to work with what i found on the docs and other content and then also let me make sure i drag this out a little bit more real quick yeah so here let me just go here and go to command j open up the terminal and let's just do uh let's do yarn dev if you've got npm then obviously you'll have npm but uh but yeah i have to close it because i have the current one which you see on the uh left or right side right now it's on so let me make sure let me close it really quick and let's run your dev now and it should work and then it's going to have this link there's a local host 3000 so you can just hold command and then pretty much or you could just click it like command click it if you don't already have it up but i since already got it here it just auto refreshes for me and pretty much this is like the little boiler plate so yeah go check out the docs if you haven't at least go through it too so you get an understanding of it but uh here i'm gonna make this as basic as possible you could you know refactor this with like custom folder structure and all that but uh here we can go like the index.js on the pages section and then like here if you want to change the title so you can go here and be like you know title save it and then notice like the title on the top of your browser actually changes there and then we can actually go let's just get rid of this content in the main and then let's just go here yeah i need to delete the footer too let me delete this and uh for now let's just keep it like this so i'll just be like boom save it here and then let's do this uh pretty much we'll go and create a folder called this one components on the roots we can go here and let's just do components and then we can go in here and i see other people they just make the src folder but uh this one's just pretty basic but let's just do here new folder and let's do search bar is the first one and then i'm using uh modules by default you can use style components which i made like my previous video how to set that up but for this example i'm just gonna use uh just regular css and then here we can just call this one and i'm gonna do index.js so that uh when i import it it just automatically imports that search bar instead of having like imported search bar search bar i'll just do it like that and then here i'll just put a search dot module dots css and then if you haven't used modules it's uh it's almost identical to regular css it's just like the way you name things but here also i got this es7 extension make sure you get this one because it'll give me a little little shortcut so i can do like r a f c e and we don't need actually the uh import reactor with next js which is awesome it's automatically in there already and then we can just change this to search bar here let's do like uh h1 say search save it and that'll go back to index and let's just pass that in so press enter and again see how i did the index.js because it uh it just shows like search bar because i named this searchbar.js it'll literally say search bar slash search bar so again that's just preference if you like that if not i mean you could obviously refactor like the structure well save it bam we got the search here so here let's just uh let's just stop this really quick it's fairly simple and also i'll show you like cs modules too so basically we go here and i'll just say uh actually we need to actually add the uh code first so here let's erase these divs and i'll just do a div i'll press tab and then inside of here i'll have it input i'll press tab here and then we'll just erase this for now let's go to the div and let's say class name equals to and for css modules i'll do the curly braces i'm going to say styles dot not that hold on styles and i'll say dot the class name so i was going to call this one coin underscore search and then for the input i'm just going to say class name equals to curly brace styles dots underscore inputs curly brace here and then i'm going to pass in this rest value so that i can add in my individual properties like on the actual index the main like home page so like you know placeholder values text all that stuff so i just put like rest here and then i can just like destructure this up here so it actually knows what that means and i'll and i'll show you what i'm talking about in case you're like super confused and then all i need to do is just import the style so import styles from coast dot slash search no i haven't search dot why is it not um module dot css i don't know why it's not auto um showing up but yeah so now we got this coin search and then coin input so let's go here and then pretty much we'll just do some really quick i'll just say coin underscore search and we'll just say like you know margin dash bottom 64 pixels display flex line item center and width will be 300 pixels and you can't say that yet but let's do the input now so you can see it so coin underscore inputs and we'll just do let's set the background first so you can see it so let's do a hashtag two two two five three one and then we can set like the color hashtag e2 e2 e2 and then pretty much we can say uh borders none padding 16 pixels and let's do border radius let's just do four pixels outline is none i'll set the height to 100 and width to 100 and then now we don't have anything in the placeholder so let's go and uh when i pass into like the rest property here i can also just go here and just add them in now so i can say like type equals to text i can say placeholder equals to search and that should show it up i'm at a function too when we start typing stuff but uh yeah i forgot to add i should have added the um placeholder please holder i should have put the color here let me do that because it looks almost invisible then i put my bad forgot two coins what am i doing there we go man there we go so basic input and i'm pretty much done with that and now we can actually create the uh coins so again this is just the way i named it feel free to uh refactor this stuff but uh here also we can get rid of this uh home modules we can delete this we don't need this value here and then it's gonna most likely tell us to remove that from the index.js page on the pages folder and then we can delete these class names here for now and there we go so now i'm gonna create another component and i'll just call this one coins so i'll say like coins and then i'll do new file say index.js and then i'll send you file again and i'll just do the same thing coin dots or coins dot model.css and then here what we're gonna do i'm gonna do actually a bunch of stuff but what i want to do first is actually let's do this let's just write out like a basic thing and then let's try to display the actual coins in the console so let's just do this first let's rafce and then let's raise that here to do command d and let's do coins and then for this value let's use like h1 and then let's just say coins for now and let's go to the index.js and let's just pass this in coins why did not hold up doesn't want to show up save it and there we go we got coins so what i want to do is actually we have to create a coins list i separated this into like two different components so like this is like the individual coins data then i had another component where i just called it coins list now you could keep this on like one file like i did my old react one i just kept everything in one thing but here i just wanted to separate things for like uh organization so let's call this one like coinlist.js and we can just say like rfce for now actually let's do let's delete this because we're actually going to do export default let's just do this export defaults function coin list and then we're actually passing some values but we need to get the api first so until then let's just leave it like blank like this and then we can go and let me get the api real quick so i'll go back to our index.js and let's go to the api real quick so here i am on this website coingecko i've used this one already all the links will be on my website in the bio so you guys can check that out but here if you hover and uh let's see where let me get actually left here and let me see resources api click on this one and you just click on get started and where is the one i was using so here we got a lot of different options we can choose from and you can see all these ones down here as well i'm going to use the basic coins so like right when you scroll down and i'll just click on this market ones so we can go ahead and just click on get and then it's going to ask you for like your values so i can just click on try it out here i'm us so i'll say usd and then for this one right now they have it where it's uh by default they'll just leave like the certain values but here for instance like i have this market cap dsc and then total results per page i set mine to 10 just because it's like just easier but again i mean you can you know increase that price and then pretty much what we can do is i can click on execute here and then i can get this request url and then just like paste this into my uh browser and then i pasted it in here and then now you can see also i got like this uh i'm pretty sure the chrome extension i dialed this while back forgot which one it was but basically it uh changes this into like a nice neat uh organized little setup so if your case yours looks like crazy ugly and like they're all like next to each other then you can look up like a um json google chrome extension to read this stuff but uh pretty much you can see here we got like the id you know got the symbol got the name image etc so now we can go here and then make sure you got this link and if you used uh next js then you know there's different ways to get api data for this example i'm just going to use server side props because it's a cryptocurrency application so the values are going to be changing a lot and definitely let me know if there's any alternative ways to write this out but uh here this is where i just did it so i just say export cons and we're on the pages index.js page by the way and i'll just say like get server side props and again yeah you can go to the uh docs really quick so i bring it up then here i'm just going to pass it in as an arrow function so i'll say equals async parentheses and here's my arrow and then curly braces and then we look for a response from say const res equals a weight fetch parentheses and then make sure you get the url we just got from the api click the one that shows this should go here and i'll put quotes and i'll paste this in and yes this is on the line let me just bring this up here and then we can go under here i'm gonna say const and i'll just call this like filtered coins you can name this whatever you want to so the eagle to a weight let me just put this up now just say res.json and then after we have to return some properties so here i just say props and now i'll see how like it's uh faded right now so we have to pass in that value we just created so filtered coins and now let me say that really quick and now right now nothing's gonna actually show up because we need to pass in some values into our actual components so here i'm just going to go to my coin list and then here i'm just going to create the map function where we basically filter through the array and then display all of the values so like here i'll just go and we'll just call this and again you could keep this on like one file but here i'm just going to say curly braces and again we named it filtered coins so it's going to look for that and then we're going to map through it and then i'll just pass in my value so i'm going to call this coin name whatever you want to and then basically we're going to return parentheses and here i'm going to return my coins component so that's why i'm going to say coin coins press let me see if i can just want to import oh there we go imports at the top and then here's where you pass all the values in that for instance like id symbol etc that you want to display so like right here well actually i exit off and says um next can't i can't show like twice but on the original app when you saw like the bitcoin btc the price etc green or red color that's basically what i'm doing right now so like here i'll say let's do this oh yeah one thing i uh need to put parentheses here because it does not like that so let's put parentheses here really quick and let me just close this out make sure all right yeah okay everything's right now okay so here in this component i'll pass in the key first so i'm going to say coin because this is the value i put and i'm just going to set the id for the key so i just say coin that id next i'll just saw this name and that's going to be coin.name and then let's basically we just repeat so idea said again here a coin dot id then i'm gonna say price equals to coin dots and if you see it's current price it's not just price so it's current underscore price and then you just rinse and repeat this with all the values you want so i'm going to do symbol i say coin dots oh where's it at just sim ball right there and i got market cap i'll just say coin dots yeah let's see we got just regular market cap you can you know pick which one you want here then we also got volume and see which one i put i put total volume i think actually i think i did this i remember i did this last time reversed let's do um for the market cap hey let's do market cap and then for the volume let's just say total underscore for you and then here let's just say image equals to coin dot image and then the last one i'll just say price change equals to coin dot price underscore change underscore percentage underscore 24 h so this is the one i just took where is it at this one price change percentage 24 h and then in order for it to know like these values exist we got to destructure it up here so i'm going to say filtered coins and then in the actual coins now normally you could keep this like you know all one file like if you watch my old react one i had everything i think in one file but i'm going to separate it for like this and then here you can just go in this coins index and then pretty much we intentionally can just display this so let's just do something basic for now because i don't want to go all the way in let's pass in a value so let's just destructure this let's just say name and then here i can just do let's just do let's see i'll just say name because i just structured it i'll save it here and go back to the main page notice how the coin now disappeared so what we need to do is basically pass this value in so now we got to go up here to structure it again so filter coins and then i'm gonna pass this in here and i'm just gonna say fill turret coins equal to curly brace filtered coins misspelled that hold on and now let me make sure i check my console so mash of c let's see did i misspell all right let's see here a style's not defined at home yeah what is what is that let me see styles let's go here and oh app.js okay is that the one let me delete this real quick okay so now i'm not seeing the uh the values pop up so now let's just do this let's do control c close it out and just say you aren't dev well i pass in the wrong value that's why it shouldn't be coin should be coin list because it's uh showing the coins component that's my fault i know why i was showing that one it's coin list and then you can go here and i'll refresh it now and let me see why is it is it because my search bar is covering it hmm let me do this let me console that log filtered coins you're showing me the array with the 10 so i don't know why it isn't showing the coins in the world yeah let me figure out why and the world is not showing because right now the console log is showing right it shows the array right here with all of our details and then basically it's not showing my name coin the part right here where it says name let me do this make sure i'm not tripping out yeah so there's hello so let me see let me do this this console dialog name see why it's not showing now let's close this out we're debugging as we go saying is undefined okay so there is our first issue right there oh my goodness i know why it's cuz i didn't change the import the same thing there we go jesus i was going crazy i was like where in the world was my air okay so the api works it was just my typo minor mistake i swear i had everything tight privately but yeah okay so cool so now pretty much what's happening is uh you can see when i constantly log this filtered coins it's showing us the because i only put 10 remember when i was filling out the api i only click like 10 right here where did that i only said 10. so it's only showing me 10 possible choices and then on the here coins list we map through this filtered coins which is basically again it says 10 values right here you pass in all the values that you want and then in my coins component i basically just display what i want to show on the screen so right now you can see it says hello and then name which is basically the name aka whatever the currency name is right so now technically what we could do is just go crazy with it and pass in all other ones so if i say like price i can just go here and put like credit brace price and now you can see the price goes there so in terms of getting api data they're pretty much set so now we can just you know fill this out and then add some styles and then it'll look much cleaner and then afterwards we'll have to use like xjs there's ways to make pages dynamically so it updates the actual route so here let me just pass in all those values we had so we had symbol market cap volume image i have price change and then i just had id and i can get rid of this console.log name now and then here we can pretty much create this so let's just go and let's erase all this let's just say div and let's just say this coin underscore container because i'm going to actually turn this into modules css modules in a second but this will make my life easier doing like this and then here i can say like dot coin underscore row and i'll say let's see coin and then here i can have like an image and that says dot coin underscore img src is just going to be the image and then alt i'll just say like uh i mean you can put like you know the name whatever but that doesn't matter and then under the image we can have like this h1 oh man let me do h1 dots and say coin underscore h1 and i'll pass in the name now feel free to change the class names then p tag will say dots coin underscore symbol pass in the symbol and let me save it for now so you can see like what i'm doing so now we have left is the ones that aren't like fully highlighted so you can see up here so under here i'll have like my div which is right there underscore other coin and then outside of that i have another one i'm gonna say dot coin underscore data press tab here and i'll say p tag dot coin underscore price and then i'll just say dollar sign curly brace price let's say that here so we got the price now and then he will say dot so p dot coin underscore volume and then i'll just say dollar sign curry brace volume and then here i'm actually gonna do this i'm gonna say volume dots to low cal string parentheses save it here like that and then under here we're gonna have some logic so if you noticed on the original one the if it was negative it was red and it was positive it was green in terms of like the percent change so if you know like typical trading stocks and all that if it's positive making money aka is going to be green or basically off of the previous value and then if you're off the previous value is going to be red depending on you know time looking at it but uh here i'm going to say like curly braces i'm just call this one price change if it's less than zero then i'm going to use ternary some return and i'm gonna return this uh codes i'm gonna say p dot coin underscore percent dot red press tab so i'm basically gonna return a p tag that's red and then i'm just going to showcase price change dot two fixed of two and then outside i'm to have the parentheses and then obviously when we turn there we have to do it or i'm going to do parentheses again now just copy this and paste it and this would just be green so this is exactly the same color as my previous one but pretty much like here you'll see these values like this one should be red because it's negative and because it's less than zero and then these should be green but we haven't had the styles yet so obviously you know it's the same color but once we add the styles you'll see it and then i say p dots coin underscore market cap and now just say like market cap colon dollar sign curly brace market cap.2 local string and i'll save it here and then we're pretty much done with the majority of this i'm at another link at the end but for now let's just start styling this and then see how it looks let me go to my c or coin module i'm gonna say dot coin underscore container curly brace and let's just say display flex and justify content center and right now it's not going to work because obviously we need to import this so let's say import styles from quotes and it's gonna be slash coin modules and then also technically the we gotta change the styles here so like for instance curly brace styles that coin container now if you don't do models you can just straight up to remove that and just pull like coin css so now we got like this and then we got the coin let's see coin row say dot coin underscore row and let me just do this so now since i wrote out all these let's just write the styles now so let's say credit brace styles dot coin roll save it now and then here we can do the same thing so styles.coin that way you don't have to waste time um let's see clearbase styles.coin image and then here we'll have curly brace styles dot coin h1 and you can rinse and repeat so you could like copy this and then just change it to like you know the value so like this would just be symbol this would just be coin data so i'll just paste that in change that to data here this would be price and then here this is going to be volume and then here we're just going to do percent and then we'll do comma and i'll just say styles dot coin watch say stop red and that's how i did it with uh like two different classes and then you just copy this here and just change it to green and then last one let's just change this actually i forgot i copied the wrong thing so i say stops that queen market cap all right save it here so now for like coin row if i were to edit that let's see like display flex okay you've got some flex action flex direction is going to be row we'll have justify content like start align items let's do center heights 80 pixels border bottom we'll just do one pixel solid hashtag 2 e2 e2 e and then width i'm going to say a thousand pixels and no i didn't this isn't mobile responsive so it's only on desktop right now so it's gonna look crazy but don't worry we'll fix it soon then here let me just add the additional classes this is gonna be the hover value real quick see hashtag one seven one seven one eight and then for the coin itself say let's do display flex line item center padding dash right we'll just do 24 pixels and now let's do let's get rid of this image first of the images and you know that drone looks crazy so let's do this let's do coin underscore img so the height to 30 pixels and then the width to 30 pixels margin dash right is going to be 10 pixels here there we go coin h1 let's do let's pull it up font size i'm just gonna do 16 pixels and with 150 pixels and i can do coin simple that will be text transform uppercase and we just got the data now so coin underscore data and don't worry this is like 90 of the projects once we get the styling done then we can just pretty much you know add some more little details and then we'll pretty much reset so text online we write just my content space between and with 300 and then let's do see coin price now i'm just gonna say with i'll just do 110 pixels and then here let's do that coin underscore volume let's do with 155 pixels coin underscore market cap let's say with 230 pixels and then the coin percent you're going to say like let's do with 100 pixels and last one i'll just do dot red would be color hashtag f00606 dot green i'll just do hashtag color hashtag 1 3 c 7 so now let's take a look see how that looks right here not too shabby this is what it currently looks like on desktop and then uh obviously i can go here we can show this search bar now let's go here a little search bar action and then in terms of the uh let's see the actual coins well we're pretty much done right now besides this link we're gonna add that in a second let's actually style the uh the search bar but uh what i want to do is create a layout so you could since i made the uh search bar has a custom css and also this coins component i made it like in the folder but since coinless is super basic there's no uh css i didn't do it and layout i'm just gonna put the layout css in the global file just to you know save some time but if you wanted to you could create like a layout folder and then uh you know pass in the css there but basically it's uh layouts used for using that across all your pages and having you know the same structure like imagine you have like a nav bar and footer you don't want to add that to like every page you just make a layout page so i could just do cons and then we'll just do equals princey curly brace i'll just say children we're going to pass in all the children here and then by the title by defaults we'll just call this like um crypto tracker and i'm not going to say like arrow function and then pretty much we can return all of our code so here i'll just say uh let's just do dot layout and since i'm not doing i'm passing everything into global css which is down here just to save some time i'm just gonna do like regular class names but again if you did the modules obviously you'd have to you know change it for the head tag let's actually do this let's go index just copy this go back to layouts paste this here and i just do like uh structure this so it's title that way i can like pass in custom titles then header i'll just to header and then for the link so it's similar to uh like if you use gatsby or basically react right or dom you can pretty much do like link here except for next you say href in the link tag and then i'm gonna say pass href and i'll create the a tag like this except take it out like that so you can check out the box you can see it and that's like how it is and then here i'm actually gonna pass in my uh my custom logo i made on figma so it's an svg so basically it's just a bunch of code so i'll just copy it in there so again that's gonna be on my site all that stuff so you can go there and check it out and then in terms of this we can go under the header and let's just say main let's say children here and now i can go to index.js and i can just wrap everything in the layout so instead of this div i can do command d and just say you know layout like this save it it's not defined because we got to import this at the top so i'll just say import layout from the slash opponent slash layout and what in the world is happening here see hmm that check i export this oh yeah that's why so actually it's about hero bad exports defaults layouts oh yeah now we gotta import that too and we gotta import the link i forgot so yes so now we do that really quick so i'll say imports head from next slash head and then we'll say imports link from next slash link and we should be good there we go so now what i need to do is add some styling to this so again i'm doing all the global because it's like you know just i don't want to waste time making like a whole new page again because it's just basic stuff here but uh here let me just do this what i'll do is i'll just paste in my code from my file my github that way just save some time because this is like just basic css stuff but uh here and then i think i do i removed the um the global file from the app.js so let me go back and import that really quick i'm going to go back to the index.js actually my ad app js and then just uncomment this boom there we go and then i needed to uh just add the style why is not the uh maybe it is on desktop oh that is not right but yeah i think i forgot to put the yeah forgot to put the div i put around everything in uh let's see here and i can get rid of this headset here actually let me just say uh coin underscore app and let's put that around this there nice and centered and then boom the majority of the design is pretty much done now he's got a little search thing and then like the route change and i can delete this here too so save it so now what i'm going to add is basically a way to search and like show only that this the cryptos that have that letter that look up so let me go here and just import some state so i can say like import use date from react and then i'm gonna go under let me delete this console.log i'll just say const search and then we'll say set search to trigger this and then we'll say you state and we'll make it blank that way it's like you know empty search bar i'm going to call this one all coins instead so i'm going to say cons all coins again feel free to refactor my naming conventions and then just say like filtered coins dot filter i'm gonna pass in coin as my value and then pretty much actually let me do this let's just say coin dot name dot to lower case because i want to make sure that uh it doesn't matter which way you type it so it shows up if it includes the search dot to lower case then what i want to do is create a function let's call this one handle change and look for an event and then we can say e dot prevent defaults and then basically we're going to set the search to the e.target.value.2 lowercase and then all we need to do now is we need to add this handle change function here so on change equals to handle change and then i need to pass this all coins value instead of filtered coins so i'll say all coins now if i save it when i go like this if i did everything right it should be like you know boom there we go now this is like a super basic way let me know in the comments below like better ways or you know ways to refactor this definitely send me a link i'll check them out but uh in terms of like getting started i think this one's pretty simple so now what happens like we click here nothing happens so now i want to do that so what we need to do is i can get rid of this api for now we're not going to use this folder i'm going to go in pages and with nextjs you can actually create like dynamic routes pretty easily but you can go here like new folder and i'll say like coin and then i'm going to create a new file in here and this is going to be the brackets you'd pass in whatever value you want to call this so i'm just going to call it id then i'm going to say js and then one thing i need to do is go to coins index.js and i need to wrap this whole thing with a link so like now i can go let's do this imports link from next link and then here i want to wrap this so i'll say link ahref equals to slash coin because it's the folder i named it that's like the route and then it's gonna be slash id and then i'm gonna say as equal to curly brace back ticks slash coin slash dollar sign curly brace id so now this what this does let me close it out really quick and just bring this down here so right now i just wrap the link around like this whole row right here and also i forgot to put the attack because you notice the uh like the cursor pointer didn't show up so i'll just do like that and go right above the link oh what happened should i miss yeah close that really quick yeah so now you can see the cursor so when i click it notice how it shows in my url slash coin because that's my folder i named it and then slash bitcoin because uh well that's like the one i clicked on if i click on this one it's going to say the the url is going to match whatever i click so one thing we're missing now is stuff in here so i do like uh for instance you can make something basic but let's just do um for us to do this let's do r afc e except what changes to one to coin and then i'll just delete this let's import layout from layouts and then also i'm going to i'm going to actually create a styles page too but let me just do this really quick let's do here let's just say layouts and i'm just gonna say h1 really quick and say yo so if i click like normally like this it's just gonna show me the yo and i can just click back and i'm back so we can see here like this is where you add in all your styles or at least the way i did it let me know if you know better ways to like you know create custom pages with data but then here all we need to do is basically you know destructure coin and then pretty much pass in those values in here so like uh here let me say that coin underscore page and then uh i'm gonna change these back to style modules i'll see this model in a second but here's do it easiest container image src will just be coin.image and dot large for the alt or to say coin dot name and then class name this is up here already i'll just say uh styles dot coin underscore image see they're really quick so boom right now it's going to say there's not uh property oh yeah also i forgot we had it we had to connect with api again too which i'll do in just a second but let's just write out this stuff first so here we can change this to so styles.coin underscore page here let's do sty les dot coin container and then under the image i can say like h1 again let's say coin dot name and then let's do here let's do class name equals to stop coin underscore name let me see if it's easier to just paste this stuff actually yeah let's do here paste it let's change these h1s to a p tag we'll say let's see coin ticker so this ticker symbol here and then i'll just say symbol now i'm doing like that because i i had like overlapping class names so i want to name the same and then here i can just do let's see what coin currents coin market so let's do this coin markets underscore data dots current underscore price dot usd and then i'm pretty much done with this and now what i want to do is um we need to create a modules folder clicks the new file so i just call this one coin.module.css here i can just import this so say imports styles from coin model css and then uh now we gotta actually get the data so technically for this this one i used uh how do i close this one out real quick yeah i just use this one right here this id one so just click get and you just try it out here and like you can pass it uh you know bitcoin for instance let me just execute this really quick so copy this i'll paste this into my url here instead of the old one and now you can see all this you know custom data so like here where is that image large so for instance where's the image at command f that's gonna take me forever yeah so i said we got a coin which i'm going to use that value as like the way to get the data dot image which is here and since it's like another object inside you got to do another dot and then i pick large so like for instance here coin or market data is to do market underscore data so it's the outside one so you say coin.market underscore data dot current underscore price because it goes down again and then it goes down even more to the to your currency it was usd now you're probably confused like yo what is coin well don't worry we're gonna make a function to get that so pretty much here i'm just gonna say uh export async function and we're just saying get server side props again and this is just straight from the docs this time i just copied like the template and here i'm going to say const credit brace id and it's going to equal to context i'm going to do query and then here i'm going to say contrast equals to a weight fetch and then we're just going to actually do backticks and paste in that url and then for this bitcoin just erase it and then do dollar sign curly brace id and then under here we're going to say cons data equals to a weight res.json and now we just have to return so we'll say props curly brace and i'm going to call this just coin and that's just going to be the value for the data so now i use this coin value here and i just pass it here so now you can read it here so i save it here and now it's going to say image undefined which it shouldn't now showing me the data so now i can just paste in i'll paste in my styles here because i don't want to you know bore you with this basic code but here you know just custom css you can get that from my github and bam there we go again you can go in here and add like uh whatever values you see here on like the description whatever you want to add you would just do it coin dot ath underscore channels or percentage dot you know a d or whatever you want to choose and i can click back here and now if we go back out i can do command shift c to check the console we got some errors see class name so that means there's a little typo quick search really quick should be able to find it and let's see where in the world it is right here yes got it right there name save and that's just refresh damn so this is like the super simple way i did this feel free to let me know so i can search really quick check it out there's bitcoin we can go down here let's go like litecoin so there's litecoin xrp xrp and there you go so this is like a super simple way that i did it using a an xjs and a cryptocurrency api so definitely let me know alternative ways to improve this code and refactor it and sorry for that if you enjoyed this give this video a thumbs up subscribe if you're new to the channel comment below what you think and i'll see you in the next video

Channel: Brian Design

Views: 16,877

Rating: 4.9425492 out of 5

Keywords: next js tutorial, next js project, next js course, next js api, react project, react js, react api, react project api, bitcoin, finance, cryptocurrency, finance tracker, cryptocurrency price tracker, cryptocurrency api, next js authentication, react next js, react next js tutorial, next js routes, next js pages, next js dynamic routes, beginner react proect, react projects, react tutorial, next.js tutorial, next js, react next api, price tracker app, crypto api

Id: Kff_KRvpxj4

Length: 54min 23sec (3263 seconds)

Published: Tue Feb 02 2021