Join, compete & win! Prize pool of $100,000
Search
Generic filters

How to Create an ERC-721 NFT?

In this article, we’ll take a closer look at how you can create an ERC-721 NFT. In doing so, we’re going to develop an NFT minting dApp. As such, if you’d like, you can skip the tutorial and jump right into the code by clicking on the link below for the GitHub repository: 

Full NFT Minting dApp Documentation – https://github.com/DanielMoralisSamples/19_MINTNFT 

NFTs, or non-fungible tokens, are booming and increasingly becoming a concept that’s familiar to the average person. With the increased attentiveness towards these tokens, developers are finding innovative and new use cases for NFTs. NFTs are currently used in areas such as gaming, digital ownership, virtual worlds, proof of membership, and much more. As NFTs have emerged as one of the most prominent features of Web3, it has become vital that they are regulated by token standards. Furthermore, one of the most popular NFT token standards is ERC-721, which we’re going to dive deeper into in this article. As such, we’ll take a closer look at how you can create an ERC-721 NFT. 

To initiate, we’re going to discover more about the ERC-721 token standard to gain a deeper understanding of what the standard entails. Following this, we’ll take a closer look at the process of creating an ERC-721 NFT. To accomplish this, we’re going to be utilizing the Moralis operating system to develop an ERC-721 NFT minting dApp (decentralized application). 

With features such as Moralis’ NFT API, Speedy Nodes, and the backend infrastructure of the system, we’ll be able to create the dApp in minutes. As such, if you’re looking to become a blockchain developer, sign up with Moralis right now, and you’ll be able to save valuable time on all future blockchain projects! 

What are ERC-721 NFTs?

Tokens are essential features of the blockchain industry, and they are generally divided into two main categories: fungible and non-fungible tokens (NFTs). As these tokens are potent and vital aspects of the field, it’s important that some form of standard regulates them. These standards – for both NFTs and fungible tokens – ensure that all tokens are compatible throughout an entire ecosystem. 

To illustrate this point, we’re going to take the Ethereum ecosystem as an example. Within Ethereum, the ERC-20 token standard regulates fungible tokens; meanwhile, the ERC-721 standard is utilized when developing NFTs. Moreover, an honorable mention is the ERC-1155 token standard which regulates semi-fungible tokens. These different standards handle different types of tokens, ensuring that all Ethereum-compatible tokens implement a standard minimum interface, making them compatible through the entire system. 

Moreover, the ERC-20, ERC-721, and ERC-1155 are just a few examples of regulatory standards from the Ethereum ecosystem. Other systems have their own unique standards, such as BNB Chain’s BEP-20 or BEP-2.

So, now that we’re familiar with some of the most popular standards, we can try to explain more about ERC-721 NFTs. ERC-721 NFTs are flexible, and they are generally used to represent ownership of virtual and physical assets. As such, they have the potential to represent virtual assets such as digital art, physical property, and negative value assets like debt. 

This suggests that ERC-721 NFTs have many use cases and can be used in several sectors of the economy. As such, it becomes interesting to understand more about how they work and how you can create an ERC-721 token. For this reason, in the following sections, we will guide you through the process of creating your very own ERC-721 NFTs. 

How to Create an ERC-721 NFT

Below, we’ll show you how you can create an ERC-721 NFT. However, there isn’t one universal way of making or minting these tokens. In fact, there are numerous different ways, and we don’t have the time to dive deeper into them all. We’re going to focus on how you can create an ERC-721 token by either utilizing an NFT marketplace or by creating an NFT minting dApp using Moralis. 

The first alternative is pretty straightforward since you’ll be using a reputable NFT marketplace like OpenSea or Rarible. As such, you don’t need to be familiar with any coding practices. However, this comes with a drawback as you need to look past the centralized aspect of working this way. 

On the other hand, if you are interested in decentralized aspects, have some JavaScript proficiency, and know the basics of Web3, then creating an ERC-721 NFT minting dApp with Moralis might be a more appropriate alternative for you. 

Nonetheless, it doesn’t matter which alternative you opt for since we’ll take you through both options to make these processes as understandable as possible. But without further ado, let’s kick things off by taking a closer look at how you can utilize an established NFT marketplace to create an ERC-721 NFT! 

How to Create an ERC-721 NFT on OpenSea

The first alternative is to create an ERC-721 NFT using a reputable NFT marketplace. There are several prominent options on the market, including SuperRare, Rarible, and, of course, OpenSea. 

OpenSea is the largest NFT marketplace, and for this reason, we’ll direct our attention to this platform. If you don’t have any solid coding skills and would like to create an NFT both easily and quickly, this is the best option. 

