Unlock the Power of Web3: Create an NFT Minter App
The world of NFTs is booming, and creators are cashing in on this trend. But what if you’re not a developer? Fear not! We’re about to create a Web3 app that lets non-developers mint NFTs with ease. We’ll use Moralis and Next.js to make Web3 operations simple, and Solidity to create our own NFT smart contract.
Get Started
Before we dive in, make sure you have the following requirements covered:
- Working knowledge of React and Next.js
- Working knowledge of Solidity and Remix IDE
- Node.js installed
- Code editor (we prefer Visual Studio Code)
- MetaMask Wallet connected with Rinkeby test network
If you get stuck, feel free to refer to our GitHub repository.
Creating the Smart Contract
First, we need to create and deploy a smart contract on the Rinkeby Ethereum blockchain. Open Remix IDE and create a new Solidity file. Here’s what our contract looks like:
We’re importing OpenZeppelin files to create an NFT smart contract. We’re extending our contract to ERC721, ERC721Enumerable, and ERC721URIStorage to store metadata URLs along with the NFTs. We’re also overriding functions to avoid errors.
Compile and Deploy
Compile the contract by pressing Control+S (Windows) or Command+S (Mac). Go to the Deploy tab and ensure you’re connected to Rinkeby network on MetaMask with some test ETH. Deploy the contract and take note of the contract address and ABI.
Setting up Moralis Server
Head over to the Moralis website and create a new account. Create a new server, selecting the Testnet server and Eth (Rinkeby). Take note of the Application ID and Server URL.
Creating the Next.js App
Set up a new Next.js application using the following command:
npx create-next-app nft-minter --example with-tailwindcss
Install the required dependencies:
npm install moralis react-moralis web3
Create a new file called .env.local to store our environment variables:
NEXT_PUBLIC_MORALIS_APPLICATION_ID=your_app_id
NEXT_PUBLIC_MORALIS_SERVER_URL=your_server_url
Contract and Login Setup
Create a new file called contract.js to store our smart contract information. Then, wrap our entire app with the Moralis provider in app.js. Finally, set up our login screen with Moralis in index.js.
Dashboard and Minting
Create a new folder called dashboard and a new file index.js inside it. Set up a basic layout for the dashboard page. Initialize the web3 package and inform it to use MetaMask as the provider.
When the user submits the form, we’ll save the image to IPFS, construct the metadata, and mint the NFT using our smart contract.
Congratulations!
You now have a Web3 app that lets non-developers mint NFTs. Explore more and implement your own ideas in this tutorial. Remember to be patient, as it may take some time for the NFT to populate in OpenSea.