NFT marketplace website

Content List

Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Create Your Full-stack NFT Marketplace website

NFT Marketplace Full-stack website project for beginners. Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Welcome to the complete NFT Marketplace full-stack project, in this full-stack NFT marketplace website project you will learn, how you can be your own NFT Marketplace website on Ethereum blockchain with React, JS Next JS, solubility, Node JS and Mango DB as a back server

Key points for this full stack and NFT Marketplace website project

  • Using React Js and Next Js for building the front-end of our NFT Marketplace website template
  • Folder and file structure of react component for building this NFT Marketplace template
  • React context API for state management and handling of all the data of this NFT Marketplace
  • Complete custom CSS was used in this complete NFT marketplace for designing components & website template
  • Writing solidity smart contract for NFT marketplace and maintaining state in the contract
  • Hardhat for testing the solidity smart contract in localhost
  • Best practices for writing smart contracts for NFT marketplaces website
  • Node Js and NPM  packages are used for building the front end and the back end of this NFT marketplace project
  • Mango DB as a back-end server for maintaining the information of all the NFTs and users in this full-stack NFT Marketplace.
  • You will find the complete source code of this NFT marketplace down below in section wise

The full stack NFT marketplace website project is divided in 3 section

1. Creating NFT Marketplace Website Template

website template design for nft marketplace

In the first section, you will learn how you can build the complete NFT marketplace website template from scratch using React JS, Next Js, and Node js for building the temperate for this Marketplace

Get source code of NFT Marketplace Website Template:

2. Solidity Smart Contract For NFT Marketplace

nft selling website tutorial

In the second section, you will learn how you can build the smart contract for this NFT Marketplace from scratch, using Hardhat.

  • In that, you will learn about Solidity fundamentals for writing a contract
  • Folder and file structure for smart contract
  • Hardhat environment for testing solidity smart contracts in our localhost

Updated Smart Contrat

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import “@openzeppelin/contracts/utils/Counters.sol”;
import “@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol”;
import “@openzeppelin/contracts/token/ERC721/ERC721.sol”;

import “hardhat/console.sol”;