So, to create an ERC-721 NFT using OpenSea, the first thing you’ll need to do is visit their official website and click on the ”Create” button:

Once you click on the button, OpenSea will prompt you to connect your wallet. It provides various options; however, we recommend using MetaMask since this is the most well-established crypto wallet on the market. If you’re unfamiliar with the wallet, be sure to check out our article answering the question ”What is MetaMask?”.

Nonetheless, with your wallet connected, the next step is to mint your ERC-721 NFT. To do so, you’ll need to add a file that you would like to convert into an NFT by clicking on the image field. However, here you’ll notice a few limitations that need to be considered. You’ll be able to read more about the specifications on the webpage.

With an image uploaded, the next step is to name your NFT, maybe add a description, and simply click on the ”Create” button at the bottom of the page, which will mint your ERC-721 NFT. However, it’s important to know that minting an NFT this way requires you to pay a gas fee. As such, it’s essential to keep track of the current gas prices since they might be pretty expensive. 

How to Create an ERC-721 NFT with Moralis

This section of the article will show you how to create an ERC-721 NFT using the Moralis operating system. Unlike OpenSea, this will be a more decentralized process where you create your own NFT minting dApp. To provide you with an idea of what we’re working towards, this is what the dApp will look like once finalized: 

This might seem like a daunting task if you’re new to the crypto space. However, as you’ll be working with Moralis, you should be able to follow along with little to no prior Web3 development experience. However, basic knowledge of Solidity and JavaScript will be beneficial. 

This is possible due to the phenomenal Moralis SDK (software development kit) and its advanced Web3 API. Moreover, since Moralis covers all tedious backend development tasks, you can skip most of the heavy lifting. As such, when working with Moralis, you’ll be able to create an NFT minting dApp in minutes. However, to make this tutorial even more understandable, we’ll break down the process into the following three steps: 

  1. Initializing Moralis
  2. Finding a Smart Contract
  3. Creating the dApp

By following the aforementioned steps, you’ll be able to create an ERC-721 NFT with ease through your NFT minting dApp. However, if you’d like an even more in-depth walkthrough of the entire code, feel free to check out the following video guide from the Moralis YouTube channel: 

Step 1: Initializing Moralis

To begin with, the first thing you’ll need to do is create a Moralis account. If you haven’t already, you can visit Moralis and sign up entirely for free! Once you have an account, the next step is to create your own Moralis server. You can do so by clicking on ”+ Create a new Server” at the top right of the Moralis admin panel and adding the appropriate information. 

The remainder of the tutorial will revolve around a brief breakthrough of the code, which you can find at the GitHub repository that we initially linked to in the introduction. From there, you can simply clone the project and utilize the already prepared template to create your dApp. Moreover, you can customize the code to add your own spin to the project if you’d like. 

Once you have the project at your disposal, you’ll need to initialize Moralis. To do so, you’re going to fetch the server URL and application ID from your server by clicking on the ”View Details” button. You can then proceed by populating the ”logic.js” file and implementing the URL and ID in the following manner: 

Moralis.initialize(""); // Application ID from moralis.io
Moralis.serverURL = ""; // Server URL from moralis.io

Step 2: Finding a Smart Contract

An additional essential component for the dApp is a smart contract. It is possible to either create a contract from scratch or utilize an already existing one. To make the process easier, we have decided to provide you with an already prepared smart contract for this tutorial. As such, it is possible to avoid the tedious task of either finding one or coding your own contract. However, if you’re interested in creating smart contracts, check out our guide on how to create smart contracts

To implement the contract, you’ll need to input the contract address between the quotation marks in the following section of the code from the ”logic.js” file: 

const nft_contract_address = ""
/*
Available deployed contracts
Ethereum Rinkeby 0x0Fb6EF3505b9c52Ed39595433a21aF9B5FCc4431
Polygon Mumbai 0x351bbee7C6E9268A1BF741B098448477E08A0a53
BSC Testnet 0x88624DD1c725C6A95E223170fa99ddB22E1C6DDD
*/

Moreover, if you’d like, you’ll be able to find the code for the contract in the GitHub repository. You can click on the following file to take a close look at the entire smart contract: ”nft_base.sol” 

Step 3: Creating the dApp

Next up, we’re going to take a closer look at the ”logic.js” file, where most of the essential code for the dApp is allocated. What’s more, we’re going to direct our attention to the three main functions: ”login()”, ”upload()”, and ”mintToken(_uri)”. 

However, before diving deeper into the functions, another important file is ”index.html”, which we need to mention. This file contains all the HTML code used to structure the content of the dApp. This is where you’ll find the code for the fields and buttons. We won’t be studying the file in more detail since it is up to you how the dApp should be structured, and this should be based on your preferences.

