**A step-by-step tutorial on building an interactive NFT Gallery using QuickNode's GraphQL NFT API, icy.tools, JavaScript, Next.js, and Tailwind CSS** ## **What Are We Building** In this tutorial, we will be building an NFT Gallery using QuickNode's GraphQL NFT API, Icy.tools, React, JavaScript, Next.js, Vercel, and TailwindCSS. The React web app will provide a user interface that displays a grid view of all the NFTs held by any given Ethereum Name Service (ENS). NFT data was fetched using icy-nft-tools. ![NFT Gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg4qgfc9ckapjrbdut2e.png) ## **What is QuickNode?** QuickNode is a blockchain platform that provides infrastructure for developers to build and scale decentralized applications (DApps). It offers a suite of tools and services, including a developer API, to make it easier for developers to build, test, and deploy DApps on multiple blockchain networks. QuickNode aims to simplify the building process on blockchain and make it more accessible for developers while also providing high-performance infrastructure to support the growing demand for decentralized applications. ### **What is QuickNode's GraphQL NFT API?** [**Sign up for the free GraphQL NFT API!**](https://developers.icy.tools/?utm_source=developerdao&utm_campaign=dd&utm_content=ddgraphql) The GraphQL NFT API is a set of tools and services that allow developers to interact with NFT platforms using the GraphQL query language. This API provides a convenient way for developers to discover, track, and analyze NFTs with real-time floor and volume data, historical charts and trend data, NFT portfolio values on any wallet, and more. This service also allows fetching the NFTs owned by a specified address. In this tutorial, we will explore how to use this feature. ### **Explore QuickNode Marketplace!** Besides its GraphQL NFT API, QuickNode offers many more tools and solutions for Web3 developers in its [**marketplace**](https://www.quicknode.com/marketplace). This includes a gas price estimator, crossmint NFT API, GoPlus anti-fraud API, and a massive library of expert-crafted guides, tutorials, documentation, and other developer resources. > *Note: QuickNode recently acquired* [*Icy.tools*](http://Icy.tools) *and we will use the* `icy-nft-hooks` *library to access GraphQL NFT API.* --- **By the end of this tutorial, you will be able to:** * Install, set up, and initialize the icy-nft-hooks. * Create a new Next.js project and learn how to use the icy-nft-hooks to interact with QuickNode GraphQl NFT APIs for data retrieval. * Fetch and store NFT data retrieved for a wallet address into a state variable and display the results to the user interface. --- ### **The Functionalities** * Users will be able to input Ethereum Name Service (ENS) into the "Ethereum Name Service" field. * The app will interact with the provider API endpoints and fetch the NFT data using [Icy.tools](https://developers.icy.tools/?utm_source=quicknode&utm_campaign=quicknode-header). * The app returns a gallery grid view of all the NFTs held by the wallet address to the user interface. --- ## **The Tech Stack** * CSS Framework: [**TailwindCSS**](https://tailwindcss.com/) * RPC Provider: [QuickNode](https://developers.icy.tools/?utm_source=quicknode&utm_campaign=quicknode-header) * JavaScript Libraries: **Icy-nft-hooks**, [**React**](https://reactjs.org/tutorial/tutorial.html) * Frontend/Framework: [**JavaScript**](https://www.javascript.com/), [**Next.js**](https://nextjs.org/) --- # Let's BUIDL **The Prerequisites** * Have [**Git**](https://git-scm.com/downloads), [**Yarn**](https://yarnpkg.com/), [**TailwindCSS**](https://tailwindcss.com/docs/guides/nextjs), and [**Node.js**](https://nodejs.org/en/download/) installed on your machine * Basic understanding of [**JavaScript**](https://www.codecademy.com/learn/introduction-to-javascript), [**React**](https://reactjs.org/tutorial/tutorial.html), and [**TailwindCSS**](https://tailwindcss.com/) --- ## **Step 1: Create Next.js Project** We will set up our environment and install the necessary dependencies. Open a terminal on your machine and navigate to the directory location where you would like to store your Next.js project. Then, run the following command: ```bash yarn create next-app . ``` This command creates a new Next.js starter project in the directory specified. Now, start the local development server by running the following command: ```bash yarn dev ``` The above command sets up your local development environment. Copy and paste [`http://localhost:3000`](http://localhost:3000) into your web browser to launch the Next.js starter project. Here's what your web browser should look like: ![Next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw8shxo1vu5o6lw89fhz.png) The current app only contains the starter code provided by Next.js, which we will modify throughout this tutorial to create the custom frontend UI for our NFT market dashboard. Now, let's install Tailwind CSS and its necessary dependencies using npm by running the following command in the terminal: ```bash npm install -D tailwindcss postcss autoprefixer ``` Run the `init` command to generate both `tailwind.config.js` and `postcss.config.js` files: ```javascript npx tailwindcss init -p ``` In your `tailwind.config.js` file, add the paths to all your template files by updating the code with the following: **File** `./tailwind.config.js` ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } ``` Now add the `@tailwind` directives for each of Tailwind's layers to your `globals.css` file. The top of your `globals.css` file should look like this: **File** `./styles/globals.css` ```css @tailwind base; @tailwind components; @tailwind utilities; ... ``` ## **Step 02: Installing the icy-nft-hooks Library** For creating the NFT market dashboard, we need real-time data, and we will fetch this data using the GraphQL NFT API. We will install and set up `icy-nft-hooks`a React hook library that acts as a wrapper for the [**icy.tools**](http://icy.tools) GraphQL API. This library enables us to fetch real-time NFT market data, such as the floor price, sales, average price, volume, market cap, etc. Install the `icy-nft-hooks` with the following command: ```bash yarn add @quicknode/icy-nft-hooks yarn add @apollo/client graphql ``` In the `pages` directory, navigate to the `_app.js` file. Copy and paste the following code into `_app.js` file. File: `./pages/_app.js` ```javascript import "../styles/globals.css"; import { IcyProvider } from "@quicknode/icy-nft-hooks"; export default function App({ Component, pageProps }) { return ( ); } ``` We are importing the `IcyProvider` hook from the `icy-nft-hooks` package and wrapping the entire web app with the `IcyProvider` hook. ## **Step 03: Getting an NFT API Key** As you can see in the above code, we will need an API key to fetch real-time NFT market data. To get the API key, follow these steps: Open [**Icy tools**](https://developers.icy.tools/) link and click on the "Sign Up" button. ![Icy.tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jxbathd5f0xh9kchbm6.png) Enter the details and click on the "Sign Up" button ![Sign Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qah8pqx2bsurlwwmkrsd.png) You'll land on the "Explore" page of [**icy.tools**](http://icy.tools), where you will see something like this: ![Icy.tools page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0ip0ueu47h9cuqd3uab.png) Click on the "Settings" button on the left side. You will see the API key. ![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c88pz4fxbgu8ngqq7osa.png) ## **Step 04: Installing the dotenv Package** I recommend storing sensitive information, such as API keys, in environment variables instead of hardcoding them in the code. We will use `dotenv` package for storing sensitive information. Run the following command to install the dotenv package: ```bash yarn add --dev dotenv ``` Create a `.env` file in the root folder. Add environment variable ```bash QUICKNODE_NFT_API_KEY = "c34kndhiflmln-API-KEY" ``` ## **Step 05: Fetching the NFT** In this section, we'll create the `WalletNFTs` function that accepts the ENS as the user input and returns the collection of NFTs owned by the input address. @quicknode/icy-nft-hook library provides us with the `getNFTsByOwner` method that we will implement and utilize inside of our `WalletNFTs` function. The NFT Gallery dapp will accept input for Ethereum wallet addresses. Create a new file `WalletNFTs.js` and Copy the below code. File: `./pages/WalletNFTs.js` ```javascript import { useWalletNFTs } from "@quicknode/icy-nft-hooks"; import { useState } from "react"; function WalletNFTs() { const [ensName, setEnsName] = useState("vitalik.eth"); //vitalik.eth const [cursor, setCursor] = useState(""); const { nfts, isSearchValid, pageInfo } = useWalletNFTs({ ensName, first: 12, after: cursor, }); return (

