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

Node v14 or later
Knowledge of HTML, CSS, JavaScript & React
Ethers.js & TailwindCSS libraries
A code editor (i.e., VScode)

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:

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!

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.

npm start

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

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:

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":

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

Building the NFT Gallery

Now that we have our Ethereum node and React project set up, it's time to get to building! We will open our project in the code editor of preference (mine is VScode) and then start building the functions we need to load and display NFT data on our frontend.

First, we will enable tailwind so our frontend looks pretty! Navigate to the src/Index.js file and input the following link element in between lines 9-10 (i.e, between the <React.StrictMode> & <App/ > elements):

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />

Then, we will replace the code in src/App.js with the following code:

building the nft gallery

Copy

//src/App.js
//Import libraries and components
import { useEffect, useState } from 'react';
import { ethers } from "ethers";
import NFTCard from './components/NFTCard';
import CollectionSearch from './components/CollectionSearch';


function App() {
  //State variables
  const [nfts, setNFTs] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [address, setAddress] = useState('0xaAdBA140Ae5e4c8a9eF0Cc86EA3124b446e3E46A')

  //function to fetch nfts by collection
  const fetchCollection = async () => {
    const provider = new ethers.providers.JsonRpcProvider("<YOUR QUICKNODE HTTP ENDPOINT>");
    const collection = await provider.send("qn_fetchNFTsByCollection", {
      collection: address,
      page: 1,
      perPage: 10})
    return collection
  }

  //useEffect renders every time address is set
  useEffect(() => {
    fetchCollection()
    .then(data => {
      setNFTs(data.tokens)
      setIsLoading(false)
      console.log(data)
    })
    .catch(err => setNFTs([]))
  }, [address]);

  
  //jsx containing our conditional rendering
  return (
    <div className='container mx-auto'>
      <CollectionSearch searchText={(text) => setAddress(text)} />
      {!isLoading && nfts.length === 0 && <h1 className='text-5xl text-center mx-auto mt-32'>No Collection Found</h1>}
      <div className='grid grid-cols-3 gap-4'>
        {nfts.map(token => <NFTCard key={token.name} nft={token} />)}
      </div>
    </div>
  );
}

export default App;

//src/App.js
//Import libraries and components
import { useEffect, useState } from 'react';
import { ethers } from "ethers";
import NFTCard from './components/NFTCard';
import CollectionSearch from './components/CollectionSearch';


function App() {
  //State variables
  const [nfts, setNFTs] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [address, setAddress] = useState('0xaAdBA140Ae5e4c8a9eF0Cc86EA3124b446e3E46A')

  //function to fetch nfts by collection
  const fetchCollection = async () => {
    const provider = new ethers.providers.JsonRpcProvider("<YOUR QUICKNODE HTTP ENDPOINT>");
    const collection = await provider.send("qn_fetchNFTsByCollection", {
      collection: address,
      page: 1,
      perPage: 10})
    return collection
  }

  //useEffect renders every time address is set
  useEffect(() => {
    fetchCollection()
    .then(data => {
      setNFTs(data.tokens)
      setIsLoading(false)
      console.log(data)
    })
    .catch(err => setNFTs([]))
  }, [address]);

  
  //jsx containing our conditional rendering
  return (
    <div className='container mx-auto'>
      <CollectionSearch searchText={(text) => setAddress(text)} />
      {!isLoading && nfts.length === 0 && <h1 className='text-5xl text-center mx-auto mt-32'>No Collection Found</h1>}
      <div className='grid grid-cols-3 gap-4'>
        {nfts.map(token => <NFTCard key={token.name} nft={token} />)}
      </div>
    </div>
  );
}

export default App;

Remember to input your QuickNode HTTP URL in the provider variable above.

> Note: If you plan to publish your code publicly, we recommend using a .env file to store your QuickNode RPC endpoint to prevent it from being compromised.

So what does the code above do?

Starting from the top to bottom, we will first import the required libraries and components. Next, we will create three useState variables that we'll need when fetching data from the NFT API. The nfts state variable will hold the array of NFT data (i.e., name, token ID, current owner, traits, and transaction history). The other two useState variables will track the loading state and the address the user searches for. For convenience, we will set a default address in our state variable address (e.g. 0xaAdBA140Ae5e4c8a9eF0Cc86EA3124b446e3E46A).

