How to build a Cryptocurrency tracker using React

Cryptocurrencies have gained immense popularity in recent years and have become a significant investment option. With the increase in demand for cryptocurrencies, several platforms have emerged that allow users to buy, sell, and trade various cryptocurrencies. As a result, tracking the price of cryptocurrencies has become increasingly important. In this tutorial, we will be building a cryptocurrency tracker using React.

React is a popular JavaScript library that is widely used for building user interfaces. It is an efficient and flexible library that helps developers create complex applications with ease. The modular and component-based nature of React makes it easy to manage large codebases, ensuring proper structuring and organization.

To build our cryptocurrency tracker, we will be using the CoinGecko API. The CoinGecko API provides access to cryptocurrency price, volume, and market data. We will use this API to fetch cryptocurrency data and display it on our website.

Let's get started!

Step 1: Setup

Before we begin coding, we need to set up our project. We will be using Create React App, a tool that allows us to quickly set up a new React project with no build configuration. To create a new project, open your terminal and run the following command:

npx create-react-app crypto-tracker

Once the project is created, navigate to the project directory and open it in your code editor.

Step 2: Install Dependencies

To fetch data from the CoinGecko API, we will be using the Axios library, a popular library for making HTTP requests. To install Axios, run the following command in your terminal:

npm install axios

Step 3: Create Components

To keep our code organized and modular, we will be creating several components. Components are the building blocks of React applications, and they can be reused throughout the application. In our cryptocurrency tracker, we will create the following components:

• Header

• CryptoList

• CryptoItem

Header Component

The Header component will contain the logo and name of our application. Create a new file named Header.js in the src/components directory and add the following code:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Crypto Tracker</h1>
    </header>
  );
};

export default Header;

CryptoItem Component

The CryptoItem component will display information about a specific cryptocurrency. Create a new file named CryptoItem.js in the src/components directory and add the following code:

import React from 'react';

const CryptoItem = ({ name, symbol, price, image, priceChange }) => {
  return (
    <li>
      <img src={image} alt={`${name} icon`} />
      <div>
        <h2>{name}</h2>
        <p>{symbol}</p>
      </div>
      <div>
        <p>${price.toLocaleString()}</p>
        <p className={priceChange > 0 ? 'green' : 'red'}>
          {priceChange.toFixed(2)}%
        </p>
      </div>
    </li>
  );
};

export default CryptoItem;

CryptoList Component

The CryptoList component will fetch cryptocurrency data from the CoinGecko API and render a list of CryptoItem components. Create a new file named CryptoList.js in the src/components directory and add the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import CryptoItem from './CryptoItem';

const CryptoList = () => {
  const [cryptos, setCryptos] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
     try {
    const response = await axios.get(
      'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false'
    );
    setCryptos(response.data);
  } catch (error) {
    console.log(error);
  }
};
fetchData();
}, []);

return (
<ul>
{cryptos.map((crypto) => (
<CryptoItem
       key={crypto.id}
       name={crypto.name}
       symbol={crypto.symbol}
       price={crypto.current_price}
       image={crypto.image}
       priceChange={crypto.price_change_percentage_24h}
     />
))}
</ul>
);
};

export default CryptoList;

Step 4: Create an App Component

Now that we have created all our components, we can create the App component that will render our application. Create a new file named App.js in the src directory and add the following code:

import React from 'react';
import Header from './components/Header';
import CryptoList from './components/CryptoList';
import './App.css';

const App = () => {
  return (
    <div>
      <Header />
      <CryptoList />
    </div>
  );
};

export default App;

Step 5: Style the Components

To make our application look better, we will add some styles to our components. Create a new file named App.css in the src directory and add the following code:

header {
  background-color: #20232a;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

h1 {
  font-size: 2rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
}

img {
  height: 50px;
  margin-right: 10px;
}

h2 {
  font-size: 1.5rem;
  margin: 0;
}

p {
  margin: 0;
}

.green {
  color: #4caf50;
}

.red {
  color: #f44336;
}

Step 6: Run the Application

To run our application, open your terminal and navigate to the project directory. Run the following command:

npm start

This command will start the development server and open the application in your browser at http://localhost:3000.

Congratulations! You have successfully built a cryptocurrency tracker using React with the proper structuring of code.

Conclusion

In conclusion, React is a powerful library that allows developers to build complex applications with ease. By properly structuring our code and breaking it down into smaller, reusable components, we can ensure that our application is easy to manage and maintain. By following the steps outlined in this tutorial, you can create your own cryptocurrency tracker and further customize it to meet your needs.

---

That's a wrap. Thanks for reading.

If you like this article, then please like, share, and follow along for more interesting tips, hacks, and tutorials on similar topics like this one.

Socials:

Twitter : https://twitter.com/Hy_piyush

LinkedIn : https://www.linkedin.com/in/piyush-kesarwani-809a30219/

Instagram: https://www.instagram.com/piyush_kesarwani22/

Github Profile Link - https://github.com/piyushkesarwani