In this article, you will build an NFT mint and learn how to create an NFT dApp by connecting your smart contract to a React frontend using Metamask and Web3 tools.

I think one of the biggest challenges for developers with a Web2 development background is figuring out how to connect and interact with your smart contracts to front-end projects.

By building an NFT mint (a simple UI where you can enter the link, title and description of the digital asset), you will learn how to:

• Connect to Metamask via your frontend project
• Call smart contract methods from your frontend
• Sign transactions with Metamask

In this article, we will use React as our front-end framework.Because this article focuses primarily on Web3 development, we won't spend too much time breaking down React basics.So, hopefully you have a basic understanding of React, such as knowing how components, props, useState/useEffect and basic function calls work.

Without further ado, let's get started!

Step 0: Make NFT 101

Before you start coding, it's important to understand how NFTs work.It consists of two steps:

1. Publish NFT smart contracts on the Ethereum blockchain.Usually this is a ERC-721 or ERC-1155 smart contract.

The biggest difference between the of the two NFT smart contract standards is that ERC-1155 is a multi-token standard, which includes batch function, while E