Introduction

In this article, I am going to give you a demonstration of how to understand, deploy, configure, and build both a NFT smart contract on Ethereum and simple minting web app.

The content shall be divided into three sections: preparation, deployment of the smart contract, and development of the website. For anyone who is not familiar with the concept and mechanism of NFTs and Blockchain, this document will be of help as well.

Prerequisites

• A good computer with stable internet connection. A cheap
  chromebook will work. You can also install linux beta mode for simple
  coding which will suffice the job here. A minimal suggestion.

• beginner knowledge of React/HTML5, Solidity, Json, and Javascript would be excellent.

• Installation of NPM and node js in your computer or virtual machine.
• Some images (preferably in PNG) and corresponding amounts of metadata in Json format.
• Install a metamask wallet and acquire test tokens from a test faucet.

While it may be possible for our audience to have a full comprehension of the working from the beginning to the end without meeting all of the prerequisites, it would be great to put your head into the concepts first for a smoother experience.

Pick-me-up Tutorial

Before we deep dive into this NFT project, you can utilize this section to revise your concepts and courses of action in web3 development.

What is decentralization?

• No central point of failure, once a transaction is made, it will not only be logged onto the digital records but also spread and stayed in different blocks of digital ledgers. Consider multiple databases run independently and collaboratively.

• Trustless interactions: Users are not required to trust each other or a third party as smart contracts are public and the exact backbone of the mechanism of the decentralized networks.

• Participation and control, anyone can be involved in a decentralized blockchain by running a node, validating transactions, and contributing to the consensus mechanism.

What is an EVM blockchain?

• Firstly, Ethereum is a famous, big (as in traffic), and one of the first few blockchains that allow functionalities to be settled upon a financial digital ledger for opportunities like arts auction, independent financial exchange AKA DeFi, play-to-earn NFTs game, and so forth.

• Secondly, the programming language of the Ethereum chain is
  Solidity, a language created by Gavin Wood when he was a core
  member of the Ethereum team before he left to venture a new crypto chain called Polkadot.

• Therefore, for any chain to be compatible and run smoothly with the Ethereum ecosystem, solidity is also a common choice of language for those chains, however. Should any chain desire to work with Ethereum platform, they should implement the Ethereum Virtual Machine (EVM) to run EVM bytecode on their local chains. The example would be Solana, which does exactly this.

What is NFT and what is its difference from ERC20 - a fungible token?

• Uniqueness: NFTs are unique, at least together with their binding token addresses stored on blockchains. You may have 20 NFTs looking the same but of membership usage, hence, you got 20 members with 20 unique addresses, while you cannot achieve the same with ERC20 or fungible tokens in general.

• Use case: you got arts, games, credentials, and membership. For example, the “Wolf-Game” is a great illustration of how different NFT tokens with different attributes and rate of values can be used in winning, defending, or drawing a game.

• Reinforcement of traditional business: for ERC20 tokens, they share the same attributes of their traditional and physical counterpart but with digital nature. For non-fungible tokens, one can employ them to apply constraint and consolidation to the execution of traditional business, such as ratifying and proceeding music royalties.

Section 1: Preparation

Install metamask and get test tokens for contract deployment

• In this case, we use Mumbai testnet from Polygon.
• head to the metamask website and install it.

Be mindful of your 12 secret-word seed phrases

• Next, go to this mumbai faucet site to obtain the testnet tokens. 0.2 Matic is more than sufficient for this task.
• If you do not know how to configure the metamask network to the Mumbai network, you can use chainlist to do it.

Successful acquisition of the Matic tokens on the testnet

Create or download images and setup metadata file in JSON format

• For this project, we need no more than 10 images to show the impact and understand the scope of different functions.

E.g.

• Create an abc.json file with the following format:

[
  {
    "name": "test #01",
    "description": "e",
    "image": "1.png",
    "attributes": [
      {
        "trait_type": "dna",
        "value": "a"
      }
    ]
  },
  {
    "name": "test #02",
    "description": "e",
    "image": "2.png",
    "attributes": [
      {
        "trait_type": "dna",
        "value": "b"
      }
    ]
   }
]

The name field is made for identification on Opensea and the mumbai explorer, the image field would be updated later with IPFS url after we uploaded those images. And finally a list of attributes if you wish people to check on the rarity of each NFT in your collection.

