WEB3 Token Gating. Create an NFT gated website from scratch

Creating a Web3 token-gated website with NFT integration involves several key steps, from understanding the basics of Web3 and NFTs to implementing the necessary smart contracts and frontend components. In this guide, we'll walk through the process of building a simple NFT-gated website using popular technologies such as Ethereum, Solidity, and React.

Enroll Now

Understanding Web3 and NFTs

Web3 refers to the third era of the internet, where decentralized protocols and technologies power applications. It enables direct interaction between users and applications without the need for intermediaries. NFTs, or non-fungible tokens, are unique digital assets that can represent ownership of various items, such as digital art, music, or even access to exclusive content.

Prerequisites

Before diving into the implementation, ensure that you have the following tools and knowledge:

1. Node.js and npm: For building and running the frontend application.
2. Truffle: A development environment for Ethereum.
3. Ganache: A local blockchain for testing smart contracts.
4. Metamask: A cryptocurrency wallet and gateway to blockchain apps.

Setting Up the Project

Let's start by creating a new project directory and initializing it with a basic structure.

bash
mkdir nft-gated-website
cd nft-gated-website
npm init -y

Smart Contract Development

Create a new file named NFTGatedWebsite.sol for the smart contract.

solidity
// NFTGatedWebsite.sol
pragma solidity ^0.8.0;

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

contract NFTGatedWebsite is ERC721 {
    uint256 public nextTokenId;
    address public admin;

    constructor() ERC721("NFTGatedWebsite", "NFTGW") {
        admin = msg.sender;
    }

    modifier onlyAdmin() {
        require(msg.sender == admin, "Not authorized");
        _;
    }

    function mint() external onlyAdmin {
        _safeMint(msg.sender, nextTokenId);
        nextTokenId++;
    }
}

Setting Up Frontend with React

Initialize the React app and install the necessary dependencies.

bash
npx create-react-app client
cd client
npm install web3 react-web3 truffle-contract

Connecting Frontend with Smart Contract

Modify client/src/App.js to interact with the smart contract.

jsx
// client/src/App.js
import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import TruffleContract from 'truffle-contract';
import NFTGatedWebsiteArtifact from './contracts/NFTGatedWebsite.json';

function App() {
  const [web3, setWeb3] = useState(null);
  const [accounts, setAccounts] = useState([]);
  const [contract, setContract] = useState(null);

  useEffect(() => {
    const initWeb3 = async () => {
      if (window.ethereum) {
        const _web3 = new Web3(window.ethereum);
        try {
          await window.ethereum.enable();
          setWeb3(_web3);
        } catch (error) {
          console.error('User denied account access');
        }
      } else if (window.web3) {
        setWeb3(new Web3(window.web3.currentProvider));
      } else {
        console.error('No web3 detected. Consider installing MetaMask');
      }
    };

    initWeb3();
  }, []);

  useEffect(() => {
    const initContract = async () => {
      try {
        const _contract = TruffleContract(NFTGatedWebsiteArtifact);
        _contract.setProvider(web3.currentProvider);
        const instance = await _contract.deployed();
        setContract(instance);
      } catch (error) {
        console.error('Error initializing contract', error);
      }
    };

    if (web3) {
      initContract();
    }
  }, [web3]);

  const mintNFT = async () => {
    try {
      await contract.mint({ from: accounts[0] });
      alert('NFT Minted successfully!');
    } catch (error) {
      console.error('Error minting NFT', error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>NFT-Gated Website</h1>
        {web3 && contract ? (
          <div>
            <p>Your address: {accounts[0]}</p>
            <button onClick={mintNFT}>Mint NFT</button>
          </div>
        ) : (
          <p>Loading...</p>
        )}
      </header>
    </div>
  );
}

export default App;

Running the Application

Start Ganache to have a local blockchain running, and deploy the smart contract using Truffle.

bash
truffle migrate --reset

Run the React app.

bash
cd client
npm start

Visit http://localhost:3000 in your browser, and you should see the basic interface allowing you to connect your wallet (using MetaMask) and mint an NFT.

Conclusion

This guide provides a basic outline for creating a Web3 token-gated website using NFTs. Depending on your specific use case, you might need to enhance and customize the smart contract, frontend, and backend components. Additionally, consider security best practices, testing, and deploying your smart contract to the Ethereum mainnet for production use.

Get -- > WEB3 Token Gating. Create an NFT gated website from scratch