NFT coding tutorial to build your first NFT

Blockchain is a distributed ledger that powers decentralized applications which are Dapps different from web applications in these client-side server websites where a centralized server connects to a database instead it adapts to the blockchain to store data which represents value because we need to struct who manages the database so it doesn’t change in the app’s source code. Hence, blockchain provides decentralized and immutable so we can create a digital currency or an asset. So, blockchain is made of a network of computers called nodes that contain copies of all data within the network now we can get access to the entire network by connecting to any one of these nodes. So a bunch of records what we call blocks are linked together with the preceding block (each block contains the hash value of the previous block ). So hash value is very unique and works like a fingerprint generated by using the SHA-256 algorithm. So once a transaction is made then it going to add with all the nodes and they verify it using a consensus mechanism then we can’t tamper with it transaction stays forever.

What is an NFT?

NFT is a non-fundable token, which means it cannot be exchanged for another nft within the same collection. Unlike bitcoin, where newly mined coins are worth the same as previously mined coins, each NFT has distinct characteristics. NFT smart contracts associate each nft with an id and a link to where the content of the nft can be found on the web; it can be an image, piece of music, or video. So storing large files like this directly on the blockchain is very expensive, so we stored them in a decentralized file storage system like IPFS and generated a hash that points to where these files are located on the blockchain and also keeps track of the owner of each NFT. Also, when we transfer our NFTS to new addresses, the marketplace will keep track of the NFTS and the price too. An example of a real-world NFT marketplace app is OpenSea, one of the most popular apps in the world

NFT enables creators to monetize their digital assets while also requiring collectors to own and trade unique digital items in order to avoid working in copies of that art. There are other platforms, like Super Rare and Rare, each of which has its own unique fees and regulations. You can choose the platform that suits your needs. The code we write in smart contracts defines how our NFT properties are going to work. It’s written in a solidity programming language, which is very similar to C++, Python, and Rust. This language is designed for the Ethereum blockchain.

Prerequisites

Let’s start building before we need to have:

• A Metamask extension is enough.
• An Ethereum wallet with some ETH to pay for the gas fees to build or sell any nft.
• Javascript programming language with nodejs

Dependencies you need to have

• Node.js and npm(Node Package Manager) are installed on your PC. If not downloaded on the Nodejs website.
• We also need an alchemy account, which is used to regulate our blockchain applications, including non-fungible tokens. In this platform, an API Programming programming interface) is used to manage our NFT, which is very important for the developer to access the functionalities provided by alchemy.

Adding Ether to our Faucet

Now to deploy our smart contract NFTs, we will use the free ETH networks from Sepolia Faucet and Goerli Network in this blog. To get this one, go here and enter your ETH address. After a few minutes, a popup will look like this,

You also do this in the Goerli Network, go here and then enter your ETH address. Within a few minutes, you will get the ethers if you want more you can get them after 24 hours but it’s enough for us. Before that, you need to create an Alchemy account, which is free.

Kicking off our coding project

Now create a folder anywhere you want to, and then move into the directory using the command ‘cd’. Now install npm(node package manager) as we said its prerequisite is to download nodejs.

npm init

Installing hardhat

Hardhat is a local development environment for Ethereum to test and debug smart contracts. providing tools for deploying smart contracts and management systems, too. You can go to their site here. You can also have it as an extension in the VS code. Then move to the terminal and enter these.

npm install --save-dev hardhat
npx hardhat

After using the npx hardhat option and then choosing “Create an empty hardhat.config.js,” it asks certain questions and then answers them. Then we can see a couple of files that are

Open zeppelin contract

In this case, we’ll use the final dependency, the Open Zeppelin Contract Library, which contains pre-made contracts that we can directly import into our project to get smart contract patterns and their implementations. We will use ERC-721 standards, open the terminal, and enter the following command:

npm i  @openzeppelin/contractsCode language: Bash (bash)

“i” is used to refer to the installation. Now navigate to the contract folder and create an a.sol file; let’s call it Mycontract.sol. Then import the following command because we are creating an ERC721 token.

You can see all of the framework’s folders here, where our path resolves from our node module directory, where we installed the open zeppelin package. 

pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";Code language: CSS (css)

Import the following commands: These help in building our smart contracts from scratch and also provide libraries of mathematical functions that one can apply in our contracts, which use ERC721 tokens to be managed on a blockchain. Provides us a control mechanism to use the owner address and also gives storage of URI for each token. We can easily understand their functionality by using these import statements, which are very easy and safe to use, a trustworthy platform, and reduce our mistakes in building contracts.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.1;
import "@openzeppelin/contracts/access/AccessControl.sol";
import "@openzeppelin/contracts/utils/math/SafeMath.sol";
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";Code language: JavaScript (javascript)

Now it’s time to merge the three, which are alchemy, meta mask wallet, and our smart contract.

npm i dotenv --save

So we will install the dotenv package. Then create a directory. In this env file, we are going to put API_URL, meta mask, and a private key.

API URL is where you find it in the alchemy account section when you create an app, then go to the “view key” section in the app dashboard, where you see the HTTP url. Just copy and paste it into the api_url section.

The private key is where you go to the metal mask, go to account details, then click an export private key button, enter your meta mask password, and you will get a private key. Copy and paste it into the env file as you saw in the demo below. Basically, env is a configuration file that contains key-value pairs. The purpose is to store sensitive information, such as passwords and API keys, that shouldn’t be written in source code and stored in an env file. This file shouldn’t be committed to the version control system.

API_URL="https://eth-goerli.g.alchemy.com/v2/xxxxxxxxxxexxxx""
PRIVATE_KEY="12aexxxxxxxxxxxxxxxxxxxxxxxxxxxxxx547d"Code language: Bash (bash)

Note: Never share your env file with anyone; don’t push the file add-in .gitignore; it’s better.

Install ether.js

We need to install the ether.js library because it’s a Javascript library used to interact with the Ethereum blockchain. It provides an API through which we connect with our smart contract and can perform various operations, making it easier to develop applications.

npm i --save-dev @nomiclabs/hardhat-ethers ethers@^5.0.0Code language: Bash (bash)

hardhat.config.js

Then change to the hardhat.config.js directory because we need to import Ether plugins. JS to Hardhat also sets the env file to private and can deploy to various networks, letting us deploy the contracts.

require('dotenv').config();
require("@nomiclabs/hardhat-ethers");
const { API_URL, PRIVATE_KEY } = process.env;
module.exports = {
   solidity: "0.8.1",
   defaultNetwork: "goerli",
   networks: {
      hardhat: {},
      goerli: {
         url: API_URL,
         accounts: [`0x${PRIVATE_KEY}`]
        }
    },
 }
Code language: JavaScript (javascript)

We need to compile, and using the below command, it starts downloading. Note that whatever you write in the code in Solidity with the version number must match in the hardhat.config.js file.

npx hardhat compile
// it will show like this: Downloading compiler 0.8.1Code language: Bash (bash)

Deploy script

Now we need to write a deploy script, which is

const ethers = require('ethers');//importing ethere's library

async function deploying() {
  try {
    const nft = await ethers.getContractFactory("MyNFT") 
    const nft = await MyNFT.deploy() //deploying on mynft on blokchain smart contract.
    await nft.deployed()//to be confirmed on the blockchain
    console.log("Contract deployed to the address:", myNFT.address)
  }
 catch (error) {
    console.error(error)//if any error occurs then it will shows error in the console
  }
}

deploying()Code language: JavaScript (javascript)

Deploy our contract

It’s time to deploy our contract and run the given command in the terminal.

npx hardhat run scripts/deploy.js --network hardhatCode language: Bash (bash)

Then we get the output like this:

Successfully deployed, enter the address and one can check in the Etherscan. You will see something like this:

All the information related to the transaction of our first nft deployment.

Conclusion

These are all the steps we need to follow while building our own NFT from scratch. We have complete code flexibility, but once written, everything is in uni mode and cannot be changed. We can add more layers to our code and come up with new, creative ideas. So there are a lot of scopes in Web 3.0, and the same steps should be taken in the main testnet. Also, check out the sheet here, which is mainly for developers who get stuck without a proper roadmap.