If you have nth NFTs to deploy, you need to have nth JSON entries inside a [] within that json file.

Section 2: Deployment of the NFT smart contract

Go to the thirdweb contract
-Connect your metamask wallet and sign to use the thirdweb dashboard

After you logged in, you will see the above page.
Use the Signature Drop contract and finish the configuration

• Click on the Ready-to-deploy button and find the Signature Drop contract in the list

I chose this contract as it is less costly in gas which is optimal for NFT beginners or developers to try before the actual deployment. And with the allowlist function which is a common feature in popular NFT collection, we can try a lot.

• Configure and deploy the contract

Most field should be the same as those in your NFT metadata.
You can opt for modifying Royalties and Platform Fee if you need those gains.

There you go, your first thirdweb NFT contract deployed

Upload the NFTs and metadata by Batch upload

• Put all NFTs image and the metadata json file in one single folder.
• Click on the NFT tab under the section Extensions in the TestTW/YourContractName contract dashboard.
• Click on the Batch Upload button and drag the asset folder for uploading and you will see this:

• We gonna try more feature. So, let's click on the Delayed Reveal button and hit Upload

The upload fee in testnet would be around 0.005 Matic, which is quite affordable for testing.

Done!!

Set Claim (Mint) Conditions

• Choose the Public (With Allowlist)

• Creeate a csv file with the following structure and data

address,maxClaimable,price,currencyAddress
0xwteveraddressyouwanttotestwith1,2,0.1,0x
0xwteveraddressyouwanttotestwith2,5,0.2,0x

Then, hit Save Phrases

Claim NFTs to test the result

Click Claim in the NFTs tab

After paying the fee and the minting cost, there you go, NFT(s) done.

Opt (understand and use the mumbaiscan and the deployment UI)

• Click on the square arrow button next to the contract address bracket on the top of the dashboard, then you will be navigated to the contract page on mumbaiscan

You can read the contract here and read about information regarding its status

• Finally, you can also copy the contract address and go to the Opensea testnet and paste that address on the search bar, then you can check on your testing collection on the Opensea.

Section 3: Development of a minting website

Create a ReactJs project directory

• Open your terminal and cd into am empty directory, like, cd Document
• Run the following command to create a demo react app:

npx create-react-app testw

then you will see the default app wrapping up

Open the folder in your favorite code editor

Create a client ID and embedded the thirdweb html tag

• Go to the thirdweb dashboard and choose Embed section.
• Click on the Create Client Id button and copy the Embed Code

• Inside the Embed Code, search for THIRDWEB_API_KEY and replace it with the client ID.
• Go to the App.js file inside the src directory of the Reactjs application.
• Remove everything between tag <div className="App"> and its corresponding </div> and insert the embed code within it.
• Remove width, height, style from the Embed iframe tag.

Run the application and mint the NFTs with a different wallet address

• Run npm run start
• Connect wallet and mint it.

You can check my result
Upload the web application to IPFS

• Go to the Infrastructure section of thirdweb and drop your build files onto the storage sections:

When it is done, click one the copy logo besides the index file and change the format from ipfs://theaddress/index.js to ipfs.io/ipfs/theaddress/index.js. Then use the url to browse the application on the public internet!

Here are my links for your reference: Thirdweb Contract Dashboard and Web App

Conclusion

In this article, we have covered from the necessary materials for NFT contract deployment, basic knowledge of decentralized application and popular use cases, procedure of building a standard NFT contract, utilizing ReactJs for web page
development and hosting, and miscellaneous tools for inspecting your web3 outcome.

If you have followed every step in this project, I am sure you have an amazing and crystal clear understanding of how NFTs work and how to release your own.

If you have any questions, feel free to contact me at themomentofdestiny@protonmail.com.

Extra

If you want more customization of a NFT contract but hesitate as you may change the wrong things, you can check this repository for help; Hashlips has been a faithful and active participants in learning, teaching, and publishing web3 projects including several NFT projects. In addition, if you wish to deploy your NFT assets (images and json files) with another option, you can try a tool called NFT.storage which not only upload and pin your assets on
IPFS but also align and allocate your data to the Filecoin chain, which to me is a double insurance; though the procedure for the Filecoin parts may take days or weeks if the file size is considerably huge.

Ciao!!