We also created a fetchCollection function that uses Ethers.js to request data from the NFT API (specifically the qn_fetchNFTsByCollection method). Our request includes the collection address (i.e., collection), the page number we would like returned (i.e., page), and the number of NFTs we would like returned on each page (i.e., perPage). In this example, we set the perPage value to 10, but feel free to modify this number. Note, you can request up to 100 items per page (if this field is omitted, the default is set to 40 items per page). Additionally, our useEffect function will run our fetchCollection() function every time we set a new value in the address state variable.

In the return() call (which contains our JSX), we first input our CollectionSearch component. This component contains our search form and its associated event handling. Our logic is, if the search is valid, we will map over each NFT in the response and map it into our NFTCard component. A No Collection Found banner will show on the page if the search returns an error.

Moving forward, we will create a new folder under the src directory called components. Once our components folder is created, we will make a new file inside it called CollectionSearch.js and input the following code:

building the nft gallery

Copy

//src/components/CollectionSearch.js
import React, { useState } from 'react';

//component containing our form, button and state handling logic
const CollectionSearch = ({ searchText }) => {
    const [text, setText] = useState('');

//form event handling logic - sets our state variable text
const handleSubmit = (e) => {
        e.preventDefault();
        searchText(text);
}

//jsx containing our form and button - enhanced with tailwindcss
return (
        <div className='max-w-sm rounded overflow-hidden my-10 mx-auto'>
            <form onSubmit={handleSubmit} className="w-full max-w-sm">
                <div className="flex items-center border-b-2 border-purple-500 py-2">
                    <input onChange={e => setText(e.target.value)} className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Collection Address" />
                    <button className="flex-shrink-0 bg-purple-500 hover:bg-purple-700 border-purple-500 hover:border-purple-700 text-sm border-4 text-white py-1 px-2 rounded" type="submit">
                        Search
                    </button>
                </div>
            </form>
        </div>
    )
}

export default CollectionSearch;

//src/components/CollectionSearch.js
import React, { useState } from 'react';

//component containing our form, button and state handling logic
const CollectionSearch = ({ searchText }) => {
    const [text, setText] = useState('');

//form event handling logic - sets our state variable text
const handleSubmit = (e) => {
        e.preventDefault();
        searchText(text);
}

//jsx containing our form and button - enhanced with tailwindcss
return (
        <div className='max-w-sm rounded overflow-hidden my-10 mx-auto'>
            <form onSubmit={handleSubmit} className="w-full max-w-sm">
                <div className="flex items-center border-b-2 border-purple-500 py-2">
                    <input onChange={e => setText(e.target.value)} className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Collection Address" />
                    <button className="flex-shrink-0 bg-purple-500 hover:bg-purple-700 border-purple-500 hover:border-purple-700 text-sm border-4 text-white py-1 px-2 rounded" type="submit">
                        Search
                    </button>
                </div>
            </form>
        </div>
    )
}

export default CollectionSearch;

The code above does a few things; it will create the form and button element users will use to search for different collections. It will also keep track of the latest search.

Lastly, we will need to create another component to render our NFTs and associated metadata. Create a file in the components called NFTCard.js, then input the following code:

building the nft gallery

Copy

//src/components/NFTCard.js
import React from 'react';

//component that takes an nft object and maps it to corresponding elements
const NFTCard = ({nft}) => {
    return (
        <div className='max-w-lg rounded overflow-hidden shadow-lg'>
            <img src={nft.imageUrl} alt="" className='w-full' />
            <div className='px-4 py-4'>
                <div className='font-bold text-teal-600 text-xl mb-2'>{nft.name}</div>
                <ul>
                    <li>Owner:<strong>{nft.currentOwner}</strong></li>
                </ul>
            </div>
            <div className='px-6 py-4'>
                {nft.traits?.map((trait, index) => (
                <span key={index} className="inline-block bg-gray-200
                 rounded-full px-3 py-2 text-sm font-semibold text-gray-700 mr-2">{trait['trait_type']}:{trait.value}
                </span>))}
                <div>
                </div>
            </div>
        </div>
    )
}

export default NFTCard;

//src/components/NFTCard.js
import React from 'react';