contract NFTMarketplace is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    Counters.Counter private _itemsSold;

    uint256 listingPrice = 0.025 ether;
    address payable owner;

    mapping(uint256 => MarketItem) private idToMarketItem;

    struct MarketItem {
        uint256 tokenId;
        address payable seller;
        address payable owner;
        uint256 price;
        bool sold;
    }

    event MarketItemCreated(
        uint256 indexed tokenId,
        address seller,
        address owner,
        uint256 price,
        bool sold
    );

    constructor() ERC721(“Metaverse Tokens”, “METT”) {
        owner = payable(msg.sender);
    }

    /* Updates the listing price of the contract */
    function updateListingPrice(uint256 _listingPrice) public payable {
        require(
            owner == msg.sender,
            “Only marketplace owner can update listing price.”
        );
        listingPrice = _listingPrice;
    }

    /* Returns the listing price of the contract */
    function getListingPrice() public view returns (uint256) {
        return listingPrice;
    }

    /* Mints a token and lists it in the marketplace */
    function createToken(string memory tokenURI, uint256 price)
        public
        payable
        returns (uint256)
    {
        _tokenIds.increment();
        uint256 newTokenId = _tokenIds.current();

        _mint(msg.sender, newTokenId);
        _setTokenURI(newTokenId, tokenURI);
        createMarketItem(newTokenId, price);
        return newTokenId;
    }

    function createMarketItem(uint256 tokenId, uint256 price) private {
        require(price > 0, “Price must be at least 1 wei”);
        require(
            msg.value == listingPrice,
            “Price must be equal to listing price”
        );

        idToMarketItem[tokenId] = MarketItem(
            tokenId,
            payable(msg.sender),
            payable(address(this)),
            price,
            false
        );

        _transfer(msg.sender, address(this), tokenId);
        emit MarketItemCreated(
            tokenId,
            msg.sender,
            address(this),
            price,
            false
        );
    }

    /* allows someone to resell a token they have purchased */
    function resellToken(uint256 tokenId, uint256 price) public payable {
        require(
            idToMarketItem[tokenId].owner == msg.sender,
            “Only item owner can perform this operation”
        );
        require(
            msg.value == listingPrice,
            “Price must be equal to listing price”
        );
        idToMarketItem[tokenId].sold = false;
        idToMarketItem[tokenId].price = price;
        idToMarketItem[tokenId].seller = payable(msg.sender);
        idToMarketItem[tokenId].owner = payable(address(this));
        _itemsSold.decrement();

        _transfer(msg.sender, address(this), tokenId);
    }

    /* Creates the sale of a marketplace item */
    /* Transfers ownership of the item, as well as funds between parties */
    function createMarketSale(uint256 tokenId) public payable {
        uint256 price = idToMarketItem[tokenId].price;
        require(
            msg.value == price,
            “Please submit the asking price in order to complete the purchase”
        );
        idToMarketItem[tokenId].owner = payable(msg.sender);
        idToMarketItem[tokenId].sold = true;
        idToMarketItem[tokenId].seller = payable(address(0));
        _itemsSold.increment();
        _transfer(address(this), msg.sender, tokenId);
        payable(owner).transfer(listingPrice);
        payable(idToMarketItem[tokenId].seller).transfer(msg.value);
    }

    /* Returns all unsold market items */
    function fetchMarketItems() public view returns (MarketItem[] memory) {
        uint256 itemCount = _tokenIds.current();
        uint256 unsoldItemCount = _tokenIds.current() – _itemsSold.current();
        uint256 currentIndex = 0;

        MarketItem[] memory items = new MarketItem[](unsoldItemCount);
        for (uint256 i = 0; i < itemCount; i++) {
            if (idToMarketItem[i + 1].owner == address(this)) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    /* Returns only items that a user has purchased */
    function fetchMyNFTs() public view returns (MarketItem[] memory) {
        uint256 totalItemCount = _tokenIds.current();
        uint256 itemCount = 0;
        uint256 currentIndex = 0;

        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].owner == msg.sender) {
                itemCount += 1;
            }
        }

        MarketItem[] memory items = new MarketItem[](itemCount);
        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].owner == msg.sender) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    /* Returns only items a user has listed */
    function fetchItemsListed() public view returns (MarketItem[] memory) {
        uint256 totalItemCount = _tokenIds.current();
        uint256 itemCount = 0;
        uint256 currentIndex = 0;

        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].seller == msg.sender) {
                itemCount += 1;
            }
        }

        MarketItem[] memory items = new MarketItem[](itemCount);
        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].seller == msg.sender) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }
}

Get the source code of NFT Marketplace Solidity Smart Contract:

Deploy Solidity NFT marketplace Smart Contract To Polygon

Down below is the following instruction for deploying a smart contract to polygon Mumbai testnet

You can download and create a Metamask account for free here. Once you’ve created an account, follow these steps to set up the Polygon network on your wallet.

  1. Select “Settings” from the drop-down menu in the top right corner of your Metamask wallet.

  2. Select “Networks” from the menu to the left.

  3. Connect your wallet to the Mumbai Testnet using the following parameters.

Network Name: Polygon Mumbai Testnet

New RPC URL: https://polygon-mumbai.g.alchemy.com/v2/your-api-key

ChainID: 80001

Symbol: MATIC

Block Explorer URL: https://mumbai.polygonscan.com/

Add Polygon Mumbai Test MATIC from a Faucet 

Color And Font Family

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap’);

:root{
–icons-color: #4c5773;
–icons-light-color: #4c577341;
–icons-bg-color: #e2e6e9;
–shadow-dark-color: #d3dae7;
–shadow-light-color: #fff;
–main-bg-color: #ecf0f3;

–box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
-1rem -1rem 1rem var(–shadow-light-color);

–box-shadow-2: 0rem 0rem 0rem var(–shadow-dark-color),
-.3rem -.3rem 1rem var(–shadow-dark-color)

}

3. Building Back-End of NFT Marketplace with Mango DB

how to website for nft market place

In the third section, we will build a backend for this NFT Marketplace website where we will use Mango DB as a backend server for storing the data for all the NFTs for this full-stack  NFT Marketplace website.

Like first sections contain the start file second contains the navigation bar third contains the footer and so on…

We have tried to provide all the source code of this NFT Marketplace full stack project so you can download the code and compare your code and follow full stack complete NFT market project, step by step

Health Calculator

My Services

Recent Post

Content List

Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Create Your Full-stack NFT Marketplace website

