Cryptocurrency Tracker with React JS, Material UI and Chart JS Tutorial 🔥🔥

hey everyone welcome back to roadside coder and in today's video we are going to build this awesome cryptocurrency tracker app with react.js material ui and charge.js plus we will use context api to manage the state of our app now this project is gonna be beginner friendly so you just need to know the very basics of react.js alright so let's go on and explore this app first so this is the homepage of our app and i've named this app crypto hunter and out of the bad you can see we have this beautiful carousel over here which displays all of the trending coins in past 24 hours now when we go on and scroll to the bottom we can see this list of coins which are sorted according to the market cap so for example bitcoin has the highest market cap so this coin is displayed on the top also when we further go down we can see this pagination component so when we click on any of this number so for example if you want to go to the second page so yep we are on the second page of this list and we have this search box over here if you want to search for any particular coins so let's say if i want deutsche coin yep you see dogecoin is over here now right now you can see the currency is selected to be the indian rupee but let's say if we want to see the price in the us dollar we can go ahead and click on this select button and select the us dollars so now you can see all of the prices are gonna be displayed in us dollars so let's see if i want more detail about a particular coin so we can go ahead and click on a particular coin and it's gonna take us to this single coin page which has more details about this coin the rank the current price the market cap etc and this is the most interesting part the historical chart for that particular coin so if you want to see the price of that coin in past 24 hours we can click on this button or if you want to see in past 30 days we can click on this button so let's see if i want to see the price on 79 2021 so price was around three thousand dollars three thousand five hundred dollars so yeah this is an awesome feature of this app so you see how cool this project looks and after building this you can proudly add it to your resume and the recruiters are gonna love it now in this video we're going to build this app right but in our next video we're gonna add the backend for this app we are going to integrate the firebase in this app so this is that version of this app and we're gonna add the features like at the particular coin to a watch list so let me go on and show it to you so if i go on and click on the login we have two options we can either log in with the email or we can log in with google so i'm gonna go on and log in with google and i'm going to select my google account and you're going to see this message sign up successful welcome with my email id and you can see my profile picture is right over here now if i click on this profile picture you can see the watch list which is currently empty and you can see my name as well over here so let's go on and add something to the watch list so if i go on in bitcoin and click on add to watch list now you can see bitcoin added to the watch list and if you go on and click on this profile picture yep you can see bitcoin is right over here let's go on and add some other coin let's add cardano and yep it's right over here we can delete these coins from here as well bitcoin removed from the watch list so this authentication feature is gonna be in the next video so make sure you're subscribed to the channel and have bell notification turned on to watch that video first so without any further ado let's get started so i've opened vs code over here and let's quickly go to the terminal and initialize a new react app so i'm gonna go ahead and type npx create react app and the name of our app so i'm gonna give it crypto hunter and press enter now it's gonna go to npm's repository and bring the create react app package and create a boilerplate basically with all of the starting code for creating a new react app and it's gonna bring that into this crypto hunter folder okay so our app has successfully initialized so let's switch to that folder by typing cd and the name of the folder which is crypto hunter or we can go to file and click on open folder and open that folder in our vs code cool now let's go ahead into the terminal and start our app so i'm gonna type npm start here it is our react app has successfully started now let's quickly go to the vs code and we're gonna clean up all of the files that we don't need so inside of the src we're gonna remove report web vitals setup tests logo svg and app.tests and now you're gonna see that our app will start to complain so let's remove the code that those files were using so i'm gonna remove report web vitals and inside of the app.js we don't need logo and i'm basically gonna remove everything inside of this div and write hello world and save this now you see hello world is printed right over here and you see it's being displayed in the middle it's because we have some styles in the app.css so i'm going to remove these styles and now you're going to see that hello world is being displayed at the very corner great now let's go ahead and install a material uis now what is material ui let's go to google and type material ui so we're going to use the version 4 of material ui because version 5 has just been released and it's not very stable it has a lot of bugs in this so i'm going to go ahead and go to and search material ui version 4. i think this one okay this is version 5. i think in the url if you type v4.mui.com just like this this url and press enter it's going to take you to the version 4 of material ui so for now i recommend using material ui version 4 because this is the most stable version so here it is react components for faster and easier web development so how material ui helps us is it has already pre-built components so let me show you if we click on get started and if we go to components and let's say we go to the button so it has pre-built buttons over here so we don't need to create our own buttons we can just take this line and we can use this in our code so this will help us build our apps pretty fast so this is how material ui helps us it has tons of such components so let's go to let's go back to getting started and installation so let's install material ui i'm going to copy this line npm install material ui slash core so let's go back to the terminal i'm going to open another terminal and paste this line also apart from material ui code we're going to use one more thing which is material ui lab so okay it's not over here let's scroll down inside of the components so material ui lab has some additional components such as pagination that we are going to use in this video in this tutorial so yep here it is about the lab so yep copy this line material ui lab go over here and paste it and press enter now it's going to take a little bit of time to install so let me come back after this has installed three days later [Music] two thousand years later all right finally material ui has finished installing and do you like the theme that i've provided to my vs code this blue theme so if you want to know which theme i'm using follow me on instagram at roadside coder and i'll tell you okay let's close this terminal and okay so our app is going to be multiple pages right so if i go to the browser and open our app so if you see over here our app has this home page and if you click on any of the crypto it has this single cryptocurrency page right so our app is going to have multiple pages for so for that we are going to need a tool called react router dom so let's go ahead and install that as well so npm install react router dom and press enter and there it is react order dom has finished installing now let's quickly go ahead and start building our app let's give this some initial styles such as margin of 0 padding of 0 and box sizing of border box and scroll behavior of smooth so providing these styles sets everything to the default so we can start from absolute scratch and for example some buttons if you create a button in our app so it's going to have some of the margin or padding by default so it's going to remove all of those margin and padding and box sizing border box it's gonna make sure that everything is of perfect size and the other thing that we're going to do is for our a tag that is our link tags i need them to have text decoration of none so that they don't contain the underline you know the default underline between i mean below them and the color is going to be gold because our app is of the gold theme also we need a font so the font that we are going to use is called mons on sarat yeah monster art okay so let's go to google fonts and let's see i will take 300 400 and 800 so i'm going to tell you how we're going to use and where we're going to use them so yep i've added all three of these font with weights and let's go to import and copy this line and close this website and paste that right over here yep just like that now we're all set up with the styles and we are done with the initial setup of our app now let's go to app.js and start building our app so we have two pages right home page and the coin page so let's set up both of those pages so inside of the src i'm going to create a new folder for pages now inside of over here i'm going to wrap this app with something called browser router so if you don't know how react router dom works how we can create different pages in react i'm gonna tell you in this video all of that but if you still want to get in-depth knowledge about react router dom you can go ahead and watch this video i've covered all of the features of react router dom in this particular video when we are using react auto dom we are supposed to use something called browser router which is imported from react router dom and inside of this we're gonna have a div inside the div we will have first a header which doesn't exist yet so let's go ahead and create this so i'm gonna create a new folder for all of our components so components and inside of this i'm gonna create a new file for header dot js and inside of this i'm going to type r a f c e and press enter so you see it's going to give us this boilerplate code for a react component so how did i do this so i'm using an extension called es7 react redux graphql blah blah blah blah so you can download this extension and you can make use of these snippets so i'm going to type header over here inside of this and let's go ahead and import that header okay let me manually import it so from component slash header now let's try to import it yep header is imported now let me remove this now you're gonna see in place of hello world okay cannot resolve okay i believe our app needs to be restarted because we have installed so many things like react router dom and material ui and all so let's just restart our app for once and it has restarted and you can see header right over here now below this i'm gonna create two routes first one will be for home page so for creating a route we type route and press enter it's gonna okay it's not imported uh what's going on so let me manually import it so comma route so route is going to be imported from react after dom so route takes a few props so first one is going to be the path prop so path means what is going to be the path of this inside of our url so we're gonna keep it slash so this is gonna be slash for home page and the other one is for the component so component is gonna take the home page component inside of it so i have which i haven't created yet so inside of the pages new file home page dot js and again our afce and i'm gonna say home page and save it and let's import it over here home [Music] page for some reason the auto import is not working i don't know why pages slash home page there we go similarly we're gonna have another page which is going to be for a single coin so it's i'm gonna keep the path as coins slash the particular coin id so i'm gonna say colon id so we don't know what id is of all of the coins so i'm just going to keep a placeholder variable for this which is id and for the component i'm going to create another component inside of the pages folder which is going to be coin page dot js r e f c e i'm gonna say coin pitch and save this and coin page import it over here just like that now if you try to go to slash coins slash something and press enter yup you're gonna see coin page but wait we can see home page as well and coin page as well why is this happening it's because this path is included in this path as well so to get rid of this we're gonna add something called exact so it's gonna go to the exact path that we want it to go so if we save this now yep you can only see the coin page and obviously header is common in both of the pages so header will be displayed in both of the pages let me go back to home page yep awesome now let me open that app real quick crypto hunter so that we can refer to this app while building our own app so you can see we have this background color of like blackish background color so let me provide this background color to our app so to provide the styles to our app normally we use css right but when we are using material ui we use something called use styles so if i go to material ui and search use styles so this is how we use the user styles we create a class name we provide the styles inside of it we create an object for classes like this and provide it to the class name all right cool let's go ahead and do this so over here i'm gonna say const use styles equals make styles so make styles is going to be imported from a material ui core and instead of this it takes a callback and instead of this callback we can write all of our classes okay so our app is going to have the following styles so it's going to have a background color wait first i'm going to add these styles later but let me just first create the object const classes equals use styles and i'm going to take these classes and add it to our div so class name classes oops classes dot app yep this one app oops hold on a second let me wrap this in a parenthesis yep that's fine now instead of the app i'm gonna provide a background color which is going to be hash one four one six one a so this is a blackish color so if you see yep there we go now we're gonna provide it a color of white so that it displays all of the fonts clearly and a minimum height of 100 viewport so 100 vh just like this now the first thing is to build our header this header right over here so i'm gonna go to material ui go back to the material ui and search app bar so we're going to use this app bar to create our header so you see this looks like a pretty good header component so i'm gonna use this so you can explore this documentation to learn more about it but i'm gonna go ahead and build this from scratch and not copy paste it so let's go to the header and inside of this i'm gonna remove all of this stuff and i'm gonna import app bar so you see app bar has been imported from material ui core and inside of this app bar so first of all we're gonna give okay let me switch to the r app yep now in uh first of all we're going to give this a color so color is going to be transparent and it's going to be of position static and inside this i'm going to add a container now what is this container so container helps make our component responsive so if i go and search container yep this one now if i make this screen responsive now look at this container watch as the screen is getting smaller it's getting wider and as you're getting bigger it's getting a little less wider so this is what container is it helps us to make our app responsive basically to contain all of the components inside of our set width now inside this container i'm gonna import something called toolbar from material ui just like this and now inside this toolbar first thing we're gonna do is add this crypto hunter logo i'm gonna import typography so typography comes from material ui whenever we want to add a text or something so typography helps us a lot so instead of this i'm gonna write crypto hunter and save this yep there you go you can see our app bar is over there so if i remove this let's say transparent color and gives this let's say primary and save this yep you see our app bar has been rendered so let's go back to transparent now below this i'm gonna render a select component for selecting our currency this currency right here which is going to be inr usd or whatever you like so select component let's go ahead and see the select component yep this is the select component so which one are we going to use this one see yep so we're gonna use this one so you can go click on this icon to see all of the code inside of this and you can select this one so this variant is called outlined so let me go back to our app and create it so right over here i'm gonna say select and okay it's not imported yep now it's imported and inside of this it's going to have a few items so i'm going to render my new item so first menu item is going to be usd and the other one is going to be inr let's save this c and select icon yeah it's not visible due to this black color so let me fix that so we need to give variant outline oops out lined i'm gonna give this some style some width of 100 some height of 40 and some margin left of 15. also menu item is going to have a value so this is going to have a value of usd and similarly this is going to have the value of inr and save this now this is still not showing it's because the black background color now don't worry i'm going to go ahead and give this some dark mode themes so that it's gonna show up in just a second so let's just first style this crypto hunter text so i'm gonna go ahead and create the used styles over here just like we did previously const use styles equals make styles yup make styles is imported and a callback inside this callback i'm gonna give title and let's give this title styles of some gold color and few more styles so i'm gonna i'm not gonna waste time writing all these styles oops const need to be this so i'm not gonna waste much time writing each and every styles because that way the video will be too long so i'm gonna bring in these styles and then i'm going to explain you so it's going to be flex once so that it gets spread to its full width and it's going to have color of gold font family of montserrat that we had imported earlier some font weight of bold and cursor is going to be pointer whenever we hover on this so let me use this so if i go inside of this and type const classes equals use styles and now instead of typography class name going to be classes dot title save this yup you see looks much much better now what we want is when we click on this that should this should redirect us to the home page so we are going to use history hook from react router dom so const history equals i mean use history hook so use history it's going to be imported from react router dom just like that okay what's wrong over here this should be react router dom yep not react outer make sure of this so history what history does is it's gonna push us to that particular page so i'm gonna add an on click on this typography so on click what we want to do is history dot push push it to the home page slash all right so now if i let's say go on to coins page slash anything so we're in the coins page but as soon as i click on this it's gonna redirect us to the home page now let's add the dark theme to our app so so that all of the components that we import from material ui are not in the light theme and they are in the dark theme itself so let's go to material ui and search dark mode okay there we go so this is how we add the dark theme so we import this thing const.theme equals create theme and inside this inside the palette we write the colors that we need for our app so let me show you real quick so below this i'm gonna write const dark theme create theme so i've imported create theme right over here so create theme and inside of this it's going to have an object which is going to contain a palette so palette will have some primary color so primary and i'm going to make this primary color as so main color is going to be hash triple f and it's going to be of type dark so we want dark theme for our app so let's take this dark and wrap whole of our app with something called theme provider i mean not whole of our app but all of our header so theme provider so let's see if theme provider is imported okay so let's manually import this so theme provider is gonna be imported from material ui core and let's wrap all of our app with this so i'm gonna cut this and paste it right over here now let's save this and go back to our app refresh the page okay nothing happened oh okay yeah we haven't provided it this dark theme variable so inside of this it's gonna take a prop called theme and we're gonna provide a dark theme yep now you see now you see this over here usd and inf both of these are here so now if i go back to compare our app compared to our app now you see our app is starting to take shape also this typography is gonna have a variant of h6 and also i gave this margin left so i was supposed to give this margin right so now yep exactly similar now for selecting our currencies we want this to be available to whole of our app right on this page and the other page and we don't want to drill the prop from component to component so we're gonna make use of context api so what context api helps us in is to lift our state at the top of our app and to provide the state to whole of our app so i've created a separate video on context api if you want you can go ahead and watch that video but i'm gonna explain everything in this video as well all right cool so we're gonna go inside of the src and create a new file called crypto context dot js inside this file i'm gonna say rfce just like normally and above this component i'm going to create our context so i'm going to type create context and it's going to be imported from react so create context i'm going to put it in a variable called crypto so crypto is the name of our context now inside of our app i'm gonna remove this div and i'm gonna write crypto dot provider so we're gonna wrap whole of our app inside of this crypto provider so i'm gonna write children over here and i'm gonna bring this children oops chill drain i'm gonna bring this children from the props exported this so let's take this and go to index.js and let's wrap whole of our app in this crypto context let me import this yep just like that save this yep working absolutely fine now to export our state to hold off our app we're gonna make use of the hook called use context hook so below this i'm gonna create a function export default crypto state so this is what our state will be called cryptostate and inside of this i'm gonna import that hook called use context and use context is going to take the context that we have created this one it might be a little bit tough to understand context api in one go so that's why i highly recommend you to go and watch the video for context api the full tutorial so okay my bad we can't export two of two things by default so i'm gonna say export const crypto state so this one's not going to be by default and i'm gonna return this awesome so we have successfully created our context over here now inside of this i'm going to create the state for this component right here there's actually going to be two states first one is going to be the for the actual currency and second one is going to be the symbol when we select these currencies it's going to update the symbol so let me show you use state first one currency by default it's going to be inr let me import use state yup just like this so okay there we go now other state use state is going to be for the symbol and by default the symbol is going to be for the rupee this one now over here i'm going to add a use effect so you what use effect does this whenever our app is rendered or whenever the component is rendered this compound this particular component it's going to run whatever that is inside of the use effect so instead of the use effect i'm going to write if currency is equal to inr set symbol to rupee if currency is equal to use dollar set symbol to the dollar all right and this will run every time this currency changes so i'm gonna add this currency in the list of dependencies so whenever this changes this is gonna run now let's send all of this stuff to our app how are we going to do that we're going to go inside of here and type value double curly braces and type currency comma symbol and we're going to send the set currency as well let's go back to our header and import the state that we have just created so right over here i'm gonna const curly braces equals what was the state crypto state oops crypto state yep just like that so here we here it is so inside of the crypto state what do we need we need currency and set currency so just like this now inside the select we're gonna write value is equals to current currency whatever it is and we're gonna set and whenever we change this currency we're gonna set the currency to e dot target dot value so let me show this real quick so if i go to our app and let me open the dev tools and wait a minute so let me just console log it here currency now if i go ahead and change this organic things happening for some reason let me refresh our app yep now if i change this now if i change this usd yup usd is displayed inr ionizing displays awesome now let's start building our home page so i'm going to close this header and crypto context and go to our home page pages home page yep and let me close this terminal as well now our home page is gonna have two sections first one is going to be the banner which is this banner and the other section is going to be this this table which contains all of our cryptocurrencies and this pagination component and everything all right so let's go ahead and create our first component that is banner let me keep it inside of the react fragment so that we can create other component below this so banner so this banner component doesn't exist yet so let's create this banner component inside of our components folder called banner because it's gonna have multiple components inside of it as well so banner.js rafce and i'm going to name this banner for now and let's import this banner over here just like that yep there we go now let's go back to our banner and start building it remove this up and this div is gonna have class name of classes dot banner which oops classes dot banner which we haven't created yet because obviously we haven't created use styles so const use styles make styles and this make styles is gonna have the callback just like that and inside of it i'm gonna write the banner class so this banner is gonna take an image so the image where you can take that from you can go to github.com [Music] eon press enter and go to the repositories search react crypto tracker over here and click on it and over here you're going to see multiple branches so the other branch for is for firebase video which is going to be our next video so for this particular video you're going to click on this master branch so click on this master branch and you're going to have all of the code for the master branch now inside of the public folder we have this banner2.jpg file which contains this picture so if you want to use this picture you can go ahead and download this picture and put it in your project directly in your public folder so let's go back and over here i'm gonna put it inside this public folder so let me bring this in yep just like this close this and inside of this use styles i'm going to add the styles for the banner which is going to be the background image so background image is going to be url dot slash banner2.jpg so below this i mean inside of the component i'm going to create the classes equals use styles awesome now let's see this is gone i think we have to give this some height as well let's see let's get a container inside of this container so notice it's auto imported from a tail ui core and our container is also going to have some styles so class name and i'm going to bring in the styles for banner content below this so it's going to have it's just nothing is going to have some height some display flex flex direction is going to be column it's because if you notice over here it's aligned from top to bottom so it's aligned in the columns right so that's why i've given it column padding top is going to be 25 justify content is going to be space around so that let's little bit of space between these okay so if i save this now you're going to notice yep this photo is over here cool now instead of this let's go inside the container and create a div for our tagline so it's going to contain so i'm going to give this class name classes dot tag line so what the tagline is this thing crypto hunter and get all the info regarding your favorite cryptocurrency so let's add the styles for this tagline first let me add the content for this tagline so inside this let me add the typography which is going to be the which is going to be this one so typography is going to have variant of h2 and some styles with font weight of bold some margin bottom and some font family of monster art that we already have seen so yep there you go here's our styles now below this i'm gonna add another typography which is going to be this one get all the info regarding your favorite cryptocurrency so this is gonna be variant of subtitle two and styles some minimal styles of color text transform and font family there's nothing much over here that's why i've just brought this in now below this tip we're gonna have the carousel for these cryptocurrencies but before moving to that we need to add these tagline styles so right below this i'm gonna add this tagline styles of display flex height is going to be 40 of this some flex direction is going to be column justify content center and align item to this very center so if you go back and save this yep just like that it's going to reflect properly when we go ahead and add our carousel now before building our carousel let's go ahead and understand the api that we are going to use so we're gonna use something called coin gecko api so this is absolutely free you don't need to do any signups or anything so let's go inside of this so coin gecko.com en api and click on explore docs now here you're gonna see full api with all of the end points right over here so what we're going to use we're going to use a single coin api a coin list api a historical chart displaying api and some api to display the trending coins for example this api lists all of the supported coins and if we go below over here you're gonna see we have this trending endpoint so don't worry about this api right now you can explore that later so i'm gonna tell you where you can have set up this api for you so if you go back to the repository github dot com slash push eon repositories crypto just search crypto yup there we go reactive to tracker now go inside of the src folder inside of config we have this api.js file inside this i've set up all of the endpoint for our api so you can take all of these api endpoints from over here and inside of our app inside the src i'm going to create a new folder called config and instead of this i'm going to create a new file api dot js and paste all of these endpoints so i'm going to explain every endpoint as we go on to use it so first of all we're going to use this trending coins apis endpoint so this api endpoint takes the currency which is inr or usd or any other currency does doesn't matter so let me tell you how you can fetch all of the currencies so if you go over here and click on supported vs currencies and try it out and execute then you're gonna see the list of all of the currencies which you can use in that particular drop down so for just showing it um i've used inr and usd but you can use any of these currencies any of the currencies from your home country so it takes the currencies and it adds this currency right over here let's close this file up and create a new file inside of this components and banner i'm going to create a new file called carousel dot js now r a f c e i'm gonna create a new component let's write o cell over here and i'm gonna import it inside of our banner.js right below over here yep so yeah there we go now if we go back to our carousel let's give this some initial styles so i'm gonna create the user style i'm gonna bring in the user style just like this and import make style yup and let's create the object for user style so const classes use styles and this dev is going to have class name classes dot carousel save this yep it's it has taken its space that is of 50 height some display flex and some align item of center now let's go ahead and fetch the data from our api so right below over here i'm going to write a function called const fetch trending coins and instead of this i'm going to write the end point that we're going to use but for that for fetching our coins i'm gonna use axios so i'm gonna go back to our terminal and actually open a new terminal and install axios so npm installed axios so excuse is gonna be helpful for fetching the api endpoints if you don't already know so meanwhile that's installing let's write our code so const oops so const data equals a weight now this since we are using a weight so this function has to be an asynchronous function so i'm going to add async over here so async await and axios yep there you go axios has finished installing so if i import if i write xcos and import it yup there we go import x used from axios so xus.get and we're going to write the api endpoint inside of it so what was the api endpoint trending coins yep let's write trending coins inside of it and what are we supposed to send it the currency so where are we going to take the currency from yes you're right from the context api so crypto state and const equals crypto state and it's gonna have currency just like this so i'm gonna add oops we haven't imported this trending coins so let's import okay it's not importing let me go over here import from dot dot slash dot inside the config and api so now if i go over here press ctrl space and yup there we go now it's gonna have imported this so now we're gonna pass let me close this let me pass this currency inside of this and we're gonna get the data okay and we're gonna set this data inside of a state called trending so let me create a new state for this called trending spelled it trending an initial state is going to be an empty array let's import use state yup okay so after fetching the data i'm gonna set it set trending to the data awesome now when are we gonna call this function we're gonna call this function when our component is first time rendered so instead of the use effect we're gonna call this function let's import use effect and inside of this i'm gonna copy this up and call this function awesome also every time the currency changes i want to fetch the coins again i want to fetch this again because the currency has changed so yep now if i go ahead and write console log of trending now let's go ahead and see how it looks like so instead of over here yep we see an array of 10 items with all of the trending coins so currently it's inr so if we go to the current price yep it's displaying in inr but if i go ahead and say usd so now you see it's going to be displayed in us dollars awesome let's close this and build the ui for our carousel now where will this carousel come from this carousel is called react alice carousel so let's go ahead and search react alice carousel and there we go this npm page and there it is this is the carousel that we are going to use so let's install it by typing npm installed react alice carousel i'm going to open a new terminal and paste this also if we go back to the documentation you see we need to ins we need to import these styles so let's copy this line and go to our index.js and paste these styles right over here oops my bad not this line this line so paste this right over here close this up okay so there we go it has finished installing and let's see how are we going to use this so in the docs it shows that we have an object of items which contains all of the individual items just like this and we inside of the component we create a component called alice carousel and we add the items equals items okay cool and we have some other options you can go through this if you like so i already know what i'm supposed to build so let me just show you how i'm going to build it let's go back to our app and insert this remove this and inserted this i'm going to write alice carousel oops let's see if it has imported yep it has imported now inside of this we're going to have a few things like mouse tracking and it's going to be in finite so i don't want it to go ahead and stop at certain place auto play interval that means the time between it's gonna get auto played so i want it to play every one second so 1000 millisecond animation duration i'm gonna keep it to 1.5 seconds and i don't want to see the dots control below this so disable dots controls i don't want to see that i want it to be responsive so what is responsive so responsive means how many items you want to see in the screen at one time so let me show you so i've created this responsive object so when we are at the base of the screen it's going to display items too that means if it's 0 pixels and higher it's going to display items 2 but if it's 512 pixels and more it's going to display items 4 i mean 4 items so i'm going to take this responsive and add it in this responsive now after this i want this to be auto play and i'm gonna dis assign it some items the most important stuff so items so this items has not been created yet obviously so we're gonna go ahead and create that so there we go it's giving us error so right above this responsive thing i'm gonna create const items equals so all of the items are gonna come from this state trending state right so i'm gonna map this trending dot map and inside of this i'm gonna take a coin and let's see how this looks like so we have a picture we have the name the percentage change and the price okay cool so inside of it i'm gonna say return and i'm gonna wrap this inside of the link so link will help us to navigate from one page to other so we're gonna import it from react after dom so whenever we click on a single one so it's gonna take us to another page link is gonna have few styles of carousel item and it's gonna take us two so where do we want to go we want to go slash coin slash the current coins id so let's see if it's bitcoin so slash coin slash bitcoin now inside this link i'm gonna add an image which is going to be coin dot image and alt will be coin dot name height of 80 pixels and style of margin bottom so let's save this let's refresh this let's see if we start to see something yep we see this so you see our carousel is beginning to appear but wait we have these arrows here so i think we need to disable these arrows over here as well so i want to disable button controls yeah it's gone cool let's style this even more below this image i'm gonna have a span tag which will contain the symbol of the coin so coin symbol bitcoin or something now after this i'm gonna give some space so i'm gonna write nbsp yep and vsp4 is for giving some space and i'm gonna add another span tag inside this span tag i'm gonna write this thing so this thing percentage change in the profit in past one day so for this writing this i'm gonna add a code over here for calculating the profit so let profit equals so current price of the coin so coin dot price underscore change so let me show you if we go to the console inside of any of the array we have an item called price change percentage so we're going to take this percent let me call copy this up so price change percent is 24r if it's more than or equals to zero so if it's more than zero so obviously it's profit so this profit is going to be true so let's take this profit and go inside of over here and i'm going to say profit and and plus so if it's profit then you're gonna display plus and after this i'm gonna say coin dot price change percent is 24 hours i'm gonna display this and i'm gonna make sure it's fixed to two decimal places and display percentage after that so yep you see let me refresh where are the images gone oops my bad so i've written this profit over here let me remove this yeah cool so it's beginning to show us this profit or loss percentage now below this span i'm gonna add another span for displaying the price so first of all i'm gonna take this symbol from our crypto state and if we go down below this span i'm gonna add this so span style is going to be 40 font size 22 and it's going to display the symbol which is this symbol rupee or dollar and it's going to display the current price of this thing so also this number with comma so i'm gonna create this function now right above this component i'm gonna write this function number with comma so let me explain what's going on over here so this is basically a reject string which i've i've haven't done anything i just googled it as to how we are going to display these commas between so let me show you yep you see these commas after three and six so i've just googled it how we can display these commas are in these numbers so i just got this regex string so i just added this inside of this and if we send anything to this function let's say x it's going to convert it to string and convert it into this type of a number so it's nothing fancy no one writes rejects by themselves obviously we always copy paste the rejects so it's completely fine so if i go back and save this yep you see all the prices are beginning to display over here but the style is a lot off so let me provide the styles to it now so inside of our user styles i'm going to add a style for carousel item so correctly item is going to have display of flex and flex direction to be column so that it displays top to bottom so this styles are for a single item right and align items to center so that it displays all of these things at the very center and so it doesn't run at the side text transform is going to be upper case color is going to be white nothing special so let's go back over here and class name is going to be classes dot carousel items let's save this and yup there you go looks awesome just like our original app but hold on a second i have added this thing so red and green fonts right so we're supposed to add this in this percentage change so if i go inside of over here i'm going to give this span tag a bit of styles so what style is it if it's profit then what it's going to do it's going to display this color this greenish color otherwise it's going to display red and font weight it's going to be 500 let's save this there we go i think this doesn't have any profit that's why it's displaying empty so cool so this thing is done our banner is done now below this we're gonna display the coin table so let's go ahead and build this coin table so let's go back to our home page and below this banner i'm gonna add another component for coins table let's create this component inside of our components new file constable.js rafce i'm going to say coins table it's imported at our home page yup constable is right over here let's go inside this cons table and start building it all right so for our coins table we're gonna use another api so let's go to the api.js so here we're gonna use this api coin list api so what it's just similar to this trending coins api so in this as well we're just gonna provide the currency and it's gonna display all of this stuff in the descending order and we're going to see 100 results okay cool so let's go back and inside of this coin table component i'm going to create two states first one is going to be coins which will contain all of our coins so it's going to be an empty array initially and the other thing is going to be loading so use state loading so initially the loading is going to be false now to fetch our coins i'm going to create a new function called fetch coins and inside of this we're going to add const data a weight and axios dot get so we're going to use the coin list api right so coin list so yep it's imported coil is from slash config slash ap also this function is going to be asynchronous so let's add async and below this so okay i forgot to explain this thing so whatever we receive from our api it's going to have something called data so we are destructuring the data from inside of our api so that's why we are otherwise we could have written it like this as well so data and data dot data so we're just destructuring this right from our get go okay so before fetching this we're gonna set the loading to true so loading will start and after this has fetched so then we are gonna set the loading to false once again cool but before this we're gonna set our coins to the data that we have received from the api also this api is gonna take currency right it takes the currency so this currency is gonna come from our context api so crypto state const we're just structuring the currency from our crypto state cool now we're gonna fetch this i mean we're gonna call this function inside the use effect just like before so use effect import the use effect just like that and again this is weird why is this importing separately uh you can fix this fetch coins we're gonna call this and every time the currency changes we're gonna call this use date okay now we're gonna log this coins now let's go to the inspect click inspect and in our console yup we see this result the array with hundred elements let's close this up and start building it now first of all let me remove this and this is also going to be a dark theme component so i'm going to add the theme provider inside of this with the dark theme so let me bring in the dark theme just like we did earlier there's nothing special going on over here so i'm gonna bring this dark theme so let's import this create theme and there we go and what are we supposed to import theme provider theme provider like that let me import this okay it's not getting imported let me comma three provided yep awesome so instead of it now i'm gonna create the container just like that with the text aligned to be center so if all of the text will be center lined and now inside of this we're going to have a heading which is going to be inside of typography called cryptocurrency prices by market cap so let me import typography and it's going to have variant h4 and style margin of 18 from all of the sides and font family is going to be monster at awesome so let's compare it yep you see this is gonna improve it don't worry now below this let's see what do we have we have a search and then we have a table okay let's create this search first so let's go below here and i'm gonna use a component called text field from material ui so has it imported yep it has imported so this is gonna have a label of search for a cryptocurrency and it's gonna be the variant of outlined so let's see yep there we go so we're gonna give this some style so let me give it some class name or let me just give it styles right away which are going to be margin bottom of 20 and width is going to be 100 percent looks good and also we're going to create a state for this thing which is going to be search so use state search initially it's going to be empty and let's take this set search and i'm going to say on change i'm going to take e and set search to be e dot target dot value so that everything we type inside of it goes on and updates the state cool now let's see how are we going to create this beautiful looking table over here so let's go to material ui and search table so here we go we have the docs for the table so let's go inside of this code and we can create the rows just like this and the data like that okay there it is so we have a table container component a table inside of it and for the table head that is for these things we're going to render them inside this table head just like that and for the body we're gonna do this table body and all of the data inside of it awesome let's go ahead and do that so below this text field i'm gonna create table container and it's auto imported i believe yep it's all imported and instead of stable container first of all i'm going to check if the coins are still loading or not so i'm going to say loading question mark if it's still loading i'm gonna display a linear progress so what is a linear progress let's go back to the documentation and search linear progress yep there we go progress inside of the progress yeah you see all of these are loading components so linear progress is this one yeah so this is what we want so this is what i'm going to display let's go to our app and when it's loading i'm gonna say linear progress and style is gonna be background gold so i'm gonna display this linear progress and let me import this has it imported yes it has imported cool otherwise we're gonna do something else let me just write anything here yeah just like that yep you see linear progress that if i refresh this page there was a progress right over there cool let's go ahead and build this thing now this over here is going to be a table inside this table first i'm going to have the table head that we saw earlier so table head for displaying the top part of the table so table head yep table head is going to have some background color of gold danish background color so i'm going to give it a little dark golden color so background color will be this and inside of this i'm going to render all of the stuff so let me bring in the table row table row will be also imported from material ui so inside of this i'm gonna let me just bring that in so that we don't waste much time and i'm gonna explain you let me bring that in first okay let me import table cell there are a lot of components inside of it so okay so inside of this table row i have this array with coin price 24 hour change market cap and we're gonna map on this and we're gonna take this head variable and ins we're gonna render five table cells with all of these styles of color black font weight of 700 font family of montserrat and key obviously we're supposed to provide a key to the map and align okay let me show you what a line is okay so first of all you can see it has rendered over here so why i've given this a line is so if the head is the coin that is if it's the number one i want it to have a more space from the other ones so this is gonna have more space so if i go to this you see coin has pushed all of this at the sides so that's what it is i don't know why it's not displaying that here something's weird okay i think it's fine let's just go ahead and render the body of the table then we'll see so below this table head we're gonna have the table body so table body and now what is gonna happen inside of this first of all so i forgot to do one thing so whenever we search anything inside of this this should filter all of the coins based on the particular search so i'm gonna add a handle search component so oh sorry handle search function or logic so right here const handle search inside of this handle search coins means all of our coins dot filter and based on what's inside of our search so i'm gonna say coin and i'm gonna check coin dot name dot to lower case i'm gonna convert it to lower case and i'm gonna check if it includes the search oops dot includes the search the search state okay or so i'm gonna compare it with two things i'm gonna compare it with the name that is this name bitcoin and the symbol btc so that whichever we type let's say if we type btc then it should also display the bitcoin right so then i'm gonna let's say i'm gonna copy this up and paste it over here so coin dot symbol okay so it's gonna search for both of these things cool so now let's take this handle search and i'm gonna go inside of the hand the table body and paste this handle search so this handle such oops and instead of curly braces i'm going to place this handle search so this handle search is going to basically return us the array of all of the coins all of the filtered coins but if we haven't typed anything inside this search box then it's going to display all of the coins right so then dot map i'm going to say row and let's go inside of this and similarly just like we created the profit logic earlier we're going to create the this thing profit variable over here so if row dot price change percent is more than 0 then obviously it's going to be profit now below this return what are we going to render is going to be inside this return so table row table row so first of all if any if we click on any of this table row it should take us to that particular page to that particular coin page right and also we need to provide this some key so on click we should be taken to history dot push slash coins slash row dot id and class name obviously we're gonna provide it some class name in a minute and the key is for the map okay so first of all let's create the styles for our row so right here i'm gonna say const class says oops first let me create the use styles sconced make styles inside of this make styles we're gonna write something const classes equals use styles oops use styles yup also we need the history prop as you can see the error unexpected use of history so let's const history equals use history there we go history has been imported from react router dom let's take this history okay i think that's fine so history dot push slash coin slash row dot id awesome now inside of this table dot row i'm gonna have a table cell and table cell will be of th and table header that is scope is gonna be row and it's gonna have few styles which is nothing but display of flex and gap of 15 so right now you won't be able to see it just just this empty rows so if i go inside of this and write some relevant stuff so first of all first thing first we're gonna need an image you see our image and this stuff so we're gonna build all of this one by one first this thing then this thing then this thing then this thing so this is gonna be the first table cell okay so let me bring in the image so row.image and alt is going to be row.name and height is going to be 50 and style is going to be margin bottom of 10. so there we go you can start to see this over here below this i'm just going to bring in the code and explain to you don't worry i'm going to explain everything so we're going to have a div with style of display flex and flex direction column so let me explain so both of these things are inside of over here both of these things inside of over here these these two things so i'm going to say display flex and flex session column to display it from top to bottom text transform is going to be uppercase for this one and font size 22 and for the other one the color is going to be dark gray so that it appears a little bit muted so this is going to be row.symbol and row.name cool now let's go and create another table cell which is going to be for the price so this table cell and you know what let me write this up okay so table cell is going to be aligned to the right and it's going to be have and it's going to have the same style just like we did earlier so this table cell is going to have a symbol which is going to come from our context so let's bring this in let it go yep here's the context symbol cool and the other thing is going to be numbers with commas which we created at the other file if you don't remember in the inr carousel file and exported it yep there it is export function number with commas yeah there it is so yeah number with commas i've exported it and i've written the current price inside of it row dot current price to fixed 2. cool so now it should display us the price see just like that so and now you can see it has started to align to the right and create this gap over here all right below this i'm going to add another table cell which is going to be for this thing 24 hour change so there it is so if it's lost then we're going to make sure it is red if it's profit then it's gonna be this thing all right and font weight is gonna be 500 and this is like exactly like this thing that we did right over here okay so save this and you're gonna see yep there you go and the fourth thing is the market cap so for the market cap we are gonna have this table cell with align right and symbol number with commas again so we want it to look just like this and also this is in the millions so i'm going to display the m at the right at the end of this value so slice let me let me explain why i've written this slice if i don't write this slice over here you're going to see that this value is going to go way too long see it's way too long so that's why i've sliced it to remove the last six digits and just write million in place of that thing awesome so this is our table so let's have a look so obviously we're gonna have to do some styling over here we have to make this a bit responsive but yep for starters it looks really really good so i want you to click on the like button right now if you are satisfied with what you have created because we're going to create the coin page and that coin page is going to be awesome so let's click on the like button right now so let's go ahead and provide this some styles so and let's go to our use styles and first of all we're going to create the styles for our row so if we find a row yup we have given classes.row inside of the user styles let me bring in the styles and then i'm going to explain what i've done okay so row is gonna have so let me just remove this for a sec so it's gonna have background color of this color cursor of pointer and font family of monster nothing fancy going on over here right but when we hover on this what do we want to do we want it to change its color a little bit so we have added this hover so now you see hover is changing the color of this thing a little bit also one more thing this should display right over here um if i go to inside of here yep that's fine okay styles so it should be style not styles now it's looking awesome see great but there's one problem so if i if we scroll down this is an endless list with hundreds of cryptocurrencies so what we want to do is we want to create the pagination component so that we can create the page nature so if we go to the original app we have this pagination component if from here we can go to any page that we like right so and go back to our app and let's create the pagination component for our app as well so i'm gonna go down below the table container so first let me create this date for our page and edge pagination so use state page so initially the page will obviously be first one the so initial value will be one it's like that and you know what what i'm gonna do in over here before handle search i'm gonna slice it with respect to the current page so what i'm gonna write over here is dot slice so current page is one right so what i'm gonna do is let's say if the page is one so it should display ten components i mean ten items and if the page is two then it should display from ten to twenty items right for first page it's going to display from 0 to 10 then 10 to 20 20 30 and so on so i'm going to say page minus 1 into 10 page minus 1 into 10 means 1 minus 1 0 into 10 0 from 0 to 10 so page minus 1 into 10 plus 10. so now it's going to display only 10 items you see yep if its value was 2 so it was 2 minus 1 1 into 10 from 10 to 20 right so yep that's how we're gonna do that and now let's create the pagination component which is gonna come from material ui labs if you remember we installed that at the beginning right below this pagination enter this up and you're going to see that it's imported from where it is yep material ui labs now inside this pagination it's going to take a few things so first of all it's going to take the count of how many page you're going to require so count it's going to take it take the reference from handle search right so handle search dot length i'm going to put question mark over here if it's empty so dot length divided by 10 so if it's 100 so we want 10 pages right because in each page we have 10 items so slash 10 and we want it to be fixed we don't want to be in decimal so to fixed zero let's see what do we have so i believe we don't have anything yep you see we have this pagination right over here let's improve it a little bit so apart from that we're gonna have some styling we're gonna make this some look like a little bit goldish we're gonna provide it some styles that is padding off some 20 width of 100 display of flex and justify content of center so that it displayed so it is displayed in the center okay and each of this item that is one two three four so this is a list item right so we're gonna provide each of the items some of the classes or some of the styles so i'm gonna write classes and ul is gonna be classes dot pagination so let's provide let's go ahead and provide this pagination in our use styles right over here so i'm gonna provide this so pagination so this is how you do it so there's nothing i've done over here i've just went on to the documentation and searched it how we can provide the style to the single element of the pagination and i got this so i took it from the documentation and pasted it right over here so this is how you do it mui pagination item dash root so now you see it these are all in gold color cool and now we need to add the functionality for this so whenever we click on any of the patch any of the page what we want to do we want to set the page value and we want to scroll the page to the top so not to the top to 450 pixels okay so on change what are we gonna do we're gonna take the value and set the page to value and window dot scroll zero comma 450 now you're gonna see let's go ahead and change that let's click on second yup you see it changed third awesome it's working absolutely fine congratulations so we are done with this page we are done with our home page awesome let's go ahead and test this out if i go ahead and change usd yup you see our values are changed to usd that is amazing now the fun part let's go ahead and build our coin page the coin page is going to be absolutely awesome because if we go to the coin page you're gonna see we have a graph we have a chart over here we have all of these buttons to configure the value that we see from 24 hours or 30 days or three months or one year all of the descriptions rank current price and it's responsive as well so let me show you yup this page is super super responsive so let's go ahead and build that but before building that i want you guys to subscribe to the channel if you haven't yet subscribe because that motivates me to create more such awesome project tutorial for you all so thank you if you already subscribed so let's click on this coin let's say bitcoin and let's go to the coin page so currently we just have this coin page message over here so let's build this so let's close this up and go to our coin page so from pages and coin page now first of all we have this id over here right bitcoin so we're gonna take this id from our url and we're gonna use this to fetch one single coin from our api okay so how do we fetch this from our url so we're gonna use something called use params which comes from react router dom so react router dom okay so const now we're gonna destructure that whatever we get from this use params so we're gonna get the id variable that we had written in our app.js so this is the only variables inside of it so i'm gonna get the id variable awesome now we're gonna create a use state called coin to store which whatever we get from our api instead of this coin state and we're going to bring in our crypto state and we're going to bring in both of the currency and symbol currency comma symbol so far so good now let's go ahead and fetch the coin so if we go to config api.js we have this single coin api so this is nothing special which is providing it the id and it's gonna give us all of the things awesome so here const fetch coin we're gonna use this function to fetch our coin inside of this i'm gonna write const data equals a weight so it's an await function so we're using a weight so it's gonna be async so axios dot get and we're gonna use the single coin api endpoint and we're gonna provide it the id that we got from over here and we're gonna set the coin state to the data that we're getting from this api now to call this api we're going to go inside of use effect let's call this just like that okay so there we go let's test it out let's see if we are getting anything inside of the coin yep this is the object so yeah there we go we have got a lot of things so id bitcoin since we are in the bitcoin page so now below this i'm gonna just for later usage i'm going to create the use styles make styles because obviously we are supposed to provide these styles okay const classes equals styles great instead of this what i'm gonna do i'm gonna write a div this div is gonna have class name of classes dot container so first of all let's see what what are all the things that we're gonna have so if i maximize this so we're gonna have a sidebar over here and we're gonna have these charts over here so this page is gonna have two sections so let's create uh let's write for both of these sections so first div is gonna be for our sidebar so sidebar and i'm gonna comment it out and it's gonna have class name of classes dot sidebar okay and below this we're gonna have the chart so let's write chart and we're gonna create a component for this chart so let's name this coin info because it's gonna have additional info about the coin so also this coin info is gonna take the current coin whichever is in this page so this coin info doesn't exist obviously so let's create this component inside of this components coin info dot js raf c e coin info cool let's take this and import it okay it's not getting imported import from slash component slash coin info yep now it should display yep coin info it's displaying it so i'm gonna give the styles for this container first of all inside of the make styles let's build the initial skeleton for our app then we're going to go into the functionality of this thing let me explain how the responsive styles are also going to work so if i added this container over here also this theme is going to come from over here from make styles so let me explain what's going on so container is gonna have display of flex whenever the screen is big in the full screen mode right in this mode so it's gonna have flicks so that sidebar appears over here coin info appears over here so if i write anything inside let's say sidebar right over here yeah sidebar point this is flex in the single line so this is how it is theme dot breakpoints this is how we write this responsive style so theme dot breakpoints dot down down means if it's less than the medium screen then the flex direction is going to be column and align items is going to be center so this is how it is this is how the responsive styles are going to work now let me add it for the sidebar so sidebar is going to have width of 30 so sidebar is going to have width of 30 so for now let's ignore this responsive styles so sidebar is going to have width of 30 percent display is going to be flex flex direction is going to be column because obviously in here you see everything is column from top to bottom a line items to be center margin top 25 and border right is going to be 2 pixel solid gray so if we see yep this border right 2 pixel solid gray but as soon as this comes less than the medium screens we're gonna make this width as hundred percent just like this one so if we save this and go over here yep this is 100 right now so i'm going to explain this later as well after we have entered all of the content of sidebar inside of that so let's go ahead inside of the sidebar and add all the content so let me remove this and remove this as well now first thing first we're gonna display this thing our bitcoin symbol or any coins symbol the current coins symbol and so i've added the image so coin dot image dot large so this is what we're gonna take from the api so src coin.image.large and some alt coin.name height is going to be 200 and style is going to be margin bottom so that it has some gap in the bottom cool so margin volume 20 if i do this yup you see it's starting to take shape now below this i'm gonna display the name of our coin so typography variant of h3 let me import this typography some class name so i'm gonna give this heading some styles so let's go ahead and right over here heading is going to have some styles of font weight is let's say font weight will be bold margin bottom is going to be 20 so that there's gap again and font family is monsterat so yep looks much much beautiful now below this i'm gonna add some description now for this description adding this description this description is bit weird it has some of the so let me show you so you see bitcoin is the first peer-to-peer technology semicolon okay this is fine let me go to some other coin let's say ethereum yeah you see we have this a tag and all inside of this description so this this has some html inside of this so we're gonna make use of a package called react html parser package we're going to parse this and display it to be a proper description so let's go to the terminal let me open another terminal and we're going to say npm install react html parser let's install this and what i'm gonna do is now i'm gonna wrap this in this react html parser package so let's wait for this to install then i'm gonna import this up and as far as this goes this is just coined or description and i want the english description so it has a lot of descriptions out of it so i want the english description and i want to split it whenever this full stop comes so i'm gonna take the 0th index of the description because the description is way too large we can't display that large of our description over here okay this has been installed let me import this weird okay so import this from react html parser now you're gonna notice yup there you go so it has now been converted into a tag or the link tag awesome now let's provide the description some styles let's go to use styles and i'm going to add the styles for description so with this going to be 100 font family monster just like we always do some padding on the sides depending on the bottom padding on the top and text align to be justify this looks much much better now below this what are we going to display we're going to display this stuff rank current price market cap so we're supposed to display this so i'm gonna create a div for that and let's give it a class name of classes dot market data side of it i'm gonna have a span for the typography and this is span is gonna have some style of display flex inside of it typography and it's gonna be rank yep let's give this some props i'm gonna give this the heading styles as well so classes.heading so yep just like that so rank and rank is gonna be this so style is going to be font family monster at and variant is going to be h5 so this is going to be the typography so similarly we're going to have it for both of these current price and market cap so let's do that so i'm going to duplicate this i'm going to take this first of all let me close this annoying terminal yeah let me duplicate this two times and yeah there we go and for the first one we're gonna have the current price and the value will be this thing the symbol number with commas remember i i'm sure you may remember we created this number with commas and coin dot market data current price and currency to the lower case so this is giving some error i think the time that we are calling this number with commas the coin is not populated so what i'm gonna do is above this return i'm gonna give a linear progress so while this coin is loading so i'm gonna write it over here just like this so while the while the coin is not initialized what we're going to do is we're going to return this linear progress and background color is going to be gold just like we did in the table yep there we go that looks awesome cool let's let's move forward now the third thing will be the market cap and the market cap will have value just like we added in the table a symbol and number with commas and we're gonna give this the currency to lower case in millions so let me yeah that looks fine so yep there it is let's go to the full page and it looks pretty good so we haven't provided the styles to this section so let me provide the styles to this to this market data so if i go over here and market data just like that so let's let's go on these one by one so what's going on over here is so in the full screen in this full screen what's going to happen is a line self is going to be start padding is going to be 25 pixels and padding top is going to be 10. just like over here you see and width is going to be 100 inside of it so it takes the full width okay now to make it responsive if it's less than the medium screens so let me show you first full screen so if there's less than the medium screen what's gonna happen the width will be 100 percent i mean this display is going to be flex and justify content is going to be space around right so all of these are going to display in one single line after it's less than smaller screens then flex direction is gonna be column so notice yep it's gonna be column now if it's more small then we want it to be aligned to the left just like that so these three levels of responsiveness are going on over here now let's go on and build this coin info section that is the chart section that is going to be interesting so for creating this chart we are going to use a library called react chart js2 so this library so let's install this library by copying it up and you see all the usage that we're gonna do so to install this we're gonna take this npm install react chart js2 and chart.js and we have bunch of different charts inside of this library like donut chart line chart bar chart so let's let let's just first install it and then we're going to explore the documentation so let's go to terminal another terminal paste yep it's installing now let's see i'm going to go back to google i think this is the one react charges dot github dot yep this is the one react charges too just compare your url so if we go to this line yeah basic so this is the type of chart that we are going to use in our app let's give it out this camera on the side go back to our app and let's go to the coin info okay we have bunch of warnings so react use effect has missing dependency so let's go over here so okay this is just useless error so let's disable the error by doing this in the coins table as well so we can do this to disable the error let's go to the coin table page cool all of the warnings are gone now now let's go to the con info page and start building the chart so the charge is successfully installed and now we're gonna let's let's fetch the data what we're going to use so we have another api which is this one the last api historical chart so what this api does is let me explain so this api takes the id of the coin okay that's fine we're gonna provide the id of the coin it takes the days okay so let's say we want the data the chart from past one year so it's we're gonna provide 365. if we want for past one day we're going to provide one day so just like that it works and obviously the currency the inr or usd or any other currency great so we're going to use this api let's go to the page and we're going to create a state over here use state this state is going to be historical data to state from react okay what's going on let me manually import it apart from this we're gonna have another state for days days initially the days is gonna be one so when the app loads we're gonna just display one day of data and obviously we're gonna bring in the crypto state that is our context api again it stopped auto importing what's going on weird yep crypto state and we're gonna dis import currency cool now let's fetch the data so i'm gonna write the function for it so below this i'm going to write fetch historical data function and it's just the same as like we did previously xcos.get let me import axios this historical data from there so now we're going to provide this coin dot id okay so this coin is going to come from the previous page if you remember coin i'm going to send this coin dot id days and the currency and what's wrong with this set historical data it is defined over here historic data okay so it's historic data cool there we go now let's call it inside of use effect fetch historic data and let's shut this warning down or maybe we are supposed to write currency inside of this so whenever the currency changes or wait a minute whenever the currency changes and whenever the days changes yep both of these things whenever any of these things change we're gonna recall this api also this thing is gonna display us a lot of things for historical data but we just want the data dot prices we only want the prices of the history of that coin so data dot prices cool now this component is gonna be in dark mode as well so just like we did previously we are going to create this dark theme over here and import create theme just like this and over here we are going to have theme provider theme provider and let's import it comma theme provider it's gonna take theme dark theme cool now inside of this we're gonna have our div which is going to be our container so classes dot container and obviously we're supposed to create these classes so const use styles make styles and this use styles is going to be in const classes equals use styles cool just like that now inside of this div we're gonna have two things first thing is gonna be our actual chart okay and the other thing is gonna be the buttons below this go to the original app you see the chart and all the buttons just like this so we're going to have this both of these things now let's provide this some initial styles let's provide some initial styles to the container so if i go inside of the use styles and provide this initial style so also we're going to need this theme just like we needed earlier so let me explain so width is going to be 75 obviously because this is 30 and we're gonna give this one as 75 percent okay and display flex flex duration is column but when the screen is going to be less than medium it's going to be width of 100 instead of 75 percent because obviously you can see with this hundred percent right now okay and some generic styles like align items display content some margin and padding and in smaller screens we're gonna remove all those margin and paddings so let's save this and go to our app and if we go to full screen yep right now you can't see anything but as we go on to build our app you're gonna see how this takes the shape all right so now instead of this let me remove both of these and first of all i'm going to have this curly braces open i'm going to check if there's anything inside of this historical data state right if there's nothing inside of this we're just going to display some loading so i'm going to display circular progress let's import this so color is gonna be gold size 250 thickness one getting like this so you're gonna see wait i'll show you if i reload the page um it's not properly visible but it's going to have a loading over here so for that circular circular progress will be over here and in the else part we are going to have the chart the actual chart so for displaying the line chart we're gonna import line from charges library so let's go ahead and import that so just like this import line from react chart js2 now this line is going to have a plenty of things so first of all this is going to have some data that it's going to take so data is going to be first of all labels so what are the labels so let me show you first if we go into this chart so these that you see right over here the prices and the dates are what called the labels so labels colon historical data dot map so this is gonna get a little bit trickier so bear with me i'm gonna explain everything so first of all this thing is gonna have a date right so hold on let me just log this and show you historical data let me add something data before this so we can identify this yep data so we have all of these data okay so if we go inside of any one of them so we have got two things we have got the price on that day and the actual date okay so we're gonna write like this instead of this let date equals new date and coin of zero so at the zeroth index we have the date right so we're converting it into an actual date so we're converting it into the date and also we're gonna create the exact time for that particular date right so i'm gonna write for time as well so let me explain so let time equal so date dot get ours if the r's are more than 12. so we're not going to display it in the 24 hour format we're just going to display in a mpm format so if it's more than 12 so date dot get ours we're going to convert it into the time so hours and minutes this is just the normal javascript so you can go ahead and read about this date in javascript so date dot get rs minus 12 and minutes and that will be the pm and otherwise it's going to be the am so why are we taking both date and time so when the chart will display one day data so if i go back and in one of the coins if we have set for 24 hours right so you're going to see that it's going to display the time 11 40 p.m but if it's not for one day then you're going to see then it's going to display the date so that's why we are calculating for both time and date so now now watch what i write over here below this i'm gonna write return if days are one oops if this are one then we're gonna display time otherwise we're gonna display date dot to local date string save this and let's go back to our app close this up okay we can't see anything because obviously we don't have the data right now so now let's go on and create the data set for this thing below this we need another thing called data sets and it's going to be an array so now it's going to have few things first of all it's going to have the data so data is going to be the price basically so historical data historical data i'm just gonna take the first part of the array so if you remember this had two things the date and the price so i'm just gonna take the price now data.map coin and i'm gonna return the coin of one all right okay what's the error oh okay so this has to be an object cool no yep you now you can see now you can see the chart beginning to take the shape so after this comma other thing is gonna be the label so label is gonna be like this surprise in past these many days whatever the current days are let's say for one days in this particular currency so this is how the label are gonna be displayed and we're gonna give some border color of golden yep you see that chart is beginning to take shape but we don't want this huge like this weird looking circles in our chart so let's remove these if you want them then it's okay you can keep them so below this yeah below the data i'm gonna add the options so elements i'm going to make the points radius is going to be 1 i want the points radius to 1. so yep now it looks much much better see it's displaying the values as well awesome now below this we want some buttons just like this we want these buttons to be displayed so that we can change this by clicking on them and let's create a button component first of all so right below this i'm gonna create another div for all of those buttons now inside of this i'm gonna take the chart days so this chart is okay so this chart days comes from over here so if you go back to our github repository and in the same config folder we have data.js file so we have this object inside of it which has all of the data for 24 hours you can manually render these buttons or you can take this data doesn't really matter so this has value of 1 value of 30 so i'm just going to use this so let's go to the config and create a new file data dot js i am going to paste this inside of over here cool now let's import this chart data okay let me manually import it just like that okay so chart data dot map d inside of this i'm gonna render a button later i'm gonna make this button custom button we're gonna go ahead and create a custom button for it and day dot label let's see yep we have four buttons over here let's give this div some styles display flags some margin top so that this creates a bit of spacing this justify content to be space around and width to 100 percent okay so now what i'm going to do is i'm going to create the custom component for all of these buttons so instead of the components i'm going to create a new file called select button dot js r a f c e cool this is gonna take children so that anything that is written inside of it is gonna be written inside of over here so let me take this and replace it with this thing let's import this nothing will be changed okay it has changed a little bit so this is going to be span okay so instead of over here i'm going to give it some class name classes dot select button oops class says not this class names yep and obviously we don't have the user styles yet so it's gonna give this error so const use styles make styles okay and const classes styles now it won't yep okay so let's write some styles for this but before that you know what i'm gonna add some more functionality to this button so whenever this is selected this should display a different style and stuff like that so it's gonna have few more things first of all it's gonna have an on click and a selected selected prop okay so selected and on click so whenever it's selected the style is gonna be a bit different and on click is gonna be over here so on click on click cool so now let's go back over here first of all i'm gonna say key to be day dot value and on click is gonna be so what's gonna happen on on click so if i click on this button it should display it should set it to be one day the day's state if i click on this state it should set the day's state to be lit 30 value so this is what's going to happen so set days to be day dot value cool okay then the selected if it's selected how we're gonna know so if day dot value is equals to the actual days the state of the days okay so if it's same so it's gonna be selected cool now let's go back inside of it and i'm gonna add some styles and i'm gonna explain you what i've done so for the select button i'm gonna add a few styles let me explain yep you see it's beginning to take the shape yep there you go awesome yeah let me explain so border is going to be one pixel solid gold as you see border on this border radius is going to be five because it had some curves bought radius some padding padding left right some font family some generic styles yeah background this is important so if it's selected then the background color will be gold otherwise it's going to be none then the color if it's selected is going to be black so you see black and bold as well so font to it it's going to be 700 otherwise 500 and on hover we want this to be like this so background color gold and color black width is going to be 22 percent and this is optional if you want margin or not margin top okay i'm not gonna add this so let's see this in the full screen yep this looks awesome so with this we have successfully created our crypto tracker app or crypto hunter app congratulations and now let's go ahead and host our app so to host our app it's really easy you can go to netlify.com log in by clicking on this login button so i already have an account so i can go ahead and log in click on new site from git click on github it's going to authorize your github and just select the repository that you want to deploy so i've actually created a much in-depth video on how you can go ahead and deploy a website on netlify a react app on netlife so i will highly recommend you to go and watch that video but before moving on to watch that video don't forget to give this video a huge thumbs up and subscribe to the channel and also guys if you like to support my channel you can click on the join button down below it really motivates me to create more such awesome videos for you all so thank you all for watching this video and in the next video we're gonna go ahead and integrate the firebase to our app we're gonna add the user authorization add the feature of adding the particular coin to your watch list so keep on watch out for that video because it's gonna drop very very soon so subscribe to the channel and i'll see you in the next video bye bye

Channel: RoadsideCoder

Views: 7,442

Keywords: cryptocurrency tracker react, react cryptocurrency app, react crypto app, crypto react app, react js projects, react beginner tutorial, react beginner projects, react simple project, react big project, react hooks, context api, coingecko api, react, react tutorial, react material ui, react material ui tutorial, react material ui project, react js project with material ui, react js

Id: QA6oTpMZp84

Length: 109min 47sec (6587 seconds)

Published: Sun Oct 10 2021