//component that takes an nft object and maps it to corresponding elements
const NFTCard = ({nft}) => {
    return (
        <div className='max-w-lg rounded overflow-hidden shadow-lg'>
            <img src={nft.imageUrl} alt="" className='w-full' />
            <div className='px-4 py-4'>
                <div className='font-bold text-teal-600 text-xl mb-2'>{nft.name}</div>
                <ul>
                    <li>Owner:<strong>{nft.currentOwner}</strong></li>
                </ul>
            </div>
            <div className='px-6 py-4'>
                {nft.traits?.map((trait, index) => (
                <span key={index} className="inline-block bg-gray-200
                 rounded-full px-3 py-2 text-sm font-semibold text-gray-700 mr-2">{trait['trait_type']}:{trait.value}
                </span>))}
                <div>
                </div>
            </div>
        </div>
    )
}

export default NFTCard;

The code above returns an NFTCard component that will take a image input and map the data to the card element.

At this point, if you are following all the instructions correctly, your front-end should look like this:

Here are some additional contract addresses you can use to test your new NFT Gallery!

0x2106C00Ac7dA0A3430aE667879139E832307AeAa (Loopy Donuts)
0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D (Bored Ape Yatch Club)
0x7Bd29408f11D2bFC23c34f18275bBf23bB716Bc7 (Meebits)

Next Steps

If you want to build on top of this guide, here are some additional features you can implement on your front-end to improve the user experience:

Add pagination so users can see the complete NFT collection
Add a Modal window for viewing transaction history

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!

How to Send a Transaction On Solana Using JavaScript

Apr 13, 2022

Hello reader! Today is an exhilarating day because we are going on an expedition to the Solana Blockchain. Solana is an up-and-coming blockchain seeking to improve upon the current ecosystem's solutions to the complex problem of providing a secure, scalable, decentralized...

How to generate a new Ethereum address in PHP

Dec 29, 2021

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

How to do a non-custodial transaction with QuickNode

Apr 12, 2022

Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private key) and...

How to Setup Local Development Environment for Solidity

Apr 12, 2022

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

How to connect to Ethereum using .NET (Nethereum)

Apr 12, 2022

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

How to generate a new Ethereum address in Ruby

Dec 29, 2021

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

How to Set Up a Near Project from Scratch

Jan 27, 2022

In this tutorial we will look at how we can setup a basic NEAR project from scratch, installing and configuring dependencies and customizing the project to work well with AssemblyScript.We will first start by initializing our project with a package.json file using...

Estimating gas price using pending transactions in Python

Apr 12, 2022

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Como crear y lanzar un ERC-721 (NFT)

Dec 29, 2021

Coleccionables digitales que son compatibles con ERC-721 se han vuelto muy populares desde el lanzamiento de Cryptokitties y han ganado adopción masiva en los últimos meses. Esta guía cubrirá la parte de creación y lanzamiento...

How to Build Your DApp Using The Modern Ethereum Tech Stack: Hardhat and EthersJs

Dec 29, 2021

When building a smart contract on the Ethereum blockchain, new developers tend to reach out to tools like truffle and web3.js in building their smart contracts. This tutorial will look at how to use Hardhat and Ether.js, which are now becoming the standard in building...

How to connect to Ethereum network using Java / Web3j

Apr 12, 2022

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

How to integrate IPFS with Ethereum

Apr 12, 2022

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with...

How to Connect to the Ethereum Network using Ruby

Jun 13, 2022

The Ruby programming language has a huge fanbase. Ruby was developed by its creator with an intention to invent a language developers can enjoy learning and using. Ruby has been largely accepted by developers all around the world since its launch, in fact, the biggest...

How to Mint an NFT with Ethers.js

Apr 12, 2022

This guide demonstrates how to mint an NFT on the Polygon blockchain using the Ethers.js library and our Factory ERC-1155 contract we built in an earlier

How to connect to Ethereum network with ethers.js

Apr 12, 2022

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

How to Deploy an NFT Collection on Solana Using Sugar (Candy Machine)

Aug 8, 2022

Are you ready to launch your NFT collection on Solana? Metaplex's new Candy Machine tool, Sugar, is the tool for you to launch in no time. Sugar, Metaplex's latest version of Candy Machine, comes with a few notable improvements: improved upload...