NFT Marketplace Full-stack website project for beginners. Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Welcome to the complete NFT Marketplace full-stack project, in this full-stack NFT marketplace website project you will learn, how you can be your own NFT Marketplace website on Ethereum blockchain with React, JS Next JS, solubility, Node JS and Mango DB as a back server

Key points for this full stack and NFT Marketplace website project

  • Using React Js and Next Js for building the front-end of our NFT Marketplace website template
  • Folder and file structure of react component for building this NFT Marketplace template
  • React context API for state management and handling of all the data of this NFT Marketplace
  • Complete custom CSS was used in this complete NFT marketplace for designing components & website template
  • Writing solidity smart contract for NFT marketplace and maintaining state in the contract
  • Hardhat for testing the solidity smart contract in localhost
  • Best practices for writing smart contracts for NFT marketplaces website
  • Node Js and NPM  packages are used for building the front end and the back end of this NFT marketplace project
  • Mango DB as a back-end server for maintaining the information of all the NFTs and users in this full-stack NFT Marketplace.
  • You will find the complete source code of this NFT marketplace down below in section wise

The full stack NFT marketplace website project is divided in 3 section

1. Creating NFT Marketplace Website Template

website template design for nft marketplace

In the first section, you will learn how you can build the complete NFT marketplace website template from scratch using React JS, Next Js, and Node js for building the temperate for this Marketplace

Get source code of NFT Marketplace Website Template:

Get source code of NFT Marketplace Website Template:

Color And Font Family

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap’);

:root{
–icons-color: #4c5773;
–icons-light-color: #4c577341;
–icons-bg-color: #e2e6e9;
–shadow-dark-color: #d3dae7;
–shadow-light-color: #fff;
–main-bg-color: #ecf0f3;

–box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
-1rem -1rem 1rem var(–shadow-light-color);

–box-shadow-2: 0rem 0rem 0rem var(–shadow-dark-color),
-.3rem -.3rem 1rem var(–shadow-dark-color)

}

2. Solidity Smart Contract For NFT Marketplace

nft selling website tutorial

In the second section, you will learn how you can build the smart contract for this NFT Marketplace from scratch, using Hardhat.

  • In that, you will learn about Solidity fundamentals for writing a contract
  • Folder and file structure for smart contract
  • Hardhat environment for testing solidity smart contracts in our localhost

Updated Smart Contract

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import “@openzeppelin/contracts/utils/Counters.sol”;
import “@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol”;
import “@openzeppelin/contracts/token/ERC721/ERC721.sol”;

import “hardhat/console.sol”;

