Create a Full Stack NFT Marketplace on the Polygon Network | by Abhishek Chauhan | Mar, 2022

Discover ways to create NFT Market utilizing hardhat, IPFS, and Subsequent js

photograph credit score: shykhman

Market Capabilities

When a person places an NFT on the market, the possession of the NFT will get transferred from the creator to {the marketplace} contract.

When a person purchases an NFT, the acquisition worth is transferred from the client to the vendor and so the merchandise can be transferred from {the marketplace} to the client.

{The marketplace} proprietor is ready to set an inventory price. This price is taken from the vendor and transferred to the contract proprietor upon completion of any sale, enabling the proprietor of {the marketplace} to earn recurring income from any sale transacted within the market.

We can be deploying the sensible contract on Polygon Community.

How Does Polygon Work?

Polygon is a multi-level platform with the intention to scale Ethereum due to a plethora of sidechains, all of which intention to unclog with the primary platform in an efficient and cost-efficient method.

Polygon’s foremost chain is a Proof of Stake (PoS) sidechain during which community contributors can stake MATIC tokens to validate transactions and vote on community upgrades.

Setting-up Playground

  1. Create a next-js app
npx create-next-app market

2. Set up packages

npm set up ethers hardhat ethereum-waffle chai @nomiclabs/hardhat-waffle @nomiclabs/hardhat-ethers web3modal @openzeppelin/contracts ipfs-http-client axios react-toastify

Again-end

npx hardhat

If given error for README.md file delete and retry

4. Edit hardhat.config.js file as given:

5. Create NFTMarketplace.sol file beneath contracts folder:

4. Create deploy.js script in scripts folder:

5. Create config.js file

6. Now we deploy the sensible contract on Polygon Mumbai Testnet

npx hardhat run scripts/deploy.js --network mumbai

As soon as your sensible contract is deployed you possibly can see your market tackle

In an effort to efficiently deploy contract it’s essential to have check Matic in your account in case you don’t have request right here https://faucet.polygon.technology/

Entrance-end

On this half, we are going to see easy methods to join deployed sensible contract with the following js entrance finish.

  1. Arrange Tailwind CSS
npm set up -D tailwindcss@newest postcss@newest autoprefixer@newest
npx tailwindcss init -p

2. Now configure paths in tailwind.config.js

module.exports = 
content material: [
"./pages/**/*.js,ts,jsx,tsx",
"./components/**/*.js,ts,jsx,tsx",
],
theme:
lengthen: ,
,
plugins: [],

3. Now delete code in kinds/globals.css and replace it as given:

@tailwind base;
@tailwind parts;
@tailwind utilities;

4. Go to the pages folder and create 4 .js information as given create.js , myNft.js , dashboard.js and resellNft.js .

5. Now let’s create routes, open _app.js and edit as given:

6. Open index.js and edit it as follows:

7. Now edit create.js and write code for creating NFTs as given:

8. Now edit myNft.js as under:

9. We are going to do related with dashboard.js :

10. Finally, edit the web page resellNft.js :

Operating the app

Now we are able to check out the app!

To start out the app, run the next command:

npm run dev

More Posts