How to Mint an NFT on Solana

Apr 12, 2022

Updated at: April 10, 2022Welcome to another QuickNode guide on Solana - the up-and-coming blockchain that seeks to solve the scalability issues of Ethereum. We will be walking through step-by-step how to create an NFT on Solana. NFT, short for Non Fungible Token,...

The Web3 Developer Stack

Apr 12, 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 common web developer stacks. Similarly, today we will learn more about the web3...

Solana Transaction Propagation: Handling Dropped Transactions

Jul 13, 2022

Hello readers! We know Solana network congestion can sometimes throw a wrench in your transactions. Occasionally, when Solana is congested, transactions get dropped, meaning your sendTransaction request may return a valid Transaction ID, but the response...

How to Get All Tokens Held by a Wallet in Solana

Jul 17, 2022

Hello readers! To kick off Solana Summer and the current whitelist meta, we thought it would be helpful to dig into all of the token accounts you and your users have using the getParsedProgramAccounts method. This tool is convenient for querying different...

How to deploy a smart contract with Brownie

Apr 12, 2022

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Introduction to Scaffold-ETH 🏗

Dec 29, 2021

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 like smart contracts and nodes that allow you to connect to the...

How to generate a new Bitcoin address in JavaScript

Dec 29, 2021

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Como crear un NFT en SOLANA

Dec 29, 2021

¡Hola querido lector! Bienvenidos a una nueva guía de Solana.Solana es una blockchain que promete mucho a la hora de intentar resolver los problemas de escalabilidad que podemos apreciar en otras blockchains, como Ethereum por...

How to create a token on Terra using Terra Station

Apr 12, 2022

Terra is the stablecoins framework with a pool of tokens to work with. Today in this guide, we will learn how to create our own token on the Terra blockchain network.PrerequisitesA Terra Bombay testnet...

How to get the balance of an ERC-20 token

Apr 12, 2022

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

How to Send an EIP-1559 Transaction

Apr 12, 2022

While Ethereum has been trying to scale, it has encountered some gas price issues. Many layer 2 solutions and sidechains sprang into existence to solve this problem, but Ethereum is the main chain, and at some point, it has to be improved. EIP-1559 was introduced to...

How to Create a dApp on Avalanche's Fuji Testnet with QuickNode

Jun 16, 2022

Avalanche is an open-source, proof-of-stake blockchain with smart contract functionality that uses the Snow family of consensus protocols. The Avalanche Primary Network consists of

How to Connect Users to Your dApp with the Solana Wallet Adapter and Scaffold

Jul 26, 2022

Been building on Solana and ready to bring your dApp to the web? You're going to need a way to connect your tools to your users' wallets. Though there are a few ways to connect your dApp to your users' wallets, Solana has created a couple of handy tools that make getting...

How to Create an Address in Solana using JavaScript

Apr 12, 2022

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

How to create your own DAO with Aragon

Apr 12, 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; it enables various use cases in finance, governance, voting, fundraising, etc....

How to create and deploy a smart contract with Hardhat

Apr 12, 2022

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

How to Create Websocket Subscriptions to Solana Blockchain using Typescript

Jul 26, 2022

Creating event listeners is an effective way to alert your app or your users that something you're monitoring has changed. Solana has several built-in handy event listeners, also known as subscriptions, that make listening for changes on the Solana Blockchain a breeze....

How to Connect to Terra with JavaScript using Terra.js

Apr 12, 2022

Stablecoins have been bridging the gap between traditional currencies and blockchains. Stablecoins offer stable price tokens pegged by a reserve asset which is often a fiat current like USD, EUR, GBP. The Terra protocol provides a framework to work with stablecoins. This...

How to connect to Ethereum network using Go

Apr 12, 2022

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

How to re-send a transaction with higher gas price using ethers.js

Apr 29, 2022

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

How To Fork Ethereum Mainnet with Hardhat

Apr 12, 2022

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

How to connect to Ethereum using PHP

Apr 12, 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 web3.php...

How to connect to the Ethereum network using Python using Web3.py

Apr 12, 2022

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

How to use Subspace with QuickNode

Apr 12, 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 websites. JavaScript today has become one of the most used programming languages,...

