How to recommend articles based on NFT attributes

Learnings from my first NFT Hackathon project: including general set-up for any Solana-based NFT projects and use-cases in the recommender system.

I recently participated in my company’s hackathon, in which I got the front-row seat to experience the Solana-based NFT development process. Before doing this project, I was like most people — feeling that NFT, Web3, and blockchain are all the hype, yet skeptical about their real utilities, and utterly bewildered about the development process. After this project, I gained so much comfort because I found out NFT/Web3 development process actually shares lots of commonalities with typical Web2 software development. What’s even more encouraging, I can connect that with a domain that our data scientists are quite familiar with — Recommender System.

Who is this for?

Anyone who is intrigued by NFT and Solana development but feeling a bit overwhelmed by where to start.

What’s included?

1. Introduction to NFT key ideas using our Hackathon’s example.
2. Step-by-step guide on dev setup: including Solana Cli, Phantom Wallet, and how to airdrop SOL to your devnet (in other words, how to get “fake” Solana crypto for your development environment so you can test different features).
3. How to fetch NFT attributes using Blockchain API
4. Recommend personalized content based on users’ NFT collection.

1. Introduction to NFT key ideas

Our goal for this hackathon is to create a web application that will inspire people “Be Outside, Be rewarded with NFT, and Get personalized content based on your NFT collection”. The idea is that once the user completed an outdoor activity such as hiking, running for a marathon, or skiing, an outdoor-theme-related NFT will be minted (or created) and stored in the user’s NFT collection automatically as a reward. Lastly, we want to recommend content (such as articles, videos, podcasts, or events) relevant to users based on their NFT collection.

Before we go any further, I’d like to go over a few key NFT related key concepts or jargon you might encounter:

• Web3 vs Web2: the key difference is who owns the data. Think of Facebook (Meta) or Google, users like us can read and write content, but we don’t have ownership of the content we created. The content (such as a search query, or your Facebook status) are stored in some giant databases owned by tech company such as Google or Meta. This is our current day experience, also known as Web2. As for Web3, you can read , write , and ownthe content you created. In other words, if my mom posts a TikTok video, I can watch it because the video is stored on TikTok’s server-side. If I search my mom’s handle, which will make a request on the client-side, the server will return the videos on my screen so I can watch them. If TikTok decides to delete my mom’s videos, there’s no way we can protest or rescue those videos. But in Web3, the network is built on peer-to-peer fashion rather than client-server architecture. If my mom created a video on Web3, her ownership of such content will be coded on the internet through tokens.
• The next logical question is what tokens are. Tokens are just records live on the blockchain. At a high level, there are fungible (meaning interchangeable) tokens such as the US dollar, and non-fungible tokens (NFTs) which could be digital art, music demo, or the first written draft of Harry Potter…(basically anything with two qualities: rare + valuable). In my opinion, a piece of stock is sort of like semi-fungible tokens. Because if you buy one google stock 10 years ago, that piece of stock is not the same (not interchangeable) as the google stock you purchase today. At a low level, tokens are basically just a combination of {.jpg, .json, config file} using digital art as an example. Here:
  – .jpg : this could be replaced with .mp4 for video or podcast
  – .json : this is typically metadata such as descriptions of the jpg or mp4 file.
  – config file : it is similar to the yaml file when you are creating scheduled tasks on a pipeline. You use the yaml file to orchestrate when and how often to run certain tasks. Here the config file is used to describe the NFT’s price, how many NFTs per drop and etc.
• Up till now, we are ready to under How NFT is created. Or you might’ve heard of the term “minting NFT”. I borrowed the below image, which was made by my brilliant coworker, who takes a key role in building our company’s Outside NFT marketplace.

As you can see, the creation of NFT may sound mysterious, but it is really just taking the image file, json file, and config file, and all three will be bound and pushed to blockchain Solana. You might be curious about what is blockchain. There’s an excellent education resource provided by odyssey. Highly recommended anyone check out at least these 3 sections — Intro to Web3, NFTs, and Web3 Reference.

2. Step-by-step guide on dev setup

Our company chooses to operate on the Solana blockchain due to the relatively low cost and low environmental impact compared to Ethereum. For the development environment setup, we need to do three things:

