Build Web3 NFT Website Using React, Ethers and Hardhat Free Course

This beginner-friendly course will help you build a Web3 mint website where you can sell NFTs. This tutorial will mainly focus on non-fungible tokens (NFTs). It will guide you through creating a web application that will help you mint your own unique digital assets on the Ethereum blockchain. To follow this tutorial, you need some basic understanding of popular technologies such as React, Ethers, Hardhat, and Web3. These technologies will help you to develop the mint website from the ground up.

Who Will Benefit From This?

This tutorial contains step-by-step information on everything you need to know about NFT, so you don’t have to be a seasoned professional. Even if you are just curious about NFTs or you want to start your own mining platform, this guide has enough information to bring your vision to reality.

So, without further ado, let’s get started.

What You Need For This Tutorial?

To kick-start this project, you will need to prepare your system. The first step is to install Node.js and npm (Node Package Manager) on your system. Although there is no skill set required for this tutorial, a basic understanding of HTML, CSS, and JavaScript will help you navigate it seamlessly.

Mint Website – An Overview

A mint website is a web application that helps the user create their own NFTs. This website contains a basic user interface. Through this interface, the user interacts with the application and starts creating a new unique NFT.

Within this tutorial, the Mint website will be developed using basic technologies like React, Ethers, Hardhat, and Web3. The website will have a button in its interface. The user can simply click the button and get to mint their NFT.

Clicking this button will simply enable the website to connect with the Ethereum network. Consequently, this will trigger the user to connect their Ethereum account and commit a transaction to a smart contract that is running on the network. As a result of this process, smart contracts will mint the NFT and allocate it to the user.

The website will offer a very simple, aesthetic, and user-friendly interface to the user for creating the NFTs. Each NFT allocated will be a unique digital asset with verifiable ownership, so it will have a much better worth. For an enhanced user experience, the website can be customized with additional features. The project has a scope for further improvement based on the requirements of the user or the owner.

What is Ethers?

It is a JavaScript library offering a very consistent yet simple interface that can be used to interact with Ethereum and other similar networks. Ethers allow developers to write code to interact with smart contracts, commit transactions, and provide other financial services.

What is Hardhat?

It is a development environment used for Ethereum smart contracts. Hardhat offers a set of essential tools and other similar functions for compiling, deploying, testing, and debugging smart contracts. It is a very important yet very extensible development environment that is used for supporting other similar frameworks i.e. React and Truffle.

What Is A Smart Contract?

Within the blockchain, smart contracts play an essential role. A smart contract is an automated contract with essential terms and conditions of agreement. It is written directly into the code and cannot be changed once deployed.

Smart contracts are deployed via a blockchain network and can automatically commit all the terms and conditions that are added to the contracts.

How Do You Deploy Smart Contracts to a Test Network?

Deploying smart contracts to a test network like Rinkeby is easy. Here is a step-by-step process that will help you deploy a smart contract to a test network:

Start by configuring the deployment script with the desired network settings.

Now, you can execute the deployment script using the command npm run deploy.

This command will trigger the compilation process, and you will be able to execute the smart contract for your desired network. Eventually, the contract's address will be logged in the console.

What is a Token URI?

The token identifier is an exclusive identifier that denotes the metadata linked with a non-fungible token (NFT). The Token URI contains all the information on the NFT, including the name, description, image, and other attributes.

This token can be saved on-chain, or it can also be hosted off-chain, depending on the preference. The function of this token is to store and then deliver detailed information about the NFT when needed.

Step 1: Setup React, Ethers, Hardhat, and Web3

1. To start the project, you need to create a new directory. Now you can get to it in your terminal.
2. To start a new React project, here is a command that you can use:

npx create-react-app mint-website

1. Now, it’s time to navigate to the project directory:

cd mint-website

1. Now use the following command to install the essential, necessary dependencies for the project:

npm install ethers hardhat @nomiclabs/hardhat-ethers web3

Step 2: Write an NFT Mint Smart Contract