How to Create a Fungible SPL token with the New Metaplex Token Standard

Jul 26, 2022

Are you creating a Whitelist token for your upcoming NFT mint? Or want to launch a fungible token for your next great dApp? Solana and Metaplex make it easy to do so right from your terminal! On June 20, 2022, Solana deprecated the...

How to Fork Ethereum Blockchain with Ganache.

Apr 12, 2022

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

How to Build a Solana Explorer Clone (2 of 3): Transaction Detail Using Dynamic Routes

Aug 8, 2022

Solana Explorer provides access to a wealth of great information on the Solana blockchain: transaction history and details, token balances, NFT metadata, and much more. In our opinion, browsing Solana Explorer is one of the best ways to understand Solana, but building a...

How to connect to Ethereum network with Web3.js

Apr 12, 2022

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

How to Build a Wallet Generator for Solana in React

Dec 27, 2021

In this practical guide you will build a basic Wallet application with React and Web3 that will interact with Solana Network.This application will do the following operations:Connect to the...

How to Fetch Transaction History on Ethereum using Web3.py

Jun 6, 2022

If you are building on Ethereum, you may run into scenarios where you need to fetch transaction history for a given address. Unfortunately, the current design for Ethereum lacks an easy way to retrieve this data. For this reason, we are dedicating this guide to explaining...

Integrate Your Svelte App with a Smart Contract

Apr 12, 2022

Today we will be building a sample app in Svelte, and connecting it to a smart contract that we deploy on the Ropsten Network.Our frontend will be able to do the following:Allow the user to send a greeting message along with a wave to the...

How to Build a Solana Explorer Clone (Part 1: Transaction History)

Aug 8, 2022

How to Connect Your Dapp With MetaMask Using Ethers.js

Dec 29, 2021

In our dApp, we will have a simple react user interface that has a material button asking the user to connect to MetaMask. And if they do not have an account, they can create one or log in to their account. They will then view their wallet balance and address displayed on...

How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Dec 29, 2021

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a more recent player in the game: "Login with MetaMask". For instance, this is...

How to Deploy an NFT on Solana Using Candy Machine V2

Jul 28, 2022

Candy Machine 2 has been deprecated. Please see our guide to building a Candy Machine with Metaplex Sugar.

How to generate a new Ethereum address in Go

Dec 29, 2021

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

How to generate a new Ethereum address in Python

Dec 29, 2021

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

How to generate a new Ethereum address in JavaScript

Dec 29, 2021

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Como crear un NFT en Solana usando Candy Machine

Dec 29, 2021

¡Hola querido lector! Hemos recibido un montón de pedidos por otra guía de NFT en Solana. En la guia anterior no llegamos hasta la parte mas jugosa, que es la parte donde enlazamos una...

How to Fetch Ethereum Event Logs in Ruby

Jun 16, 2022

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch Ethereum event logs in Ruby using eth.rb Ruby...

How to Mint an NFT on Solana Using Candy Machine

Jan 17, 2022

NOTE: This guide is based off of the V1 of Candy Machine. V1 has been deprecated. You can catch an up-to-date guide on V2 here

How to Get Transaction Logs on Solana

Jul 11, 2022

Ever need to pull all the transactions associated with a Wallet? Want to see all of the mint transactions associated with a Candy Machine? Or maybe see transaction history of an NFT? Solana's getSignaturesForAddress method is a versatile tool that makes...

How to send a transaction on Terra using JavaScript and Terra.js

Apr 12, 2022

Terra has emerged as the choice of blockchain for developing a stablecoin based dApp. Terra provides a cutting-edge stablecoin framework for modern dApp development. In this guide, we will learn how to send a transaction on Terra using their javascript library...

How to Lazy Mint an NFT on Rarible with Rarepress

Apr 12, 2022

NFTs are great for creators to monetize their artwork and for people to get ownership of an item. But since gas prices are usually high given the highly in-demand space on Ethereum, minting an NFT or an NFT collection can become costly for a creator. Lazy minting solves...

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

Overview

What You Will Need

What You Will Do

Diving into the QuickNode NFT API

Setting Up the React Project

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

Building the NFT Gallery

Next Steps

Conclusion

We❤️ Feedback!

Related articles 60