How to Build a Full-Stack NFT dApp -A Complete Guide

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Burnable.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
contract NFT721 is ERC721, ERC721Burnable, Ownable {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIdCounter;
    mapping(uint => string) public tokenUri;
    constructor() ERC721("NFT721", "NFT") {}
    function safeMint(string memory _uri) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(msg.sender, tokenId);
        _setURI(tokenId, _uri);
    }

    function _setURI(uint256 _tokenId, string memory newuri) private {
        tokenUri[_tokenId] = newuri;
    }

    function uri(uint256 _tokenId) public view returns (string memory) {
        string memory currentBaseURI = tokenUri[_tokenId];
        return string(abi.encodePacked(currentBaseURI));
    }
}

require("@nomicfoundation/hardhat-toolbox");

// Go to https://infura.io, sign up, create a new API key
// in its dashboard, and replace "KEY" with it
const INFURA_API_KEY = "KEY";

// Replace this private key with your Sepolia account private key
// To export your private key from Coinbase Wallet, go to
// Settings > Developer Settings > Show private key
// To export your private key from Metamask, open Metamask and
// go to Account Details > Export Private Key
// Beware: NEVER put real Ether into testing accounts
const SEPOLIA_PRIVATE_KEY = "YOUR SEPOLIA PRIVATE KEY";

module.exports = {
  solidity: "0.8.19",
  networks: {
    sepolia: {
      url: `https://sepolia.infura.io/v3/${INFURA_API_KEY}`,
      accounts: [SEPOLIA_PRIVATE_KEY]
    }
  }
};

import { useEffect, useState } from "react";
import "./App.css";
import Web3 from "web3";
import axios from "axios";
import ABI from "./ABI.json";

const NFTContractAddress = "0x2330E22304853cDB96893B4c801D7F5e37904Dd4";

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

  const [formData, setFormData] = useState({
    name: "",
    description: "",
    image: null,
  });

  const connectToMetaMask = async () => {
    const provider = window.ethereum;
    if (!provider) {
      alert("Please install MetaMask");
      return;
    }

    const accounts = await provider.request({ method: "eth_requestAccounts" });
    const web3 = new Web3(provider);

    const contractInstance = new web3.eth.Contract(ABI.abi, NFTContractAddress);

    setContract(contractInstance);
    setWeb3(web3);
    setAccount(accounts[0]);
  };

  useEffect(() => {
    connectToMetaMask();
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleImageChange = (e) => {
    setFormData({ ...formData, image: e.target.files[0] });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const { name, description, image } = formData;
      const formDataUpload = new FormData();
      formDataUpload.append("name", name);
      formDataUpload.append("description", description);
      formDataUpload.append("image", image);

      const response = await axios.post(
        "http://localhost:3001/upload/web3storage",
        formDataUpload,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      console.log("Response from server:", response.data);
      console.log("URL:", response.data.ipfsUrl.toString());

      const result = await contract.methods
        .safeMint(response.data.ipfsUrl.toString())
        .send({ from: account, gas: 2000000 });
      console.log("Minted NFT:", result);

      // You can display a success message or redirect the user after successful upload
    } catch (error) {
      console.error("Error uploading image:", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <div>
          <h1>Full Stack NFT dApp</h1>
          <form onSubmit={handleSubmit}>
            <div>
              <label>Name:</label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
              />
            </div>
            <div>
              <label>Description:</label>
              <input
                type="text"
                name="description"
                value={formData.description}
                onChange={handleInputChange}
              />
            </div>
            <div>
              <label>Image:</label>
              <input
                type="file"
                name="image"
                accept="image/*"
                onChange={handleImageChange}
              />
            </div>
            <button type="submit">Mint NFT</button>
          </form>
        </div>
      </header>
    </div>
  );
}

export default App;