Marketplace has launched, further enabling blockchain developers! Learn more

How to Build an NFT Gallery on Solana Using QuickNode's NFT-API

September 23, 2022

Overview

Hello readers! In this tutorial we will be building out a small application that allows you to get all of the NFTs of a particular Solana wallet, and display all of the information from them on the web page. To build this out we are going to use the Remix JS framework to serve the webpage, and the QuickNode NFT-API offering for Solana to query for the NFT information.

Prerequisites:
  • Node.js installed
  • A text editor
  • familiarity with React

Configuring the App

The first thing we will need to do is get the remix-app up and running. To do so you can run the following command:


It will ask you a series of questions upon running the command:

  1. Where would you like to create your app? I am choosing ./qn-nft-api, but you can name it whatever you would like.
  2. Where do you want to deploy? Remix App Server
  3. TypeScript or JavaScript? TypeScript
  4. Do you want me to run 'npm install'? y

If you answered the questions as I just outlined it should look like this.


After getting the app installed, open up your code editor wherever you placed the app. We will be using Tailwind to do a light bit of styling to the app, so we should get that setup next. To begin we can run the command:

configuring the app

Copy
npm install --save-dev concurrently tailwindcss

The "concurrently" bit will save us from the headache of having to manage multiple terminals.

configuring the app

Copy
npx tailwindcss init

This will create a file called tailwind.config.js. Update the file to look like the code below.

configuring the app

Copy
module.exports = {
  mode: "jit",
  purge: ["./app/**/*.{ts,tsx}"],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

With that out of the way, we need to update our scripts. Head over to package.json and locate the portion of your file that looks like this:

configuring the app

Copy
 "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },

And update it to look like this:

configuring the app

Copy
 "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },

This will ensure that as our Remix app builds, our tailwind styling will update alongside it.

Now to import our styles we will need to go to app/root.tsx so that our styles get picked up globally. At the top of the file you will insert this line right under all of the other imports.

configuring the app

Copy
// app/root.tsx
import tailwindCSS from "./tailwind.css";

That will import all of the styles that tailwind needs to work its magic. Now we need to hook it up the "Remix way". Remix uses links to manage its styling. If you would like to learn more about it you can check out that link, but you don't need an in-depth knowledge of it to continue on.

The next thing we will need to do is export our styles in the root so the rest of the application will pick them up. To do so you can put this function below anywhere in your root.tsx folder.

configuring the app

Copy
// app/root.tsx
export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: tailwindCSS }];
};

And with that you now have tailwind working in your Remix application!

The next step in configuring our application is getting a QuickNode endpoint with the NFT-add-on enabled.

You will need to sign up for a new endpoint, choose SOL, and pick this add on:


You need the HTTPS endpoint for this tutorial. It should look something like this:


With that done, we can move onto building the app.

Conclusion

Congrats on making it to the end! In this tutorial you learned how to use QuickNode's NFT-API to query the blockchain for NFT information. You also learned how to set up an app that fetches real data using Remix. I would really encourage you to play around with all of the different keys that are in the assets object you see in the code. In the docs linked above you have all of the information you could ever need on the NFT tool, and all of the values that it returns.

Subscribe to our newsletter for more articles and guides on Ethereum. If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you’ll ever meet :)

Related articles 33

Como crear un NFT en SOLANA
Published: Dec 27, 2021
Updated: Sep 23, 2022

¡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...

Continue reading
How to Get Transaction Logs on Solana
Published: Jun 24, 2022
Updated: Oct 27, 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...

Continue reading
How to Transfer SPL Tokens on Solana
Published: Sep 23, 2022
Updated: Sep 23, 2022

Sending Solana Program Library (SPL) Tokens is a critical mechanism for Solana development. Whether you are airdropping whitelist tokens to your community, bulk sending NFTs to another wallet,...

Continue reading
How to Mint an NFT on Solana
Published: Aug 27, 2021
Updated: Sep 23, 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...

Continue reading
How to Send Bulk Transactions on Solana
Published: Aug 31, 2022
Updated: Oct 3, 2022

Are you running a batch process that has many transactions? Perhaps an airdrop to your community's NFT holders or a token distribution to early users of your dApp. Solana transaction...

Continue reading
Solana Fundamentals Reference Guide
Published: Oct 27, 2022
Updated: Oct 27, 2022

The Solana blockchain is a powerful tool, delivering thousands of transactions per second with almost no-cost transaction fees. If you are new to Web3 or have developed on EVM-based...

Continue reading