Build an NFT Marketplace With the Help of Flow and IPFS

Mr.Vivek ChaturvediMay, 15 2022

NFTs have been creating their unique identity in the digital world recently. They are opening up the world with a wide range of possibilities for digital marketplaces. 

This platform has brought a whole new level of growth and income source for game assets owners. Everyone is looking to implement NFTs into their platform but there are a few barriers they are facing.

Developing a new NFT development marketplace or smart contract on Flow blockchain is not a smooth ride, as developers, you have to keep a lot of things in mind. I am hoping you have all the necessary codes to continue and they just have to be added.

A marketplace will require a lot more things than what we have just built

  • Payment mechanism (i.e. fungible tokens)
  • Token transfer capabilities
  • Token supply settings

The Flow Emulator is an in-memory representation of the flow blockchain 

Open your terminal app and type the following command: 

brew install flow-cli

We also need Node.js installed and an IDE, which supports programming language. Install Node and then we can leverage Webstorm for the IDE.

If you using Mac, let’s open the terminal app and create and host your NFT. 

mkdir allcode-nft

To start with a new project you have to navigate to that directory and initialize the flow

cd allcode-nft

flow init

The terminal prompt will echo back

Configuration initialized

Service account: 0xf8d6e0586b0a20c7

Start emulator by running: ‘flow emulator’

eset configuration using: ‘flow init –reset’

Now, open the project in WebStorm

You’ll see a flow.json file that we will be making use of soon. 

On the all code-nft folder, create a new sub-folder called cadence. Within that folder, add another folder called contracts. And finally, create a file within the contracts folder called AllCodeNFTContract.cdc.

It is important to keep in mind that everything we do in regards to the Flow blockchain from this point forward to the point ahead will be done in the emulator. Deploying a project elsewhere, to testnet or mainnet, is as simple as updating configuration settings in your flow.json file.
From here on we can start writing our contract.

“contracts”: {

“AllCodeNFTContract”: “./cadence/contracts/AllCodeNFTContract.cdc”

}

Then, update the deployments object in that file to look like this:

“deployments”: {

“emulator”: {

“emulator-account”: [“AllCodeNFTContract”]

}

}

This is telling the Flow CLI to use the emulator to deploy our contract, it’s also referencing the account (on the emulator) and the contract we will write soon. 

The Contract

Flow has a big part in creating NFT contracts. It’s a good reference point, but as Flow points out themselves, they have not been able to solve the metadata problem. The flow stores the metadata on-chain. 

This can be considered a good idea. Blockchain is still not considered a good place to store graphics, videos, or pictures. So instead, we can store them on IPFS, and keep the assets on the blockchain point of these files.

If you are aware of NFTs you may know that many of their assets are stored in traditional data stores and cloud storage

IPF helps in storing the images and video files. Another source to store file data for the long term on IPF is Pinata. This is how we want to provide ownership (The NFT) for all the underlying asset media or any other form rather than any replica or dupes. 

With keeping this in mind, let’s write a contract that mints NFTs, associates metadata to the NFT, and ensures that metadata points to the underlying asset stored on IPFS.

Open up the AllCodeNFTContract.cdc and let’s get to work.

pub contract AllCodeNFTContract {

    pub resource NFT {

        pub let id: UInt64

        init(initID: UInt64) {

            self.id = initID

        }

    }

}

The first step is defining our contract. We start by defining AllCodeNFTContract. Within the contract, we define a public resource.

Ethereum and Flow are entirely different. Those items which are stored in user accounts and accessible through access control measures are Flow. Items are stored in user accounts and accessible through access control measures 

Next, we need to create a resource interface that we will use to define what capabilities are made available to others (i.e. people who are not the contract owner). Again, this whole paradigm is completely different from Ethereum. Flow enables us to specify what functions of a resource a user can access

pub resource interface NFTReceiver {

  pub fun deposit(token: @NFT, metadata: {String : String})

  pub fun getIDs(): [UInt64]

  pub fun idExists(id: UInt64): Bool

  pub fun getMetadata(id: UInt64) : {String : String}

}

Put this right below the NFT resource code. This NFT receiver resource interface is saying that whoever we define as having access to the resource will be able to call the following methods:

  • deposit
  • getIDs
  • idExists
  • getMetadata

Conclusion 

This has been an especially long post, but I hope they help illustrate how to combine the power of IPFS and Flow to create NFTs.

I highly recommend experimenting with the Flow Playground. It’s really phenomenal.
No matter what you do, I hope you’ve gained more knowledge of how we can propel the NFT space forward.

If you’d like to access the full source code or would like to develop an NFT market platform our NFT development eCommerce services are here to get it ready according to your requirement. 

 

Frequently Asked Questions

A lot of people don't appreciate the moment until it’s passed. I'm not trying my hardest, and I'm not trying to do

About Author

OWNER IMAGE
Mr.Vivek Chaturvedi

Vivek Chaturvedi is the co-founder and CTO at Vidhema Technologies. He is responsible for the overall technical operations of the company and has played a major role in bringing Vidhema up from its humble beginnings and, with his immense energy and drive, transforming it into a globally trusted name in IT solutions.

Share it

CONTACT US

What you will get:

  • On-call inquiry assistance
  • Project consulting by experts
  • Detailed project estimation
phone