This dope project will help you launch your own NFT marketplace, and understand how NFT minting smart contracts are created and run.

Launch your own epic NFT marketplace

A basic intro to the project, setting up environment, downloading dependencies and understanding what we are building.

Welcome fellow programmers! My name is Tanishk Goyal, and I have a very exciting tutorial lined up for you today.NFTs (non-fungible tokens) are all the buzz these days, from BoredApes to Crypto Kitties EVERYONE is talking about them.But behind the creation of these seemingly innocent animal pictures, is a very sophisticated blockchain smart contract called the ERC 721.Today I am going to take you through a complete journey of building your own NFT marketplace from complete scratch. This is how it will look like.We will be setting up a minting price for our NFTs so that we can make some money for our NFT collection.We will also setup a maximum limit on the number of NFTs one public address can buy, so that more people can get their hands on our super popular NFT collection.But how will a user mint our super popular NFT collection? Because an average user isn’t a top-notch programmer like you and me, so I think we should also make up a simple react webpage where the user can mint our NFTs on the click of a button.This is a great head start for anyone looking to create NFT collection or a marketplace and making money through it. This is how our marketplace will look like.&nbsp;<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://metaschool.s3-ap-southeast-1.amazonaws.com/images/R4hxCdLE7vRF5leridkVn6Q3Q44t0canVfN2lHDg.png" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="R4hxCdLE7vRF5leridkVn6Q3Q44t0canVfN2lHDg.png" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div></figure><h2 style="margin-left:0px;">Course Overview</h2>So what exactly are we going to cover today<ul><li>We will start of with setting up our development environment and downloading all the dependencies. The tech stack we will be using today is - Hardhat, Alchemy, Pinata, React and Ethers.js</li><li>We will then use the openzepellin library’s ERC721 smart contract, and inherit it to create our own NFT smart contract called Collection.sol</li><li>After that we will need to deploy our smart contract using ethers.js and check our deployment on etherscan.</li><li>Once all the solidity part is done, we’ll make a very simple react frontend for our website.</li><li>This webpage will be able to list 5 NFTs, a user would be able to connect to their metamask and mint any 2 of these NFTs.</li><li>And that’s it, you will now be able to see and enjoy your NFT in your own metamask wallet!</li></ul>Don’t worry if this all seems overwhelming to you. I will help you on each and every step. We are in this together. 😅If you complete this course with me today, you will be getting a special NFT, a utility token, which will unlock many more opportunities for you on the Metaschool platform. Here is how the NFT looks like.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh3.googleusercontent.com/XA90aG5m4td1tcxoknDWavsFAFTULftVrzyhnLu8oM5AwEXm93ZChVq5D1h9gqkhMKPKHBkuOzyeA7jMjzogVRngAshjOaLsQo5lsn2U8ZtLt-jUMfZ0gzY5K2B7NdIM8oju6Lhw" alt="" data-origin="," data-proportion="true" data-align="none" data-index="1" data-file-name="XA90aG5m4td1tcxoknDWavsFAFTULftVrzyhnLu8oM5AwEXm93ZChVq5D1h9gqkhMKPKHBkuOzyeA7jMjzogVRngAshjOaLsQo5lsn2U8ZtLt-jUMfZ0gzY5K2B7NdIM8oju6Lhw" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div> Now before we move forward, let’s set some house rules first.<ol><li>Pleaseeeee do your quick assignments properly.</li><li>Join <a href="https://discord.gg/vbVMUwXWgc" target="_blank" rel="noopener noreferrer">our discord server</a> and ask all relevant questions there.</li><li>Stay happy and positive!</li></ol><h2 style="margin-left:0px;">🌱 Skills You Will Learn</h2><ol><li>Writing Smart Contracts in Solidity</li><li>Using Open Zepellin</li><li>Working with ERC721 Smart Contracts</li><li>Hosting metadata on IPFS using Pinata</li><li>Compiling and Deploying Smart Contracts using hardhat</li><li>Connecting to the Alchemy Node Service</li><li>Setting a minting price on NFTs</li><li>Setting a minting limit per user</li><li>Creating a basic react marketplace for your NFTs</li><li>Connecting metamask to react frontend</li><li>Calling Solidity Smart Contract from react</li><li>Withdrawing Money from a Smart Contract</li></ol>Phew! That’s a lot of things. I am sooo excited for you to start this journey with me.Don’t worry we’ll go through all of these things slowly and step by step.<h2 style="margin-left:0px;">🚨 Pre Requisites</h2><ol><li>Install Node and npm in your machine.</li><li>Have VScode installed in your machine. And, install Solidity plugin!</li><li>Setup your metamask account.</li></ol>So we have a lot of exciting stuff to cover, so what are we waiting for?<h2 style="margin-left:0px;">🛠 Contributing to this project!</h2>Good news! This is an open source project, you can find the tutorial markdown files <a href="https://github.com/0xmetaschool/Learning-Projects" target="_blank" rel="noopener noreferrer">here</a>. If you find an issues in the code or tutorial, please feel free to resolve it. We love love love contributions by our community and we give acknowledgement to contributors in our discord and github profile too.Also, don’t forget to star ⭐️ our repository! we will be very thankful! ♥️ Let’s go!!!!!!!!!

Intro