So, let’s instead move back to ”logic.js” and look closer at the ”login()” function. 

login()

The first out of the three main functions is ”login()”, and it allows users to authenticate themselves with MetaMask. As such, once a user inputs their username and email address, they can click on the ”Connect MetaMask” button in the UI to authenticate. This is the complete function:

async function login(){
  document.getElementById('submit').setAttribute("disabled", null);
  document.getElementById('username').setAttribute("disabled", null);
  document.getElementById('useremail').setAttribute("disabled", null);
  Moralis.Web3.authenticate().then(function (user) {
      user.set("name",document.getElementById('username').value);
      user.set("email",document.getElementById('useremail').value);
      user.save();
      document.getElementById("upload").removeAttribute("disabled");
      document.getElementById("file").removeAttribute("disabled");
      document.getElementById("name").removeAttribute("disabled");
      document.getElementById("description").removeAttribute("disabled");
  })
}

upload()

The second function is ”upload()”, which ensures that the files inputted into the dApp are used to create a Moralis object which, in turn, is uploaded to IPFS through the ”.saveIPFS()” Moralis function. The object’s URI is then used to create a metadata Moralis object, which is again uploaded to IPFS in JSON format. Finally, the object’s URI is passed as a parameter when calling the ”mintToken(_uri)” function. 

async function upload(){
  const fileInput = document.getElementById("file");
  const data = fileInput.files[0];
  const imageFile = new Moralis.File(data.name, data);
  document.getElementById('upload').setAttribute("disabled", null);
  document.getElementById('file').setAttribute("disabled", null);
  document.getElementById('name').setAttribute("disabled", null);
  document.getElementById('description').setAttribute("disabled", null);
  await imageFile.saveIPFS();
  const imageURI = imageFile.ipfs();
  const metadata = {
    "name":document.getElementById("name").value,
    "description":document.getElementById("description").value,
    "image":imageURI
  }
  const metadataFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
  await metadataFile.saveIPFS();
  const metadataURI = metadataFile.ipfs();
  const txt = await mintToken(metadataURI).then(notify)
}

mintToken(_uri)

The final function is “mintToken(_uri)”, which essentially mints the ERC-721 NFTs. The function creates a new object containing an encoded function call. This is then added to the” transactionParameters” object along with additional parameters. Then the last part of the function sends the transaction to the blockchain, mints the token, and returns a transaction ID to confirm that the ERC-721 token was created successfully. As such, this is the entire function: 

async function mintToken(_uri){
  const encodedFunction = web3.eth.abi.encodeFunctionCall({
    name: "mintToken",
    type: "function",
    inputs: [{
      type: 'string',
      name: 'tokenURI'
      }]
  }, [_uri]);

  const transactionParameters = {
    to: nft_contract_address,
    from: ethereum.selectedAddress,
    data: encodedFunction
  };
  const txt = await ethereum.request({
    method: 'eth_sendTransaction',
    params: [transactionParameters]
  });
  return txt
}

Now that’s it! By following the three steps of this tutorial, you’ll be able to create ERC-721 NFTs through your NFT minting dApp continuously. However, if you’d like a more detailed breakdown of the entire code, please scroll up and take a closer look at the video to which we linked earlier in the article. This will provide you with most of the answers to your questions. 

How to Create an ERC-721 NFT – Summary

This article demonstrates that it’s possible to create an ERC-721 NFT by either using an established NFT marketplace such as OpenSea or creating an NFT minting dApp using the Moralis operating system. 

We broke down the process of creating the dApp into the following three steps: 

  1. Initializing Moralis
  2. Finding a Smart Contract
  3. Creating the dApp

Following these three steps allowed us to create an NFT minting dApp in minutes and with ease. Most of the accessibility originates from Moralis’ backend infrastructure and the operating system’s SDK. As such, we were able to avoid most of the complex backend development, relieving us of most of the workload and allowing us to focus on the frontend/UI of our application. Moreover, if you’re interested in learning more about Web3 UI development, be sure to read our article on Moralis’ Web3UI kit

However, this is only one of many instances in which Moralis provides you with a more accessible blockchain development process. If you’d like to learn more about the capabilities of Moralis, please visit the Moralis blog. Here you’ll find additional articles on, for example, how to create your own ERC-20 token or how to create a BNB Chain token

So, if you’d like to accelerate your Web3 development journey, sign up with Moralis right now! Creating an account is free, and you can utilize the helpful tools of the platform immediately.

March 12, 2022
Become a Moralis Mage
Get the latest information about Moralis Web3 in your email
Search
Generic filters
Related Articles
Become a Web3 Expert
Subscribe to our newsletter and get our E-book Web3 Speed run for FREE