Become a Partner Try it out

How to create your NFT Marketplace using Express Protocol!

This tutorial guides you to create a custom NFT marketplace dApp without writing the smart contracts from scratch. Instead, we will be using the Express Protocol SDK which is built on top of open and secured Smart Contracts and deployed on multiple blockchains. So without any further ado, let’s quickly jump into it.

Prerequisites

The following tools will be used in the tutorial -

  1. Node.js
  2. Metamask extension
  3. Parcel-bundler
  4. Express-Protocol-SDK

Getting Started

The first step is to install Node.js (≥16 version) if you do not have it already. You can use this link to find the installer.

Now head up to your favorite pre editor (obviously VS Code) and initiate an NPM project in an empty directory with npm init -y

After the project is initialized, we will install the Express-Protocol-SDK.

 npm install pandora-express 

We will also require to install parcel-bundler globally for bundling our application.

 npm install -g parcel-bundler

With all this in place, we are ready to proceed with creating our NFT Marketplace dApp.

Creating the Frontend

Since this is not a tutorial for writing the best frontend, we will be using vanilla-javascript(and that’s why we are using a bundler) for creating a basic frontend. But you are free to use any framework for designing the frontend according to your choice.

Create an index.html file in the initialized directory and paste the following pre snippet for a basic frontend.



      

This snippet creates a frontend with the following input fields. To view the frontend locally, run parcel index.html in the terminal and follow the issued URL.

  1. Create Item

    This component will be used for creating/minting an NFT. It requires a string as an input which acts as TokenURI for minting an NFT. The tokenURI on an NFT is a unique identifier of what the token "looks" like. A URI could be an API call over HTTPS, an IPFS hash, or anything else unique.

  2. Sell Item

    This component will be used for selling an NFT. It requires two inputs, one being TokenId which is a unique non-negative integer representing an NFT, and another being Price of the NFT putting on sale, in terms of Wei(subunit of ether).

  3. Buy Item

    The last component of our app will be used for buying an NFT. It also requires two inputs, a positive integer SaleId which is unique for every sale placed, and an Amount value which must be greater than the price of that NFT.

The Frontend part wraps up here. Now we can put the Express-Protocol-SDK on work.

Express-SDK magic!

Now, we will create a main.js file in the same directory and start with importing Express-SDK and initializing it.

//Import createPandoraExpressSDK from SDK const {
createPandoraExpressSDK } = require("pandora-express"); const pandoraSDK
= createPandoraExpressSDK();
      

The next step is to connect with the Metamask wallet for interacting with the blockchain using function-call transactions.

Make sure that you have added the Metamask extension in the browser and have enough funds for making transactions
//Connecting with Metamask wallet. const init = async () => { //check if
metamask is present if (window.ethereum) { window.web3 = new
Web3(window.ethereum); await window.ethereum.enable();
console.log("Connected"); } else { alert("Metamask not found"); }
};
      

We will now define a Mint function that will mint NFT using the SDK.

const mintNft = async () => { //get current account address const
accounts = await web3.eth.getAccounts(); //Get ChainID of current
account const chainId = await web3.eth.net.getId(); //Mint NFT using SDK
erc721 nft mint await pandoraSDK.erc721.nft.mint( web3, chainId,
accounts[0], itemURI.value, [[accounts[0], 100]] ); };
      

We have created a mint function using the SDK, now we can sell the NFT in the market using the Sell function of the SDK.

const sellNft = async () => { const accounts = await
web3.eth.getAccounts(); const chainId = await web3.eth.net.getId();
console.log(chainId); await pandoraSDK.erc721.order.sellNFT( web3,
chainId, sellItemTokenId.value, sellItemPrice.value, accounts[0] );
};
      

Executing this function puts an NFT on sale, anyone else can buy the NFT by providing a Price more than the sellItemPrice by using the Buy function of the SDK.

const buyNft = async () => { const accounts = await
web3.eth.getAccounts(); const chainId = await web3.eth.net.getId();
console.log(chainId); await pandoraSDK.erc721.order.buyNFT( web3,
chainId, buyItemSaleId.value, accounts[0], buyItemAmmount.value );
};
      

We will also require to fetch the input data from frontend. After adding the pre for fetching data, the main.js file looks like this -

//Import createPandoraExpressSDK from SDK const {
createPandoraExpressSDK } = require("pandora-express"); const pandoraSDK
= createPandoraExpressSDK();//Connecting with Metamask wallet. const
init = async () => { //check if metamask is present if (window.ethereum)
{ window.web3 = new Web3(window.ethereum); await
window.ethereum.enable(); console.log("Connected"); } else {
alert("Metamask not found"); } };const mintNft = async () => { //get
current account address const accounts = await web3.eth.getAccounts();
//Get ChainID of current account const chainId = await
web3.eth.net.getId(); //Mint NFT using SDK erc721 nft mint await
pandoraSDK.erc721.nft.mint( web3, chainId, accounts[0], itemURI.value,
[[accounts[0], 100]] ); };const sellNft = async () => { const accounts =
await web3.eth.getAccounts(); const chainId = await
web3.eth.net.getId(); console.log(chainId); await
pandoraSDK.erc721.order.sellNFT( web3, chainId, sellItemTokenId.value,
sellItemPrice.value, accounts[0] ); };const buyNft = async () => { const
accounts = await web3.eth.getAccounts(); const chainId = await
web3.eth.net.getId(); console.log(chainId); await
pandoraSDK.erc721.order.buyNFT( web3, chainId, buyItemSaleId.value,
accounts[0], buyItemAmmount.value ); };const itemURI =
document.getElementById("txtCreateItemURI");const createItemButton =
document.getElementById("btnCreateItem"); createItemButton.onclick =
mintNft;const itemURI1 = document.getElementById("txtCreateItemURI1");
const itemURI2 = document.getElementById("txtCreateItemURI2");const
createItemsButton = document.getElementById("btnCreateItemInBatch");
createItemsButton.onclick = batchMintNft;const sellItemTokenId =
document.getElementById("numSellItemTokenId"); const sellItemPrice =
document.getElementById("numSellItemPrice");const sellItemButton =
document.getElementById("btnSellItem"); sellItemButton.onclick =
sellNft;const auctionItemTokenId =
document.getElementById("numAuctionItemTokenId"); const auctionItemPrice
= document.getElementById("numAuctionItemPrice"); const auctionItemTime
= document.getElementById("numAuctionItemTime");const auctionItemButton
= document.getElementById("btnAuctionItem"); auctionItemButton.onclick =
auctionNft;const buyItemSaleId = document.getElementById("numBuyItem");
const buyItemAmmount = document.getElementById("numBuyItemAmmount");
numBuyItemAmmount;const buyItemButton =
document.getElementById("btnBuyItem"); buyItemButton.onclick =
buyNft;init();
      

That’s it, folks. Now you can head to the front-end and play around with your app by minting, selling, and buying NFTs from different Metamask accounts. Also, you can see the transaction receipts getting logged in the browser’s console and can find different events emitted with various information like tokenId, saleId, price, etc.

For exploring more functions of the Express-SDK and gaining information about them, check out the Express-Protocol-SDK docs.