<h2 style="margin-left:0px;">Setting Up The Environment</h2>So first things first, let’s create a directory for our project. Go to your command line and enter these commands (WSL is recommended for easier installation in Windows)<pre><code>mkdir nft-collection cd nft-collection</code></pre>Time to set up npm in our project. We will use the node package manager to easily download and manage our dependencies.<pre><code>npm init </code></pre>Just use the default values for all the installation questions and press enter.<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://metaschool.s3-ap-southeast-1.amazonaws.com/images/5acNyl08tQkyUa9tHWF3ety8yIBGORi2vNtZjN6x.gif" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="5acNyl08tQkyUa9tHWF3ety8yIBGORi2vNtZjN6x.gif" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div></figure>Once you have completed installation, you should see a package.json file in your nft-collection directory.Congratulations you have now set up npm and will be easily able to install hardhat and other dependencies.<h3 style="margin-left:0px;">Installing Dependencies</h3>We would now need a framework to help us to write, compile, test and deploy our smart contract to make our life easy.Presenting to you - HardhatBlockchain is like a public database and our smart contracts live on that database. This database is publicly available and accessible. Based on our contract’s configuration, anyone or only specific people can play around with our contract. Every time we publish a contract on blockchain, it gets an address - a digital footprint for us to track it. We’ll build everything in the Ethereum Blockchain and also use Solidity and other libraries for this project.Publishing a contract directly on blockchain for learning purposes will be an expensive deal. Every time we create a new contract, edit the contract or publish it on the blockchain, we incur some cost in the form of ETH, or MATIC. In order to avoid that and test the contracts properly, we will create a test environment which pretty much replicates the production environment, is free to use, and easy to access.For this purpose, we will use <a href="https://hardhat.org/" target="_blank" rel="noopener noreferrer">HardHat</a>. Hardhat gives you a local Ethereum network designed for rapid development. It allows you to deploy your contracts, run your tests and debug your code without spending a dime. How cool is that? 😊So let’s install it using this command<pre><code>npm install --save-dev hardhat</code></pre>You can check out the <a href="https://hardhat.org/getting-started/" target="_blank" rel="noopener noreferrer">hardhat documentation</a> for any help with installation.Awesome, now let’s set up hardhat by running this command inside our project folder.<pre><code>npx hardhat</code></pre>Since we will be constructing this project from scratch. Just create an empty hardhat config file during installation.<pre><code>888 888 888 888 888888 888 888 888 888888 888 888 888 8888888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888888 888 "88b 888P" d88" 888 888 "88b "88b 888888 888 .d888888 888 888 888 888 888 .d888888 888888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888👷 Welcome to Hardhat v2.11.2 👷‍? What do you want to do? - Create an empty hardhat.config.js✨ Config file created ✨</code></pre>Once you have installed hardhat, quickly create 2 new directories - contracts and scripts in your root directory using these commands. The contracts directory will have all your smart contracts and the scripts directory will have all the scripts related to deployment of the contract.<pre><code>mkdir contractsmkdir scripts</code></pre><h2 style="margin-left:0px;">Installing OpenZeppelin</h2>And this might be the most important thing yet - OPENZEPPELIN Openzeppelin is a library used for secure and efficient smart contract development.It is very time consuming to code the ERC721 contract from scratch. So we use already completed and security audited smart contracts from openzeppelinSo quickly download openzeppelin using this command<pre><code>npm install @openzeppelin/contracts</code></pre>👏👏 Well done! we have done so much in such a small time.This is how your project folder will look like now.<pre><code>NFT-collection-&gt; cache-&gt; contracts-&gt; node_modules-&gt; scripts- hardhat.config.js- package-lock.json- package.json</code></pre>Are you excited for the next lesson?

🧱Building the Smart Contract

