<h2 style="margin-left:0px;">Step 1: Developing the Smart Contract</h2>Below is the code for our smart contract. You can get it from here <a href="https://github.com/BuildBearLabs/Tutorials/blob/main/NFTStorageDemoApp-main/NFT.sol">NFT.sol</a><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*9vK2Nion2DjaE5MMOEeq0g.png" alt="" loading="lazy"></figure><h2 style="margin-left:0px;">Lets run through our smart contract real quick 🏃</h2><ul><li>We have used the standard contracts provided to us by <a href="https://openzeppelin.com/">openzeppelin</a>; once you get full time dev into Smart Contracts, you will realise Open Zeppelin Contracts are God Sent. In order to use their contracts, we need to install them locally in our project.</li><li>Then, we have defined our contract NFT, which inherits from openzeppelin’s ERC721URIStorage contract*.*</li><li>The next two lines are used to keep a track of the total numbers of tokens minted.</li><li>Then, the constructor function calls the openzeppelin’s ERC721 which takes two arguments i.e. the name and symbol*.* You are free to choose your own name and symbol.</li><li>Then we have our friend, the mint function. It takes in 2 parameters. First, the address to which the NFT has to be issued; Second, the tokenURI. We will explain the tokenURI part in a bit.</li></ul><h2 style="margin-left:0px;">Step 2: Getting up the infra needed to deploy and test our smart contract</h2>Now as per the “set” practices, you would be expected to deploy the above contract on either a local blockchain node (eg: Hardhat or Truffle) or a public testnet like Goreli Testnet. While that is okay, except the following pain points:In relation to the Goreli Testnet:<ul><li>It is not a Mainnet 😞 which means it does not have the same state of tokens or for that matter the most important ‼️</li><li>Faucet: Need I explain more? 😤</li></ul>In relation to the local node:<ul><li>Mainnet fork: Check ✅</li><li>Faucet: Check ✅</li><li>Debug my contract with ease: Sadly not with ease (yes, I could use some console.logs, but largely that is about it). 😢</li><li>Share state of my transaction with my friends / mentor to get some feedback: Well, its called <code>localhost</code> for a reason! So forget about it. 😭</li></ul>2.1. That is where <a href="https://buildbear.io/">BuildBear</a> comes in. It kind-a marries the benefits of both the world for you:<ol><li>Mainnet fork: Check ✅</li><li>Faucet: Check ✅</li><li>Debugging my transaction: Check ✅ [comes with an in-built transaction tracer]</li><li>Share the state of my transaction with my friends/mentor to get some feedback: Check. ✅ It is a private testnet for a team, hence, I have the ability to invite my friends/mentors to my own testnet and review my transaction</li></ol>Have a look over here: **<a href="https://medium.com/p/492f1038883d">Where Localhost Fails</a> and *<a href="https://medium.com/p/e67656093f9d">Win Web3 Hackathons, using BuildBear Testnet’s analytics</a>2.2. Visit the <a href="https://buildbear.io/">BuildBear App</a>. Once you login with your Github or Google Account, you will see a page similar to the image added below:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*8A6lDsYXBI51vrXZY4LYjA.png" alt="" loading="lazy"></figure>2.3. Create your private node forking from the Ethereum Mainnet:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*CCneynOvVE2KjvCrrk5tCg.png" alt="" loading="lazy"></figure>2.4. Add your private testnet to your MetaMask wallet by using the “Add to Metamask” button:<figure class="image image_resized" style="width:544.996px;"><img src="https://miro.medium.com/v2/resize:fit:458/1*0BeaWR-pZSpNeQnnL4I4vw.png" alt="" loading="lazy"></figure>2.5. Mint your Eth tokens from the Faucet (using the Faucet URL):<figure class="image image_resized" style="width:244.996px;"><img src="https://miro.medium.com/v2/resize:fit:206/1*7CRwF25-7R6r6WOFis2qgQ.png" alt="" loading="lazy"></figure>2.5.1. Minting the Tokens<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*6yzOjX6xIr0tlDlv9WPW2w.png" alt="" loading="lazy"></figure><h2 style="margin-left:0px;">Step 3: Deploying the Smart Contract</h2>3.1. Navigate to the <a href="https://remix.ethereum.org/">Remix Online IDE</a> website and accept the terms and conditions.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*jIJJX7V6J7Yex33Xm5m0BA.png" alt="" loading="lazy"></figure>3.2. Create a new contract and paste the Smart Contract Code, available over here 👉 <a href="https://github.com/BuildBearLabs/Tutorials/tree/main/NFTStorageDemoApp-main">GitHub Link</a>3.3. Compile the Smart Contract, with Solidity Version 0.8.1, by using the following icon and details:<figure class="image image_resized" style="width:408.984px;"><img src="https://miro.medium.com/v2/resize:fit:344/1*3zKHSssru_h9QdnhjE_MeQ.png" alt="" loading="lazy"></figure>Please note that the ABI of the Contract is available only once the Contract is compiled. You can see in the above image the ABI which can be copied. Please keep this handy. We will need it momentarily.3.3. Select the “Deploy and Run Transactions” tab: and deploy the contract as follows:<figure class="image image_resized" style="width:413.988px;"><img src="https://miro.medium.com/v2/resize:fit:348/1*plZApuK66p-zXSd4MqpwuQ.png" alt="" loading="lazy"></figure><ul><li>Make sure that you update the Environment to “Injected provider — MetaMask” | CRITICAL,</li></ul>3.4. Click on the “transact” button to deploy the contract to your private node network; once done, you will see something similar to the following:<figure class="image image_resized" style="width:368.992px;"><img src="https://miro.medium.com/v2/resize:fit:310/1*AUrKTO71mk5Le7m9xAex7A.png" alt="" loading="lazy"></figure>3.5. Copy the address of the Contract and visit the Blockchain Explorer for your personal forked testnet (link available on the dashboard page at <a href="http://home.buildbear.io/">home.buildbear.io</a>) and locate your contract.3.5.1. Submitting the ABI of the contract for ease of interactionYou can visit your contract page on BuildBear’s Blockchain Explorer and then visit the Contract tab. You should see something similar to the following:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*m6DysmDCZKTJWC-t1FDI6g.png" alt="" loading="lazy"></figure>Submit the ABI that we copied from Step 3.3; once done, you should see the Read and Write Contract buttons made available to you on the Contract Page:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*AU69x2sjNaODTpuTTrgD4w.png" alt="" loading="lazy"></figure>WOOT WOOT 🎉 🎉<h2 style="margin-left:0px;">Step 4: Next.js App</h2><h2 style="margin-left:0px;">Installation and Setup</h2>The easiest way to create a new Next.js application is by using the <code>create-next-app</code> CLI tool. You can install it via <code>npm</code>:<pre><code class="language-javascript">$ npm install create-next-app</code></pre>Once installed, you can initialize a new Next.js application by calling the tool and supplying a name for your project:<pre><code class="language-javascript">$ npx create-next-app nft-app</code></pre>Note: If you don’t already have <code>create-next-app</code> installed - <code>npx</code> will prompt you to install it automatically.Once the tool finished initializing a skeleton project, let’s move to the directory and take a peek inside:<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*Whfh8oay8ICJ4mVI1O-N1Q.png" alt="" loading="lazy"></figure>The standard <code>package.json</code>, <code>package-lock.json</code> and <code>node_modules</code> are there, however, we've also got the <code>/pages</code>, <code>/public</code> and <code>/styles</code> directories, as well as a <code>next.config.js</code> file!Let’s take a look at what these are.<h2 style="margin-left:0px;">Features of Next.js</h2>Next.js is ultimately an extension for React, and it does introduce a couple of new things that make React application development simpler and faster — starting with Next.js pages.<h2 style="margin-left:0px;">Pages</h2>Next.js makes creating multi-page applications with React ridiculously easy with its default file-system-based router. You don’t need to install any additional packages, such as <code>react-router-dom</code>, or configure a router at all.All Next.js projects include a default <code>/pages</code> directory, which is the home of all of the React components you'll be using. For each component - a router will serve a page based on that component.Next.js project setup is done<h2 style="margin-left:0px;">Step 5: NFT storage and connect the wallet</h2>Since storing data on Blockchain is expensive we will be using IPFS to upload the NFT Data, for this we are going to use <a href="http://nft.storage/">NFT.storage</a> service<h2 style="margin-left:0px;">What is NFT Storage?</h2>NFT.Storage is a storage service that lets you upload off-chain NFT data(like metadata, images, and other assets) for free, with the goal to store all NFT data as a public good.The data is stored perpetually in the Filecoin decentralized storage network and made available over IPFS via its unique content ID.<ul><li>Get an API token From <a href="https://nft.storage/">API Keys</a> after creating an account, you can use our API KEY to get it here <a href="https://github.com/BuildBearLabs/Tutorials/blob/main/NFTStorageDemoApp-main/constants.js">API KEY</a></li><li>Install the package with <code>npm install nft.storage</code></li><li>Create a Component <code>StoreMetadata.jsx</code> and add this code to the file</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*qHSjxsS10fV6aV5qmMJP9w.png" alt="" loading="lazy"></figure>This is the main component that prepares the metadata from the inputs we give and then uploads it to IPFS via the JS client created.You can customize the metadata according to the standards for the Token type For Example Metadata file you can edit which data you want to add or select.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*jtEXpLCg_jslILrHm_nKVQ.png" alt="" loading="lazy"></figure><ul><li>In the main <code>index.js</code> file Set states for the inputs(in our case name, description, and Image file)</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*ezhdxpWEZ7OSF6d9ktKEyg.png" alt="" loading="lazy"></figure><ul><li>Then input can be taken in this way, from this Html code, don’t worry about the UI copy the code from here <a href="https://github.com/BuildBearLabs/Tutorials/blob/main/NFTStorageDemoApp-main/styles/Home.module.css">Home.module.css</a>, and paste it into <code>Home.module.css</code></li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*YTn10ANpunTZAmjqMrbSVA.png" alt="" loading="lazy"></figure><ul><li>Connecting our application with blockchain</li><li>We need something that connects our client to one of these nodes of blockchain so they can start using the full power of the blockchain, that’s exactly what ether.js is it’s a library written in javascript that lets as create any javascript application that talks to the blockchain so we can use and create many applications which are going to be based on decentralized application (daps). It’s the bridge that essentially that takes your client and it allows it to connect to the blockchain.</li></ul>Installing<ul><li><code>npm install --save ethers</code></li><li>Let’s Create a Connectwallet function that connects our application Metmask wallet. This check if the wallet is installed if so then MetaMask will pop up to connect.</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*MH6QDpEYqSXJJuv_4OG3KA.png" alt="" loading="lazy"></figure><ul><li>Create a function that calls Store metadata from the component and gets the IPFS link of NFT and then the mint function of the smart contract is called with the Ipfs link of NFT and user address</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*ltaYd82B4ssSWACELQqoNw.png" alt="" loading="lazy"></figure><ul><li>This function can be called with a button when the inputs have already been set.</li></ul><figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*yVyYdQ7_aZeC7Gh_C7hYqQ.png" alt="" loading="lazy"></figure>Let’s test the appConnect the wallet. enter name, description, select the image, and press the mint button and sign the transaction. one’s it is successful you received an alert.<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*_5SKEbAbY4bVpp-zgQTWSg.png" alt="" loading="lazy"></figure>Go to the block explorer and look at the Transaction details<figure class="image image_resized" style="width:679.985px;"><img src="https://miro.medium.com/v2/resize:fit:588/1*4khB4PSD66g_lqnItl7QVw.png" alt="" loading="lazy"></figure>We have successfully built the NFT Mint!!! 🎉🎉🎉Share your project on Twitter and LinkedIn as tag BuildBearIf you appreciate what we are doing, please follow us on <a href="https://twitter.com/_BuildBear">Twitter</a>, and L<a href="https://www.linkedin.com/company/build-bear/">inkedIn</a> and <a href="https://t.me/+6mjOnBFUR9xjN2U1">Join the Telegram</a> group if you haven’t done yet.And please give us a clap 👏 if you like our work.Authors: <a href="https://twitter.com/chandan1_">Chandan</a>, <a href="https://twitter.com/0xdhruva">Dhruv</a>Code Repo : <a href="https://github.com/BuildBearLabs/Tutorials/tree/main/NFTStorageDemoApp-main">https://github.com/BuildBearLabs/Tutorials/tree/main/NFTStorageDemoApp-main</a>

Template for Tutorials.png

Create NFT smart contract by importing contract from openzeppelin and create a frontend using NextJS in 15 minutes.

Learn how to Create, Deploy an NFT Smart Contract and Develop a Front End App in 15mins

BUILDBEAR // TUTORIALS

Learn how to Create, Deploy an NFT Smart Contract and Develop a Front End App in 15mins

Let’s get started then, Shall we?

Let’s get started then, Shall we?

Test DApps at Scale.