Step 1: install Phantom Wallet Extension for Chrome
– follow the steps and register an account: https://chrome.google.com/webstore/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa?hl=en

Step 2: we need to install the Solana Tool Suite, which is a command-line tool to allow us to perform operations on the Solana blockchain.

For macOS, run the below command on your terminal:

sh -c "$(curl -sSfL https://release.solana.com/v1.10.8/install)"

It’s nice that the PATH has already been added automatically! Now check our solana version by running solana --version

Now we need to generate a file system wallet: replace /Users/wen/.config/solana it with the ideal location you would like to store your json file. And you can also replace the id.json with a name that makes more sense such as my_solana_wallet.json

# generate a new keypair for file system wallet
$ solana-keygen new -o /Users/wen/.config/solana/id.json# you can check your balanc
$ solana balance# get the public key
$ solana-keygen pubkey

Step 3: Fund our devnetwallet!

If you like me, I don’t own any Solana crypto. Even if I do, I probably won’t use the actual crypto for development and testing. Thus we need a devnetwallet with funds (at no actual cost!) to allow us to build and test our NFT applications freely!

Now let’s switch to devnet:
– Follow this guide to switch your wallet to devnet and fund your wallet.
– Note: in solfaucet.com , the input is your pubkey which you can get by running solana-keygen pubkey

Another note: I noticed that after following the guide on switch to devnet, I still need one extra step to make it work. If you experience similar issue, you can try running solana config set --url devnet

😀 : I have 2 SOL on my devnet wallet! Whoohoo! 🎊

3. How to fetch NFT attributes using Blockchain API

In our hackathon, we have two main use cases in terms of recommending content based on NFT.

Here I will share the code for Use Case #1: imagine a user owns a Central Park NFT from Solsea (Solana marketplace similar to the OpenSea, which is on Ethereum blockchain).

You can click on the “View on Solana” to get the token address →

The package we are going to use is called theblockchainapi , which will take an NFT’s token address as an input, and return the metadata (such as descriptions, and title) as an output.

Feel free to borrow the above code and modify it to suit your usage.

In my case, we can get the NFT metadata by running get_nft_meta(nft_address)

Or get the NFT name and description:

Now that we have the description, my plan is to send the description to NLP preprocessing, then pass it to our recommender to help us find similar articles!

4. Recommend personalized content based on users’ NFT collection

Now we are back to my comfort zone — the familiar data sciency stuff!

First, let’s create a function to preprocess the NFT

Because I need the output in the below format to be able to pass it to my recommender. You can modify the return format to suit your use cases.

Since building a recommender is not the focus of this article and it will take me another day to write how to build a hybrid recommender that allows you to serve cross-domain (such as articles, videos, podcasts) content. Here I just want to show an example of how to feed the general NFT attributes to a recommender API.

url = "https://xxxxxx" # this could be REST or GraphQL API url
r = requests.post(url, json={'query':query}) # in my case, it is a graphQL query# show the output as json
r.json()

Since I’ve been trying to understand more about how the frontend integrates the recommender API, I plugged in the create-react-app project (which I wrote a bit about in this post). The simple frontend will look like this →

It’s built on useEmblaCarousel which provides a lightweight carousel template.

Reflections and Parting Words:

1. The old wisdom of learning by doing is really true if you want to learn NFT, Web3, or probably any programming-related knowledge. The feeling that when something is printing on your screen as the code expected is not the same as reading how it works from an article. That being said, I highly recommend participating in an NFT development project for anyone who wants to understand NFT better.
2. Solana is not super fast and is not super steady. It will fail sometimes. So be patient if your minting process didn’t go through. Go for a walk and try again.
3. In some tutorials, you might see people using the below command to airdrop SOL. I’m 90% sure it’s not working anymore.

$ solana airdrop 1 [your pub key]

Reference and Resources

1. metaplex candy machine v2 start doc: https://docs.metaplex.com/candy-machine-v2/getting-started
2. Solana Tool Suite: https://docs.solana.com/cli/install-solana-cli-tools
3. outside io(disclaimer: I work for this company): https://www.outside.io/