<h2 style="margin-left:0px;">Creating 🦊 MetaMask wallet</h2>Your Metamask wallet is your key to the web3 world. You can interact with the blockchain via a Metamask account. And of course, generally, it is your digital wallet to store, swap and buy cryptocurrencies, tokens, NFTs, and other amazing things in the web3 world.Metamask has a mobile application and a Chrome browser extension too. I personally use Metamask on my Chrome browser extension because I do most of the work on my laptop.Anyways, let’s go!Here are the installation steps:<ul><li>Go to <a href="http://metamask.io/" target="_blank" rel="noopener noreferrer">MetaMask.io</a></li><li>Click Download and Install the Chrome Extension.</li><li>Setup your secure password.</li><li>The next step is the most important one.</li><li>Secure your 12-word phrase properly, never share it with anyone. Write it somewhere because if you lose it, you will never have a way to recover your account. So be mindful of that.</li></ul>Congrats! your account is created and you must have received a public address. The public address will be in the pattern of:Example: 0x37EA9984481459885141F571907992e7261E837CYou can use this public address to buy, trade, and store Ethereum based tokens, cryptos, NFTs and you can even use it to sign in to websites like OpenSea. But are you wondering if it is safe to share this cryptic long address?Yes, it is completely safe. You can share this address publicly to accept, buy, trade or store Ethereum based crypto.Here are the steps to turn on test networks<ol><li>Go to settings</li><li>Open Advanced</li><li>Scroll down to Show Test Networks</li><li>Turn on</li></ol><figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://lh3.googleusercontent.com/J1aA9vZcf8gE3h9ypNI2nQ0-wRypnCCCwNBDHtc7C9qcyzlkbOmlb6IDUxxN1xIwQpfIwSPZrmXy-C5hS65lcFIKg5U0LZaXhGw_y2QxGurmhwZSHcJwK0gk5KCaUpu45pmz8jl2" alt="" data-origin="," data-proportion="true" data-align="none" data-index="0" data-file-name="J1aA9vZcf8gE3h9ypNI2nQ0-wRypnCCCwNBDHtc7C9qcyzlkbOmlb6IDUxxN1xIwQpfIwSPZrmXy-C5hS65lcFIKg5U0LZaXhGw_y2QxGurmhwZSHcJwK0gk5KCaUpu45pmz8jl2" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div></figure>So, yeah, you must be wondering. I can write, compile and test my smart contract all day on my own computer but how do I connect to the ethereum network?Do I have to set up my own ethereum node on my server?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Won’t that be too complicated?The answer to all those questions is - QuickNode.<h4 style="margin-left:0px;">Creating Quick Node ⛓ endpoint</h4>Now, we need to set up <a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">QuickNode</a> with Ethereum testnet nodes, it’s gonna take like 5 mins.QuickNode is a platform which helps you access the blockchain environment without going through the hassle of hosting your own node, saving time and resources. This platform lets you access blockchain nodes in a few clicks and you can scale the node performance according to your need thus creating an environment for you to scale your DApp.<ul><li>Sign in / Sign up to your<a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">&nbsp;QuickNode</a> account</li><li>Click on create an&nbsp;<a href="https://www.quicknode.com/?utm_source=partner&amp;utm_campaign=metaschool&amp;utm_content=metaschool-guides&amp;utm_medium=partner" target="_blank" rel="noopener noreferrer">QuickNode</a> endpoint&nbsp;</li></ul><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh4.googleusercontent.com/nusZ81aRnb8ue5J6qJLN29NG-lQRe-oQcxoeHyplNrA2IpLKg3cBC2tXPE0XXg2JEI1ugLuCX-fSNFYdtJIctMYW9hLWo7jsQxun7aQU6w_0w1Hqb3Md6lMf1Q9bM57zAm0xKmNDzqCNghdNwYHetosBTnWTnmgCLKUarXGyuUs-EHxBKdN33yEVChkU-HQCo0RUCw" data-origin="," alt="" data-proportion="true" data-align="none" data-index="1" data-file-name="nusZ81aRnb8ue5J6qJLN29NG-lQRe-oQcxoeHyplNrA2IpLKg3cBC2tXPE0XXg2JEI1ugLuCX-fSNFYdtJIctMYW9hLWo7jsQxun7aQU6w_0w1Hqb3Md6lMf1Q9bM57zAm0xKmNDzqCNghdNwYHetosBTnWTnmgCLKUarXGyuUs-EHxBKdN33yEVChkU-HQCo0RUCw" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div> <ul><li>Now select Ethereum as Network and Goerli as chain and continue</li><li>We don’t need any add-on so click&nbsp;create endpoint now</li></ul>Now once you create the endpoint you can start setting up our Metamask Wallet with QuickNode. Now let’s move to the next part! Hope this was really easy for you to understand!<ul><li>Go to your Metamask wallet and click on the list of networks.</li></ul><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh5.googleusercontent.com/2UexuPf9TiOmgJskf1KjXbksBlQwnTvRS0tU_nzrKg_3wc4hzVAX4SDqifH3y8YyTb2YJIb2NVQEF_ShIkATyplBcz5_zrzxWuKkodQs5h2JJhUWuo4I0kIRECG1evY510WYAJlbc6W9DyTBVb3gCn9KYAi8ECYR_4tMGer7RBrxErQ8-PpNpOYCrNYj6FrRWD5LrQ" data-origin="," alt="" data-proportion="true" data-align="none" data-index="2" data-file-name="2UexuPf9TiOmgJskf1KjXbksBlQwnTvRS0tU_nzrKg_3wc4hzVAX4SDqifH3y8YyTb2YJIb2NVQEF_ShIkATyplBcz5_zrzxWuKkodQs5h2JJhUWuo4I0kIRECG1evY510WYAJlbc6W9DyTBVb3gCn9KYAi8ECYR_4tMGer7RBrxErQ8-PpNpOYCrNYj6FrRWD5LrQ" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div> <ul><li>A drop-down list will show up with a list of networks but you need to click on&nbsp;ADD NETWORK at the bottom of the list</li><li>Now you will have a form to fill up to add a new network to your metamask account</li><li>Let’s go back to QuickNode Endpoint Dashboard, and copy the HTTPS</li></ul><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh3.googleusercontent.com/rVD2taxs_lfShmW29I27PatQTIx9NZLnBIA3nGnyKye4Q2WQM_tiC8XpeWHCxu5g6irMWCZm6TnD3LqFhrcmwCFIWXAlnqrPoTmBB8XSiaDerKm7PvbNy625amuVm-vutlS8uyb8A1V0RxEdmtDEKDRaq_4X70LClb42guWZVyX-XCrm7htvkcFPwDAPDJMN2acgbg" data-origin="," alt="" data-proportion="true" data-align="none" data-index="3" data-file-name="rVD2taxs_lfShmW29I27PatQTIx9NZLnBIA3nGnyKye4Q2WQM_tiC8XpeWHCxu5g6irMWCZm6TnD3LqFhrcmwCFIWXAlnqrPoTmBB8XSiaDerKm7PvbNy625amuVm-vutlS8uyb8A1V0RxEdmtDEKDRaq_4X70LClb42guWZVyX-XCrm7htvkcFPwDAPDJMN2acgbg" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div> Now let’s go back to the Metamask add network form and&nbsp;<ul><li>Paste the HTTPS in&nbsp;New RPC Url field with 5 as&nbsp;Chain ID,&nbsp;</li><li>“ETH” as&nbsp;Currency Symbol,&nbsp;</li><li>Ethereum Goerli as&nbsp;Network Name (Any name as you like) and&nbsp;</li><li>Finally&nbsp;<a href="https://goerli.etherscan.io/%20">https://goerli.etherscan.io/</a> as&nbsp;Block Explorer URL.&nbsp;</li><li>Click Save</li></ul><div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://lh3.googleusercontent.com/NxmZPfEJiinySOv3C9APrka5wQATNH-_6XZr2ncTwDNEP6R7liepAkwQ1ApvGZGKVO3pKAndmI7X1SFyO88LrkTmL19pTlIvSZ1xsaXGjZaOo7VTUb7NLorC1Lp3wDjUXkK1oYqLlMsq94NBPDE6Ejv5Z7UvKmG80YMlZ8fQZSMGJ48Xvin122CSeYhDFckwB3wXiA" data-origin="," alt="" data-proportion="true" data-align="none" data-index="4" data-file-name="NxmZPfEJiinySOv3C9APrka5wQATNH-_6XZr2ncTwDNEP6R7liepAkwQ1ApvGZGKVO3pKAndmI7X1SFyO88LrkTmL19pTlIvSZ1xsaXGjZaOo7VTUb7NLorC1Lp3wDjUXkK1oYqLlMsq94NBPDE6Ejv5Z7UvKmG80YMlZ8fQZSMGJ48Xvin122CSeYhDFckwB3wXiA" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div> <h2 style="margin-left:0px;">&nbsp;</h2><h4 style="margin-left:0px;">Get some fake ETH $$ 🤑</h4>Try the following website and try to get some fake ETHs. This fake money will be used for deploying your contract and doing transactions on your contract. This is not real money, you can’t buy NFTs, or other assets via these ETH.All you have to do is to drop your public address on the following links and the ETH will be transferred.<ol><li><a href="https://goerlifaucet.com/" target="_blank" rel="noopener noreferrer">https://goerlifaucet.com/</a></li></ol>In the next lesson, we will be setting the&nbsp;

Setting up Applications

