Solidity Tutorial – How to Build and Deploy an NFT Minting dApp

Introduction

This tutorial will guide you on how to build and deploy an NFT minting dApp with a Solidity smart contract and ReactJS frontend.

If you’re new to writing smart contracts with Solidity, we recommend you to check out How to build your first Smart Contract before moving on with this tutorial.

Prerequisites

This tutorial uses the following technologies:

• React
• Remix IDE
• Solidity
• Web3.js
• Moralis React SDK
• HTML and CSS

Before you start with this tutorial, you should have an intermediary understanding of React components, props and what smart contracts are.

What We’re Building

We’ll create and deploy an NFT minting smart contract written in Solidity that’ll be linked to a React frontend application.

An NFT minter or generator is a decentralized application that converts a digital asset (e.g. piece of art) into an NFT, which is then accessible on an NFT marketplace like OpenSea, where the owner can put it for sale.

Upon completing this tutorial, you’ll have an understanding of how NFTs are programmatically created, stored, and accessed on an NFT marketplace.

How It Works

Check out the basic flow of how our NFT minting dApp will function below:

1. Minters will log into the dApp by connecting their wallet (e.g. Metamask).

2. They will then supply the name, image, and description of the digital asset they want to mint.

3. Our NFT minter will turn the digital asset into an NFT when they click the “Mint NFT” button.

4. All minted NFTs will be listed on the OpenSea Testnet Marketplace, where everyone can view them and can also be put on sale by their owner.

In this tutorial, we’re using Testnet environments, although you can apply the same steps when you’re ready to deploy to a Mainnet network.

A Testnet network is merely a functional prototype that works with fake cryptocurrencies for a blockchain project, while the Mainnet network is a fully built blockchain platform that allows users to perform real cryptocurrency transactions on the blockchain.

At the end of this tutorial, you’ll have a working dApp that allows anyone to mint their digital assets into an NFT.

Demo

Below is the demo video of the NFT minting dApp we’re going to build at the end of this tutorial:

You can also check out the live version of what we’re building here.

Step 1 – Writing the NFT Minting Smart Contract

In this step, we’re going to create a basic Nft_Minter smart contract to accept and mint the digital asset that’ll be sent from the frontend as tokenURI.

To begin, open the Remix IDE in your browser:

Next, under the contracts folder, create a new Nft_Minter.sol file as shown below:

Then, inside the Nft_Minter.sol file, copy and paste the Solidity code below:

 pragma solidity ^0.8.9;   import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; import "@openzeppelin/contracts/utils/Counters.sol";   contract Nft_Minter is ERC721URIStorage {        using Counters for Counters.Counter;         Counters.Counter private _tokenIds;