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

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 card let's save it and take a look in the browser and would you look at that with and design with just a few lines of jsx we quickly created a grid of cards as you can see there are about 50 cards now later on we're going to simplify it so that on the home page we can only see the first top 10 but we can hover them they are here we can see the rank the name the image and finally some information about that cryptocurrency the cards seem to be a bit too close to each other looks like our gutter didn't work so let's go back and see where's the error i've made a typo it should have been gutter here not gutters now let's check it out and there we go this looks even better now let's only fetch 10 cryptocurrencies on the home page but once we actually navigate to cryptocurrencies then let's show all of them to do that we need to specify a count so let's create a count variable constcount is equal to and if we are in a simplified view then we're going to make the count equal to 10 else it's going to be 100 so where do we get access to this simplified value well it's coming through props if you remember correctly in the homepage where passing that's simplified and if you don't specify a value by default it is set to true so one more time back in cryptocurrencies if this simplified is true the count is going to be set to and then we can pass that count to our use get cryptos query now with that we can open up our services and we can get that count right inside of here we pass it in a function call and we get it right here through parameters so now to make use of it we can simply add a question mark and set the limit equal to count of course we have to make this a template string and with this simple change now we're going to get the count of 10 if we're on the home page now that we added the count here we also have to go to the home page and set the count of 10 there now let's save it and check it out and there we go top 10 cryptocurrencies in the world if we scroll down we can only see 10 but if we click show more we are re-navigated to cryptocurrencies and looks like we get an error so let's see what that is about now as you can see we are not using the is fetching variable so let's add an if and say if is fetching in that case we can simply return a string that says loading great one more change we have to make is with this cryptal list sometimes it's going to be undefined and we cannot loop over the undefined so we just need to put a question mark right here now let's go ahead and save it and take a look if you see right there we have our 10 cryptocurrencies and if we click show more you should be able to see that now we have a list with a hundred crypto currencies great that works and what we want to do is add an input field here so we can filter out cryptocurrencies we're interested in let's do that right away to do that we can add a div right on the top of this row right here let's indent it properly let's give it a class name equal to search dash crypto and let's spell search correctly and inside of there we are going to have a one input tag this input is going to be a self closing tag and it's going to have a placeholder something like search crypto currency and we also have to have the on change so on change we're simply going to get the event and set search term is equal to event dot target dot value as you can see the search term is yet undefined so let's create a new use state field called search term then we have the set search term and finally the initial value is going to be an empty string now when we're changing the search term we want to do something so we can add a use effect at the top i'm going to import use effect we can add the use effect above the if by simply saying use effect it accepts a callback function and it also accepts a dependency array now we can expand this function and in the dependency array we can add the cryptos list as well as the search term that means that this function is going to get executed whenever one of these two values changes and once it changes we simply want to set cryptos to be equal to crypto list question mark dot data question mark dot coins then we want to filter it out by the search term so we can say const filtered data is going to be equal to crypto list question data question mark dot coins dot filter in the filter we have a callback function where we get one specific coin and then we want to check if coin dot name dot two lowercase dot includes search term to lowercase this is one long line that's going to allow us to search or filter out only the searched coin in the array of 100 cryptocurrencies i'm missing an s here in the cryptos list but besides that we are good so finally what we can do is we can set cryptos to be equal to filtered data in that case we don't even need the first line because we're setting it right there so let's remove this and now that we're setting cryptos like this we can also just leave the empty array at the start right here because this is happening at the start as well use effect is a combination of a component that mount happening at the start and also component did update for these two properties now let's save it and see if this works now we have a search at the top and let's try searching for something like bitcoin and you can immediately see bitcoin bitcoin cash bitcoin sv and bittorrent great that works and as you delete you can actually search for all the other cryptocurrencies as you can see great that part is now done but if we now go to home you can notice that we can also see the search here on the home we only want to show the first top 10. you need to click show more to be able to see the search that's what we want to do so think about it a bit how would you show the search on the show more page on the cryptocurrencies page and hide it from the home page think about it well remember we have that simplified tag or a property that we can filter something based off of so we can say if no simplified then render this that means since simplified is true on the home page but if it's not simplified that's going to be not a home page so we can put this here indent it properly and this is going to make it disappear on the home page there we go as you can see only the top 10 cryptocurrencies and no search but if we go to show more you can see the search is right there this is already starting to look better because our footer is nicely there at the bottom our navigation bar is on the left side and the content is filling out the entire screen the cryptocurrencies page is done and the home page is half done we still have to do the news so the news page is going to be our next step to implement the news page we can close all currently open files and go to source components and that's going to be news all of the news magic is going to be happening here so to start off let's import a few things from and design and these are going to be select typography row column avatar and a card from and d we also need moment so we're going to import moment from moment and now we have to fetch the news data the situation is going to be similar as with fetching the cryptocurrencies we have to create a service so let's repeat the process we did with redux in the services for the crypto app now we're going to repeat a similar process for crypto news api let's create a new service we can call it something like crypto news api dot js and for now we can even put them side by side so i'm gonna put the crypto api on the right side and crypto news api on the left side so now this is a recap now you can see what exactly is happening with redux so first we import create api and fetch base query then we need to get the crypto api headers but these headers are not going to be the same now we have to get new headers for the second api we're gonna use from rapid api we can go back to the rapid apis hub and search for bing news bing news search is the api we need make sure to click this button to subscribe you'll be led to the pricing section and in here you can simply subscribe to the basic version then back at the endpoints we can simply test the endpoint and see if it works now we can go to code snippets and again we can simply copy the headers going back to our app we can say const crypto news headers is equal to and we can simply paste the object we just copied again right now our api key is here but we're going to use environment variables later on to hide it from other people we also need to get the base url and we can get that by copying this thing right here we can say const base url is equal to and then we can simply paste it right here make sure to remove the last forward slash we can also copy the create request as it is going to be fairly similar but now instead of crypto api headers we're gonna have crypto news headers and finally we can copy the part about creating a specific api so i'm simply going to paste it here we can call this api crypto news api reducer path is going to be again crypto news api fetch base query with the base url and finally we have the endpoints here we won't have the get cryptos endpoint but we're gonna have get crypto news endpoint and as parameters we're going to get an object that's going to contain news category as well as the count of news we want to get of course we don't yet have these values but we're going to pass them once we make this get crypto news call now let's close this and we can finalize this api call the url string for this is a bit longer so i'm going to put it as a gist in the description down below so you can simply copy and paste it right here it should look something like this news search news category safe search off text format raw freshness is equal to day and count is equal to count great this is our endpoint and don't forget if we look at the crypto api we have to export the use query so let's go back here and now we don't have use get cryptos query we have use get crypto news query and this is coming from crypto news api great now if we get back into news we can import that use query import use get crypto news query and this is coming from dot slash services forward slash crypto news api great we're going to also destructure a few things from our and design properties something like hans and we're going to get the text and the title from the typography and also const option we are going to get that from the select great now let's fetch this data we can do that by saying const and then in here we get the data which we're going to rename to crypto news and that's going to be equal to use get crypto news and don't forget in there we have to provide an object with two parameters first one is the news category which is going to be equal to crypto currency and then the second one is the count now the situation is going to be the same as with cryptocurrencies we are getting that simplified field simplified is going to be true if we are on the home page so if we are we can say count is equal to if simplified then count is going to be 10 otherwise it's going to be 100. great now let's console.log the crypto news to see if you're successfully fetching them back in our application you can see that we are getting undefined but under errors take a look at this this is pretty interesting error no data found at state dot crypto news api did you forget to add the reducer to the store redux toolkit made some great adjustments and now their errors are really readable we definitely did forget to add the reducer to the store so let's do that right away you already know the process we're going to go to the app store.js we're simply going to import the crypto news api this time and crypto news api and this time we can simply instead of crypto api dot reducer path you can say crypto news api dot reducer path and crypto news api dot reducer with that we should be ready to consolidate this data if we go back and reload you can see we have our news more specifically we have the options to sort them the read link and we have the values which contain the actual articles the images urls and everything you can think of so what do you say that we start looping over those news right now we can do that like this first i'm going to add an if statement and say if no crypto news question mark dot value in that case we want to return again a string that says loading finally we can start creating the layout everything is going to be one row so we can in here say row and we can provide some gutters i'm going to say gutter is equal to and then an array of 24 and 24. inside of here we can start mapping over crypto news by saying crypto news dot value dot map great the situation is the same as before we have an instant return and then in here we get one news article now what are we going to show for each news well we're going to show a column our column is going to be xs is equal to 24 sm equal to 12 and large is equal to 8 and we need to pass a key which can be equal to simply the index of the array we're mapping over inside of that column we're going to have a card that card is going to have a state of hoverable so we can see that nice hover effect and it's going to have a class name equal to news dash card that entire card is going to be an anchor tag so we can say anchor tag and it's going to have an href which is going to point to news dot url target is going to be set to underscore blank to open that news article in a new card and the rel is going to be no referrer inside of our anchor tag we're going to have a div and that div is going to have a class name equal to news dash image dash container inside of there we can add a title and this title is going to have a class name equal to news dash title and in there it's going to be of a level is equal to 4 and we can simply say news dot name this should be enough to see something in the browser but before we do that let's fix a few things first of all this here should be rel not ref again made a typo and the second thing in here i've mentioned 10 articles and a hundred articles but we don't have that much it's not like cryptocurrencies so for simplified view on the home page i'm going to show 6 and on the all me and on the news page we're going to show 12. now let's save it and let's really take a look in the browser if we scroll down you should be able to see we have our cards that contain the latest crypto news we don't yet have the image but here are the cards you can hover over them they have the title and if you click on them a news article is going to open great let's go back to our side and let's continue making cryptoverse even better what we can do right now is below the title we're going to add the image this is going to be the img tag and we can get the source by saying news question mark dot image question mark dot thumbnail and question mark dot content url some news are not going to have the image so i'm going to say or and then specify the demo image url we can add this demo image at the top above our functional component simply by saying const demo image is equal to and now i'm going to give you access to a string which you can simply copy and paste right here this is a basic cryptocurrency demo image great of course every image needs to have an alt tag so i'm going to say alt is equal to and this is going to be news below this first div we're going to have a paragraph inside of this paragraph we're going to render the description so we can say muse dot description and if a length is longer than 100 characters in that case we're going to render a string news dot description dot substring and the substring is going to be from 0 to 100 and at the end of the string we can add dots meaning there is more if the description is less than 100 characters you can simply render news dot description great let's check it out in the browser this already looks so much better as you can see latest crypto news and we can see three different articles right here with titles images and descriptions now below that we just need one more div and this div is going to have a class name equal to provider dash container inside of that div we're going to have one more div and this div is going to have a property of avatar that is going to be a self-closing tag in there we can say source is equal to news dot provider zero question mark dot image question mark dot thumbnail and again question mark dot content url and finally we can say or demo image if there is none the alt we can leave empty for this one finally below that we can render a text and the text is going to be the timestamp so we can use the moment library call it as a function like this and then inside of there we can say news dot date published and then dot start off a string of ss dot from now let's call it and see how does it look like there we go 36 minutes ago five hours ago and we can see the image of the news page that posted that specific article but we're missing the name of the article poster so this text with the timestamp should have gone below this div but below the avatar inside of the div we can render another text and this text is going to have a class name equal to provider dash name then inside of there we can simply render news dot provider and then zero and then question mark dot name great let's save it and check it out there we go msn yahoo finance business insider our news are showing but if we go to show more as you can see something doesn't look right images are overflowing and generally this doesn't seem great so let's fix the problem we can fix this issue by simply giving this image an inline style and we're going to set max width to be equal to something around 200 pixels and max height to be equal to something around 100 pixels let's save it and take a look and there we go this is already much better we can see different images titles news providers and when the news article was posted now let's go to the home page and see if we have our six cards there we have 10 top cryptocurrency and six of the latest news now if we go to show more as you can see we have 12 news and they are all here what we're going to do next is implement a select at the top so that we can only get news about one specific cryptocurrency you're interested in we can do that above where we map over the news by saying if no simplified then render the following code we are going to have a call a column that's going to have the span equal to 24. inside of there we're gonna have a select field and that select is going to have quite a few properties it's going to say show search also it's going to have a class name equal to select dash news it's going to have a placeholder equal to select a news category or we can rather say select a crypto then we're also going to have the option filter prop which is going to say children below that we're going to have the on change of course and on change we're going to get the value and we want to store it somewhere for now we can simply cancel log it and finally we're going to have filter option which is going to be equal to a callback function where we get the input and we also get the option that function is going to return the following option dot children dot 2 lower case and then dot index off and then input dot to lower case exit the second parentheses is greater or equal to zero this is quite a long one but basically what this is doing it's filtering out the options so that we only show the one for our selected cryptocurrency of course we have to create a use date for the newest category so at the top we can say use state and we can call it news category and set news category for that we have to import use state from react at the start our category is going to be equal to crypto currency and then later on we can change it now that we have the news category we can instantly pass it here we don't have to keep this hard-coded anymore so newscategory is equal to news category and now in here we can render out the options that we want to select so inside of our select we can simply show an option and the default option is going to be value is equal to crypto currency so all currencies but now we want to get real options about the specific currencies about the currencies that we have and remember we already know the names of all the cryptocurrencies we are fetching that right inside of our home page or inside of our cryptocurrencies so we can simply copy the use get cryptos query go back to news and get them right here this time we can simply call the data and we don't need is fetching of course at the top we can duplicate this line and we can import use get crypto query from and that's going to be crypto api in this case the count can be 100 so we get 100 cryptocurrencies now that we have the data about all the cryptocurrencies we can map over it right below our option so we can say data question mark dot data and then question mark dot coins we want to map over the coins by doing the map and then instantly return an option this option is going to have the value equal to currency dot name and the text we're going to render is also going to be currency.name in this case we called it coin so it's going to be coin that name and it's going to show the value of that name right now we're simply cons logging the value but we're not setting it so the only thing we need to do to make this work is we have to call the set news category and set it to value this should make our select work and we should be able to filter out news based on specific cryptocurrencies as you can see on the top left we have select a crypto you can see first this is the default option and then we can list through names of all of the top 100 cryptocurrencies let's go for news about ethereum if you click it there we go cardano vs ethereum how do they compare you can even see we have some german use but mostly it's just u.s american news great this is already starting to be a great platform for all the cryptocurrency enthusiasts we have the global crypto stats top cryptocurrencies in the world and we have the latest crypto news what more can you want from this app well there is one more really important thing you'd want to learn more about these top cryptocurrencies or more about all cryptocurrencies that exist so if you click on a specific card you don't want to see simply crypto details you want to see everything there is about that one specific cryptocurrency and exactly that is going to be our next step so let's go ahead and implement the crypto details to implement the crypto details we can go to the crypto details component and let's start by importing a few things first we can import html react parser from html dash react parser then we can import use params which is coming from react router dom we can also import the standard millify from mellify we can import a few things from and design things like column row typography and select component this is coming from and design and we have to import a few icons the list is quite long so i'm going to leave this entire file already finished down in the description so you can simply copy and paste some things from it first thing that you can copy are going to be these icons these are going to be all imports for now but we can just destructure the title and also text and that's going to be from typography and we can do the same thing const option which is going to be coming from select great now we are ready to create our crypto details to know which currency are we currently taking a look at we need to get the coin id so cons and then the structure coin id and that's going to be coming from use params use params takes the id in the url and simply allows you to use it as a variable we can even check that part out if i use the coin id right here next to crypto details let's check it out you can see we're currently on crypto details one but if i go to cryptocurrencies and then to some other cryptocurrency you can see crypto details 20. based on this we'll be able to make the request to get all the other information about that specific cryptocurrency later on we're going to render out the chart so we need a time period so let's simply import the use state from react and let's create a new use state field which is going to be called time period like this set time period and at the start we can set it to seven days now is the time that we fetch crypto details for that specific coin id we can do that by going to our crypto api service and we simply have to add one more extra service and that service is going to be get crypto details we can even copy this builder.query because that part is going to be the same and now we have to build that query we can say query as the parameter we're only going to get the coin id and we can return create request coins coin id now we have that endpoint and if we go back we can import it we can import it simply by saying import and that's going to be use get crypto details query that's going to be coming from dot slash services forward slash and then that's going to be crypto api i think i forgot to export it so right here at the bottom use get crypto details query great now we're exporting it using it here we can call it like this by saying const we get the data we also get the is fetching and that's going to be coming if we call the use get crypto details query and we need to pass the coin id into it and there we get all the data about one specific cryptocurrency to be sure that we are getting that let's simply console.login so we're going to console log the data if we get back and reload the page you should see that we have a 404 that's because i've made a typo it's not coins it's actually just coin and then the id so we can get back go to crypto api and simply change the api to say coin now let's check it out if you reload the page under info you can see status success and then in here we have all of the information you'd ever want to have about one specific coin let's make use of it we'll be mapping through a lot of data later on so i've created specific arrays with titles and values already done so we can simply focus on writing jsx you can go ahead and find the gist of crypto details and then copy the following lines we're going to copy the part where we simply create an array of time and where we get the stats and generic stats for a specific cryptocurrency so just feel free to copy these three parts again nothing special is happening there we're just using different titles values and then finally icons great the last thing we have to do as you can see crypto details is undefined so to get to them we have to say const crypto details is equal to data question mark dot data question mark dot coin great now we're getting the stats and generic stats in an array format so we can easily map over it so let's create the layout we will be writing a lot of code here so let's pull our editor side by side by the browser so we can see the changes happening live there we go our screen is side by side and we can continue creating our layout first things first we are going to have a column right here so we can say call and that call is going to have a class name is equal to coin dash detail dash container inside of that column we're going to have one more column and this column is going to have a class name equal to coin dash heading dash container inside of there we can specify a title so right here we can say title level is going to be equal to 2 so it's a big title and we're going to have a class name equal to coin dash name that's going to be title and we can spread it and inside of there we can simply say crypto details dot name and then we can add parentheses and then in there we can say something like crypto details dot and we can use the slug slug means alternative names for that cryptocurrency and finally price let's save it and as you can see bitcoin bitcoin btc price below the title we can add a b tag and inside of there we can simply say crypto details dot name and then after that live price in u.s dollars we can also add one more thing which is going to say view value statistics market cap and supply let me fix that typo there and save it there we go bitcoin live price in us dollars view statistics market cap and supply right now this navigation bar is showing on top but we're going to fix that later on below the first column we are going to have a select field that select is going to accept a few props the first one is going to be default value is equal to 7d seven days then the class name is going to be equal to select dash time period then we're also going to have a placeholder which is equal to select time period and then finally we're going to have the onchange property now i see that this is too long so i'm going to put it in multiple lines like this class name placeholder and finally we're going to have the on change on change we get a function where we get the actual value and finally now that we have value we can call the set time period and set it with the value remember time period was the state that we created before great that was our select and finally we have to loop over the options which we can do by simply saying time dot map in here we get the options so we can say option right here and finally we can render out the option like this give each option a key which is equal to date and finally specify the date inside of there this option actually is a date so let's write it like that as you can see now we have a select field and we can choose between 3 hours all the way to 5 years below the select we're going to render a line chart but we're going to do that later on so now let's focus on finishing all of the statistics here we're going to have a lot of columns our first column is going to have a class name equal to stats dash container then we're going to have one more column inside like this and this column is going to have a class name equal to coin dash value dash statistics and we're going to have one final column right here call and this column is going to have a class name equal to coin dash value dash statistics dash heading inside of here we can render a title that title is going to be of level is equal to three and it's going to have a class name equal to coin dash details dash heading finally the title is going to say crypto details dot name and then value statistics below the title we can render a paragraph tag and there we can simply say something like an overview showing the statistics or the stats of crypto details dot name and that's it most likely we are missing a column great so finally let's map over all the statistics we're fetching from the api we can do that just below this column and we can do that by saying stats.map we get a map here and we can immediately structure the icon the title and the value finally we can instantly return something and that something is going to be a column and that column is going to have a class name which is equal to coin dash stats inside of there we're going to have one more column and this column is going to have a class name equal to coin dash stats dash name the only thing we're going to put in there are going to be two text fields the first one is simply going to show the icon and then the second one is going to display the title if we save it you should see that we already have nice looking statistics price to usd rank volume and so on but we don't have the actual value so below this column we're going to render out the text element and that text is going to have a class name equal to stats and then inside of there we can simply render out the value there we go here are the statistics for bitcoin current price 46 000 bucks rank first volume market cap and an all-time high of 64 000. now alongside bitcoin value statistics we want to show the statistics of all cryptocurrencies combined so we can copy this coin value statistics the entire column which is starting from here and goes all the way here and we can paste it below the only thing we have to change in here is from coin value statistics to other stats info and then also this is not going to be stats rather it's going to be generic stats great let's save it as you can see the titles still remain the same but let's change it now we're going to say something like other statistics just other statistics that's going to be it and we can remove this paragraph tag and in the paragraph we can say overview showing the stats of all crypto currencies let's save it and now that we saved it you can see it looks good right now our window is of a weird width but if we expand it a bit you can see this is how it should look like bitcoin value statistics price to usd rank and so on but in here we just have some general cryptocurrency statistics just so you can compare and finally we want to show all other data that we have about that specific cryptocurrency so below this column right here this entire one close to the end we're going to create one final column and this column is going to have a class name equal to coin dash dests dash link inside of there we want to render out a row so we can say row that row is going to have a class name equal to coin dash test and inside of there we can simply render a title that title is going to be of a level is equal to three it's also going to have a class name equal to coin dash details dash heading and in there we can simply say something like what is and then crypto details dot name let's save it and you can see what is bitcoin and below that we want to use the html parser like this html react parser and we want to pass crypto details dot description the description is a raw html so we want to parse it right here and take a look what is bitcoin why does bitcoin have value and all the other information you might want on a specific coin finally every coin has some related websites and links so let's render them below this row we're simply going to show a column that column is going to have a class name equal to coin dash links there we can set the title that title is going to have the level equal to 3 and the class name is going to be coin dash details dash heading in there we can again simply say crypto details dot name it's not with a capital c at the start and we can simply say links let's save it as you can see bitcoin links and just below that title we can loop over the crypto details link by saying crypto details dot links dot map in here we get a specific link and we want to render out something for each link more specifically we want to render a row that row is going to have a class name equal to coin dash link and a key equal to link dot name so for each link we want to render a title the title is going to be of a level is equal to 5 and it's going to have a class name equal to link dash name and inside of that actual title we can render a link dot type and below the actual title we can render the anchor tag that anchor tag is going to have an href equal to link dot url it's going to have a target equal to underscore blank and it's going to have rel equal to no refer and finally inside of there we can render link link.name and there we go website website website this is going to be bitcointalk github reddit telegram that's it you can see everything here one interesting link for all developers is going to be github you can actually visit a github link for every open source cryptocurrency definitely make sure to check out bitcoin's source code and this is going to be it for the crypto details page take a look if you scroll up you can see bitcoin bitcoin value statistics and other statistics as well as the bitcoin links and all the information about bitcoin right now you might notice that we are definitely missing a chart here so our next step is to create a line chart that's going to represent the change in value of bitcoin over time to create our chart we can of course create a line chart component so that's going to be a new file called line chart dot jsx inside of there we're going to do our usual rafce we're also going to import line and that's going to be coming from react dash charges dash 2. and finally just a few things from and design that's going to be a column row and finally the typography from and d we can destructure the title by saying title is equal to typography so how is our line chart going to look like and how can we prepare the data for it well back in crypto details now we have the component that we can import right here so just below this we can say import and that's going to be line chart from that slash line chart finally we can render it right here instead of our comment by saying line chart it is going to be a self-closing component first we're going to pass coin history which is going to be equal to coin history we don't yet have that but that is going to be one more additional api call we have to create then we're also going to pass the current price which is going to be equal to milify and crypto details dot price and the final thing we have to pass is going to be the coin name which is going to be equal to crypto details dot name now we have everything besides the coin history so let's go into our crypto api and let's create that endpoint inside of our crypto api we can simply duplicate this one add a comma and let's call it get crypto history instead of the coin id we're going to accept an object that is going to include the coin id as well as the time period and we need to create a request to coin forward slash coin id and then forward slash history and then forward slash time period great and that's it our endpoint is ready now you can see why i said that redux toolkit is so much easier once you have the entire structure you basically have to keep adding endpoints and then you immediately get these new used queries that you can use in this case we're getting use get crypto history query great we can now take that we can go back to crypto details and we can simply call it at the top we can import it from here use get crypto history query and now we can duplicate this line and instead of the coin id we'll be passing in an object that contains the coin id as well as the time period and we're going to rename this data to be equal to coin history great also you have to make sure that we're passing in the correct thing here we're calling it time period with capital p so we have to do the same thing here and here now we can go back to the line chart and accept all of the props we're passing into it these props are going to be coin history current price as well as the coin name that should be enough to create our line chart so in the jsx let's simply create an empty react fragment inside of that fragment we can create a row that row is going to have a class name equal to chart dash header inside of there we're going to have a title that title is going to be of a level is equal to 2 class name is equal to chart title and it's going to say coin name price chart finally below that we're going to have a column that column is going to have a class name equal to price dash container inside of there we can add two more titles the first title is going to be of a level is equal to five and it's going to have the class name equal to price dash change in there we can simply say coin history question mark dot data question mark dot change i see i have a typo here so let me fix that and we can add a percentage sign at the end now we can duplicate this title change the class name to be current dash price and finally change this to say current coin name price and then we can put a dollar sign and specify the current price great let's save that and check it out right now we're getting an error and we can fix that if we go to crypto details and then simply add the loader that we always have so right here we can say if is fetching in that case we simply want to return our usual string that says loading later on we can replace that with a spinner loader let's save it and take another look there we go now we can see bitcoin price chart minus 1.67 percent current price 46 000 and the last piece of the puzzle is going to be the actual chart itself so to create a chart we can go back here and just below this row we can create a line which is going to be self-closing component that accepts data equal to data and finally options which is equal to options as you can see both data and options are undefined so we are yet to create them first we have to loop over the coin history to get the prices and also to get the timestamps we can do that at the top by creating two new arrays const coin price is equal to an array and const point time stamp is equal to an empty array now we have to create two different for loops so we can say four let i is equal to zero i is less than and that's going to be coin history question mark dot data question mark dot history question mark dot length and i plus equal to one so we're looping over this until we come to the end of the coin history now that we're inside of the loop we want to say coin price dot push that's going to be coin history dot data dot history and then we get the i element dot price so we're pushing each price one by one into this new coin price array and below this we also want to push into the coin timestamp so we can say cointimestamp.push and inside of here we don't want to push the price but rather the time stamp and for timestamps we want to push the actual timestamp and not the price to make it more readable we can say new and then date that way we can convert this into a date and finally we can use dot to locale date string to make it more readable now we have coin price and coin timestamp arrays which we can base our line chart off of finally we have to still create the data and the options object the data object in charge.js looks like this cons data is equal to an object and inside of there we're going to have labels labels are going to be equal to the coin type stamp array and for each label we have to have data sets which is going to be an array and it's going to have one object inside of there there we can say label is going to be equal to something like price in usd then we can have the data data is going to be equal to coin price we can set the fill of the array to be equal to false we can add the background color i found the color something like 0 0 7 1 bd to work great and finally we can add the border color to be something like hash 0071 bd as well this is our data object and finally we need our options object so we can say const options is equal to an object inside of there we can say scales which is yet another object we can get into the y axis and that's going to be an array inside of that array we're going to have one object that's going to have the ticks which is going to be an object itself that is going to say begin at 0 equal to true i know it might be a bit confusing but i'm going to leave this entire line chart in the description as well so you can copy it if you get stuck somewhere as a matter of fact the entire project is up on github just feel free to copy some parts that you think are wrong and that's going to fix the issues for you great with this our chart should be visible let's check it out and would you look at that our chart is here and it's as glorious as ever this graph now represents one year of bitcoin's history but if we switch it to five years you can see it grew from basically zero or it's around six hundred dollars to the current fifty thousand great our chart is done and with it the entire crypto details page now let's check if this works for some other cryptocurrencies let's go to cryptocurrencies and then for example ethereum there we go our graph opens we can see the history we can see all the information and we can see what is ethereum about great this part works as well now let's see but the last thing that we then do is the navigation bar we have to figure out if the width of the device is small in that case we have the navigation bar and if it's not we have the sidebar so let's do that right now that part is going to be inside of the nav bar right inside of here we can import use state and use effect these are going to be the two hooks that are going to help us do this we can create two different state fields first one is going to be active menu and set active menu and that is going to be equal to use state and at the start it's going to be set to true the second one is going to be screen size and also set screen size at the start this is going to be set to null now we have to add two different use effects the first use effect is not going to have anything in the dependency array so it's just going to be a function that's going to happen once at the start of the render let's expand this function and inside of there we're going to create the const handle resize function this is the function that is simply going to set the screen size equal to to window dot inner width this is how we can get the width of the screen by saying window dot inner width then we have to say window dot add event listener on resize so every time that the window resizes we want to handle the resize finally we want to call that handle resize function and we need to return it right here as the function and that's going to clear it in use effect this return acts as the component did on mount so in here we can say window dot remove event listener resize and then handle resize then the second used effect is going to look like this it's again going to be a function but now in the dependency array we are going to have the screen size so this use effect is going to be called whenever the screen size changes and in here we simply want to see if screen size is lower than 768 pixels let's say that's a mobile or a tablet size then we want to set the active menu to false else we want to set the active menu to true and this is going to be all the logic that we need finally we have this active menu and we can use that variable to make some changes first of all we're going to only show this menu when the active menu is true so we can say if active menu in that case we can render the menu right here and the last thing is we have to add a button so here we're going to say button that button is going to have the class name equal to menu dash control dash container and it's also going to have an on click property on click we simply want to set active menu to be equal to true and inside of there we can render an icon that's going to be called menu outlined this is the entire logic and the code for our responsive menu let's check it out in the browser okay now we have a sidebar menu but if we inspect and go to mobile as you can see now we have this button and if you click it we can go to a specific place right now it doesn't hide it only opens so if we go back in here instead of setting the active menu to true we can simply say set active menu to not active menu there we go now it's going to toggle on and off if we click it we can click it again and it toggles this is our fully responsive cryptocurrency application you can see we can go to cryptocurrencies and there we go here is our list if we click on bitcoin the chart is a bit too small but if you turn your device to landscape mode you can see it just a bit better there we go everything is here we can read it and it looks great the last part that we didn't do are the exchanges if we go to exchanges you'll notice that this component is still empty and this is a special component that i left for you to do you've learned how ant design works you have references in some of the other components you've created you know that we can use avatar typographies buttons and everything else so i have a challenge for you take a screenshot of this video right now to capture how the exchanges page looks like it's going to be some sort of a table you can see when you click on that table it opens up and gives you more information about a specific exchange we're listing exchanges 24 hour trade volume markets and the change so what i urge you to do is to give it some thought at least browse through and design components see which ones could be used and then simply reference the code to my finished repository code the component itself is not that hard so either feel free to think about it yourself or simply copy and paste it the link is going to be down in the description there we go this is how it looks like we are getting milify a few things from and design things like collapse row column typography avatar html react parser and we are creating one more service at this point you should have a good understanding of how services work how we can create different endpoints so we have the use get exchanges query we haven't worked with this loader yet but we're going to create that now and finally as you can see we're fetching the data we're looping over the exchanges and then finally we are displaying them so feel free to copy this code and at this point i think it's going to make sense and that you can understand what's happening on this page of course to finalize this we have to create this loader component which we're going to use to replace all of our plain string loadings with and we also have to create our final query which is called use get exchanges query so let's go to crypto api inside of here just below get cryptos i'm going to create a new query which is going to be called get exchanges inside of there we can simply set our request to be exchanges it's not accepting any parameters it's fairly simple finally we can just export it by saying use get exchanges query and that's about it we did have to create a lot of logic at the start but now as you keep adding more things onto it it just gets easier and easier because you just have to follow a specific structure we've created our use get exchanges query and we just have to create our loader component the loader component is possibly the simplest one so far you just have to create a new component called loader.jsx it is going to be a react arrow function component and inside of here we can import just one thing from and design and it's called a spin import spin from and design we're gonna have a div that has a class name equal to loader and finally inside of there we're going to have a spin that is it now inside of here inside of the exchange we can import loader like this as a default import from loader and we can simply return it like this now we can copy this return loader make a search across our code and search wherever we are doing loading dot dot there we go four times so we're simply going to replace this with our loader but of course we also have to import it so we're going to say import loader from and that's going to be dot slash loader and let's repeat that process three more times so at the top that's going to be import loader from dot slash loader and then instead of the loading we're going to show loader two more times in here just below import loader from loader and return loader and one last time in muse import loader from dot slash loader and finally we can return it right here there we go all of our loadings are done and the exchanges should work as well so let's save it and check it out let's go to our localhost 3000 let's see it says export default re-exported as exchanges was not found it exchanges so let's fix that really quickly and we can fix that if we go to index and inside of here export default as exchanges let's go to exchanges and looks like i copied the wrong thing this should be const exchanges and then at the bottom we should say export default exchanges this should already be done correctly for you if you simply copied the exchanges now let's finally save it and check it out we have one more error which is saying that we cannot resolve loader in the home page so let's check that out if we go to our home page we're trying to import loader from just loader that's my bad it should be that slash loader instead so let's save it and there we go as you can see here we can see all of the exchanges and we can look at the data coming from them great exchanges are usually the places where you can trade cryptocurrencies binance is the most popular one but there are a lot of other great ones as well great let's see if we can check out the loading there we go there was a split second loading at the middle of the screen and that's one more thing i forgot to say about redux toolkit once you actually fetch the data and you want to go back to see it it's not making another api call it already has data saved in the cache so it's going to load instantly so we've came to the end of this video i'm sure you learned a lot about redux toolkit fetching data from rapid apis and generally building an application about cryptocurrencies but most importantly you should have learned a lot about react itself how components work how you can map over different components to write efficient and not duplicate code and how to generally separate everything into components the last part we of course have to do is to deploy this project on the web so let's do that right away to deploy the project we're going to use netlify you can log in or sign up if you don't have an account already once you log in you can go to sites and then scroll down in here you can simply drag and drop your build folder to build our react application you can go to view terminal press ctrl c and then y and finally run npm run build this is going to take a few moments but after that you should notice a build folder is going to appear on your file explorer once it's built you can simply right click the build folder and click reveal in file explorer then you can head back to sites netlify and simply drag and drop the folder right inside of here it took just a few seconds before checking it out let's go to the main settings options edit site name and then in here you can put whatever name you'd prefer i've already used cryptoverse so let's use crypto app react there we go and you can click right there to check it out our crypto project is now finished and live on the web you can share this link with your friends showcase your app or generally use it yourself to find new and interesting information about cryptocurrencies it can be extremely useful for checking out the charts or reading the latest cryptocurrency news i hope you learned a lot by following this video if you did definitely make sure to subscribe leave a like let me know what would you like to see in the future and for the end i would like to say a huge thank you to rapid api not only for sponsoring this video but also for creating such a phenomenal software that we use today we use just one of their hundreds of thousands of apis to create a phenomenal application every single api in here can be used to create a new and interesting application definitely make sure to check them out the link is in the description with that said thank you so much for watching and i'll see you in the next one [Music] you

Channel: JavaScript Mastery

Views: 179,423

Keywords: javascript, javascript mastery, js mastery, master javascript, redux toolkit, redux, react redux, react redux tutorial, redux toolkit tutorial, redux toolkit with axios, redux toolkit query, redux toolkit project, rapidapi, react api project, react api axios, api react project, api reactjs, redux toolkit api calls, rapid api tutorial, rapid api javascript, rapid api react, react cryptocurrency app, react cryptocurrency, cryptocurrency dashboard react, react crypto app

Id: 9DDX3US3kss

Length: 135min 36sec (8136 seconds)

Published: Sat Sep 18 2021

Reddit Comments

[u/HolidayInternet]

I haven't seen a lot of hands-on Redux Toolkit examples, so I've created one, enjoy! :D

[u/tbone6778]

This looks good 👍

[u/kostisPodaras]

Would love to see you cover redux observable