<h2 style="margin-left:0px;">Storing information the right way</h2>In this lesson, we will create the .env file and for that we need the HTTP address from quicknode dashboard which you can copy from the dashboard itself and the private key from Metamask<h4 style="margin-left:0px;">Get your private 🦊 MetaMask key</h4>Open the Metamask extension to find your private key. While writing and deploying your contract you sign off each contract with your private key to tell the blockchain that you are a legit person creating a real transaction. Now if that private key is made visible, the hacker can gain access to your account and then the rest will be history.<div class="se-component se-image-container __se__float- __se__float-none" contenteditable="false"><figure style="margin: 0px;"><img src="https://metaschool.s3-ap-southeast-1.amazonaws.com/images/xR90oDFgwFLgOIN03aIlqFhEpxUhF7R0sS9aBFCR.png" alt="" data-origin="," data-proportion="true" data-align="none" data-file-name="xR90oDFgwFLgOIN03aIlqFhEpxUhF7R0sS9aBFCR.png" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style="" data-index="0"></figure></div> I will tell you how to keep your account and private key safe in the next steps. For now, export the private key and paste it somewhere secure.🚨 DON’T COMMIT YOUR PRIVATE KEY ON GITHUB, DON’T SHARE IT ON DISCORD, DON’T SHARE IT ANYWHERE!IF YOUR KEY IS PUBLIC, HACKERS AND STEALERS WILL TAKE ALL YOUR FUND AND EVERYTHING THAT IS ASSOCIATED WITH THAT ACCOUNT.🚨BE EXTRAAA VIGILANT!!Great now we have 2 keys in our project, one is the private metamask wallet key, and the other is this private Quicknode HTTP address.While writing and deploying your contract you sign off each contract with your private key to tell the blockchain that you are a legit person creating a real transaction. Now if that private key is made visible, the hacker can gain access to your account and then the rest will be history. In order to avoid this issue. Let’s do the following.<pre><code>npm install dotenv --savenpx touch .gitignoretouch .gitignore</code></pre>🔥 This is super important! 🔥 Go ahead and create .env file at the root of your project. Yes. Your file name would be .env! Then, open your .gitignore file and write .env there. <a href="https://github.com/Metaschoolso/Learning-Projects/blob/main/.env-sample" target="_blank" rel="noopener noreferrer">Here is a sample .env file that you can replicate.</a>All the secrets and important keys related to your project will be stored in .env file and we can access this data whenever and wherever. In the gitignore file we simply write .env, it tells git to ignore that file from future commits.Open the .env file you have just created. Add your MetaMask Private Key and QuickNode App HTTP URL there. Should be something like this.<pre><code>API_URL_KEY = YOUR_QUICKNODE_APP_URLPRIVATE_KEY = YOUR_PRIVATE_KEY</code></pre>Now we will be able to securely use all of our private information in this project.There is one last thing that we have to download before we are FINALLY ready to dive into our smart contract.

🔑 Securing your info

Getting Started

This is the most exciting part of the project, we will be writing the smart contract here.

Go to your contracts directory and make a new file called Collection.sol.Populate this file with the following code -<pre><code>//Contract based on [https://docs.openzeppelin.com/contracts/3.x/erc721](https://docs.openzeppelin.com/contracts/3.x/erc721)// SPDX-License-Identifier: MITpragma solidity ^0.8.9;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";import "@openzeppelin/contracts/utils/Counters.sol";import "@openzeppelin/contracts/access/Ownable.sol";import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";contract Collection is ERC721URIStorage, Ownable { using Counters for Counters.Counter; Counters.Counter private _tokenIds; Counters.Counter private _totalMinted; mapping(address =&gt; uint8) private mintedAddress; mapping(string =&gt; uint8) private URIMapping; uint256 public PRICE_PER_TOKEN = 0.01 ether; uint256 public LIMIT_PER_ADDRESS = 2; uint256 public MAX_SUPPLY = 5; constructor() ERC721("Collection", "NFT") {} function setPrice(uint256 price) external onlyOwner{ PRICE_PER_TOKEN = price; } function setLimit(uint256 limit) external onlyOwner{ LIMIT_PER_ADDRESS = limit; } function setMaxSupply(uint256 max_supply) external onlyOwner{ MAX_SUPPLY = max_supply; } function mintNFT(string memory tokenURI) payable external returns (uint256) { require(PRICE_PER_TOKEN &lt;= msg.value, "Ether paid is incorrect"); require(mintedAddress[msg.sender] &lt; LIMIT_PER_ADDRESS, "You have exceeded minting limit"); require(_totalMinted.current() + 1 &lt;= MAX_SUPPLY, "You have exceeded Max Supply"); require(URIMapping[tokenURI] == 0, "This NFT has already been minted"); URIMapping[tokenURI] += 1; mintedAddress[msg.sender] += 1; _tokenIds.increment(); _totalMinted.increment(); uint256 newItemId = _tokenIds.current(); _mint(msg.sender, newItemId); _setTokenURI(newItemId, tokenURI); return newItemId; } function withdrawMoney() external onlyOwner{ address payable to = payable(msg.sender); to.transfer(address(this).balance); }}</code></pre>Okay I know this is a lot of code, but it really isn’t that complicated once you start understanding it. So let’s go through it step by step.We import 4 contracts from openzeppelin:<ol><li>ERC721 - Standard implementation of the ERC721 smart contract used for making NFTs</li><li>Counters - Provides a secure way to increment or decrement a number by 1. We will use counters to keep a track of the token IDs of our minted NFTs</li><li>Ownable - Allows us to use the ‘onlyOwner’ modifier which in turn allows us to create functions that only the owner of the contract can use.</li><li>ERC721URIStorage - This is an extension of the ERC721 smart contract, that provides a way to store the metadata in an array list on chain using the _setTokenURI function.</li></ol><h3 style="margin-left:0px;">Let's understand the Mint function</h3>In the mint function you should notice these things -<ol><li>We take in a parameter called the tokenURI. This is a link to the metadata of our NFT. A metadata is like the soul of our NFT. Your NFT is unique because of the metadata it has. It contains the complete information about the NFT like image or description. We will come back to the metadata soon, when we talk about IPFS hosting.</li><li>We increment our token ID for storing the NFTs metadata and minting the NFT using the following piece of code, we also increment the total Number of NFTs minted so that we can check it does not exceed our total supply.</li></ol><pre><code>_tokenIds.increment();_totalMinted.increment();uint256 newItemId = _tokenIds.current();</code></pre><ol><li>We call the internal _mint() function to mint the NFT with the new token ID and airdropping it to our public address - msg.sender.</li></ol>We also store the tokenURI in an array at the index of the new tokenID using _setTokenURI()<h3 style="margin-left:0px;">🚨 Quick Detour About this magical word - msg</h3>msg provides us with a set of incredibly useful global variables, that we can use to extract important information from the blockchain.We will be using the following global variables in this tutorial:<ol><li>msg.sender - Gives us the public address of the entity which made the function call.</li><li>msg.value - Gives us the amount of ether sent (in wei) along with the function call</li></ol>There are also other special variables like msg.data, msg.gas and msg.sig which you check out in the solidity documentation <a href="https://docs.soliditylang.org/en/develop/units-and-global-variables.html?highlight=special%20variables%20and%20functions#block-and-transaction-properties" target="_blank" rel="noopener noreferrer">Solidity Docs</a>While you absorb everything I have mentioned so far. I will explain other functions in detail in next steps.&nbsp;

