Build Web3 NFT Website Using React, Ethers and Hardhat



Intro




Welcome to this beginner-friendly tutorial on building a flashy Web3 mint website! In this tutorial, we'll explore the exciting world of non-fungible tokens (NFTs) and learn how to create a web application that enables users to mint their own unique digital assets on the Ethereum blockchain.

We'll be using popular technologies like React, Ethers, Hardhat, and Web3 to build our mint website from scratch. Whether you're a developer looking to dive into Web3 development or simply curious about NFTs and want to build your own minting platform, this tutorial will provide you with step-by-step instructions to bring your vision to life.

So, let's get started and embark on this journey to create a captivating mint website together!




Prerequisites



Before you begin, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You'll also need basic knowledge of HTML, CSS, and JavaScript.



What is the mint website?


A mint website, refers to a web application that allows users to mint or create their own non-fungible tokens (NFTs). The mint website provides a user interface where users can interact with the application and initiate the process of creating a new unique NFT.

In the tutorial, the mint website is built using React, Ethers, Hardhat, and Web3. It includes a button that users can click to mint their NFT. When the button is clicked, the website connects to the Ethereum network, prompts the user to connect their Ethereum account, and sends a transaction to a smart contract deployed on the network. The smart contract then mints the NFT and assigns it to the user.

The mint website provides a user-friendly and visually appealing interface for users to participate in the creation of NFTs, which are unique digital assets with verifiable ownership and scarcity. The mint website can be customized and enhanced with additional features based on the specific requirements of the project or application.




What is Ethers?



Ethers is a JavaScript library that provides a simple and consistent interface for interacting with Ethereum and Ethereum-like networks. It allows developers to write code to interact with smart contracts, send transactions, and more.



What is Hardhat?



Hardhat is a development environment for Ethereum smart contracts. It provides a set of tools and utilities to compile, deploy, test, and debug smart contracts. Hardhat is highly extensible and supports popular frameworks like React and Truffle.



What is a smart contract?



A smart contract is a self-executing contract with the terms of the agreement written directly into code. Smart contracts are deployed on a blockchain network and can automatically enforce the rules and conditions defined within them.



How do I deploy my smart contract to a test network?



To deploy your smart contract to a test network, such as Rinkeby, follow these steps:


  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.



What is a token URI?


A token URI is a unique identifier that represents metadata associated with a non-fungible token (NFT). It typically includes information such as the name, description, image, and other attributes of the NFT. The token URI can be stored on-chain or hosted off-chain and is used to provide detailed information about the NFT




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



  • 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:
cd mint-website


  • 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


Open the App.js file in the project root and replace its contents 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 (
        <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



Open the App.css file in the project root and add the following CSS 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


Run the following command in the terminal to start the development server

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.
Congratulations! You have successfully built a flashy Web3 mint website using React, Ethers, Hardhat, and Web3. Users can now mint NFTs by interacting with your website.



Want to find a web3 job?

Receive emails of Build Web3 NFT Website Using React, Ethers and Hardhat

More by EdRoh
Ask me anything