Use javascript and Openzeppelin to build your first NFT!

This is a quick guide to building dynamic NFTs. Well 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 well build a quick NFT smart contract to run on the blockchain. Second well build a backend for the NFT to help make it dynamic using javascript.

Well be using Openzeppelin to build our smart contracts. Openzeppelin offers an opensource ERC721 template thatll 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:

// Lets start by importing the Openzeppelin ERC-721 template into our file// SPDX-License-Identifier: MITpragma solidity ^0.8.0;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";// Next, lets 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, lets 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 youre using remix, this would have automatically imported the openzeppelin library. If youre using truffle run npm install @openzeppelin/contracts in import the needed libraries.
The rest of the article assumes youre using remix.

Now lets 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 well build lets us add the data (image, video, etc) and the properties to the NFT.

Well use Revise (https://revise.network) to setup the backend and add the data to our NFTs. Lets 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 youve generated from Revise. In the above snippet were just importing the revise-sdk, setting up the authentication token and setting up the function to run the revise-sdk function calls.

Lets 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("Collection Name", "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, lets 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)console.log(nft)

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

Now that we have a Revise URL lets 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 were ready to go. Youll 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, were 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 itll mint the NFT for you. This has deployed the NFT in your browser. If you want to see your NFT in Opensea youll have to publishyour NFT to the testnet or the mainnet. Ill show you how to do that in the next article.

Congrats on creating your first NFT!