🎉 Writing the Collection.sol smart contract

In this lesson, we will understand the minting contract using code blocks, so let's goooooo!<h3 style="margin-left:0px;">🤑 Setting the mint price</h3>Till now this is just a standard implementation of the ERC721. We needed to add an option of setting the mint price to it. We do so by adding a price_per_token public variable like this<pre><code>uint256 public PRICE_PER_TOKEN = 0.01 ether;</code></pre>We then include a require statement in the mintNFT function, that each msg.sender should pass to be able to mint an NFT<pre><code>require(PRICE_PER_TOKEN &lt;= msg.value, "Ether paid is incorrect");</code></pre>If the money sent to the contract is less than 0.01 eth, then the transaction is reverted.We allow any amount of money sent to the contract that is more than our mint price, this is because of 2 things:<ol><li>Why say no to extra money? :)</li><li>If we revert the transaction if the user sends more money than needed, then the user will still have to pay the gas fee for that transaction :(</li></ol><h3 style="margin-left:0px;">🚦 Setting the Mint Limit</h3>To set the minting limit per person we do a similar thing as the minting price.We make 2 global variables -<pre><code>uint256 public LIMIT_PER_ADDRESS = 2;mapping(address =&gt; uint8) private mintedAddress;</code></pre>Whenever an address mints an NFT, the value of the number of NFTs held by that address increases in the mapping - “mintedAddress”In the mintNFT function we use a require statement to enforce that the number of NFTs minted by that address is less than the limit set by the owner.<pre><code>require(mintedAddress[msg.sender] &lt; LIMIT_PER_ADDRESS, "You have exceeded minting limit");mintedAddress[msg.sender] += 1;</code></pre><h3 style="margin-left:0px;">🌳 Setting the Total Supply</h3>To set the total supply we do 2 things<ol><li>First we setup a new Counter (_totalMinted) to keep track of the total number of NFTs that we have minted.</li><li>We make a MAX_SUPPLY variable and initially set it to a max supply of 5, which the owner can change later on.</li><li>Before minting any NFT, we check if minting that NFT would make the total supply go above the MAX_SUPPLY threshold, if yes then we revert the transaction.</li><li>If the total supply is under the MAX_SUPPLY, then we increment the total supply by one and mint the NFT.</li></ol><pre><code>Counters.Counter private _totalMinted;uint256 public MAX_SUPPLY = 5;require(_totalMinted.current() + 1 &lt;= MAX_SUPPLY, "You have exceeded Max Supply");_totalMinted.increment();</code></pre><h3 style="margin-left:0px;">🙈 Avoiding NFT duplicity</h3>We are also adding a feature to our smart contract, which will not allow somebody to mint the same NFT again.We do this by creating a mapping called the URIMapping. Each time an NFT is minted, we add its tokenURI to this mapping. Before minting any NFT, we first check if somebody has already minted an NFT with this tokenURI or not. We can deal with this in the front end of the app but equally important to cover it in the contract.If that NFT has already been minted the transaction is reverted.<pre><code>require(URIMapping[tokenURI] == 0, "This NFT has already been minted");URIMapping[tokenURI] += 1;</code></pre><h3 style="margin-left:0px;">💸 How to get back money from your transaction?</h3>Once everyone has brought all of your amazing NFTs. It is time to cash that money and go party with all of this freshly collected ethereum.So to do that, we as the owners of the smart contract will have to withdraw money from the smart contract.We do this using the withdrawMoney function, which has the following features -<ol><li>We use the onlyOwner modifier to make sure that only the person who owns the contract can take out money from it.</li><li>We then create a payable address called “to” and set its value equal to the person who is sending the function call ( Which can only by the owner or the transaction will be reverted)</li><li>We use the transfer method of the address variable to transfer all of the smart contract’s balance to the owner’s public address.</li></ol>And just like that, we are rich!<pre><code> function withdrawMoney() external onlyOwner{ address payable to = payable(msg.sender); to.transfer(address(this).balance); }</code></pre>I hope you now have a good understanding of how the smart contract is working.Great, now let’s deploy this beauty that we have created.

Understanding your Minting Contract

Alright, time to to deploy our contract.Deployment of a smart contract is pretty simple actually once you have all of the tools properly set up.We have gotten most of the things set up already we just have to take care of 2 little things for now.<ol><li>Ethers.js - Ethers.js is a very popular library, that makes it easy for us to interact with the ethereum network. We will be using this library to deploy our smart contract.</li></ol><pre><code>npm install --save-dev @nomiclabs/hardhat-ethers ethers@^5.0.0</code></pre><ol><li>To interact with ethereum, we will also need to set up the network we are using to do so. This tutorial is built on the goerli test network which allows developers to test out there software without spending real eth.</li></ol>So go to your hardhat.config.js file and copy the following settings into it.<pre><code>/*** @type import('hardhat/config').HardhatUserConfig*/require("@nomiclabs/hardhat-ethers");require('dotenv').config(); const { API_URL_KEY, PRIVATE_KEY } = process.env; module.exports = { solidity: "0.8.17", defaultNetwork: "goerli", networks: { hardhat: {}, goerli: { url: API_URL_KEY, accounts: [`0x${PRIVATE_KEY}`] } },}</code></pre>So a quick explanation of what is happening here.Remember that .env file you made to store all of your private information, along with the key to your alchemy account.In the hardhat config file, we are setting up a goerli network on hardhat using the Quicknode HTTP url and the private key for your Metamask.We will soon use this network to finally deploy our smart contract.We are also setting the default solidity compiler version to 0.8.17Like most other coding languages, solidity also needs to be compiled into a form that the machine can understand.So to check if everything is working properly let’s quickly compile our contract using hardhat.<pre><code>npx hardhat compile</code></pre>You should be able to see a newly created artifacts folder inside your directory. Keep an eye out for this, because we’ll be using this pretty soon.

