How to develop an NFT marketplace using Bunzz, the Dapp development platform and Bubble, the no-code tool

Article Summary

Objective

This article describes the procedure for developing an NFT marketplace using Bubble, a no-code tool, and Bunzz, a smart contract development platform.

Overall flow of the article

  1. Install Bunzz NFT Market Place template
  2. Create a new application
  3. Create Smart Contract for NFT Market Place using Bunzz
  4. Change ID/API Key
  5. Change MarketPlaceAddress
  6. Summary

1. install Bunzz NFT Marketplace

First, install “Bunzz NFT Marketplace” from the Bubble Template site.

Bubble Template site

Type “Bunzz” in the search box and search.

Hover over Bunzz NFT Marketplace and click on “DETAILS

You will be redirected to the Bunzz NFT Marketplace details page, click on “Use template”.

After that, click “Use now” and then “Go to my app” to move to the application creation page.

2.Create a new application

When you move to the application creation page, “Bunzz NFT Marketplace” is set to “Start from a template” in the upper right corner. Fill in the other fields and click “Create a new app”

The template will now be applied.

3. create a smart contract for NFT Marketplace using Bunzz

Next, go Bunzz Dashboard here and click “Create Dapp”

Enter the Dapp name and click “Create”

Select a blockchain to deploy to and click “Next”. This time, we will use Ropsten Testnet.

Select the “Simple NFT MarketPlace” Module.

Now return to the Bubble app and go to Settings tab -> API tab -> Get Data API root URL

  • https://test-nft0011.bubbleapps.io/version-test/api/1.1/obj

https://test-nft0011.bubbleapps.io/version-test/api/1.1/contents/

*Bubble’s Data API is available only for paid plans.

Going back to Bunzz, set up:

  • name (enter a token name of your choice)
  • symbol (enter a symbol name of your choice)
  • baseTokenURI (Paste the Data API root URL you just obtained and change it as follows. Don’t forget add”/” on the end)

4. Change ID/API Key

Change the ID/API Key of Bunzz SDK on each page to the ID/API Key of Dapp to be used this time.

Bunzz SDK Settings Page

  • NFT Contents Creation Page
  • My NFT Contents Page
  • NFT Contents Page

Obtain “Dapp ID” and “API Key” from “Client SDK” of Bunzz.

Go to Bubble again and set up “Bunzz SDK” for each page.

Select “Bunzz SDK” from the Element tree on the left side of the page, and enter the “Dapp ID” and “API Key” you have just obtained.

Setup in the same way in the three pages described above in “Pages to change BunzzSDK settings”.

5. Change MarketPlaceAddress

Since you have created a new Dapp, it is necessary to change the MarketPlaceAddress of the “approve” destination to a new address for the newly created Dapp on the “My NFT Contents” page.

On the “My NFT Contents” page, change the “to” value of the “Update action” that is set when the “Publish” button is clicked.

Get “MarketPlaceAddress” from “Dashboard” of Bunzz

Go back to the Bubble page and change the “to” value to the new “address” that you have just obtained, and you are done!

This completes the new Dapp setup.

6. Summary

In this article, we have introduced the procedure for developing an NFT Marketplace by following the steps below.

  1. Developed the UI using the NFT Marketplace template provided free of charge by Bubble
  2. Deploy smart contracts to the blockchain with Bunzz
  3. Integrate (1) and (2) using Bunzz’s SDK

By following this article, I think anyone can easily develop an NFT marketplace, regardless of whether you are an engineer or not.

Also, for engineers who want to develop UI from scratch instead of using Bubble, the procedure for calling Bunzz SDK will be helpful.

If you do not know how to use the Bubble templates I have introduced here, please feel free to contact me for hands-on support.

I myself have experience in Bubble development and led the development of this template, so I am sure I can help you in any way I can.

The URL of the template is here.

Bunzz Market Place page on Bubble

The author of this article is holigon, an advocator of Bunzz