How to create a cryptocurrency app using React

Hire the author: Martin K

Cryptocurrency react Image citation: here 

GitHub link for this project: CryptoReact

Introduction

In this article, you’ll build and deploy a cryptocurrency react application with in-depth data about all cryptocurrencies, cryptocurrency markets, and exchanges. Providing popular cryptocurrency news and much more, CryptoReact is the best cryptocurrency application that you can currently find on the entire internet. You’re also going to learn Redux, and the easy and professional way of using the Redux toolkit.

You’re going to learn how to create user interfaces using Ant 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 API’s. Keep reading and you’ll learn how to build this amazing crypto-react project in just one tutorial. 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. With that said, let’s dive straight into project development.

Photo Preview

Glossary

Rapid API

Before creating a folder for our project code, we must first visit rapid API, here is the link. The making of this entire app is possible only due to rapid API because we’re using their coin ranking API. This API is just one of the hundreds of 1000s 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 cryptocurrency. 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 above, 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 API’s hub, where you can find hundreds of 1000s of APIs. 

What is Redux?

Redux is a state container that helps you develop JavaScript apps that are easy to test and act reliably across client, server, and native platforms. It’s most commonly used with React as a state management tool, but it may also be used with any other JavaScript framework or library. Because it’s under 2KB in size (including dependencies), you won’t have to worry about it increasing the asset size of your application. The state of your application is saved in a store with Redux, and any component can access any state it needs from it.

Step by Step Procedure

Now let’s create the react application: Github repository. Then, later on, we’re going to call these APIs right from our react application. As always, let’s start by creating an empty folder on our desktop, we can name it something like crypto-react-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 Vifew and then finally terminal. Inside of here, you can first clear it, and then we can run

npm create-react-app 

This is going to initialize an empty react application in our current directory. This process is going to take a few moments. 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’re going to create a new instance ourselves. 

Once your source folder has been deleted, simply create a New Folder name it src. Inside 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 there, you need to import react. Then we’re going to import the app, which we’re going to create soon. So you can say import app from ./app. Finally, we need to type

run react-dom-render

Then inside of here, we need to pass this app as a component as a first parameter. Then finally, say document get element by ID route to hook our app on to our root div. Behind the scenes, this means that we have a public folder with one index.HTML file.

Step 1: Layout

Now, 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, which is going to be a basic functional component. We can start by installing all the necessary dependencies, we can install the dependencies by typing npm install. Now we can start listing all of the dependencies. For styling, we’re going to use ant design so you can simply type

npm install antd@ant-design/icons 

We are also going to use Redux. So you can type

npm install react-redux@reduxjs/toolkit 

We’re also going to use npm install axios to make API requests. We’re going to use charts.js to create charts, we’re going to use html-react-parser to parse some HTML data, and we’re also going to use a little package called millify, for cryptocurrency. That’s going to transform extremely large numbers into readable strings. Finally, we’re going to use millify to parse times and dates. We also need react-chartjs-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. After all of our dependencies have been installed, and we can simply run npm start to look at our changes in the browser. Once you’ve done that, you can simply close your terminal. 

Step 2: Developing the App.js file

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 add design as shown below

Now that 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 the app just inside of there, and we’re going to have one more div, that’s going to have a class name equal to the navbar. Below the navbar, we’re going to have one more div. This one is going to have a class name equal to main, and this is where our main content is going to go. Finally, below that, we’re going to have one final div, which is going to have a class name equal to the footer. 

Step 3: Developing the Navigation Bar

We can start from top to bottom by creating our navigation bar. 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 JSX and JS? Well, they’re essentially the same. Simply by using JSX as 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 as shown below.

First, we’re going to import a few things from design, a button, a menu, typography, and we’re going to use the avatar. If you’ve never used ant 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 ant design. I actually prefer the 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 ant design for cryptocurrency. We are also going to import a link from react-router DOM. Finally, we need to import a few icons. So we can say imports that are going to be home outlined. 

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. That class name is going to be equal to the nav 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 typographic component. We’re going to use the button on mobile devices to switch between the menus. So we’ve used the avatar component and the typography title component. We’ve also imported some more components from ant design for cryptocurrency. 

We’ve finished our navbar. 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 that is coming from react-router-dom. A switch allows you to have multiple routes. So inside of here, you can create a route component. That route is going to have the exact path, meaning it’s only going to trigger if you go exactly to that URL. Finally, you have to provide a component you want to render under that route.

Step 4: Adding the App.css file

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 stylings are going to be done specifically through and design. But to simply make it a bit more responsive. 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. Here, you can simply base the style sheet as shown below. 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, we think import ./App.CSS.