🚀 Writing the deployment script

Go to the scripts folder and create a new file called deploy.jsCopy the following boiler plate code into your file.<pre><code>async function main() { const Collection = await ethers.getContractFactory("Collection") const collection = await Collection.deploy() await collection.deployed() console.log("Contract deployed to address:", collection.address)} main() .then(() =&gt; process.exit(0)) .catch((error) =&gt; { console.error(error) process.exit(1) })</code></pre>This is standard code that you would find in any ethers.js or hardhat documentation.You first create a contract factory called Collection.<code>const Collection = await ethers.getContractFactory("Collection")</code>You can now use this contract factory to deploy as many contract as you want.But we only need to deploy one. (Goerli test eth is free, but why waste it 😝)<code>await collection.deployed()</code><code>console.log("Contract deployed to address:", collection.address)</code>From this one deployed smart contract we can mint as many NFTs as our heart pleases.The smart contract is ready.&nbsp; The hardhat config is ready.&nbsp; The deploy script is ready.&nbsp; Are you readdyyyyyyyy? 🚀🚀🚀🚀🔥🔥🔥If yes, then just type this command into your command line, to deploy your contract on the goerli network.<pre><code>npx hardhat run scripts/deploy.js --network goerli</code></pre>Don’t panic if you don’t see anything for some time on your command line. You are now interacting with an ethereum network, so transactions might take some time.You can use this time to go the alchemy mempool from your dashboard and view your transaction.On a successful transaction confirmation you should see something like this.<code>Contract deployed to address: &lt;your_contract_address&gt;</code>Congratulations you have just deployed your own smart contract to the ethereum test network!Store this contract address somewhere. We will need it later.At this point I would recommend taking a step back and appreciating what you have done here. 👏👏👏👏👏Go to the <a href="https://goerli.etherscan.io/" target="_blank" rel="noopener noreferrer">goerli etherscan</a> and paste in your contract address. View your transaction details here, click on your transaction hash to understand the elements that were involved in your transaction.You will probably be using etherscan a lot in the future, so it would be helpful to get yourself familiar with it :)<h2 style="margin-left:0px;">Summary</h2>You are now a very smart, smart contract developer.&nbsp; But I promised you I would give you an NFT Marketplace by the end of this tutorial, and I intend to keep that promise.So let’s move on to building a quick react frontend for our marketplace and then calling our deployed smart contract to mint for us, some awesome NFTs.

🔮 The deployment!

🎉 Writing smart contract

Now we get to the front react app of our marketplace. This is the last leg of our journey.

<h3 style="margin-left:0px;">Setting Up React</h3>We will now create the framework for a basic react app quickly using the command.<pre><code>npx create-react-app collections-react </code></pre>You should now see a folder called collections-react with all of the basic react template code inside it.🚨 Note: You can also make this react app directory separately from the smart contract directory. But to do that you will have to install ethers in the new react directory using this command -<pre><code>npm i ethers </code></pre><h3 style="margin-left:0px;">🪅 Setting Up Pinata</h3>Before we start minting NFTs, we need to define what they will look like.We need to find images that we want to use, we need to write metadatas for our NFTs (Remember when we talked about metadatas before?)We are going to provide you with our own images and metadatas to make your work a little bit easier. But if you are feeling creative today, we highly encourage you to put up your own images and create your own metadatas and replace them in the assets folder.So go ahead and download the “<a href="https://github.com/Metaschoolso/Learning-Projects/tree/main/assets" target="_blank" rel="noopener noreferrer">assets</a>” folder from here in the public directory of your react app. If you like the assets don’t forget to star us on GitHub. 😘😘We will be creating 5 NFTs for our marketplace. You can find the images for these NFTs in the assets/images folder.You can’t pass a complete image to your smart contract. You first need to host it onto a decentralized IPFS (Inter Planetary File System). The InterPlanetary File System is a protocol and peer-to-peer network for storing and sharing data. We will be using <a href="https://www.pinata.cloud/" target="_blank" rel="noopener noreferrer">Pinata</a> for storing the metadata of our NFTs.So go and make a <a href="https://www.pinata.cloud/" target="_blank" rel="noopener noreferrer">Pinata</a> account quickly and come back.🚨 This is important, follow the steps quickly.&nbsp; Once you login to your pinata dashboard, upload the images folder from assets folder to it. Once you have uploaded the images onto the IPFS, we will now add the individual link of all of these images to their respective metadatas. These metadata files are in your assets folder. So click on the images folder, then click on each individual image and copy its url from the browser.&nbsp;Enter this URL into the image field of the metadata that this image corresponds to.<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://metaschool.s3-ap-southeast-1.amazonaws.com/images/bvAaYhbYTBHD3FmGsnBBwwG6o8e5hroYowML8Jg9.png" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="bvAaYhbYTBHD3FmGsnBBwwG6o8e5hroYowML8Jg9.png" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div></figure>To do this, you now have to go the assets/metadata folder, and fill all 5 of the empty “image” values, with the corresponding IPFS link.<pre><code>{ "description": "This is polar bear NFT", "image": "&lt;your-image-pinata-link-here&gt;", "name": "Polar Bear"}</code></pre>Great! Now that you have filled in the metadata folder completely, upload it to the IPFS using Pinata, just like we did for the images!

Setting up react