NFT Gallery

Powered by{" "} QuickNode's GraphQL NFT API

Ethereum Name Service

setEnsName(e.target.value)} style={{ outlineColor: !isSearchValid && ensName.length > 0 ? "red" : undefined, }} />

{console.log(nfts)} {nfts.map((nft) => { const contract = nft.contract; console.log(contract); const imageUrl = nft.images.find((i) => !!i.url)?.url; return (

{contract.name}

{contract.symbol}#{nft.tokenId}

); })}

{pageInfo?.hasNextPage && (

)}

); } export default WalletNFTs; ``` Interestingly, some NFTs do not have images associated with them. To address this, a default image has been added to the grid as a placeholder in case an NFT does not have its own image. You can find the image [here](https://github.com/AAYUSH-GUPTA-coder/nft-gallery-quicknode/blob/main/public/web3.png). ## **Step 06: Display NFT Gallery** We're almost done with our NFT Gallery. In this step, we will import the `WalletNFTs` component from the `WalletNFTs.js` file and use it in `index.js` file. **file:** `./pages/index.js` ```javascript import Head from "next/head"; import WalletNFTs from "./WalletNFTs"; export default function Home() { return ( <> Quicknode NFT Gallery ); } ``` Now open the [`http://localhost:3000`](http://localhost:3000) in your browser. You have created an interactive NFT Gallery. ## **Step 07: Deploy NFT Gallery** Now let's deploy our Next.js app with Vercel by following the steps below: 1. Go to [**Vercel**](https://vercel.com/dashboard) and sign in with your GitHub account. 2. Click the `New Project` button and select your project repo. 3. Select the Framework as `Next.js`. 4. Enter the environment variables, with the name set to 'QUICKNODE\_NFT\_API\_KEY' and the value set to your API Key. 5. Click `Deploy` and now your [**NFT Gallery**](https://nft-gallery-quicknode-tutorial.vercel.app/) is live! Congrats on successfully completing this tutorial! Give yourself a pat on the back. You should now see a gallery grid view of all the NFTs owned by the input wallet address returned to the user interface. --- ## **Full Code Base** GitHub repository of the complete project: [**NFT Gallery**](https://github.com/AAYUSH-GUPTA-coder/nft-gallery-quicknode-tutorial) Website Link: [NFT Gallery Website](https://nft-gallery-quicknode-tutorial.vercel.app/) ![NFT Gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzi0cvtr2yufw019gien.png) ## **Additional Resources** [https://blog.developerdao.com/how-to-build-an-nft-market-dashboard-using-quicknodes-graphql-nft-api](https://blog.developerdao.com/how-to-build-an-nft-market-dashboard-using-quicknodes-graphql-nft-api) [https://github.com/AAYUSH-GUPTA-coder/nft-gallery-quicknode-tutorial](https://github.com/AAYUSH-GUPTA-coder/nft-gallery-quicknode-tutorial) [https://docs.icy.tools/developer-api/api-reference](https://docs.icy.tools/developer-api/api-reference) --- # **🎉BOOM 🎉** You have completed the whole tutorial. Give yourself a big pat on the back. You have learned about the following: * QuickNode Node Provider * Setting up a Next.js app and integrating Tailwind CSS * Icy.tools NFT Hooks: `icy-nft-hooks` * Getting icy.tools API * Setting and using dotenv package * Fetching and displaying NFTs owned by the address I hope you learned something new or solved a problem. Thanks for reading. Have fun! You can follow me on [Twitter](https://twitter.com/Aayush_gupta_ji), [GitHub](https://github.com/AAYUSH-GUPTA-coder), and [Linkedin](https://www.linkedin.com/in/aayush-gupta-20023b183/). Keep your suggestions and comments coming!

icytools

How to Build an NFT Gallery Using QuickNode's GraphQL NFT API

Join Our Newsletter. No Spam, Only the good stuff.