Building an NFT Minting Platform with Bunzz

Hi there, thanks for stopping by! In this article, we will be using Bunzz’s ERC1155 React Boilerplate, and you will learn how to create a simple NFT Marketplace with Bunzz.

If you are new to Bunzz or you do not know what Bunzz is; Bunzz is a platform that helps you create DApps in just a few minutes without having much technical experience. It runs as “Smart Contract As A Service'', basically because you can create Smart Contracts easily with Bunzz, You could also call it “Blockchain Backend As A Service” (BC BAAS) - in this case, you do not need to stress yourself before creating any deep, everything runs in a GUI.

Getting Started

• Sign Up: You need to create a Bunzz account to get started with Bunzz. You have to fill in your credentials to get started with Bunzz. To get started, you can click this link. Note: After signing up, you’d get a confirmation code sent to your email. You should input this after the Sign Up process.
  

• Create a DApp: After signing up, one of the best parts of Bunzz is this; after inputting your confirmation code, you’ll find the Dashboard where you can create a DApp. Just click on “Create DApp”, like you’d see in the image below:

• Setup the DApp name: You need to create the DApp name. That’s the first step you’d take in the process of creating the NFT Marketplace as a DApp.
• When you click on the “create” button while trying to name your DApp, it redirects you to where you will select a chain. NOTE: you need to be using a testnet to be safe. Maybe Rinkeby Testnet, Ropsten Testnet, Kovan Testnet, etc.
• Select the Simple Multi Token Marketplace: You need to select this module and as you can see it will help you create a simple NFT marketplace with fixed-price sales for multi-token (ERC1155). That’s another essential step! 😉

• Dealing with the base token URI: Just if you do not know about URI, you could check it out here. By the way, URI stands for Universal Resource Identifier. You need to input your URI in this input field. Your URI format should be “ipfs://CID/” In the next step, you will see where you can get your CID from.
• Getting your CID: You can get your CID from nft.storage. You need to create an account to use the platform, after doing that, you can just upload an image you want. After doing that, it gives you a CID a few seconds after uploading your image. Copy your CID after seeing it just like this. Your URI could be “ipfs://25aa7229732910as01/”. That’s just for example, don’t use it. Just use whatever was given to you as CID.

• Add base token URI: You just need to add your base token URI after doing this. Remember, you need to add it to the input field that requires the base token URI. After doing this, just go ahead to deploy. For example:

• Deployment successful: Once you’ve deployed your app successfully, you’d see this. Then, everything starts working (technically). If you’re seeing this, just know you have just a few steps away! Now, let’s move into the technical part.

• Cloning the boilerplate: We need to clone this boilerplate to create this NFT Marketplace. But, in this case, we’d be using React, not Vue nor JavaScript. In our VSCode, we’d have to open the React folder, actually.

• Let’s get it done: You need to open your VSCode, after doing that, you need to open the React folder, because that’s where everything will be. You need to an env file with this command on your npm terminal:

$touch .env

This creates a .env file automatically, in the .env, there are some things that have to be in it - of course, the things needed to link your Bunzz project with the boilerplate. By the way, here are the stuffs that are meant to be in the .env file:

REACT_APP_DAPP_ID=YOUR_DAPP_ID
REACT_APP_API_KEY=YOUR_API_KEY

• Get your DApp and API Key: You need to get your DApp ID and API key, then copy and then replace the DApp ID with YOUR_DAPP_ID in the .env file, and also for the API Key, replace it with YOUR_API_KEY in the .env file as well.

• Create an NFT Storage: For this, you’d use the same nft.storage mentioned earlier. It’s the same platform you used to get your CID for IPFS; you need to create an API Key like this:
  

• One more thing to the .env file: Obviously, we cannot just get an API key without doing anything with it. There’s just a line and a key we need to add to the .env file:
  

REACT_APP_NFT_STORAGE_KEY=YOUR_NFT_STORAGE_KEY

You need to copy the API Key and replace it with YOUR_NFT_STORAGE_KEY, by the way. Note that you have to keep saving your changes to this file.

• Start your application: Just in case you’ve not installed npm, you need to run the command npm install in the terminal.
  After doing that, you need the npm run start next. Just like this:
  

• It works 😁🎉: After running it, this pops up, and YES, you are good to go!

At this stage, it’s all on you to create your token name, add description and choose any image you want to mint. There you go!

Thanks for stopping by and reading this article, we hope it helps, for more information, you can reach out to Bunzz on Twitter, or join our Discord Server. In Bunzz we are building the most comprehensive Dapp development platform a blockchain developer could dream of, and we are just beginning.

We can't wait for you to join us in our journey, you will not only save development time but also receive rewards from time to time for contributing to the platform. And the best is... Currently, Bunzz is free to use.

Feel free to reach for support on our social media, and if you enjoyed this tutorial, please share and spread the love with more developers!

Comments

[Sloan the DEV Moderator]

This looks like a great article! 🙌

In fact, the topic of your post would also work really well in the Meta Punk Community too!

MetaPunk 🦙

We’re a community where blockchain builders and makers, web3 devs, and nft creators can connect, learn and share 🦙

metapunk.to

Meta Punk is a really cool international NFT and web3 community where artists, web3 developers, and traders can connect, learn, and share exciting discoveries and ideas. 🦙

Would you consider posting this article there too? Because Meta Punk is built on the same platform as DEV (Forem) you can fairly easily copy the Markdown and post it there as well.

Really hope that you'll share this awesome post with the community there and consider browsing the other Forem communities out there!

[Bunzz]

Sure. We might want to post other articles in the community too :).