NFT Minting Dapp Boilerplate

Requirements

• Alchemy Account
• Alchemy Web3.js
• Chai
• Ethers.js
• Hardhat
• MUI
• Metamask wallet
• Pinata Account
• React Typescript
• Solidity ^0.8.0

---

Set up

*Disclaimer: This boilerplate is not for PRODUCTION use however it is a good baseline for you to build your own NFT minting dapp.

1. Register for an account with Pinata and Alchemy.
2. Create a .env file to store all your environment variables. Refer to the Environment Variables section for the full list. ( Warning: Do not commit the .env file to any public repository)

$ touch .env

3. Upload your assets to Pinata. Copy the content identifier (CID) to the .env file.
4. Create an Alchemy app. Copy the the API key to the .env file.
5. Copy your Metamask wallet's private key to the .env file. (Warning: Store the private key securely.)
6. Install required dependencies.

$ npm install

---

The Smart Contract

Deploy Contract

1. Configure the maxSupply and name of your NFTs found in './contracts/MinimalERC721.sol'

15 uint256 public maxSupply = 100;

17 constructor() ERC721("MinimalERC721", "MERC721") {}

2. Deploy the smart contract to the rinkeby test network.

$ npx hardhat run --network rinkeby scripts/deploy.js --show-stack-traces

Compiled 1 Solidity file successfully
MyNFT NFT deployed to: 0xdFA798Bf2E2238F9933cEEB0b6Dd9D12345a97B4

3. Copy the contract address to the .env file.

Test Contract

The boilerplate comes with a simple test script. Refer to this article for more detail.

$ npx hardhat test

Start Dapp

$ npm run start

---

Obtaining Test ETH

1. https://rinkebyfaucet.com/
2. https://faucets.chain.link/rinkeby

---

Environment Variables

Name	Description
NODE_ENV	development / production
METAMASK_PRIVATE_KEY	Metamask Private Key
REACT_APP_BASE_URL	NFT Storage Base URL. https://www.pinata.cloud/
REACT_APP_CONTENT_ID	IPFS hash of NFT media
REACT_APP_CONTRACT_ADDRESS	Deployed conntract address
REACT_APP_CONTENT_DESCRIPTION	Name of NFT description
REACT_APP_JSON_CONTENT_ID	IPFS hash of NFT metadata
REACT_APP_RINKEBY_URL	Alchemy endpoint for testnet. https://www.alchemy.com/
REACT_APP_ETH_URL	Alchemy endpoint for ETH mainnet. https://www.alchemy.com/