Top 10 Coin Market Cap API Solutions

Looking for a Postman alternative?

Try APIDog, the Most Customizable Postman Alternative, where you can connect to thousands of APIs right now!

Download Apidog

Introduction

Building a real-time cryptocurrency information table using React, MUI (Material-UI), and the CoinMarketCap API can be a valuable project for both beginners and experienced developers alike. With the exponential growth of the cryptocurrency market, having up-to-date and accurate information is crucial for making informed investment decisions.

In this article, we will walk through the step-by-step process of building a real-time cryptocurrency information table. We will start by setting up the necessary tools and technologies, followed by building the backend and frontend components. Finally, we will explore how to fetch data from the CoinMarketCap API and display it in our table.

Preparation

Before we dive into building the real-time cryptocurrency information table, we need to set up our development environment. Start by creating a new folder for your project and navigate to that folder in your terminal. Once inside the folder, we can proceed with installing React and MUI.

To install React, run the following command:

npx create-react-app cryptocurrency-table

This command will create a new React project with the name “cryptocurrency-table”. Next, navigate into the project folder using:

cd cryptocurrency-table

Now we can install MUI by running:

npm install @mui/material @emotion/react @emotion/styled axios

MUI is a popular React component library that will provide us with pre-built components and styling options to enhance the table’s appearance.

With React and MUI successfully installed, we can now move on to building the backend and frontend components.

Building the Backend

To fetch data from the CoinMarketCap API, we need to set up a backend server. In this article, we will be using Express to create a simple server that will handle API requests and provide the data to the frontend.

Start by creating a new file called server.js in the root directory of your project. Add the following code to set up a basic Express server:

const express = require('express');
const axios = require('axios');

const app = express();
const port = 3001;

app.get('/api/cryptocurrencies', async (req, res) => {
  try {
    const response = await axios.get('https://api.coinmarketcap.com/v1/ticker/?limit=10');
    res.json(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Error fetching data from CoinMarketCap API' });
  }
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

In this code snippet, we import the necessary dependencies, set up an Express app, and define a route to handle the API request to fetch cryptocurrency data from CoinMarketCap. We limit the response to the top 10 cryptocurrencies for simplicity.

Save the file and start the backend server by running the following command in your terminal:

node server.js

Great! Our backend server is up and running, ready to serve data to the frontend.

Building the Frontend

Now that we have the backend set up, we can move on to building the frontend components. In this section, we will focus on creating a table component using MUI and fetching data from the backend to display in the table.

Start by creating a new file called Table.js in the src folder of your project. Add the following code to create the basic structure of the table component:

import React from 'react';
import axios from 'axios';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';

const Table = () => {
  // State to store the fetched cryptocurrency data
  const [cryptocurrencies, setCryptocurrencies] = React.useState([]);

  // Fetch cryptocurrency data from the backend
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/cryptocurrencies');
        setCryptocurrencies(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Price</TableCell>
            <TableCell>Market Cap</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {cryptocurrencies.map((cryptocurrency) => (
            <TableRow key={cryptocurrency.id}>
              <TableCell>{cryptocurrency.name}</TableCell>
              <TableCell>${cryptocurrency.price_usd}</TableCell>
              <TableCell>${cryptocurrency.market_cap_usd}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default Table;

In this code snippet, we import the necessary dependencies from MUI and Axios. We define a functional component called Table that fetches cryptocurrency data from the backend using the useEffect hook and displays it in a Material-UI table. The Table component also uses the useState hook to store the fetched data in the cryptocurrencies state variable.

To use this Table component, we need to import it into the App.js component and render it. Add the following code to the App.js file:

import React from 'react';
import Table from './Table';

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

export default App;

With the frontend components set up, we can now test our application and see the real-time cryptocurrency information table in action.

To start the development server and view the application, run the following command in your terminal:

npm start

Now open your browser and navigate to http://localhost:3000. You should see the cryptocurrency table displaying data in real time as it is fetched from the CoinMarketCap API via the backend server.

Congratulations! You have successfully built a real-time cryptocurrency information table using React, MUI, and the CoinMarketCap API.

API Key Setup

To access the CoinMarketCap API, we need to sign up for a free API key. Follow these instructions to obtain an API key:

1. Visit the CoinMarketCap website and create an account if you don’t already have one.
2. Once logged in, navigate to the API section and click on the “Get Your Free API Key” button.
3. Follow the instructions to generate your API key and take note of it.

Next, we need to configure the API key in our backend server. Open the server.js file and add the following code at the beginning:

const API_KEY = 'YOUR_API_KEY'; // Replace this with your actual API key

Replace 'YOUR_API_KEY' with the API key you obtained from CoinMarketCap. This variable will be used in subsequent API requests.

With the API key successfully configured, you can now make authenticated requests to the CoinMarketCap API.

Table Component Creation

Now that we have the basic table component set up, let’s optimize it by implementing pagination.

Start by updating the Table component as follows:

import React from 'react';
import axios from 'axios';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, TablePagination } from '@mui/material';

const Table = () => {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  const [cryptocurrencies, setCryptocurrencies] = React.useState([]);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`/api/cryptocurrencies?start=${page * rowsPerPage}&limit=${rowsPerPage}`);
        setCryptocurrencies(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, [page, rowsPerPage]);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <div>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell>Price</TableCell>
              <TableCell>Market Cap</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {cryptocurrencies.map((cryptocurrency) => (
              <TableRow key={cryptocurrency.id}>
                <TableCell>{cryptocurrency.name}</TableCell>
                <TableCell>${cryptocurrency.price_usd}</TableCell>
                <TableCell>${cryptocurrency.market_cap_usd}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 50]}
        component="div"
        count={100}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </div>
  );
};

export default Table;

In this updated code snippet, we integrate the TablePagination component from MUI to enable pagination functionality. The handleChangePage function is called when the page is changed, and the handleChangeRowsPerPage function is called when the number of rows per page is changed.

Conclusion

Building a real-time cryptocurrency information table using React, MUI, and the CoinMarketCap API can be an exciting and educational project. In this article, we walked through the step-by-step process of setting up the project, building the backend and frontend components, and fetching data from the CoinMarketCap API.

We learned how to set up a simple Express server to handle API requests, create a table component using MUI, and fetch data from the backend to display in the frontend. We also explored pagination functionality and how it can be implemented using the TablePagination component from MUI.

I hope this article has provided a valuable guide for building a real-time cryptocurrency information table. Feel free to experiment and customize the table further to suit your needs. The full code for this project is available on GitHub.

Happy coding!

Looking for a Postman alternative?

Try APIDog, the Most Customizable Postman Alternative, where you can connect to thousands of APIs right now!

Download Apidog