contract NFTMarketplace is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    Counters.Counter private _itemsSold;

    uint256 listingPrice = 0.025 ether;
    address payable owner;

    mapping(uint256 => MarketItem) private idToMarketItem;

    struct MarketItem {
        uint256 tokenId;
        address payable seller;
        address payable owner;
        uint256 price;
        bool sold;
    }

    event MarketItemCreated(
        uint256 indexed tokenId,
        address seller,
        address owner,
        uint256 price,
        bool sold
    );

    constructor() ERC721(“Metaverse Tokens”, “METT”) {
        owner = payable(msg.sender);
    }

    /* Updates the listing price of the contract */
    function updateListingPrice(uint256 _listingPrice) public payable {
        require(
            owner == msg.sender,
            “Only marketplace owner can update listing price.”
        );
        listingPrice = _listingPrice;
    }

    /* Returns the listing price of the contract */
    function getListingPrice() public view returns (uint256) {
        return listingPrice;
    }

    /* Mints a token and lists it in the marketplace */
    function createToken(string memory tokenURI, uint256 price)
        public
        payable
        returns (uint256)
    {
        _tokenIds.increment();
        uint256 newTokenId = _tokenIds.current();

        _mint(msg.sender, newTokenId);
        _setTokenURI(newTokenId, tokenURI);
        createMarketItem(newTokenId, price);
        return newTokenId;
    }

    function createMarketItem(uint256 tokenId, uint256 price) private {
        require(price > 0, “Price must be at least 1 wei”);
        require(
            msg.value == listingPrice,
            “Price must be equal to listing price”
        );

        idToMarketItem[tokenId] = MarketItem(
            tokenId,
            payable(msg.sender),
            payable(address(this)),
            price,
            false
        );

        _transfer(msg.sender, address(this), tokenId);
        emit MarketItemCreated(
            tokenId,
            msg.sender,
            address(this),
            price,
            false
        );
    }

    /* allows someone to resell a token they have purchased */
    function resellToken(uint256 tokenId, uint256 price) public payable {
        require(
            idToMarketItem[tokenId].owner == msg.sender,
            “Only item owner can perform this operation”
        );
        require(
            msg.value == listingPrice,
            “Price must be equal to listing price”
        );
        idToMarketItem[tokenId].sold = false;
        idToMarketItem[tokenId].price = price;
        idToMarketItem[tokenId].seller = payable(msg.sender);
        idToMarketItem[tokenId].owner = payable(address(this));
        _itemsSold.decrement();

        _transfer(msg.sender, address(this), tokenId);
    }

    /* Creates the sale of a marketplace item */
    /* Transfers ownership of the item, as well as funds between parties */
    function createMarketSale(uint256 tokenId) public payable {
        uint256 price = idToMarketItem[tokenId].price;
        require(
            msg.value == price,
            “Please submit the asking price in order to complete the purchase”
        );
        idToMarketItem[tokenId].owner = payable(msg.sender);
        idToMarketItem[tokenId].sold = true;
        idToMarketItem[tokenId].seller = payable(address(0));
        _itemsSold.increment();
        _transfer(address(this), msg.sender, tokenId);
        payable(owner).transfer(listingPrice);
        payable(idToMarketItem[tokenId].seller).transfer(msg.value);
    }

    /* Returns all unsold market items */
    function fetchMarketItems() public view returns (MarketItem[] memory) {
        uint256 itemCount = _tokenIds.current();
        uint256 unsoldItemCount = _tokenIds.current() – _itemsSold.current();
        uint256 currentIndex = 0;

        MarketItem[] memory items = new MarketItem[](unsoldItemCount);
        for (uint256 i = 0; i < itemCount; i++) {
            if (idToMarketItem[i + 1].owner == address(this)) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    /* Returns only items that a user has purchased */
    function fetchMyNFTs() public view returns (MarketItem[] memory) {
        uint256 totalItemCount = _tokenIds.current();
        uint256 itemCount = 0;
        uint256 currentIndex = 0;

        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].owner == msg.sender) {
                itemCount += 1;
            }
        }

        MarketItem[] memory items = new MarketItem[](itemCount);
        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].owner == msg.sender) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    /* Returns only items a user has listed */
    function fetchItemsListed() public view returns (MarketItem[] memory) {
        uint256 totalItemCount = _tokenIds.current();
        uint256 itemCount = 0;
        uint256 currentIndex = 0;

        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].seller == msg.sender) {
                itemCount += 1;
            }
        }

        MarketItem[] memory items = new MarketItem[](itemCount);
        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].seller == msg.sender) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }
}

Get the source code of NFT Marketplace Solidity Smart Contract:

Deploy Solidity NFT marketplace Smart Contract To Polygon

Down below is the following instruction for deploying a smart contract to polygon Mumbai testnet

You can download and create a Metamask account for free here. Once you’ve created an account, follow these steps to set up the Polygon network on your wallet.

  1. Select “Settings” from the drop-down menu in the top right corner of your Metamask wallet.

  2. Select “Networks” from the menu to the left.

  3. Connect your wallet to the Mumbai Testnet using the following parameters.

Network Name: Polygon Mumbai Testnet

New RPC URL: https://polygon-mumbai.g.alchemy.com/v2/your-api-key

ChainID: 80001

Symbol: MATIC

Block Explorer URL: https://mumbai.polygonscan.com/

Add Polygon Mumbai Test MATIC from a Faucet 

3. Building Back-End of NFT Marketplace with Mango DB

how to website for nft market place

In the third section, we will build a backend for this NFT Marketplace website where we will use Mango DB as a backend server for storing the data for all the NFTs for this full-stack  NFT Marketplace website.

Like first sections contain the start file second contains the navigation bar third contains the footer and so on…

We have tried to provide all the source code of this NFT Marketplace full stack project so you can download the code and compare your code and follow full stack complete NFT market project, step by step

Health Calculator

My Services

Recent Post

Daulat Hussain projects

NFT Marketplace Website

Daulat Hussain Profile

