CryptoTracker in 70 lines of code!
Tags: react, webdev, javascript, tutorial
Published: 2021-11-02 12:14:52

## 🏗 Setup Project

<img width="100%" style="width:100%"src="https://media2.giphy.com/media/ZEBb3BSUKqGSzN7pRz/giphy.gif?cid=5a38a5a2bldyzya2wyzr0scnfsdicrceugv1uvmvexc31teq&rid=giphy.gif&ct=g"/>

Let's get this started by setting up the react project and installing the required package.

```bash
npx create-react-app cryptotracker
cd cryptotracker
npm i ez-react-table
```

## 🤑 Create Tracker

Open up `src/App.js` in your favorite editor and delete everything in it. Let's start from scratch.

### Call CoinGecko API

```javascript
import React, { useState, useEffect } from "react";
import EzReactTable from 'ez-react-table'

export default function App() {
  const [coins, setCoins] = useState([]);
  const fetchCoins = async () => {
    try {
      const res = await fetch(
        "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
      );
      const data = await res.json();
      setCoins(data);
    } catch (e) {
      alert("Api error");
    }
  };
  useEffect(() => {
    fetchCoins();
  }, []);
...
```

What we are doing is setting up a coins state that defaults to an empty array. Once the App component mounts we run the `fetchCoins` function. The `fetchCoins` function calls the [Coin Gecko](https://www.coingecko.com/en/api) API and sets `coins` to the array of crypto coins. 

### Configure Columns

Next up, let's configure the columns variable that will be passed to `ez-react-table` and tell it how to render the coins state to a table.

```javascript
...
  const columns = [
    {
      title: "Name",
      key: "name",
      width: 200,
      render: (value, object) => {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            <img height="20px" width="20px" src={object?.image} alt="coin" />
            <span style={{ marginLeft: "10px" }}>{object?.name}</span>
          </div>
        );
      },
    },
    {
      title: "Symbol",
      center: true,
      key: "symbol",
      width: 120,
      render: (value, object) => <div>{value.toUpperCase()}</div>,
    },
    {
      title: "Price",
      key: "current_price",
      width: 100,
      render: (value, object) => <div>{`$${value}`}</div>,
    },
    {
      title: "Change",
      key: "price_change_percentage_24h",
      width: 100,
      render: (value, object) => {
        return (
          <div style={{ color: /-/i.test(value) ? "#ff0374" : "#06a847" }}>
            {value}%
          </div>
        );
      },
    },
  ];
...
```

Couple of points of interest with the above code. The `columns` variable is an array of column objects. Each object defines the title for the column, the width of the column, the key name corresponds to the object property we are mapping to a column, and the render method takes a component which receives 2 arguments, the value of the current property and the object for the row. The component returns whatever should be rendered to the row cell. Take note that you could forego the render property altogether and `ez-react-table` would render the value to the cell.

### Putting It All Together

```javascript
...
return (
    <EzReactTable
      cols={columns}
      data={coins}
      darkMode
      title="Crypto Tracker"
      defaultSort="name"
      accentColor="#ffbc03"
      tableHeight={300}
    />
  );
};
```
Finally! Return the EzReactTable component. The cols property gets the columns variable we defined. The data property takes the coins state to be rendered. The defaultSort property is a key defined in the columns variable we'd like to default to sorting the table by. There are a few self explanatory properties as well.

## 👟 Run it!

Okay the code is done! Let's test it out by running `npm start` in the project directory and navigating to `localhost:3000`. 

Bask in the glory! Virtualized rows, a global search input, column sorting, and style with almost no effort!

Here is the git [repo](https://github.com/rowlinsonmike/cryptotracker) if you'd like to look at the code.

<img width="100%" style="width:100%" src="https://media4.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.gif?cid=5a38a5a28b8s8odkxdkvm52cchniqm2r60x6pcbgtbglsi4t&rid=giphy.gif&ct=g" />

## 🔮 What's Next?

<img width="100%" style="width:100%" src="https://media2.giphy.com/media/xT5LMCLlkZL5d2j0qc/giphy.gif?cid=5a38a5a21emsdr05lcwq7pow4n1zycijg0mbjis5db1nfwuw&rid=giphy.gif&ct=g" />

The secret sauce for this article was [ez-react-table](https://www.npmjs.com/package/ez-react-table). The package is built to be straight forward to use and powerful.

Try `ez-react-table` on your next project!

Thanks for coding along!