Whether you are building an NFT marketplace, some spectacular dApp, a personal blog showing NFTs you own, an NFT asset inventory in a game, or any other NFT project where you want to display NFTs owned by someone, this is the article for you! This short tutorial will walk you through the simplest way of building an NFT profile in only a couple of minutes. It only takes one simple API call for the magic to happen. 🪄

NFT APIs to fast-track the process

As the core value of NFTs is ownership of digital goods, you probably want to list NFTs for an account to demonstrate that ownership at some point in your NFT project.

If you ever took time to study the web3 developer ecosystem, you might’ve noticed this is not a straightforward thing to do. Even if you have access to a blockchain network node or you are familiar with web3 libraries like web3.js, this is a cumbersome process.

In order to get all NFTs for a user from a blockchain network you would need to:

• Scan all NFT-related events on a blockchain network
• Index that data in your DB
• Keep track of all balances, transfers, burns, mints etc., and then process those events to determine who owns which NFT
• Do all of the above in the real-time

The complexity of it all multiplies if you need to get data from more than one chain as each chain has a different infrastructure and setting it up (and maintaining it) is expensive.

If this sounds like too much time-consuming work, especially if you need to pull data from more than one chain, then no worries at all! NFTPort’s simple-to-use multi-chain APIs are doing all of that work for you, so you can focus on building the other parts of your project instead. We take care of all the complicated and the ugly parts, so you can have a good time building awesome products! 🚀

‍

Ready to see how’s it done? Let’s get into it.

‍

‍

How to display NFTs owned by a user (wallet address)?

By using NFTPort, all you need to do to show NFTs owned by a wallet address is one simple API call!

First, sign up for NFTPort for free and copy your API key.

‍

Next, use the Retrieve NFTs owned by an account endpoint from our NFT Data API to get NFTs owned by an address. You can use a simple curl command in your terminal to try this out, as outlined below.

curl --request GET \
  --url 'https://api.nftport.xyz/v0/accounts/{ADDRESS}?chain=ethereum' \
  --header 'Authorization: {YOUR-API-KEY}' \
  --header 'Content-Type: application/json'

‍

With this API endpoint, you can build a small NFT profile album like the one below.

This only requires a bit of HTML and JS! We will show you the code snippets to create this in a moment, but if you want to jump straight to a working example you can check out this JSFiddle playground.

‍

‍

Step 1: Create a user profile page (HTML)

The below code will be used to output a view similar to the one shown in the picture above. A bit of Bootstrap helps with the aesthetics.

Copy code from HERE

‍

‍

Step 2: Add JS action calling NFTPort endpoint

This small JS snippet will use the NFTPort Data API endpoint to get NFT ownership data based on form input, and display it in the page view.

Copy Code HERE

Step 3: Run the code

Use your preferred server setup running the above code like Node.js or any other.

We prepared a simple JS Fiddle for you can see a working example instantly.

‍

Step 4: Use your API key

Add your NFTPort API key you got through a sign-up in the HTML form, pick an Ethereum address you want to see NFTs for, and voila – enjoy the magic!

‍

How to display NFTs created by a user (wallet address)?

Similarly to the example above where we pulled in NFTs owned by a user, we can do the same to show NFTs created by a user. This can be really useful for e.g. building your NFT marketplaces, or doing analytics on creators’ portfolios.

For this, the steps are exactly the same as in the example above. We simply need to use the NFT Data API endpoint Retrieve NFTs created by an account, which returns NFTs created (i.e. minted) by a given account (i.e. wallet) address. You can also set it to return each NFT metadata with include parameter.

curl --request GET \
--url 'https://api.nftport.xyz/v0/accounts/creators/account_address?chain=ethereum' \
--header 'Authorization: ' \
--header 'Content-Type: application/json'

‍

Next steps: use NFTPort to build NFT projects with ease

As you saw from the example above, building products and projects involving NFTs is not difficult if you have the right tools (aka the right APIs) to play around with.

If you’re interested in building your own NFT marketplace, NFT wallet, bringing NFT data to your existing product, minting your own NFTs, or anything else related to NFTs, NFTPort has got you covered. Explore the wide variety of NFT capabilities through our APIs that offer much more 👾

About NFTPort

The Stripe for NFTs — One-Stop, Simple and Developer-First NFT Infrastructure & APIs which Help Developers bring their NFT application to market in hours instead of months. We take care of the NFT infrastructure so you can focus on your application. By devs, for devs.

Website | Blog | Discord | Twitter | Docs | Contact