Welcome

Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

NFT Marketplace Full-stack website project for beginners. Build full stack NFT Marketplace on Ethereum with Node Js, Mango DB, and solidity

Welcome to the complete NFT Marketplace full-stack project, in this full-stack NFT marketplace website project you will learn, how you can be your own NFT Marketplace website on Ethereum blockchain with React, JS Next JS, solubility, Node JS and Mango DB as a back server

Key points for this full stack and NFT Marketplace website project

  • Using React Js and Next Js for building the front-end of our NFT Marketplace website template
  • Folder and file structure of react component for building this NFT Marketplace template
  • React context API for state management and handling of all the data of this NFT Marketplace
  • Complete custom CSS was used in this complete NFT marketplace for designing components & website template
  • Writing solidity smart contract for NFT marketplace and maintaining state in the contract
  • Hardhat for testing the solidity smart contract in localhost
  • Best practices for writing smart contracts for NFT marketplaces website
  • Node Js and NPM  packages are used for building the front end and the back end of this NFT marketplace project
  • Mango DB as a back-end server for maintaining the information of all the NFTs and users in this full-stack NFT Marketplace.
  • You will find the complete source code of this NFT marketplace down below in section wise

HEALTH CALCULATOR

Create Your Full-stack NFT Marketplace website

nft selling website tutorial

The full stack NFT marketplace website project is divided in 3 section

1. Creating NFT Marketplace Website Template

website template design for nft marketplace

In the first section, you will learn how you can build the complete NFT marketplace website template from scratch using React JS, Next Js, and Node js for building the temperate for this Marketplace

Get source code of NFT Marketplace Website Template:

Get source code of NFT Marketplace Website Template:

2. Solidity Smart Contract For NFT Marketplace

nft selling website tutorial

In the second section, you will learn how you can build the smart contract for this NFT Marketplace from scratch, using Hardhat.

  • In that, you will learn about Solidity fundamentals for writing a contract
  • Folder and file structure for smart contract
  • Hardhat environment for testing solidity smart contracts in our localhost

Updated Smart Contract

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import “@openzeppelin/contracts/utils/Counters.sol”;
import “@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol”;
import “@openzeppelin/contracts/token/ERC721/ERC721.sol”;

import “hardhat/console.sol”;

