Build Web3 NFT Website Using React, Ethers and Hardhat

1. Configure your deployment script with the desired network settings.
2. Run the deployment script using the command npm run deploy.
   The script will compile and deploy your smart contract to the specified network, and the contract's address will be logged in the console.

• Create a new directory for your project and navigate to it in your terminal.
• Initialize a new React project using the following command:

npx create-react-app mint-website

• Move into the project directory:

• Install the necessary dependencies by running the following commands

npm install ethers hardhat @nomiclabs/hardhat-ethers web3

Step 2: Writing a NFT Mint Smart Contract

• Create a new directory called contracts in the root of your project.
• Inside the contracts directory, create a new file called NFT.sol and add the following code:

// 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 tokenURI) 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

• Create a new directory called scripts in the root of your project.
• Inside the scripts directory, create a new file called deploy.js and add the following code:

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);
    });

• Update the package.json file in the project root to include a new script called "deploy":

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "hardhat run scripts/deploy.js --network <network>"
}

Replace <network> with the desired network (e.g., "rinkeby" for the Rinkeby test network).

Step 4: Creating a Full Mint Website

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 (
        <div className="App">
            <h1>Flashy NFT Mint Website</h1>
            {minted ? (
                <p>Congratulations! Your NFT has been minted.</p>
            ) : (
                <button onClick={mintNFT} disabled{loading}>
                    {loading ? "Minting..." : "Mint NFT"}
                </button>
            )}
        </div>
    );
}

export default App;

Replace "CONTRACT_ADDRESS" with the address of your deployed smart contract, and "TOKEN_URI" with the desired token URI for your NFT.

Step 5: Give Mint Website some Life with CSS Styling

.
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

npm start

• Open your web browser and navigate to http://localhost:3000 to see the mint website in action.
• Click the "Mint NFT" button to mint a new NFT. You'll be prompted to connect your Ethereum account and confirm the transaction.