Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video

Key Takeaways

hi there glad to have you here welcome to a project video where you'll build and deploy a cryptocurrency react application with in-depth data about all cryptocurrencies crypto markets and exchanges popular cryptocurrency news and much more cryptoverse is the best cryptocurrency application that you can currently find on youtube and on the entire internet in this one video you'll learn react best practices you're also going to learn redux the easy and professional way using redux toolkit you're going to learn how to create user interfaces using and design and how to create charts using chart.js but most importantly you're going to learn how to fetch data from two different sources using rapid api essentially you'll become the master of working with apis i initially planned on putting this as a paid course but i later decided to release it completely free for you guys here on youtube so to support this video leave a like comment and subscribe it shouldn't think more than a few seconds and i really appreciate it keep watching and you'll learn how to build this amazing cryptoverse project in just one video and don't forget i'm also going to teach you how you can deploy it to the web so that you can share it with your friends put it on your portfolio and get a job for quite some time now i have been working on something big i'm creating a custom platform where you'll be able to learn by creating even better and more professional projects it'll take a long time to turn this into a reality but i want you to make the most important decisions during the process so click the mailing list link down in the description so that you can stay up to date and choose which projects will be built first big news coming soon with that said let's dive straight into the video [Music] before creating a folder for our project code we must first visit rapid api the link is going to be down in the description the making of this entire app is possible only due to rapid api because we are using their coin ranking api this api is just one of hundreds of thousands of apis available on their api hub you're going to learn how to use all the endpoints from this api how to get different exchanges markets and cryptocurrencies and finally we're going to use one more api from their platform which is called bing news search this api is going to allow us to fetch cryptocurrency related news so to be able to use these apis make sure to use the rapid api link in the description and then you can click sign up or log in at the top right in this case i'm going to log in since i already have the account you can log in with google github facebook or your regular email once you're in you'll be redirected to rapid apis hub where you can find hundreds of thousands of apis this was the first step in our video now let's create our react application and then later on we're going to call these apis right from a react application as always let's start by creating an empty folder on our desktop we can name it something like crypto app after that feel free to open an empty visual studio code window or whatever code editor you use then you can simply drag and drop the empty folder into your code editor once you've done that you can go to view and then finally terminal inside of here you can first clear it and then we can run mpx create dash react dash app and then finally type dot slash this is going to initialize an empty react application in our current directory this process is going to take a few moments so let's watch this nice loading screen and then i'm going to be right back and there we go our app has been initialized the most important folder here is going to be the source folder src inside of here you'll see a lot of files that we don't necessarily need to use so what i always like to do at the start is to completely delete the source folder by right-clicking and then clicking delete and then we are going to create a new instance ourselves once your source folder has been deleted simply right click and click new folder and let's name it src inside of there we are going to have one most important file called index.js our index.js is the starting point of any react application inside of there you need to import react from react we also need to import react dom from react dom and then we're going to import the app which we're going to create soon so you can say import app from dot slash app finally we need to run react dom dot render and then inside of here we need to pass this app as a component as a first parameter and then finally say document.getelementbyid root to hook our app onto our rootdiv behind the scenes this means that we have a public folder with one index.html file now this html file looks a bit weird at the start but if you space everything correctly remove some comments and even more comments you'll notice that this is a basic index html5 that simply has the title which we can change now that we're here cryptoverse and it only has one single div with an id of root our entire react application is going to go right here inside of this div now that you know that our next step is to create our starting point which is the app.js so just next to our source let's create a new file called app.js our app.js is going to be a basic functional component so we're going to use a quick trick to make this happen i simply typed rafce and i'm going to press enter this is going to create a boilerplate code for us if this didn't work for you that means that you have to install an extension more specifically you need to visit your extensions tab and then search for es7 react redux graphql react native snippets once you have that you'll be able to use the snippets to more quickly create often use react code snippets great with that said i'm going to use these snippets throughout the application but if you don't like it or for some reason this is not working you can simply type it out by hand we have a basic import react from react we have a const app with a return and finally we're doing export default app to make sure we've done everything correctly so far let's simply add an h1 tag and let's say crypto verse if we run our code and we end up seeing this in the browser that means that we've created everything successfully so far so let's go back to our terminal go to terminal clear the console and finally type npm start this is going to start your application on localhost 3000 and there we go top left corner on h1 that says cryptoverse remember in one hour or in about the length of this video you'll have the entire website build right here and you're going to learn how to build this website and all other websites that use similar react functionalities so let's get started we can start by stopping the server for running by pressing ctrl c and then y we can clear the terminal one more time and we can start by installing all the necessary dependencies we can install the dependencies by typing npm install and now we can start listing all of the dependencies for styling we're going to use and design so you can simply type and d then we also need and dash design forward slash icons for the icons we are also going to use redux so you can install react dash redux and add redux js forward slash toolkit then we're also going to use axios to make api requests we're going to use chart.js to create charts we're going to use html react parser to parse some html data we're also going to use a hand a little package called milify that's going to transform extremely large numbers into readable strings finally we're going to use moment to parse times and dates and we also need react dash chart js dash 2 to render those charts from charges in our react application there we go these are all the packages that we need you can simply press enter and we're going to wait a few moments and they are going to be installed while the packages are installing now might be a good opportunity to check out the javascript mastery newsletter for the upcoming huge project the link is going to be down in the description but basically i'm creating a phenomenal new platform with even better projects that you'll be able to build so far i'm still in the process of building it so feel free to just enter your email and first name so you can stay up to date with those new projects i'm creating great news coming soon and you'll be the first one to know about them stay tuned there we go all of our dependencies have been installed and we can simply run npm start one more and final time so that we can always take a look at our changes in the browser once you've done that you can simply close your terminal we can start off by creating the general layout for our application to do that we're going to import a few things from react router dom and ant design so let's import in curly braces switch then we need a route and a link and this is going to be coming from react dash router dom below that we can import again in curly braces layout typography and also space and this is going to be coming from and d and design there we go now we have these components we're going to use you can delete this div and let's create a new div this div is going to have a class name equal to app just inside of there we're going to have one more div that's going to have a class name equal to navbar below the nav bar we're going to have one more div and this one is going to have a class name equal to main this is where main content is going to go and finally below that we're going to have one final div which is going to have a class name equal to footer we can start from top to bottom by creating our navigation bar and we can do that by creating a new folder in the source folder called components this is the main folder you're always going to have in your react applications where all of your components are going to be inside of there we can create a new file called navbar.jsx a lot of people ask me what are the differences between the jsx and js well they're essentially the same simply by using jsx and some kind of icon library it helps you differentiate where react components are from basic js files with that said our navigation bar is going to be a functional component so we can simply run rafce and then we're also going to import a few things from ant design we can import a button we're going to need a menu then we also need typography and we're going to use the avatar if you've never used and design before don't worry that's completely fine i'm going to teach you how to use it step by step actually this is one of the first times for me as well that i'm using and design as you might know i actually prefer material ui but i like to switch things up from time to time just to see what other options are available so we can import these from and design we are also going to import a link from react router dom and finally we need to import a few icons so we can say import that's going to be home outlined we're also going to use money collect outlined as well then we're going to use the bulb outlined and we also need fund outlined and finally menu outlined there are a lot of icons and these icons will be coming from add add design for slash icons great now that we have everything imported we are ready to start creating the navbar we can start off by adding a class name to this div and that class name is going to be equal to nav dash container inside of there we're going to have one more div and this div is going to have a class name equal to logo dash container now inside of this logo container we're going to have a few things first we're going to have an avatar component coming from and design then we're going to have a typography component more specifically typography dot title and more specifically it's going to be a level 2 title i'm going to show what this means in just a second and it's also going to have a class name equal to logo we can close it inside of that we're going to add a link component coming from react router dom the link is going to point to forward slash and then inside of there we can simply say crypto verse great and the third component on our list is going to be a button this button is going to have a class name equal to menu dash control dash container and we're going to use this button on mobile devices to switch between the menus but for now we can simply comment it out so we've used the avatar component and the typography title component we've also imported some more components from and design but what that actually is and where can you find more components that you want to use to find out you can head to ant dot design inside of here you'll notice that it's a design system for enterprise level products and you have a few examples of the apps they work with you can go to components and then inside of here you can learn about all the components they provide they separate them into the general layout navigation data entry and so on but as you can see all of the components are here so for example if you need pagination a page header a drop down a layout spacing dividers typographies everything is going to be in here for example we've used the avatar component so let's search for avatar and let's click on it inside of here you can see that avatar is basically an image or an icon where you can put some source tag to display it in a circle that's basically it and if you click this icon you can see the code so whenever you're wondering what something is or you want to do something extra with and design you can just head to their website and research these components with that said we have to add a source tag to this avatar and we can do that by saying source is equal to and now we need to pass the icon we're also going to give it the size equal to large so where is this icon coming from well we're going to create a new folder in our source folder called images and then you can head to the description of this video and simply download the image called cryptocurrency.png you can simply put it in your images folder and we should be good to go we can of course import that icon at the top by saying import icon from and that's going to be dot slash images and then cryptocurrency dot png great now let's save this and let's import this navigation bar into our app so that we can display it right here the usual way of importing components from the components folder looks like this you would say import and then that's going to be navbar from and then you can simply type dot slash components slash navbar it's fine for one line or two lines or even three lines but later on you're going to have more components here it's not going to be just snap bar and your code would look like this and that's definitely not efficient or good looking you're cluttering your view so i'm going to show you a little trick that's going to allow you to import all of the components in one line to do that we can create a new file inside of the components folder called index.js inside of here you can say import and then curly braces default as navbar and that's going to be coming from dot slash navbar this one line is going to allow us to import navbar in a different way if we go here you no longer have to do it like this what you can do is say import put navbar in curly braces and then simply say dot components and now all of the components that you export from here are going to be importable like this navbar we're gonna have for example a layout we're going to have footer this seems really meaningful import navbar layout and footer from components and it's also in one line so that's a cool little trick that you can use in your react applications on all of my videos i try to teach you so many of these tips so if you like this one definitely make sure to subscribe because many more interesting things are coming up with that said let's use this snap bar right here inside of our nubar div as a self-closing component before we go ahead and check this out in the browser make sure to go to the components index and just change this to export not import i've made a typo there now we are exporting it from here and we can import it right here now let's save it and check it out in the browser okay looks like we have a failed to compile error we forgot to install react router dom that's not on you that's my bad i simply forgot to add the reactor dom on our mpm installation list so one more time stop the app from running by pressing ctrl c and run npm install react dash router dash dom this is going to install much more quickly now as it's only one dependency so let's wait for that and then we're going to restart our application one more time there we go the package has been installed and you can simply run npm start the app is going to be launched in your browser again and then we'll be able to take a look at our changes okay we get one more error that's going to be easily fixable i always like to keep these errors in because i want to teach you how real development looks like it's not always going to look perfect so to fix this we're going to go to the index.js and instead of here we simply need to import that's going to be browser router as router and this is going to be coming from react router dash dom so to be able to use links and other things you need to wrap our app with the router so right inside of here we can add the router component and you need to put the app component inside of it then that's going to look something like this when i space it out properly there we go we have the router and we have document.getelementbyid now we should be able to see our application and there we go we can see cryptoverse but this doesn't look that good yet so let's continue adding more stuff you might have noticed that we have some class names here these are going to be used only for the layout and some minor styling changes all of the main styling is going to be done specifically through and design but to simply make it a bit more responsive and to simplify the process i've included some class names like these ones for that we're going to create a new file called app.css in here you can simply paste the style sheet that you can find in the description of this video it's going to be under a specific gist you'll be able to find the link really easily again there's no hard css styling here it's mainly some variables colors and mobile responsiveness great now that we have that we of course have to import it right inside of our app by saying import dot slash app.css great that's going to be it and now we can continue with our nav bar we can get rid of this button for now because we're going to use it later on but for now below this div we can create a menu a menu is a component coming from ant design a menu is going to have a theme equal to dark and inside of there we can have different menu items so let's create our first menu dot item and it's going to have an icon equal to and that's going to be home outlined we already imported it but make sure to call it as a component with the opening component tag and make sure to self-close it like this this is our menu item inside of our menu item we are going to have a link tag so in here we can say link and more specifically the first one is going to be 2 which is going to be equal to just forward slash which is our home component now we can duplicate this link a few more times the second one is going to have the fund outlined icon and it's going to go to crypto currencies and of course d2 is also going to be two four slash cryptocurrencies with the lowercase c then third icon is going to be money collect outlined this link is going to go to exchanges and of course we can go to forward slash exchanges with a lowercase e finally the last thing we can have a bulb outlined icon and in here it's going to point to news and then again four slash news with a lowercase n this is going to be our menu let's save it and take a look in the browser as you can see we can see everything on the screen but god doesn't look awful but we don't have to worry about that we are first creating the initial layout and then we'll worry about styling it all together but for now we're good so now let's go continue with the layout of the main content to do that we can close all of our files besides the app.js we've finished our navbar and now we can move on to the main part inside of our main we are going to have a layout component which is a component from and design it is not a self-closing component and this component basically lays everything down so that's it we don't need to pass any params inside of there we're going to have one more div that's going to have a class name equal to routes inside of there we are going to have a switch component which is coming from react router dom a switch allows you to have multiple routes so inside of here you can create a route component and that route is going to have the exact path meaning it's only going to trigger if you go exactly to that url and you have to provide the path variable which is going to be just slash in this case finally you have to provide a component you want to render under that route in this case that's going to be the home page component now we can duplicate this component a few more times we are going to have one for the exchanges that's going to be path forward slash exchanges with a lowercase e then we're going to have one for cryptocurrencies and the path is going to be forward slash cryptocurrencies with lowercase c and we're going to have two more one is going to be crypto details so we can say crypto details and the path to that is going to be four slash crypto forward slash and then colin coin id this column means that this thing is going to be dynamic it can be 1 2 12 or so on so that says it's dynamic and then the last route is going to be news and finally the path is going to be forward slash news these are all the components that we're going to have homepage exchanges cryptocurrencies crypto details and news so to make our life easier we can immediately import them all at the top and then we can create the basic layout for each one of them so at the top we can say navbar then we're going to have exchanges we're also going to have home page we need cryptocurrencies we need news and finally we need crypto details let's save it and let's see if we covered everything we did and finally let's create those components in the components folder so let's go to the components new file that's going to be let's start from the top to bottom that's going to be homepage.jsx we can simply run rafc and in here we can say homepage we can now copy this entire component and create the second one the second one is going to be exchanges so let's type exchanges.jsx simply paste it select multiple things and type exchanges then we can go on to the third one which is going to be cryptocurrencies so new file cryptocurrencies.jsx again we can copy this thing paste it and say crypto currencies let's go even further we need to do crypto details so let's create cryptodetails.jsx and again copy and paste and rename this is going to be crypto details and there is the last component we need which is going to be called news so we can create a news.jsx component again we can simply copy paste and rename i know this was a lot of manual work but this is going to save us a lot of time in the future finally we have to go to index.js and we have to export all of these components so let's duplicate this line a few times say export default as let's start with cryptocurrencies from cryptocurrencies we're going to have crypto details from crypto details we also have exchanges from exchanges home page from home page and news from news let's see one two three four five six one two three four five six that's it we covered everything now inside of the app we're importing them therefore we should be able to render those components on specific routes let's go ahead and test it out if we go back to our application and click cryptoverse you should see that we are now on localhost 3000 and if you click cryptocurrencies you can see that a little s pops up here means that we have some styling issues so to fix this and instantly make it better to fully implement and design you have to go to the index.js and inside of here you have to import something from and design that something is import and then a string and the forward slash test forward slash and d dot css this is one single line that's going to make our app look so much better and there we go now you can see cryptoverse is a navigation bar we can see the content here which shouldn't be that high but it's there and we can now switch cryptocurrencies exchanges and news as you can see all of these are swappable we can also manually check for the coin details if you remember that's going to be in app and then we have to go to crypto and then a specific id so if we go to crypto and then forward slash one you should be able to see crypto details all of our components are being rendered now let's just finish the layout so that this shows up nicely and let's add a footer and then we are ready to start implementing the functionality so the last part we have to do here is the footer inside of our footer let's add a typography more specifically a typography dot title it's not going to be a self-closing component inside of there you can type crypto verse or feel free to call it however you want then we're going to add a break tag and finally below we can say all rights reserved great this title is going to have a level equal to 5 and it's also going to have some styles we can do some inline styles like this and we can say color is equal to white and also the text align is going to be equal to center i just noticed the level and the style should have gone to the actual title not a div with the footer so we can paste them here and below that title we are going to have a space that's the end designs way of saying this is a div but we're going to give some space between the items so inside of here you can create a link to home we can duplicate that the second one is going to be to exchanges so you can say exchanges with the lowercase e and the third one is going to be news you can type news here as well great this part seems to be done let's save it and check it out as you can see our footer doesn't seem to be on the bottom it's on the top right so let's see where have we messed up the closing div of the main should have been right here below so the closing diff of the main also needs to wrap the footer that was the issue we've had so let's align this properly keep in mind the footer is now inside of the div main let's save it and check it out and there we go our footer is now being displayed correctly as you can see we still have some issues where the footer is not showing up at the bottom of the screen but once we actually start implementing all of the content pages we'll figure out why there's a problem with that so let's go ahead and let's start with the functionality of this application again i know we took a lot of time to create the basic layout and the functionality of routing but this is going to save us so much time in the future and that's the reason why we did that so let's go ahead and start with the functionality let's start by building out the home page to build out the home page we can go to source components and then home page inside of here we can import a few things we can import milify that's the package that's going to format our numbers then we can import a few things from and design these are going to be typography row column and it's going to be statistics or rather statistics singular this is going to be coming from and d then we're also going to import a link and that link will be coming from react router dom we can start off by deleting this div and we're simply going to put an empty react fragment right here you can do it like this and then inside of there we're going to start off with a title we are going to use a lot of titles here so we would have to do a lot of times typography.title just to make that a bit simpler what we can do at the top we can say const and then the structure the title from typography that's going to look like this now from now on you can simply say title that's it so our first title is going to be level 2 and then we can give it a class name equal to heading inside of there we can simply say global crypto stats let's save it and take a look as you can see global crypto stats now we can add a row and in that row we're going to have a few columns so we can say call and that call is going to have a span equal to 12 that means it's going to take 12 spaces in and design their total of 24 spaces this means that it's going to take half the width of the screen now instead of there we're going to render one more end design component which is called statistic statistic is a self-closing component and inside of there you can pass two different things we can pass a title and in this case we can say total crypto currencies and then you can pass the value in this case let's say the value is going to be five but later on of course we're going to fetch real data and then put it right here now that we have this you can copy and paste this line five more times we're going to have six of these columns in total the second one is going to say total exchanges the third one is going to be the total market cap the fourth one is going to say total 24 hour volume and the fifth one is going to say total markets that's it we don't need the sixth one and let's see how does it look like in the browser as you can see this is what a stat component is a simple div with a heading like this and then the value right here of course our goal is to fetch all of the real data from the api to display it right here as you can see our footer is still kind of here in the middle it's not going all the way down but that problem is going to be fixed automatically as we add more content so what better way to add more content than to fetch real actual api data using redux toolkit so now i'm going to teach you how we can fetch real cryptocurrency data from rapid api using the redux toolkit stay tuned this is going to be a really educational part it might be a bit hard but as soon as you start writing more code you're gonna notice that it all makes sense and that it's actually easy the easiest way to fetch data from apis so let's do that right away redux a predictable state container that has been a problem for react developers for quite some time now it's predictable centralized debuggable and flexible but it's definitely not easy especially for new react developers that's why the redux team thought of something they said let's replace all of the default code people have to write and let's remove all of the files and folders and simplify it and that's how redux toolkit was born if you simply get started and scroll a bit down you'll notice that redux toolkit is now the official recommended approach for writing redux logic and it makes it so much simpler so far i haven't seen a lot of quality tutorials in redux toolkit so you can think of this video as your introduction or a course for redux toolkit on our cryptocurrency app example i'm going to teach you everything you need to know how to use the redux toolkit but also how to use the redux toolkit query the rt query is a really useful way of actually fetching data from apis we can go to the top right and search for query and you're going to notice that under part 8 of the tutorial redux essentials redux query advanced patterns and everything else you need to know about querying data is right here but you don't have to read through that because we are going to do it together in this video to start fetching our data we are going to go back to the rapid apis hub and we're going to search for coin ranking once this load you can click on this blue button right here for you it might say something different like subscribe there is a free plan so don't worry about that and as soon as you're subscribed you'll be able to click here to test the endpoint as you can see you're immediately going to get all of the possible data right away so what do we have to do to use this api well you can go under code snippets and for now you can simply copy and paste this options object back in our app i'm going to close all the files and folders and we can go to source and create a new folder that folder is going to be called services that is redux's new way of fetching data inside of services you can simply type crypto api dot js and inside of here is where we'll do the logic of fetching the data from the api just so we don't forget about it you can paste the options right here because we have to use this data later on but before we set crypto api we need to create a store for our redux application a store is one central state of truth meaning your entire applications state and we can create a store by creating a new folder in the source folder called app inside of the app you can create one file called store.js redux simplified the process of creating a store significantly you can simply say import and then import the configure store function from add redux js forward slash toolkit finally you can say export default configure store you need to call it as a function and then pass an object inside of there the first parameter in this object is going to be reducer and for now we're going to leave that as an empty object great now that we're exporting the store let's actually use it inside of our index.js we can go to the index and inside of here we can import store from dot slash and that's going to be app and then forward slash store this is the variable we have to provide to our provider so at the top we can say import provider from react redux now that we have it we have to do a similar thing with it with this router simply we have to wrap the app by saying provider store and then enclosing our app into that as you can see we are now wrapping our app with the router and also with the provider where we are setting the store variable to be equal to store we are doing this because now our entire app is inside of the provider which means that every single component inside of the app is going to have access to the store variable now that we have the provider and the store we can actually create the first piece of the data fetching functionality and we can do that by importing a few things from redux js so we can say import that's going to be create api and fetch base query these things are coming from add redux js forward slash toolkit and then forward slash query now we're also going to set the headers so we can say const crypto api headers and that's going to be equal to an object and we simply have to copy these headers right here this is coming from a rapid api so make sure to copy it later on we're going to replace these keys with environment variables so that they are not available to the public the second thing we need from here is this url so we can copy it and we can store it in a variable by simply saying base url is going to be equal to this great now we can remove this and we can say export cons crypto api our crypto api is going to be equal to create api that's coming from redux and then we have to pass some options inside of an object first thing is going to be the reducer path so we have to say what is this reducer for and you can simply provide the name here in this case let's say crypto api then you have to provide the base query so right here base query is going to be equal to fetch base query which is a function that accepts an object and inside of there you can simply say base url is equal to base url it's not bas url it's base url and the final and the most important thing are the end points so we can say endpoints and that's going to be equal to a function where you get a builder as a first parameter and that function instantly returns an object inside of that object you can specify the names of the endpoints for example something like get cryptos we can name it anything you want and that's going to be equal to builder.query you pass an object as options again and then inside of there you say query is equal to and you provide a function that's going to point to that specific request so let's say that we want to get the information for the exchanges in that case it would simply be something like forward slash exchanges but keep in mind that if we want to make this request we also need to pass the headers so we can create a simple utility function that's going to simply add the url and the headers to our call we can do that by saying const create request and that's going to be equal to a function that accepts a url and simply returns an object that contains the url which is equal to the url and finally it contains the headers which are equal to crypto api headers now instead of simply calling the forward slash exchanges we can call create request and in there we can simply pass the url which is in this case forward slash exchanges great so this way we're gonna get all the exchanges the name might not be appropriate but we're gonna worry about that later on i know that we wrote a lot of code that might be new to you but don't worry we're going to repeat this process one more time and i'll try to explain in a bit more depth what these fields are for once again once we actually start seeing the data that we're getting but for now let's repeat one more time we created a store in a storejs we passed that store variable to a provider that we are wrapping our app with as you can see it's right here and then we created a specific api that we're going to use to fetch api data from rapid api now we need to find a way to connect this api to the store and we can do that by importing that api import that's going to be crypto api and that's going to be coming from dot slash services slash crypto api and the only thing you have to do is inside of the reducers object in square brackets crypto api dot reducer path and then that is equal to crypto api dot reducer redux is doing everything for you you just have to specify this for every single reducer that you create as you can see we create an api and therefore we have all of these variables like reducer path and reducer now our application is connected now we have to see which data do we have to get first and then fetch it from the appropriate endpoint from the api if you remember correctly before we started implementing redux we were on the home page and we needed the data for the total cryptocurrencies exchanges market cap and so on so how can we get that data well that data is coming from a specific endpoint and in this case let's call it getcryptos the actual endpoint we are looking for is not going to be for slash exchanges rather it's going to be forward slash coins that's going to give us more information about all cryptocurrencies so now we have the crypto api which we're using in the store but we also have this get cryptos query so we can export it and you can do that by saying export const then an object and then in there you can say use get cryptos query so redux toolkit actually creates a hook that you can call instantly to get all the data for your query that's going to make it so much simple to retrieve the data they also give you loading states finalized states and everything else you need while making api calls and export cons this but that's coming from so we can say equal to crypto api like this there we go export const use get crypto's query again that has to be same to this name right there but you have to put the use before and query at the end now we're exporting that let's go back to the home page and let's import it we can import it at the top by saying import use get cryptos query and that's going to be coming from dot slash services slash crypto api so you might be wondering how do we call it and the answer is incredibly simple const and then in curly braces we get the data and redux also gives us the is fetching state and you call this as a hook simply use get crypto's query and we immediately get the data so for now let's simply console log the data to see what we are working with before we console log the data let's make sure to go to the crypto api and just scroll right i've just noticed that instead of forward slash query we need to have four slash query for slash react so if you add that we can go here and we can now see our data let's save it and take a look in the browser as you can see we first have two states of undefined and then finally we have a status of success and then inside of the data we have base which is the usd we have the coins but right now most importantly we have the stats for all the data that we need as you can see it is that simple without a lot of code we've managed to create a hook to make this api request but right now we only have one and we have already created the entire code we need to create multiple so all of this code is going to remain we just have to keep adding more endpoints to be able to make more requests so now let's see how can we fetch the data from here you saw that at the start the data was undefined that's why redux toolkit automatically gives us the is fetching variable so that we can check if is fetching then we want to return some kind of a loading state so we can see loading here and now let's see how we can make use of the data to make use of it we can create a new variable const global stats and global stats is going to be equal to data question mark dot data one more time to get into that data object and then finally question mark that stats great now we can use this global stats object to represent our stats we can start with total currencies right here and the value is going to be global stats and then dot total let's save it and see if that works there we go 12 155 cryptocurrencies let's add all the remaining details for the other ones we're going to use the millify package so at the top we can simply import milify import that's going to be a default import milify from milify now it's starting to get hard to read everything at this high font size so i'm going to decrease it a bit so that we can see everything now for total exchanges we can put a dynamic value call the milify function and as a parameter provide globalstats.exchanges and finally we can copy that and we can continue with all the other ones so for total market cap instead of exchanges we can simply say dot total market cap then again we can paste it one more time for the total 24 hour volume it's going to be total 24 hour volume and finally we have total markets so simply paste it one more time and instead of exchanges we can say total markets i've just noticed that i've imported mellify two times so let's remove the second instance and also instead of just exchanges here it's going to be total exchanges now that we fixed that let's check it out in the browser and there we go i'm going to remove the console for now so that we can see it there we go global crypto stats total cryptocurrencies 12 000 exchanges almost 400 total market cap around 2.3 trillion and the total 24 hour volume is 125 billion that's great now we have our general global crypto stats but now is the time that we fetch data about each specific cryptocurrency map over it and display it here so that's exactly what we're going to do next just below this row we can render one div this div is going to have a class name equal to home heading container inside of that div we can have a title and this title is going to be of a level 2 and it's going to have a class name equal to home dash title inside of there we can simply say top 10 crypto currencies in the world now we can duplicate that title the bottom one can be level three and we can simply say show more but that's going to be show dash more with the class name and finally in there we can render a link component like this and that link is going to point to forward slash crypto currencies inside of there we can simply say show more great let's save it and take a look in the browser as you can see now we have top 10 cryptocurrencies in the world and also a show more button now below that we're going to render a crypto currencies component so cryptocurrencies and it is a self-closing tag now we can copy both the cryptocurrencies and the div duplicate it one more time this is still going to be home heading container home title but in this case we can say latest crypto news so this is going to be the second section of our home page and the second link can still say show more but it's going to point to news and then the component is going to be just the news component now when calling both of these components i'm going to pass one prop which is going to be called simplified on our home page we only want to show first 10 cryptocurrencies and first 10 news so with this variable we'll be able to change it to only show 10 and not a hundred of course to render these components we have to import them so just at the top let's say import crypto currencies and that's going to be from dot slash components and from there we can also get the news let's save it and take a look as you can see we have two headings show more buttons and we are rendering the cryptocurrencies component which is right now just a text saying cryptocurrencies but let's change that and let's actually render out all the different cryptocurrencies we can do that of course by going to the cryptocurrencies component instead of here let's first import few things import milify from milify also import link from react router dom then we're going to import something from and design a card a row a column and an input that's going to be coming from end d and finally we also need to get import use get crypto's query coming from dot slash services forward slash crypto api great now let's call that query the same way we did it before by saying const destructure it data which we're going to rename to kryptos list then we get the is fetching and finally that is equal to use get crypto's query great now we can import use state and in there we can create a new state field we can say use state and the state is going to be called cryptos set cryptos and the starting value is going to be equal to crypto list question mark.data question mark dot coins this is going to give us access to all the coins we can start right away by simply cons logging it so kansa log cryptos that is our state field and we misspelled it it's cryptos list like this let's go ahead and see this console log in the browser our console is open there are a lot of warnings but if you want to get rid of them simply click show console sidebar and click info that way you'll only see the info console logs and there we go this is our list of 50 cryptocurrencies with all the data that you can wish for now would be the perfect time to loop over them so let's create the layout we are going to have a react fragment here like this then inside of there we're going to have a row and row in end design can have gutters these are just simply some spaces in between the items and we're going to set them to 32 and 32 top and bottom left and right we are also going to give this row a class name equal to crypto dash card dash container now inside of here we want to map over all of our cryptos so we can say cryptos dot map and then of course we use the map like this where we get each specific cryptocurrency and we simply instantly return something take notice there is no curly brace here it's just a regular parenthesis meaning that we are instantly returning something so for each currency we want to return a column and a column in indesign has the property xs and that means how wide is it going to be on extra small devices the total width is 24 so we want the column to take the full width 24 out of 24 because mobile devices are not wide enough for more on the same row then we're going to have the small which is going to be 12 meaning 2 per row and finally large which is going to be 6. we're also going to give it a class name which is equal to crypto dash card and remember we are looping over something so we need to add a key which is going to be equal to currency dot id now inside of that column we're going to make it a link so the entire card is going to be a link and that link is going to point to and let's make a dynamic that's going to be forward slash crypto forward slash and then in here we have to specify the id by simply saying currency.id finally let's create that card by saying card it's going to accept a few properties like a title let's make it dynamic like this with a template string and first we're going to have currency dot rank and then dot and the space currency dot name finally with the title we can also provide one extra thing and that thing is going to be called exactly like that extra in the extra we can provide the image and that image is going to have a class name equal to crypto dash image and an src equal to currency dot icon url finally we're going to make this card hoverable by saying hoverable right here and you might be wondering what data are we going to have in our card and the answer is just a few paragraphs the first b tag is going to simply specify the price so we can say price is equal to milify and then currency dot price again we have to use milify because these numbers are really long so this is simply going to make them readable to humans looks like i misspelled currency and with that we can copy this two more times we can specify the market cap and that's going to be currency dot market cap and the last thing is going to be the daily change which is going to be currency dot change and we can add a percentage sign at the end great with that we're done with the