QuickNode Raises $60M Series B!
Read the Letter from our CEO.

How to Build an NFT Gallery using React and QuickNode's NFT API

January 25, 2023

Overview

Ever wanted to get a list of all the owners of a particular NFT collection? Or wanted to fetch all the metadata for an NFT collection? From experience, you may know that compiling all this NFT data can be quite complex as you would need to gather data from multiple sources and keep it up to date in your database. Fortunately, QuickNode's NFT API helps us streamline the process of retrieving NFT data. In this guide, we will show you how to retrieve all the NFTs from a particular collection and demonstrate how to display them on our front-end using React, Ethers.js, and TailwindCSS.

What You Will Need


What You Will Do

  • Dive into the different methods available on the QuickNode NFT API
  • Boot up a QuickNode Ethereum node with the NFT API add-on
  • Create a React application that displays data retrieved from the NFT API using Ethers.js and TailwindCSS

Diving into the QuickNode NFT API

Before we dive into building our gallery, let us learn more about the different methods QuickNode offers for retrieving NFT data.

qn_fetchNFTCollectionDetails - This method is used to return high-level information about a collection. Collection details include:

  • Collection name
  • Collection description
  • Block number the collection was created in
  • The transaction hash from deployment
  • The type of NFT (i.e., at the time of this writing, this method supports ERC-721 and ERC-1155 standards)

qn_fetchNFTsByCollection - This method returns aggregated data on NFTs within a given collection. The response data includes an array of token objects, which we will find useful when building our NFT gallery. We will need the following fields for our front-end: token ID, image URL, and associated attributes (i.e., traits). All this data is aggregated by the NFT API; without it, we'd have to use multiple sources of data to compile what we need, which can be quite complex and cumbersome. Note that at the time of this writing, this method only supports ERC-721 contracts.

qn_verifyNFTsOwner - Last but not least, the qn_verifyNFTsOwner method allows one to verify if an address holds a particular NFT. How does it work? Well, you pass in a wallet address, and an array of NFT addresses along with their token IDs. If the owner is verified, it will return an array of owned NFTs for the provided wallet. Even Twitter uses this feature to verify NFTs on their platform 🤯

To see the complete documentation, view our docs here.

Note - The NFT API is only supported on Ethereum mainnet and Solana at the time of this writing but will likely expand to more chains in the future.

Setting Up the React Project

Now that we are more familiar with QuickNode's NFT API, we can start building! In this section, we will create our React app and install the required dependencies.

First, let us create a project directory by running the following command:

setting up the react project

Copy
npx create-react-app nft-gallery

Once our project directory is created, let us navigate inside it and install the required dependencies. We will be installing Ethers.js to make requests to our Ethereum node and will also use React and TailwindCSS to make our frontend look beautiful!

setting up the react project

Copy
cd nft-gallery
npm install ethers
npx tailwindcss init -p

To test that everything is working up until this point, you can start the development server by running the command.

setting up the react project

Copy
npm start

When you navigate to the URL your server is running on, you should see the following:

Running the React App


Before moving onto booting our Ethereum node, let's open a code editor and replace the content in tailwind.config.js with the following code:

setting up the react project

Copy
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Remember to save the file!

Setting Up an Ethereum Endpoint with the NFT API Add-on

Setting up your Ethereum node with the NFT API is quite easy. If you haven't signed up already, you can create an account here.

Once you have logged in, navigate to the quicknode.com/endpoints page page and click "Create an endpoint". Select Ethereum mainnet, then click Next. On the "Configure add-on's" tab, select the "NFT Fetch Tool":

Quicknode Add Ons page


Once you finish the payment details, your endpoint is ready, copy the HTTP Provider link:

Quicknode Endpoints page

Conclusion

Congratulations! You have learned how to query data from QuickNode's NFT API and display it on your React app! To continue building on your new skills and knowledge, check out our collection of guides here.

We❤️ Feedback!

If you have any feedback or questions on this guide, feel free to reach out to us via Twitter or our Discord community server. We’d love to hear from you!

Related articles 37

How to Access Bitcoin Mempool
Published: Aug 16, 2021
Updated: Sep 21, 2022

Bitcoin is the father of blockchain technology. With Bitcoin started a new era of blockchain and decentralization. Bitcoin enabled everyone to make the peer-to-peer transactions they enjoy...

Continue reading
How to access Ethereum Mempool
Published: Oct 15, 2020
Updated: Sep 15, 2022

On Ethereum, when a transaction is sent, before being added to a block, it resides in what is called a Mempool. To receive information about this transaction, the Mempool must be queried. This...

Continue reading
The Web3 Developer Stack
Published: Jul 3, 2021
Updated: Sep 15, 2022

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are...

Continue reading
Introduction to Scaffold-ETH 🏗
Published: Oct 7, 2021
Updated: Sep 9, 2022

Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements...

Continue reading
How to create your own DAO with Aragon
Published: Aug 8, 2021
Updated: Sep 9, 2022

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything;...

Continue reading
How to connect to Ethereum using PHP
Published: Jun 11, 2021
Updated: Sep 9, 2022

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the

Continue reading
How to use Subspace with QuickNode
Published: Sep 8, 2020
Updated: Sep 9, 2022

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and...

Continue reading