There is a lot of standard template stuff that we won’t be using. For this tutorial you will only be concerned with 2 filesApp.css - will hold some very basic css styling for our marketplaceApp.js - will hold the code for the mint button and connecting to metamaskSo first let’s get the styling out of the way. Go to your App.css file and delete everything from it.Now copy and paste the following lines of code to it<pre><code>.imgDiv { display: inline-grid; margin: 10px;}.imgDiv button { margin: 10px auto 0px auto; }.container { width: 80%; /* display: flex; */ flex-direction: row; justify-content: center; text-align: center; margin: 0 auto;}button { padding: 7px 5px; border-radius: 5px; border: none; background-color: #4CAF50; color: white;}button:hover { background-color: #45a049;}.imgGrid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 50px; margin-top: 50px; grid-auto-flow: dense; /* width: 100%; */}.contentDiv { display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid #4CAF50; border-radius: 15px; padding: 20px;}@media screen and (max-width: 1000px) { .imgGrid { grid-template-columns: repeat(3, 1fr); }}@media screen and (max-width: 600px) { .imgGrid { grid-template-columns: repeat(2, 1fr); }}</code></pre>This is just some basic CSS styling for our webpage to make it look a little more neat. You don’t need to understand this code unless you are interested in frontend development.<h3 style="margin-left:0px;">The contract ABI</h3>Every smart contract has something called an ABI or the Application Binary Interface.🚨 🚨 🚨 This is a super important step.🚨 🚨 🚨An ABI provides a description of the contract’s interface.We can interact with a smart contract using its ABI.Remember that artifacts folder that I told you to keep an eye out for?Our contracts ABI is automatically stored in that folder by Hardhat.To make it more accessible to our react frontend, make a new file called ‘contractABI.json’ in the src folder of the collections-react directory.Now go to your smart contract project, open artifacts directory and copy the contents of the ‘contracts / Collection.sol / Collection.json’ file.Paste these contents into your newly created contractABI.json file.We will use this ABI to mint NFTs from our react frontend in the next step!

🛍 Making your marketplace frontend

<h3 style="margin-left:0px;">Creating App.js functionalities</h3>Populate the App.js file with the following code<pre><code>import "./App.css";import { Contract, ethers } from "ethers";import { useEffect, useState } from "react";import contractABI from "./contractABI.json"; const contractAddress = "&lt;your_contract_address_here&gt;"; function App() { const [account, setAccount] = useState(null); const [isWalletInstalled, setIsWalletInstalled] = useState(false); const [NFTContract, setNFTContract] = useState(null); // state for whether app is minting or not. const [isMinting, setIsMinting] = useState(false); useEffect(() =&gt; { if (window.ethereum) { setIsWalletInstalled(true); } }, []); useEffect(() =&gt; { function initNFTContract() { const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); setNFTContract(new Contract(contractAddress,contractABI.abi,signer)); } initNFTContract(); }, [account]); async function connectWallet() { window.ethereum .request({ method: "eth_requestAccounts", }) .then((accounts) =&gt; { setAccount(accounts[0]); }) .catch((error) =&gt; { alert("Something went wrong"); }); } const data = [ { url: "./assets/images/1.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/2.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/3.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/4.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/5.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, ]; async function withdrawMoney(){ try { const response = await NFTContract.withdrawMoney(); console.log("Received: ", response); } catch (err) { alert(err); } } async function handleMint(tokenURI) { setIsMinting(true); try { const options = {value: ethers.utils.parseEther("0.01")}; const response = await NFTContract.mintNFT(tokenURI, options); console.log("Received: ", response); } catch (err) { alert(err); } finally { setIsMinting(false); } } if (account === null) { return ( &lt;&gt; &lt;div className="container"&gt; &lt;br/&gt; &lt;h1&gt;🔮 metaschool&lt;/h1&gt; &lt;h2&gt;NFT Marketplace&lt;/h2&gt; &lt;p&gt;Buy an NFT from our marketplace.&lt;/p&gt; {isWalletInstalled ? ( &lt;button onClick={connectWallet}&gt;Connect Wallet&lt;/button&gt; ) : ( &lt;p&gt;Install Metamask wallet&lt;/p&gt; )} &lt;/div&gt; &lt;/&gt; ); } return ( &lt;&gt; &lt;div className="container"&gt; &lt;br/&gt; &lt;h1&gt;🔮 metaschool&lt;/h1&gt; &lt;h2&gt;NFT Marketplace&lt;/h2&gt; {data.map((item, index) =&gt; ( &lt;div className="imgDiv"&gt; &lt;img src={item.url} key={index} alt="images" width={250} height={250} /&gt; &lt;button isLoading={isMinting} onClick={() =&gt; { eval(item.param); }} &gt; Mint - 0.01 eth &lt;/button&gt; &lt;/div&gt; ))} &lt;button onClick={() =&gt; { withdrawMoney(); }} &gt; Withdraw Money from Contract &lt;/button&gt; &lt;/div&gt; &lt;/&gt; );} export default App;</code></pre>Now let us break down what is this code exactly doing -<h2>Connecting to Metamask</h2><pre><code>const [account, setAccount] = useState(null);const [isWalletInstalled, setIsWalletInstalled] = useState(false);const [NFTContract, setNFTContract] = useState(null);// state for whether app is minting or not.const [isMinting, setIsMinting] = useState(false); useEffect(() =&gt; { if (window.ethereum) { setIsWalletInstalled(true); }}, []); useEffect(() =&gt; { function initNFTContract() { const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); setNFTContract(new Contract(contractAddress,contractABI.abi,signer)); } initNFTContract();}, [account]);async function connectWallet() { window.ethereum .request({ method: "eth_requestAccounts", }) .then((accounts) =&gt; { setAccount(accounts[0]); }) .catch((error) =&gt; { alert("Something went wrong"); });}</code></pre>This metaschool tutorial on <a href="https://metaschool.so/courses/add-metamask-connect-button-to-your-react-app" target="_blank" rel="noopener noreferrer">How to Add MetaMask connect button to your react app</a> explains this code in great detail. We adopt there explanation here<ul><li>useState is a Hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value. We are starting with a false state for if the wallet is installed. And a null state for if an account is connected.</li><li>When you call useEffect , you’re telling React to run your “effect” function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render — including the first render.</li><li>MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users’ Ethereum accounts, read data from blockchains the user is connected to, and suggest that the user sign messages and transactions. The function connectWallet simply does a remote procedure call to Ethereum via MetaMask. It returns a Promise that resolves to the result of the method call.</li></ul>🚨🚨 Note: Ensure that your metamask extension is logged in (Not asking for password) while running the react app, otherwise you will get an error.So our first page first checks if your metamask is connected or not, if it is not connected it gives you the option to connect using the connectWallet button<pre><code>&lt;div className="container"&gt; &lt;br/&gt; &lt;h1&gt;🔮 metaschool&lt;/h1&gt; &lt;h2&gt;NFT Marketplace&lt;/h2&gt; &lt;p&gt;Buy an NFT from our marketplace.&lt;/p&gt; {isWalletInstalled ? ( &lt;button onClick={connectWallet}&gt;Connect Wallet&lt;/button&gt; ) : ( &lt;p&gt;Install Metamask wallet&lt;/p&gt; )}&lt;/div&gt;</code></pre>Great so the next part of the code, is where you would populate your NFTs metadata into the marketplace. So you can display and mint these NFTs on the webpage.🚨 Copy the assets folder provided to you, to the public folder in your react app.Now populate this data with each image, and its corresponding metadata hosted on the IPFS.<pre><code>const data = [ { url: "./assets/images/1.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/2.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/3.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/4.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", }, { url: "./assets/images/5.png", param: "handleMint('&lt;your_metadata_pinata_link_here&gt;')", },]; </code></pre>Before moving on to the next part, remember when I told you to store your deployed contract address for later? This is where we’ll use it.So fill in your contract address here<pre><code>const contractAddress = "&lt;contract_address&gt;";</code></pre>And finally we come to the most important part of the react app. What to do when the user clicks on the mint button?This code is handled by the handleMint function.<pre><code>async function handleMint(tokenURI) { setIsMinting(true); try { const options = {value: ethers.utils.parseEther("0.01")}; const response = await NFTContract.mintNFT(tokenURI, options); console.log("Received: ", response); } catch (err) { alert(err); } finally { setIsMinting(false); }}</code></pre>So what is going on here?Everytime the user mints an NFT we call the handleMint function with the tokenURI or the IPFS link of the metadata of that NFT.<ul><li>We then check if the user has a metamask wallet using window.ethereum</li><li>We then use the providers functionality provided to us by the ethers.js library to get the signer from your metamask wallet.</li><li>Then using the signer, the contract ABI, and the address of the contract you deployed to goerli, we create a new instance of a contract. We can interact with this local instance of the contract as if we are interacting with the deployed contract.</li><li>We then create a constant options which will hold the amount of money we want to buy the NFT for, in our case the NFT is valued at 0.01 eth, so we pass that into the parseEther function. If you put anything less than this the contract would reject your transaction, because we have coded it that way :)</li></ul>This options constant, will populate the msg.value field of our transaction with 0.01 ether, remember when we used msg.value to check the amount of ether that has been paid to the smart contract?<ul><li>Lastly we come to the final step of our journey, minting the NFT using contract.mintNFT(), this calls the mintNFT function of the deployed smart contract and passes the tokenURI and the option constant along with it.</li></ul>And we are done! Yes, you heard me right, we are done! You can now mint your NFTs on your very own NFT marketplace.🔥 But before we do that, here is some important information that you need to know before you start playing with your web app. You will encounter some alert errors when you click on certain buttons, do not panic!Read these alerts carefully and you’ll see that they actually show that our smart contract is working properly.If you read the error carefully, you’ll see that if you try using the smart contract incorrectly, for example if you try to withdraw money from an account which is not the owner, then you will be reverted.So essentially these alerts are a good thing.I encourage you to try and break the smart contract in various ways and look at the various errors that the contract throws at you, to see that all your functionalities are correctly working :)

Adding the bells and whistles

🌈 Making the Frontend of your Marketplace

The moment you have been waiting for is here!! 🥁

Run this command in the collections-react directory to start your react app.<pre><code>npm run start</code></pre>You should be able to see your NFT marketplace in your browser.<figure class="image"><div class="se-component se-image-container __se__float-none" contenteditable="false"><figure class="image" style="margin: 0px;"><img src="https://metaschool.s3-ap-southeast-1.amazonaws.com/images/rZ7K6g2tr3Q6VK8CvVWIZBqoUeDyUv1mfAHPxfiF.png" data-origin="," alt="" data-proportion="true" data-align="none" data-index="0" data-file-name="rZ7K6g2tr3Q6VK8CvVWIZBqoUeDyUv1mfAHPxfiF.png" data-file-size="0" data-rotate="" data-rotatex="" data-rotatey="" data-size="," data-percentage="auto,auto" style=""></figure></div></figure> Try clicking random mint buttons and see what happens.Play around with it, it is yours now!Take care of 2 things though<ol><li>That you have enough goerli eth in your metamask wallet to buy the NFTs</li><li>You can’t mint more than 2 NFT , because we have set a minting limit of one per address. So you can try minting NFTs from other accounts if you want more than 2, or you can re-deploy your smart contract with the new minting limit!</li></ol><h2 style="margin-left:0px;">👀 Viewing your NFTs in metamask &amp; etherscan</h2>You can now go to the goerli etherscan of your smart contract and see the various details of how the mint took place.You can also check if the NFT has been airdropped to your account or not on goerli.etherscan.<ol><li>Go to <a href="https://goerli.etherscan.io/" target="_blank" rel="noopener noreferrer">https://goerli.etherscan.io/</a> and check the contract address to see the latest transactions.</li><li>Go to <a href="https://testnets.opensea.io/" target="_blank" rel="noopener noreferrer">https://testnets.opensea.io/</a> and search your contract address to see minted NFTs.</li></ol>To view your NFTs in your metamask account.<ul><li>Go to metamask’s mobile app.</li><li>Import your current metamask wallet using the recovery phrase.</li><li>And then click on import NFTs.</li><li>Enter your contract address and tokenID (you can find this on etherscan) of the NFT minted here.</li><li>Refresh metamask a few times, and you now have your own NFT!</li></ul><h2 style="margin-left:0px;">Summary</h2>Congratulations on completing the full course on how to make an NFT marketplace with a mint price.I hope you learned a lot. 😘😘👏👏And I hope you had a lot of fun. If yes, invite your friends to take this project with you. It would make the fun 10x.Put your newly acquired skills to test with some other fun NFT project.For any doubts feel free to <a href="https://discord.gg/vbVMUwXWgc" target="_blank" rel="noopener noreferrer">reach out to us on discord.</a>See you in the next tutorial!

Launch your own epic NFT marketplace

Project Curriculum

Getting Started

🎉 Writing smart contract

🌈 Making the Frontend of your Marketplace

👑 Time to launch your NFT marketplace

🎉 Completion

Get your NFT Image

Why metaschool?

NFT Certificates

Free of cost

Expert Trainer

Self Paced

Frequently asked questions