Step 5: Adding the Homepage.jsx file

So let’s go ahead and start with the functionality. Let’s start by building out the homepage as shown below 

Go to source components, then homepage. here we can import a few things. We can import millify, the package that’s going to format our numbers, and then we can import a few things from ant design, and these are going to be that typography, row, and column. This is going to be coming from ant design then we’re also going to import a link. Just to make that a bit simpler, what we can do as shown above.

So our first title is going to be level two, and then we can give it a class name equal to heading inside of there, i.e. we can simply say global cryptocurrency 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 gonna 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 a total of 24 spaces. This means that it’s going to take half the width of the screen. Now inside of there, we’re going to render one more design component.

This thick statistic is a self-closing component. Inside of there, you can pass two different things. We can pass a title. 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, and so we’re going to have six of these columns in total, and 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. The fifth one is going to say, total markets. That’s it, we don’t need the sixth one. Let’s see what it looks like in the browser. As you can see, this is what a static 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. 

Step 6: Redux toolkit and API Development

So what better way to add more content than to fetch real actual API data using the Redux toolkit? So now I’m going to teach you how we can fetch real cryptocurrency data from a rapid API using the Redux toolkit. Stay tuned, as this is going to be a really educational part, but it might be a bit hard. But as soon as you start writing more code, you’re going to notice that it all makes sense. That it’s actually easy. The easiest way to fetch data from APIs. So let’s do that right away. Redux is 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 the default code people have to write. Let’s remove all of the files and folders and simplify it. And that’s how the Redux toolkit was born. If you simply get started and scroll a bit down, you’ll notice that the Redux toolkit is now the official recommended approach for writing Redux logic. It makes it so much simpler.

So far, I haven’t seen a lot of quality tutorials and Redux toolkits, so you can think of this article 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 prayer and search for queries. You’re going to notice that under Part Eight of the authorial 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 article. To start fetching our data, we are going to go back to the rapid API’s hub. 

We’re going to search for coin ranking. Once this loads, you can click on this blue button right here, for it might say something different, like subscribe, but there is a free plan, so don’t worry about that. As soon as you subscribe, you’ll be able to click here to test the endpoint. As you can see, you’re immediately going to get all the possible data right away. So what do we have to do to use this API? Well, you can go on their code snippets. 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 the 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 cryptoApi.JS. 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 there because we have to use this data later on. But before we set the crypto API, we need to create a store for our Redux application.

A store is one central state of truth, meaning your entire application state. We can create a store by creating a new folder in the source folder called the app. Inside the app, you can create one file called store.js. Finally, you can see export default configure the 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 the reducer. For now, we’re going to leave that as an empty object. 

Future Directions

Because cryptocurrencies are still relatively new to users, there’s a good chance they’ll struggle to figure out when and how to use them, putting them at risk of falling prey to scammers. As a result, additional events like the Mt. Gox Hack are likely to make headlines in the market. While these hacks and scams will continue to exist in the market, companies such as Coinbase will establish initiatives to educate customers about cryptocurrency, allowing them to recognize and avoid being victims of fraud.

Companies will find it easier to acquire a comprehensive image of the ecosystem, track ill practices, and maintain better money flow as more publicly available Blockchains and KYC standards gain traction in the marketplace. As a result, the Blockchain for Cryptocurrency world will become more transparent. This will not only improve the process’s trustworthiness and accessibility but will also raise security concerns. As a result, consulting with a reputable company will be essential.

Learning Strategies and Tools

The development of the cryptocurrency react app couldn’t have been possible without the use of the following technologies: Redux which enables the state of our application to be saved in a store, and any component can access any state it needs from it. Secondly, with the rise of the rapid API we were able to get the latest cryptocurrency prices with the use of Coin Market API. Finally, ant design allowed us to create a beautiful user interface for our application. With the knowledge gained from the above technologies, we’ll be able to use the various APIs to simulate different instances needed for specific projects in future.

Reflective Analysis

So we’ve come to the end of this article. I’m sure you learned a lot about Redux Toolkit, fetching data from rapid APIs, and generally building an application about cryptocurrency. But most importantly, you should have learned a lot about React itself, how components work, how we can map all the different components to write efficiently, and not duplicate code, and how to generally separate everything into components of cryptocurrency react app.

Conclusion

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 build our react application, you can go to the View terminal, press Ctrl C, and then wait. 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 nullify and simply drag and drop the folder right inside of here. It took just a few seconds before checking it out. 

There we go. And you can click right here to check it out. Our crypto project is now finished and ready to go 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 tutorial. If you did, definitely make sure to check out the Github link.

Hire the author: Martin K