◈ My NFT Collection

ERC-721 NFT Collection deployed on Ethereum Sepolia Testnet — portofolio Web3 project #2

🌐 Live Demo

• Minting Website: https://your-nft-collection.vercel.app
• Contract on Etherscan: https://sepolia.etherscan.io/address/YOUR_CONTRACT_ADDRESS
• Collection on OpenSea Testnet: https://testnets.opensea.io/collection/my-nft-collection

---

📋 Deskripsi

My NFT Collection adalah koleksi 100 NFT unik yang di-mint di jaringan Ethereum. Setiap NFT:

• Memiliki metadata dan gambar unik yang tersimpan di IPFS (via Pinata)
• Menggunakan standar ERC-721 (OpenZeppelin)
• Bisa di-mint langsung dari website menggunakan MetaMask

Proyek ini adalah portfolio project Web3 #2 — setelah sebelumnya membangun ERC-20 token.

---

🛠 Tech Stack

Layer	Teknologi
Smart Contract	Solidity 0.8.20 + OpenZeppelin 5.0
Development	Hardhat
Storage	IPFS via Pinata
Frontend	React 18 + Ethers.js v6
Network	Ethereum Sepolia Testnet
Verifikasi	Etherscan

---

📁 Struktur Proyek

nft-collection/
├── contracts/
│   └── MyNFTCollection.sol     # Smart contract ERC-721
├── scripts/
│   ├── deploy.js               # Deploy ke Sepolia
│   └── uploadToIPFS.js         # Upload gambar & metadata ke IPFS
├── test/
│   └── MyNFTCollection.test.js # Unit tests (opsional)
├── assets/
│   └── images/                 # File gambar NFT (1.png, 2.png, dst.)
├── frontend/
│   ├── public/
│   │   └── index.html
│   └── src/
│       ├── App.jsx             # Komponen utama
│       ├── App.css             # Styling
│       ├── config.js           # ABI + contract address
│       └── hooks/
│           └── useWeb3.js      # Custom hook Web3
├── hardhat.config.js
├── package.json
├── .env.example                # Template environment variables
└── .gitignore

---

⚡ Quick Start

Prerequisites

• Node.js v18+
• MetaMask browser extension
• Sepolia ETH (gratis dari faucet)
• Akun Alchemy atau Infura (RPC URL)
• Akun Pinata (IPFS upload)

1. Clone & Install

git clone https://github.com/yourusername/nft-collection.git
cd nft-collection

# Install dependencies Hardhat
npm install

# Install dependencies frontend
cd frontend && npm install && cd ..

2. Setup Environment Variables

# Copy template
cp .env.example .env

# Edit .env dan isi semua variabel:
nano .env

Variabel yang dibutuhkan:

PRIVATE_KEY=your_wallet_private_key
SEPOLIA_RPC_URL=https://eth-sepolia.g.alchemy.com/v2/your_key
PINATA_API_KEY=your_pinata_api_key
PINATA_SECRET_API_KEY=your_pinata_secret
ETHERSCAN_API_KEY=your_etherscan_key      # opsional

3. Upload Gambar ke IPFS

# Taruh gambar NFT di folder assets/images/
# Nama file: 1.png, 2.png, 3.png, dst.
mkdir -p assets/images
# (taruh gambar di sini)

# Upload ke IPFS via Pinata
npm run upload-ipfs

Setelah berhasil, copy metadataURI dari output ke frontend/src/config.js → array TOKEN_URIS.

4. Compile & Deploy Smart Contract

# Compile kontrak
npm run compile

# Deploy ke Sepolia
npm run deploy:sepolia

Output:

✅ MyNFTCollection deployed!
Contract address: 0xABC...123

Copy contract address ke:

• frontend/src/config.js → CONTRACT_ADDRESS
• .env → REACT_APP_CONTRACT_ADDRESS

5. Aktifkan Minting

Setelah deploy, minting masih false (off) untuk keamanan. Aktifkan via Etherscan:

1. Buka kontrak di Sepolia Etherscan
2. Tab Contract → Write Contract
3. Connect wallet (harus owner)
4. Panggil setMintingActive(true)

6. Jalankan Frontend

cd frontend
npm start

Buka http://localhost:3000 ✨

---

📜 Smart Contract

Fungsi Utama

Fungsi	Akses	Keterangan
mint(tokenURI)	Public (payable)	Mint 1 NFT dengan harga mintPrice
ownerMint(to, tokenURI)	Owner	Mint gratis untuk airdrop
setMintingActive(bool)	Owner	Toggle minting on/off
setMintPrice(price)	Owner	Ubah harga mint
withdraw()	Owner	Tarik ETH dari kontrak
totalSupply()	Public	Total NFT ter-mint
remainingSupply()	Public	Sisa slot yang bisa di-mint
canMint(address)	Public	Cek apakah wallet bisa mint

Fitur Keamanan

• ✅ Reentrancy protection (Checks-Effects-Interactions pattern)
• ✅ Max supply enforcement (100 NFT)
• ✅ Per-wallet mint limit (max 5 per wallet)
• ✅ Owner-only admin functions
• ✅ Minting on/off switch

---

🖼 NFT Metadata Format

Setiap NFT mengikuti standar metadata OpenSea:

{
  "name": "Genesis #1",
  "description": "The first NFT of the collection.",
  "image": "ipfs://CID_GAMBAR",
  "attributes": [
    { "trait_type": "Rarity", "value": "Legendary" },
    { "trait_type": "Type", "value": "Genesis" },
    { "trait_type": "Network", "value": "Ethereum" }
  ]
}

---

🚀 Deploy Frontend ke Vercel

cd frontend
npm run build

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Tambahkan environment variable di Vercel Dashboard:

• REACT_APP_CONTRACT_ADDRESS = alamat kontrak kamu

---

✅ Verifikasi Kontrak (Opsional)

Membuat source code kontrak terlihat publik di Etherscan (bagus untuk portofolio):

npx hardhat verify --network sepolia YOUR_CONTRACT_ADDRESS "YOUR_WALLET_ADDRESS"

---

📚 Yang Saya Pelajari

Membangun proyek ini mengajarkan saya:

1. ERC-721 standard — bagaimana NFT berbeda dari ERC-20 (unik vs fungible)
2. IPFS & content addressing — metadata tidak tersimpan di blockchain langsung
3. OpenZeppelin patterns — Ownable, URI Storage, Counters
4. Ethers.js v6 — connect wallet, baca kontrak, kirim transaksi dari React
5. Security patterns — Checks-Effects-Interactions untuk mencegah reentrancy

---

🔗 Resources

• OpenZeppelin Contracts Docs
• Hardhat Documentation
• Ethers.js v6 Docs
• Pinata IPFS
• Sepolia Faucet
• OpenSea Testnet

---

📄 License

MIT License — lihat file LICENSE

---

Dibuat dengan ❤️ sebagai portofolio Web3 project — membuktikan kemampuan full-stack blockchain development dari smart contract hingga frontend.