Modul master Level 3 VibeKoding: Smart Contract & Pembuatan DApp NFT Minting.Modul master Level 3 VibeKoding: Smart Contract & Pembuatan DApp NFT Minting.
In this tutorial, we will complete a full closed loop: write an NFT smart contract from scratch, deploy it to the Ethereum testnet, mint your own NFT, and view it on OpenSea. The whole process uses browser-based tools with no local environment setup required, and can be finished in 10 minutes.In this tutorial, we will complete a full closed loop: write an NFT smart contract from scratch, deploy it to the Ethereum testnet, mint your own NFT, and view it on OpenSea. The whole process uses browser-based tools with no local environment setup required, and can be finished in 10 minutes.
For this tutorial, you should at least have:For this tutorial, you should at least have:
> Zero cost, zero setup: the entire process uses browser-based tools (Remix IDE), no Node.js / Hardhat installation needed; code uses OpenZeppelin official secure templates; after minting, you can view your NFT on OpenSea testnet.> Zero cost, zero setup: the entire process uses browser-based tools (Remix IDE), no Node.js / Hardhat installation needed; code uses OpenZeppelin official secure templates; after minting, you can view your NFT on OpenSea testnet.
NFT (Non-Fungible Token) is a type of digital asset on blockchain. Unlike fungible tokens such as Bitcoin or Ether, every NFT is unique, like no two paintings in the world being exactly the same.NFT (Non-Fungible Token) is a type of digital asset on blockchain. Unlike fungible tokens such as Bitcoin or Ether, every NFT is unique, like no two paintings in the world being exactly the same.
You can understand an NFT as a "certificate of collection in the digital world." It can represent:You can understand an NFT as a "certificate of collection in the digital world." It can represent:
The core value of NFTs is: they use blockchain technology to prove "this digital item belongs to you," and that proof is public, transparent, and tamper-resistant.The core value of NFTs is: they use blockchain technology to prove "this digital item belongs to you," and that proof is public, transparent, and tamper-resistant.
🖼️ placeholder: A concept diagram of NFTs: a digital artwork on the left, ownership record on blockchain on the right, connected by arrowsplaceholder: A concept diagram of NFTs: a digital artwork on the left, ownership record on blockchain on the right, connected by arrows
A smart contract is a piece of code that runs on blockchain. You can think of it as an "automatically executed contract". Once deployed on-chain, it runs automatically according to code logic, and no one can tamper with it.A smart contract is a piece of code that runs on blockchain. You can think of it as an "automatically executed contract". Once deployed on-chain, it runs automatically according to code logic, and no one can tamper with it.
NFTs are created and managed through smart contracts. When you "mint" an NFT, you are actually calling a function in the smart contract to write on-chain: "NFT #0 belongs to your wallet address."NFTs are created and managed through smart contracts. When you "mint" an NFT, you are actually calling a function in the smart contract to write on-chain: "NFT #0 belongs to your wallet address."
We will use Solidity to write the contract. Do not worry. With ready-made templates from OpenZeppelin, you only need to write fewer than 15 lines of code.We will use Solidity to write the contract. Do not worry. With ready-made templates from OpenZeppelin, you only need to write fewer than 15 lines of code.
We will mint a "Vibe Coder Learning Certificate" NFT to prove you completed this tutorial and learned blockchain development basics. This NFT will:We will mint a "Vibe Coder Learning Certificate" NFT to prove you completed this tutorial and learned blockchain development basics. This NFT will:
Of course, you can change it to any theme you like: AI-generated artwork, event souvenir card, pixel avatar, and more. The NFT content is fully up to you.Of course, you can change it to any theme you like: AI-generated artwork, event souvenir card, pixel avatar, and more. The NFT content is fully up to you.
Ethereum has "mainnet" and "testnet":Ethereum has "mainnet" and "testnet":
| Comparison | Mainnet | Testnet (Sepolia) |
|---|---|---|
| ETH value | Real money | Free to claim, no real value |
| Deployment cost | Requires real gas fees | Completely free |
| Use case | Production release | Learning, testing, development |
| Functional difference | None | Same as mainnet |
Testnet and mainnet are functionally the same. The only difference is that testnet ETH has no real value. So you can safely learn and experiment on testnet without worrying about spending money.Testnet and mainnet are functionally the same. The only difference is that testnet ETH has no real value. So you can safely learn and experiment on testnet without worrying about spending money.
We will complete the flow in these steps:We will complete the flow in these steps:
MetaMask is the most popular Ethereum wallet. It is a browser extension that lets you interact with blockchain apps.MetaMask is the most popular Ethereum wallet. It is a browser extension that lets you interact with blockchain apps.
🖼️ placeholder: MetaMask installation and wallet creation flow screenshots: install extension -> create wallet -> set password -> backup recovery phraseplaceholder: MetaMask installation and wallet creation flow screenshots: install extension -> create wallet -> set password -> backup recovery phrase
MetaMask connects to Ethereum mainnet by default. We need to switch to Sepolia testnet:MetaMask connects to Ethereum mainnet by default. We need to switch to Sepolia testnet:
If you do not see Sepolia, click "Add network" and add manually:If you do not see Sepolia, click "Add network" and add manually:
| Config Item | Value |
|---|---|
| Network Name | Sepolia test network |
| RPC URL | https://rpc.sepolia.org |
| Chain ID | 11155111 |
| Currency Symbol | SepoliaETH |
| Block Explorer | https://sepolia.etherscan.io |
🖼️ placeholder: Screenshot of switching MetaMask to Sepolia testnet via network dropdownplaceholder: Screenshot of switching MetaMask to Sepolia testnet via network dropdown
Deploying contracts and minting NFTs requires gas fees. On testnet, gas is paid with test ETH, which is free.Deploying contracts and minting NFTs requires gas fees. On testnet, gas is paid with test ETH, which is free.
Visit any faucet below and input your wallet address to claim free Sepolia ETH:Visit any faucet below and input your wallet address to claim free Sepolia ETH:
| Faucet | URL | Per-claim Amount | Login Required |
|---|---|---|---|
| QuickNode | https://faucet.quicknode.com/ethereum/sepolia | 0.1 ETH | Yes |
| Alchemy | https://www.alchemy.com/faucets/ethereum-sepolia | 0.1 ETH | Yes |
| Google Cloud | https://cloud.google.com/application/web3/faucet/ethereum/sepolia | 0.05 ETH | Yes (Google account) |
> Tip: 0.1 test ETH is enough for deploying a contract and minting dozens of NFTs. If one faucet fails, try another.> Tip: 0.1 test ETH is enough for deploying a contract and minting dozens of NFTs. If one faucet fails, try another.
After claiming successfully, return to MetaMask and your balance should change from 0 to 0.1 ETH (it may take a few seconds).After claiming successfully, return to MetaMask and your balance should change from 0 to 0.1 ETH (it may take a few seconds).
🖼️ placeholder: Faucet website screenshot showing wallet address input and claiming test ETHplaceholder: Faucet website screenshot showing wallet address input and claiming test ETH
Remix is the official Ethereum-recommended online smart contract development environment. It runs fully in the browser and requires no installation.Remix is the official Ethereum-recommended online smart contract development environment. It runs fully in the browser and requires no installation.
Open: https://remix.ethereum.org/Open: https://remix.ethereum.org/
You will see a VS Code-like interface: file explorer on the left, code editor in the middle, and compile/deploy panel on the right.You will see a VS Code-like interface: file explorer on the left, code editor in the middle, and compile/deploy panel on the right.
🖼️ placeholder: Remix IDE home screenshot showing file explorer, code editor, and right-side panelplaceholder: Remix IDE home screenshot showing file explorer, code editor, and right-side panel
MySimpleNFT.solName it MySimpleNFT.solsolidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.20; // Import OpenZeppelin official secure ERC721 template import "@openzeppelin/contracts/token/ERC721/ERC721.sol"; // Simplest NFT contract: name, symbol, mint function only contract MySimpleNFT is ERC721 { uint256 private _tokenId; // Initialize collection name and symbol constructor() ERC721("VibeCoder", "VIBE") {} // Mint NFT: call once to mint one token to caller function mint() public { _safeMint(msg.sender, _tokenId); _tokenId++; } }
Code walkthrough (fewer than 15 lines, and each line is understandable):Code walkthrough (fewer than 15 lines, and each line is understandable):
| Code | Meaning |
|---|---|
pragma solidity ^0.8.20 | Specify Solidity compiler version |
import "@openzeppelin/..." | Import OpenZeppelin ERC721 standard implementation (security-audited template) |
contract MySimpleNFT is ERC721 | Create a contract inheriting ERC721 standard |
ERC721("VibeCoder", "VIBE") | Set collection name "VibeCoder" and symbol "VIBE" |
_safeMint(msg.sender, _tokenId) | Mint a new NFT to caller |
_tokenId++ | Increment token ID after each mint |
> What is ERC721? It is the NFT standard on Ethereum, defining basic NFT capabilities (transfer, owner query, etc.). OpenZeppelin provides a security-audited implementation, so we can inherit directly instead of building from scratch.> What is ERC721? It is the NFT standard on Ethereum, defining basic NFT capabilities (transfer, owner query, etc.). OpenZeppelin provides a security-audited implementation, so we can inherit directly instead of building from scratch.
🖼️ placeholder: Screenshot of contract code pasted in Remix IDEplaceholder: Screenshot of contract code pasted in Remix IDE
> If there is an error, check whether Solidity version matches and OpenZeppelin import path is correct. Remix automatically downloads OpenZeppelin dependencies from npm.> If there is an error, check whether Solidity version matches and OpenZeppelin import path is correct. Remix automatically downloads OpenZeppelin dependencies from npm.
🖼️ placeholder: Remix compile success screenshot with green check and selected compiler versionplaceholder: Remix compile success screenshot with green check and selected compiler version
After a few seconds, when deployment succeeds, the "Deployed Contracts" section below will show your contract address. Copy and save this address; you will need it later.After a few seconds, when deployment succeeds, the "Deployed Contracts" section below will show your contract address. Copy and save this address; you will need it later.
🖼️ placeholder: Remix deployment screenshot showing environment selection, MetaMask confirmation, Deploy button, and deployed contract addressplaceholder: Remix deployment screenshot showing environment selection, MetaMask confirmation, Deploy button, and deployed contract address
After successful deployment, in the "Deployed Contracts" section in Remix, you will see the contract interaction panel.After successful deployment, in the "Deployed Contracts" section in Remix, you will see the contract interaction panel.
Congratulations! You just minted NFT #0, and it now belongs to your wallet address.Congratulations! You just minted NFT #0, and it now belongs to your wallet address.
You can continue clicking "mint" to create more. Token IDs auto-increment each time (#1, #2, #3...).You can continue clicking "mint" to create more. Token IDs auto-increment each time (#1, #2, #3...).
🖼️ placeholder: Screenshot of clicking mint in Remix and confirming transaction in MetaMaskplaceholder: Screenshot of clicking mint in Remix and confirming transaction in MetaMask
Method 1: Verify in RemixMethod 1: Verify in Remix
In the contract panel, find "balanceOf" (blue button), input your wallet address, and call it. If it returns 1 (or the number you minted), minting succeeded.In the contract panel, find "balanceOf" (blue button), input your wallet address, and call it. If it returns 1 (or the number you minted), minting succeeded.
You can also call "ownerOf", input 0 (token ID), and it returns your wallet address, proving NFT #0 belongs to you.You can also call "ownerOf", input 0 (token ID), and it returns your wallet address, proving NFT #0 belongs to you.
Method 2: Verify on Etherscan (recommended)Method 2: Verify on Etherscan (recommended)
On Etherscan, every mint transaction has complete records: who minted, when minted, and token ID. This is the charm of blockchain being "public, transparent, and tamper-resistant."On Etherscan, every mint transaction has complete records: who minted, when minted, and token ID. This is the charm of blockchain being "public, transparent, and tamper-resistant."
🖼️ placeholder: Screenshot of viewing contract and NFT mint records on Sepolia Etherscan, including transaction list and Token Trackerplaceholder: Screenshot of viewing contract and NFT mint records on Sepolia Etherscan, including transaction list and Token Tracker
The NFTs minted so far only have IDs, without image or description. To make NFTs complete, we need IPFS (InterPlanetary File System) to store images and metadata.The NFTs minted so far only have IDs, without image or description. To make NFTs complete, we need IPFS (InterPlanetary File System) to store images and metadata.
IPFS is a decentralized file storage network. Unlike regular cloud storage, files on IPFS do not depend on one server, but are distributed across global nodes. This means:IPFS is a decentralized file storage network. Unlike regular cloud storage, files on IPFS do not depend on one server, but are distributed across global nodes. This means:
[Pinata](https://pinata.cloud/) is the most popular IPFS storage service. The free tier provides 1GB storage, which is enough for us.[Pinata](https://pinata.cloud/) is the most popular IPFS storage service. The free tier provides 1GB storage, which is enough for us.
QmXyz...)After upload succeeds, copy the CID (a string like QmXyz...)Your image URI is: ipfs://yourCIDYour image URI is: ipfs://yourCID
🖼️ placeholder: Screenshot of image upload in Pinata, including upload button and resulting CIDplaceholder: Screenshot of image upload in Pinata, including upload button and resulting CID
NFT metadata is a JSON file describing NFT name, description, and image URI. Create a metadata.json:NFT metadata is a JSON file describing NFT name, description, and image URI. Create a metadata.json:
json { "name": "Vibe Coder Certificate #0", "description": "This NFT certifies that the holder has completed the NFT minting tutorial and entered the world of Web3.", "image": "ipfs://your-image-cid", "attributes": [ { "trait_type": "Course", "value": "Easy Vibe" }, { "trait_type": "Skill", "value": "Smart Contract" }, { "trait_type": "Level", "value": "Beginner" } ] }
Upload metadata.json to Pinata too, and get a metadata CID.Upload metadata.json to Pinata too, and get a metadata CID.
To include images in NFTs, we need to slightly upgrade the contract by adding tokenURI. Go back to Remix and create a new file MyNFTWithImage.sol:To include images in NFTs, we need to slightly upgrade the contract by adding tokenURI. Go back to Remix and create a new file MyNFTWithImage.sol:
solidity // SPDX-License-Identifier: MIT pragma solidity ^0.8.20; import "@openzeppelin/contracts/token/ERC721/ERC721.sol"; import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; contract MyNFTWithImage is ERC721, ERC721URIStorage { uint256 private _tokenId; constructor() ERC721("VibeCoder", "VIBE") {} // Pass metadata URI when minting function mint(string memory uri) public { _safeMint(msg.sender, _tokenId); _setTokenURI(_tokenId, uri); _tokenId++; } // Overrides required by Solidity function tokenURI(uint256 tokenId) public view override(ERC721, ERC721URIStorage) returns (string memory) { return super.tokenURI(tokenId); } function supportsInterface(bytes4 interfaceId) public view override(ERC721, ERC721URIStorage) returns (bool) { return super.supportsInterface(interfaceId); } }
After deployment, call mint and pass your metadata URI (for example ipfs://QmAbc.../metadata.json). Then your minted NFT will include image and description.After deployment, call mint and pass your metadata URI (for example ipfs://QmAbc.../metadata.json). Then your minted NFT will include image and description.
🖼️ placeholder: Screenshot of NFT details with image shown on Etherscanplaceholder: Screenshot of NFT details with image shown on Etherscan
Congratulations! You have completed a full NFT development loop from scratch. Let's recap:Congratulations! You have completed a full NFT development loop from scratch. Let's recap:
The whole process required no local environment installation, cost no money, and was completed fully in the browser. This is the appeal of blockchain development: the barrier is much lower than most people expect.The whole process required no local environment installation, cost no money, and was completed fully in the browser. This is the appeal of blockchain development: the barrier is much lower than most people expect.
Advanced directions:Advanced directions:
Your first NFT is already on-chain. The door to the blockchain world is now open.Your first NFT is already on-chain. The door to the blockchain world is now open.