contract NFTMarketplace is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    Counters.Counter private _itemsSold;

    uint256 listingPrice = 0.025 ether;
    address payable owner;

    mapping(uint256 => MarketItem) private idToMarketItem;

    struct MarketItem {
        uint256 tokenId;
        address payable seller;
        address payable owner;
        uint256 price;
        bool sold;
    }

    event MarketItemCreated(
        uint256 indexed tokenId,
        address seller,
        address owner,
        uint256 price,
        bool sold
    );

    constructor() ERC721(“Metaverse Tokens”, “METT”) {
        owner = payable(msg.sender);
    }

    /* Updates the listing price of the contract */
    function updateListingPrice(uint256 _listingPrice) public payable {
        require(
            owner == msg.sender,
            “Only marketplace owner can update listing price.”
        );
        listingPrice = _listingPrice;
    }

    /* Returns the listing price of the contract */
    function getListingPrice() public view returns (uint256) {
        return listingPrice;
    }

    /* Mints a token and lists it in the marketplace */
    function createToken(string memory tokenURI, uint256 price)
        public
        payable
        returns (uint256)
    {
        _tokenIds.increment();
        uint256 newTokenId = _tokenIds.current();

        _mint(msg.sender, newTokenId);
        _setTokenURI(newTokenId, tokenURI);
        createMarketItem(newTokenId, price);
        return newTokenId;
    }

    function createMarketItem(uint256 tokenId, uint256 price) private {
        require(price > 0, “Price must be at least 1 wei”);
        require(
            msg.value == listingPrice,
            “Price must be equal to listing price”
        );

        idToMarketItem[tokenId] = MarketItem(
            tokenId,
            payable(msg.sender),
            payable(address(this)),
            price,
            false
        );

        _transfer(msg.sender, address(this), tokenId);
        emit MarketItemCreated(
            tokenId,
            msg.sender,
            address(this),
            price,
            false
        );
    }

    /* allows someone to resell a token they have purchased */
    function resellToken(uint256 tokenId, uint256 price) public payable {
        require(
            idToMarketItem[tokenId].owner == msg.sender,
            “Only item owner can perform this operation”
        );
        require(
            msg.value == listingPrice,
            “Price must be equal to listing price”
        );
        idToMarketItem[tokenId].sold = false;
        idToMarketItem[tokenId].price = price;
        idToMarketItem[tokenId].seller = payable(msg.sender);
        idToMarketItem[tokenId].owner = payable(address(this));
        _itemsSold.decrement();

        _transfer(msg.sender, address(this), tokenId);
    }

    /* Creates the sale of a marketplace item */
    /* Transfers ownership of the item, as well as funds between parties */
    function createMarketSale(uint256 tokenId) public payable {
        uint256 price = idToMarketItem[tokenId].price;
        require(
            msg.value == price,
            “Please submit the asking price in order to complete the purchase”
        );
        idToMarketItem[tokenId].owner = payable(msg.sender);
        idToMarketItem[tokenId].sold = true;
        idToMarketItem[tokenId].seller = payable(address(0));
        _itemsSold.increment();
        _transfer(address(this), msg.sender, tokenId);
        payable(owner).transfer(listingPrice);
        payable(idToMarketItem[tokenId].seller).transfer(msg.value);
    }

    /* Returns all unsold market items */
    function fetchMarketItems() public view returns (MarketItem[] memory) {
        uint256 itemCount = _tokenIds.current();
        uint256 unsoldItemCount = _tokenIds.current() – _itemsSold.current();
        uint256 currentIndex = 0;

        MarketItem[] memory items = new MarketItem[](unsoldItemCount);
        for (uint256 i = 0; i < itemCount; i++) {
            if (idToMarketItem[i + 1].owner == address(this)) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    /* Returns only items that a user has purchased */
    function fetchMyNFTs() public view returns (MarketItem[] memory) {
        uint256 totalItemCount = _tokenIds.current();
        uint256 itemCount = 0;
        uint256 currentIndex = 0;

        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].owner == msg.sender) {
                itemCount += 1;
            }
        }

        MarketItem[] memory items = new MarketItem[](itemCount);
        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].owner == msg.sender) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    /* Returns only items a user has listed */
    function fetchItemsListed() public view returns (MarketItem[] memory) {
        uint256 totalItemCount = _tokenIds.current();
        uint256 itemCount = 0;
        uint256 currentIndex = 0;

        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].seller == msg.sender) {
                itemCount += 1;
            }
        }

        MarketItem[] memory items = new MarketItem[](itemCount);
        for (uint256 i = 0; i < totalItemCount; i++) {
            if (idToMarketItem[i + 1].seller == msg.sender) {
                uint256 currentId = i + 1;
                MarketItem storage currentItem = idToMarketItem[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }
}

Get the source code of NFT Marketplace Solidity Smart Contract:

Deploy Solidity NFT marketplace Smart Contract To Polygon

Down below is the following instruction for deploying a smart contract to polygon Mumbai testnet

You can download and create a Metamask account for free here. Once you’ve created an account, follow these steps to set up the Polygon network on your wallet.

  1. Select “Settings” from the drop-down menu in the top right corner of your Metamask wallet.

  2. Select “Networks” from the menu to the left.

  3. Connect your wallet to the Mumbai Testnet using the following parameters.

Network Name: Polygon Mumbai Testnet

New RPC URL: https://polygon-mumbai.g.alchemy.com/v2/your-api-key

ChainID: 80001

Symbol: MATIC

Block Explorer URL: https://mumbai.polygonscan.com/

Add Polygon Mumbai Test MATIC from a Faucet 

3. Building Back-End of NFT Marketplace with Mango DB

how to website for nft market place

In the third section, we will build a backend for this NFT Marketplace website where we will use Mango DB as a backend server for storing the data for all the NFTs for this full-stack  NFT Marketplace website.

Like first sections contain the start file second contains the navigation bar third contains the footer and so on…

We have tried to provide all the source code of this NFT Marketplace full stack project so you can download the code and compare your code and follow full stack complete NFT market project, step by step

Recent Post

HTML, CSS & JAVASCRIPT​

JavaScript is the world’s most popular programming language. JavaScript is the programming language of the Web

Develop Your Understanding While building HTML, CSS & JavaScript Projects. Find All The Project Source Code.

My Services