1. After you are done with setup, it’s time to create contracts at the root of your project. For this, you have to create a new directory and name it contracts.
2. Within your contracts directory, you can add a new file and name it NFT.sol.
3. Now use the following code and add it to the created file:

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

import "@openzeppelin/contracts/utils/Counters.sol";

contract NFT is ERC721 {

   using Counters for Counters.Counter;

Counters.Counter private _tokenIds;

constructor() ERC721("MyNFT", "NFT") {}

function mintNFT(address recipient, string memory token URI) public returns (uint256) {

_tokenIds.increment();

uint256 newTokenId=_tokenIds.current();

_mint(recipient, newTokenId);

_setTokenURI(newTokenId, tokenURI);

return newTokenId;

   }

}

Step 3: How to Deploy Smart Contract to Test Network

1. Make a new directory in the root of your project and name it scripts.
2. Now, within this script directory, you have to create another file and name it deploy.js.
3. For the data, you can use the following code and add it to the scripts directory.

const hre=require("hardhat");

async function main() {

   const NFT=await hre.ethers.getContractFactory("NFT");

   const nft=await NFT.deploy();

   await nft.deployed();

console.log("NFT contract deployed to:", nft.address);

}

main()

.then(() => process.exit(0))

.catch((error) => {

console.error(error);

process.exit(1);

   });

1. Update the package.json file that you have within the project root.
2. Include a new script and name it "deploy."
3. Here is a script code that you can copy within the file:

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject",

"deploy": "hardhat run scripts/deploy.js --network "

}

To customize this code, you can replace with your specified network (e.g., "rinkeby" for the Rinkeby test network).

Step 4: Creating a Full Mint Website

1. Open your project root and then navigate to the App.js file.
2. Replace the content within this file with the following code:

import React, { useState } from "react";

import { ethers } from "ethers";

import "./App.css";

function App() {

   const [minted, setMinted] = useState(false);

   const [loading, setLoading] = useState(false);

   const mintNFT=async () => {

       try {

setLoading(true);

// Connect to Ethereum provider

const provider=new ethers.providers.Web3Provider(window.ethereum);

// Request access to user's Ethereum account

await window.ethereum.enable();

// Get the signer (current user)

const signer=provider.getSigner();

// Load the smart contract

const contractAddress="CONTRACT_ADDRESS"; // Replace with your deployed contract address

const contractABI=[

// Add the contract's ABI here

];

           const contract=new ethers.Contract(contractAddress, contractABI, signer);

// Call the mintNFT function on the contract

const tx=await contract.mintNFT(signer.getAddress(), "TOKEN_URI");

// Wait for the transaction to be mined

await tx.wait();

setMinted(true);

       } catch (error) {

console.error(error);

       } finally {

setLoading(false);

       }

   };

   return (

Flashy NFT Mint Website

{minted ? (

Congratulations! Your NFT has been minted.

) : (

                   {loading ? "Minting..." : "Mint NFT"}

)}

   );

}

export default App;

1. For code customization, replace "CONTRACT_ADDRESS" and add the address of your deployed smart contract.
2. After that, replace "TOKEN_URI" with the specific token URI for your NFT.

Step 5: Give Mint Website some Life with CSS Styling

1. Navigate to the project root and open the App.css file.
2. Within your App.css file, add the following code:

.

App {

text-align: center;

margin-top: 100px;

}

button {

padding: 10px 20px;

font-size: 18px;

background-color: #5cb85c;

   color: #fff;

   border: none;

   cursor: pointer;

border-radius: 4px;

}

button:disabled {

background-color: #ccc;

   cursor: not-allowed;

}

Step 6: Fully Build a Frontend Mint Website

1. Now, you need to start the development server.
2. Here is a simple code that you can copy and paste into the terminal to initiate the development server.

npm start

1. To see the Mint website, you can now open your web browser and then get to http://localhost:3000.
2. You can mint a new NFT anytime by clicking the "Mint NFT" button. You can also connect your Ethereum account with it and then confirm the transaction.

Congrats! You just launched your Web3 mint website using React, Ethers, Hardhat, and Web3.