React App for beginners+: Crypto Finder SPA

Hey guys, my name is Amir and welcome to a new blog based on a video tutorial created on my YouTube channel.
This is a simple application created with React.js, with the main objective is to find different cryptocurrencies with the latest prices, market capital, volume supply, etc..
Cryptocurrency is one of the hottest topics in the financial world today.
The market is volatile, and prices are constantly changing, and as a result, it can be challenging to keep track of the current prices of different cryptocurrencies. Fortunately, with the help of a framework such as React, it has become easier to get real-time information about cryptocurrency prices.

Overview of the App

The app we will be discussing is a simple React app that fetches data from the Coinstats API and displays it in a table format.
The app allows you to search for a specific cryptocurrency and displays its rank, name, symbol, market cap, price, and available supply.

Setting Up the App

To get started, you need to create a new React app using create-react-app. Once you have created the app, you need to install Axios using npm i axios, as it is the library used to fetch data from the Coinstats API.

Fetching Data from the Coinstats API

After installing Axios, we need to set up initial state using the useState hook. In our case, we will be using two states, search and crypto. The search state is used to store the value of the search input, and the crypto state is used to store the data fetched from the Coinstats API.

useEffect(()=> {
  Axios.get(
    `https://api.coinstats.app/public/v1/coins?skip=0&limit=200&currency=USD`)
    .then ((res)=> {
      setCrypto(res.data.coins)
    });
  },[]);

We will be using the useEffect hook to fetch data from the API when the component mounts. We will be using Axios to fetch data from the API, and once we get the data, we will set the crypto state to the data fetched.

Displaying Data in a Table

Once you have the data, we will be displaying it in a table format. The table will have six columns, rank, name, symbol, market cap, price, and available supply.
We will be using the filter method to filter the data based on the search input. The filter method takes a callback function that returns the filtered data.
In our case here, we will be using the toLowerCase method to convert the search input to lowercase and the includes method to check if the name of the cryptocurrency includes the search input.

           <>
            <tr id="id">
              <td className="rank">{val.rank}</td>
              <td className="logo">
              <a href={val.websiteUrl}>
                  <img 
                  src={val.icon} 
                  alt="logo" 
                  width="30px"/>
                  </a>
                  <p>{val.name}</p>
                  </td>
            <td className="symbol">{val.symbol}</td>
            <td>$ {Math.round(val.marketCap)} </td>
            <td>$ {Math.round(val.price)} </td>
            <td>{val.availableSupply}</td>
            </tr>
            </>

After filtering the data, we will be using the map method to loop through the filtered data and display it in the table. We will be using the JSX syntax to create the table rows and columns.

{crypto 
        .filter((val)=> { return val.name.toLowerCase()
        .includes(search)})
        .map((val, id)=> {
          return (
            <> ...

Conclusion

In conclusion, we have discussed a simple React app that helps you find the prices of different cryptocurrencies.
The app fetches data from the Coinstats API and displays it in a table format.
The app is really easy to use, and the code is easy to understand, so it might not only suits intermediate level React programmers, but also beginners :) You can use this app as a starting point to build your own cryptocurrency app or modify it to suit your needs.
BTW, you can do the same APP for Foreign Exchange Rates, I'm sure you can do it on your won if you will find a free API that retrieves FOREX !

Follow me on Twitter: https://twitter.com/BekBrace
Follow me on Instagram: https://www.instagram.com/bek_brace/
Subscribe on YouTube: https://www.youtube.com/bekbrace