Day 21 — Build Digital Collectibles (ERC-721 NFTs) — Full tutorial (Foundry + React)

nft-project/
├─ contracts/
│  └─ MyCollectible.sol
├─ script/
│  └─ Deploy.s.sol
├─ test/
│  └─ MyCollectible.t.sol
├─ frontend/
│  ├─ package.json
│  └─ src/
│     ├─ App.jsx
│     ├─ nftService.js
│     └─ abi.json
├─ tools/
│  └─ upload-to-nftstorage.js
├─ foundry.toml
└─ README.md

forge init nft-project
cd nft-project
# install OpenZeppelin v4.9.3 (contains Counters if you prefer) or use latest (v5.x) and an internal counter
forge install OpenZeppelin/openzeppelin-contracts@v4.9.3 --no-git

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

/// @title MyCollectible — simple ERC721 collectibles
/// @notice Owner can mint collectibles and set tokenURI pointing to metadata (IPFS allowed)
contract MyCollectible is ERC721URIStorage, Ownable {
    uint256 private _tokenIds;

    constructor() ERC721("MyCollectible", "MYC") {}

    /// @notice Mint collectible to a recipient with tokenURI (ex: ipfs://Qm...)
    function mintTo(address recipient, string memory tokenURI) public onlyOwner returns (uint256) {
        _tokenIds += 1;
        uint256 newItemId = _tokenIds;
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);
        return newItemId;
    }

    /// @notice Total minted so far
    function totalMinted() external view returns (uint256) {
        return _tokenIds;
    }
}

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "forge-std/Script.sol";
import "../contracts/MyCollectible.sol";

contract DeployMyCollectible is Script {
    function run() external {
        vm.startBroadcast();
        new MyCollectible();
        vm.stopBroadcast();
    }
}

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "forge-std/Test.sol";
import "../contracts/MyCollectible.sol";

contract MyCollectibleTest is Test {
    MyCollectible nft;
    address ownerAddr;
    address user = address(0xBEEF);

    function setUp() public {
        ownerAddr = address(this);
        nft = new MyCollectible();
    }

    function testOwnerMint() public {
        string memory uri = "ipfs://test-metadata";
        uint256 id = nft.mintTo(user, uri);
        assertEq(id, 1);
        assertEq(nft.ownerOf(1), user);
        assertEq(nft.totalMinted(), 1);
        assertEq(nft.tokenURI(1), uri);
    }

    function testOnlyOwner() public {
        // try minting from another address (simulate)
        vm.prank(address(0x1234));
        vm.expectRevert();
        nft.mintTo(address(0x9999), "ipfs://x");
    }
}

forge test

anvil
# It prints RPC URL (http://127.0.0.1:8545) and pre-funded accounts

forge build
forge script script/Deploy.s.sol --rpc-url http://127.0.0.1:8545 --broadcast

// tools/upload-to-nftstorage.js
// Usage: NFT_STORAGE_KEY=your_key node tools/upload-to-nftstorage.js ./assets/my-image.png "My Collectible #1" "A description"
import fs from "fs";
import path from "path";
import fetch from "node-fetch";

const API = "https://api.nft.storage/upload";

async function main() {
  const key = process.env.NFT_STORAGE_KEY;
  if (!key) throw new Error("Set NFT_STORAGE_KEY env var");
  const [,, imagePath, name, description] = process.argv;
  if (!imagePath || !name) throw new Error("Usage: node upload-to-nftstorage.js <image> <name> [description]");

  const imageData = fs.readFileSync(path.resolve(imagePath));
  // multipart upload: first upload the image, then craft metadata JSON pointing to image CID
  // For simplicity we'll upload one bundle with metadata
  const metadata = {
    name,
    description: description || "",
    image: {
      "@type": "Buffer",
      data: Array.from(imageData)
    }
  };

  // nft.storage expects a file upload; more robust script would use 'nft.storage' npm package
  const resp = await fetch(API, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${key}`,
      Accept: "application/json"
    },
    body: imageData
  });

  if (!resp.ok) {
    console.error("Upload failed", await resp.text());
    process.exit(1);
  }
  const j = await resp.json();
  console.log("Upload result:", j);
  // Real workflows: use nft.storage client SDK to upload both image and metadata and get CID for JSON
}

main().catch(e => { console.error(e); process.exit(1); });

{
  "name": "MyCollectible #1",
  "description": "First collectible in the series",
  "image": "ipfs://bafybe.../image.png",
  "attributes": [
    { "trait_type": "rarity", "value": "common" }
  ]
}

import { ethers } from "ethers";
import abi from "./abi.json";

const CONTRACT_ADDRESS = "<PASTE_DEPLOYED_ADDRESS>";

export async function connectWallet() {
  if (!window.ethereum) throw new Error("No wallet found");
  await window.ethereum.request({ method: "eth_requestAccounts" });
  const provider = new ethers.BrowserProvider(window.ethereum);
  return provider;
}

export async function mintNFT(tokenURI) {
  const provider = await connectWallet();
  const signer = await provider.getSigner();
  const contract = new ethers.Contract(CONTRACT_ADDRESS, abi, signer);
  // call mintTo (onlyOwner in our example) — to test locally add owner as a local Anvil account
  const user = await signer.getAddress();
  const tx = await contract.mintTo(user, tokenURI);
  await tx.wait();
  return tx.hash;
}

import React, { useState } from "react";
import { mintNFT } from "./nftService";

export default function App() {
  const [uri, setUri] = useState("");
  const [status, setStatus] = useState("");

  const handleMint = async () => {
    try {
      setStatus("Minting...");
      const tx = await mintNFT(uri);
      setStatus(`Minted: ${tx}`);
    } catch (e) {
      setStatus(`Error: ${e.message}`);
    }
  };

  return (
    <div style={{ padding: 40 }}>
      <h1>My Collectible — Mint</h1>
      <input type="text" placeholder="ipfs://..." value={uri} onChange={e => setUri(e.target.value)} style={{ width: '60%' }} />
      <button onClick={handleMint}>Mint</button>
      <p>{status}</p>
    </div>
  );
}

cd frontend
npm install
npm run dev
# open http://localhost:5173

   anvil

   forge script script/Deploy.s.sol --rpc-url http://127.0.0.1:8545 --broadcast

   cd frontend
   npm run dev