Use javascript and Openzeppelin to build your first NFT!

This is a quick guide to building dynamic NFTs. We’ll be building the NFT in the ERC 721 format (there are primarily two formats 721 and 1155, more on that later ).

There are two parts to this exercise. First we’ll build a quick NFT smart contract to run on the blockchain. Second we’ll build a backend for the NFT to help make it dynamic using javascript.

We’ll be using Openzeppelin to build our smart contracts. Openzeppelin offers an opensource ERC721 template that’ll help us fast track our development. You can follow along this guide using your favourite code editor (make sure it has solidity support) using truffle (learn more in this article) or you can build using remix (the free web IDE for solidity).

Paste the following code in your editor:

// Let’s start by importing the Openzeppelin ERC-721 template into our file
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
// Next, let’s add our NFT smart contract and name the NFT token (Dynamic NFT)
contract ReviseNFT is ERC721 {
    string baseuri = "";
    constructor(string memory _baseuri) ERC721("Dynamic NFT", "dNFT") {
        baseuri = _baseuri;
    }
    // Last but not the least, let’s add functions to enable minting and to enable setting the _baseURI().
    function mint(address to, uint256 tokenId) public {
        _safeMint(to, tokenId);
    }
    function _baseURI() internal view override(ERC721) returns (string memory) {
        return baseuri;
    }
}

If you’re using remix, this would have automatically imported the openzeppelin library. If you’re using truffle run npm install @openzeppelin/contracts in import the needed libraries.
The rest of the article assumes you’re using remix.

Now let’s add data and properties to this NFT. Think of this like the “backend” of the NFT. The smart contract we wrote tracks whose the owner and allows them to transfer it, the backend we’ll build let’s us add the data (image, video, etc) and the properties to the NFT.

We’ll use Revise (https://revise.network) to setup the backend and add the data to our NFTs. Let’s grab a development key from Revise. Visit https://revise.network and click on “Get started”, once you make an account click on “Generate API key” in the header. Once you generate the key, copy the key and save it somewhere.

Clone this repo. This is a very basic starter kit, it has the revise-sdk setup. Once you clone it, run npm install. Open the index.js and paste the following code:

const { Revise } = require("revise-sdk");
const AUTH_TOKEN = "...PASTE YOUR AUTH TOKEN HERE...";
const revise = new Revise({auth: AUTH_TOKEN});

async function run() {

    // write your code here

}
run()

Replace the AUTH_TOKEN with the auth token you’ve generated from Revise. In the above snippet we’re just importing the revise-sdk, setting up the authentication token and setting up the function to run the revise-sdk function calls.

Let’s create a collection for our NFT (all NFTs belong to a collection - think of it as files in a folder).

const collectionId = await revise.addCollection({name: "Collection Name", uri: "Collection_URI"})

// Collection Name : Use any name you want for your collection (this gets shown in the marketplace))
// Collection_URI  : Use a unique name (no spaces or special characters)
//                   this will generate a unique link for your collection
//                   for e.g. if you choose "myuniquecollection"
//                   your baseURI wil be "myuniquecollection.revise.link"

Next, let’s use the following code to add some data into the an NFT (add the following code below the above code in your editor).

const nft = await revise.addNFT({
    image: 'https://revise-testing.fra1.digitaloceanspaces.com/sample-collection/1.jpg',
    name: 'Star Lord',
    tokenId: '1',
    description: 'This is a test description'
  }, [
    {attack: "80"}, {color: "maroon"}, {stamina: "90"}
  ], collectionID.id)

console.log(nft)

Run the index.js file node index.js. Now we’ve added our first NFT! We can test this out, visit myuniquecollection.revise.link/1

Now that we have a Revise URL let’s deploy our NFT and test it out!

Go back to remix and open the contract we created earlier, hit save (ctrl + S or CMD + S), it will compile the smart contract and we’re ready to go. You’ll find a menu on the left of the page, click on the “deploy and run” option.

Chose the reviseNFT contract and hit deploy (enter your baseURI in the “_baseuri” field). Your baseURI is “myuniquecollection.revlse.link” (note, we’re not adding the tokenID for e.g. 1,2,etc. here).

Once you hit deploy, the contract will load up in front of you. You can click on “mint” paste your address and it’ll mint the NFT for you. This has deployed the NFT in your browser. If you want to see your NFT in Opensea you’ll have to publishyour NFT to the testnet or the mainnet. I’ll show you how to do that in the next article.

Congrats on creating your first NFT!