How to build a CryptoTracker using React

Looking for a quick and clean React project? Try out this CryptoTracker!

CryptoTracker

CryptoTracker is a website that displays the real-time value of the top 100 Cryptocurrency along with their price, price change percentage, market cap value, and volume. It also allows the user the search for a particular Coin.

We will be using React in this project along with the CoinGecko API. At the end of this blog, how to deploy this website on GitHub pages will be discussed.

Now let’s get started 🏃‍♀️.

Getting Started

To get started, run the following code in your terminal and create the project folder.

$ create-react-app crypto-tracker

Once done, run these lines in your terminal:

$ cd crypto-tracker
$ npm start

This is how your React app will look on the localhost server.

Next, open your project and delete the default contents that App.js comes with.

Create a component folder to store the various components to be used in the project. The components used are Coin, CoinSearch, CoinTable, Footer, and Navbar. Inside the component folder, create folders for each component. We will discuss each component in detail in the next section.

src folder

App.js and App.css

In App.js import all the required components and use them in the appropriate place.

App.js

In the body, you can choose an amazing background from uiGradient. I have chosen Moonlit Asteroid, you can choose any background of your choice.

App.css

Navbar

Inside the Navbar folder, create Navbar.js and Navbar.css files.

Navbar.js

Navbar.css

Coin

Inside the Coin folder, create Coin.js and Coin.css files. This is the individual column row.

Coin.js

Coin.css

CoinTable

Inside the CoinTable folder, create CoinTable.js and CoinTable.css files. Here we will create a table that will display all the coins. Here we will use axios, a library that serves to create HTTP requests that are present externally.

In the table we will display the following information: key, name, coin icon, symbol, price, total volume, price change percentage in the last 24hours, market cap, and market rank.

Note: The API can be modified for the required currency, number of coins per page, etc.

CoinTable.js

CoinTable.css

CoinSearch

Inside the CoinSearch folder, create CoinSearch.js and CoinSearch.css files. In the CoinSearch, a search bar will be present along with the table with the searched coins.

CoinSearch.js

CoinSearch.css

Footer

Inside the Footer folder, create Footer.js and Footer.css files.

Footer.js

Footer.css

Deployment

Now the Crypto Tracker is ready 🎉. To check out how this looks use the following command:

$ npm start

We can also easily deploy this website on GitHub pages. The only pre-requisite for this is a GitHub account. Let’s see how this is done.

Step 1: Add the project to the GitHub repository.

Step 2: Open your package.json and add a homepage field for the project.

"homepage": "https://username.github.io/project-name"

Here, the “project-name” is the name of the online repository.

Step 3: Install gh-pages and add deploy to scripts in package.json.

npm install --save gh-pages

or

yarn add gh-pages

Then add the following scripts in your package.json:

"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
},

Step 4: Deploy the website by running the deploy command.

npm run deploy

Step 5: Make sure the GitHub Pages option in your GitHub project settings is set to use the gh-pages branch.

Horray!!! Now the website is live.

Check out the link: https://sapna2001.github.io/CryptoTracker/.

That’s it from my side, I hope you found this post useful 😊.

For reference check out the GitHub Repo. Feel free to star this repository ⭐.

Let’s get connected on Github/LinkedIn/Website/Twitter/Quora ;)

And if you have any suggestions, feel free to get in touch with me over LinkedIn & the comment section is also all yours.

If you liked this story, hit the clap button as it motivates me to write more & better.