How to Build the Anti-Opensea | Why No-Code is the Future of NFT Markets
A primer on building no-code NFT markets with Rarible.org, Bubble.io, Pinata.cloud, Ezcode.co and One2all.io and why it is a necessity for the future of NFTs.
No-code must be the future of NFT markets.
Why? Because it’s more important than ever for NFT communities to build sustainable markets that they individually own and control.
We’ve seen how large market operators may not always have their users’ best interests at heart.
Furthermore, creators are already outgrowing all the feature sets that the current platforms are offering. Large platforms simply can’t keep up.
For example, in recent weeks, I’ve listened to multiple artists point out key features they feel are missing like panoramic photography, augmented reality compatibility and deeper community integrations and incentive structures. This is just the tip of the iceberg as to what creators need but they are hamstrung by current tools.
If we truly want to decentralize NFT markets, we must put the tools for building them in the hands of all the creators themselves, not just those at the top of the market.
We can accomplish this by:
- Creating a viable option for non-technical creators, e.g. simple enough for anyone to start building with enough depth for leading innovators
- Dramatically reducing costs for anyone to set up a full-featured marketplace by 80% or more
- Abolishing the 2.5% tax, i.e. allow these creator/operators to control their own fees and royalties
- Consolidating liquidity without consolidating power, i.e. leverage an open source indexer and search mechanism
A set of tools that meets all of these objectives while being flexible enough to support true innovation has not existed. Until now.
One2all.io is the first and only full-featured NFT marketplace that is built completely in no-code. The entire app, its workflow, its design and its experience can be modified with no-code.
With respect to cost and speed, this entire app was built from a blank page in four weeks. It includes sophisticated features that one would expect from a major platform such as lazy minting and customizable royalties and will soon incorporate some features that aren’t yet functional on the major platforms like co-creation and sharing of NFT proceeds at time of sale.
But how can you as a creator, collective or DAO actually build one of these? While you don’t have to be a developer, having basic familiarity with other DIY platforms (e.g. wix, Squarespace, shopify, etc.) will certainly help.
Additionally, to support the exploration of No-code and NFTs, One2all will open-source its key NFT workflows and provide support so anyone can understand how to build their own marketplace.
There’s a lot to cover here so let’s just get right into it.
What is this Bubble thing and why is it important?
Firstly, you can read about Bubble here or I would recommend going through some of their intro videos to get an idea as to what is possible:
The key here is that, unlike Wordpress, Bubble is a legitimate visual development platform. I’ve spent the last ten years as a product manager in fintech (including five at Tradeweb Markets which is now a $20Bn public company, Nasdaq: TW), building marketplaces for some of the largest financial institutions in the world and when I started working with Bubble, I knew it opened the door to a true no-code future for the first time.
Why? Bubble combines front-end, back-end and internal logic all into a single visual point-and-click interface. Furthermore, the logic is so open-ended, easily customizable and FAST that there are a huge range of applications that can be built with no code in a fraction of the time.
Indeed, people have already built fully-functional no-code versions of popular apps, like notrealtwitter as well as working clones of Uber Eats, AirBnB, and even Reddit. None of these were previously possible via no code without workarounds or reductions in scope.
For example, with solutions like Squarespace, Wordpress and others, you were forced to use pre-built templates and plug-ins and were strictly limited in terms of your degrees of freedom. Not anymore, in my opinion, Bubble has “cracked the code” to no-code.
So, yes, it is a proprietary platform. Let’s talk about that. What Bubble offers currently has no comparable solution that I’m aware of, and until such point that a truly decentralized offering can match what they have built, it is worth the trade-off.
In the meantime, the bubble team’s incentives are well-aligned with supporting their growing ecosystem of builders. They have only recently raised their first round of funding of a $100MM Series A round after seven years of being a cash-flow positive, bootstrapped startup with a handful of employees. The co-founders, Emmanuel Straschnov and Josh Haas, have the patience and temperament for long-term goals. They realize that the better its users do, the better Bubble does.
Enter Rarible Protocol, the Anti-Opensea Toolkit
As I explored the possibility of creating an NFT app entirely in Bubble, the question of how to incorporate critical features like lazy minting, searching and selling became a key consideration. I looked at several API solutions including the Zora protocol and others, but the Rarible protocol stood out as the best back-end NFT toolkit.
The Rarible Protocol DAO has truly internalized the ethos of decentralization, operating via governance tokens and being driven directly by its community and most active users. Furthermore, with its integration with Rarible.com, it strikes a fair balance between open market innovation and a nexus point of secondary market liquidity. A key aspect of this is their decision NOT to charge transaction fees if trades are done off-exchange. This is certainly much more progressive than the other “open” market.
So out of the box, the Rarible Protocol offers secure lazy minting, a shared order book for searching and trading NFT’s and an open royalty and fee model. Beyond that, they are also soon going multi-chain with Polygon targeted for the next few weeks. However, the true magic of the protocol is the burgeoning community that is growing around it. People like Skøgard who leveraged the Rarible stack to write a 21-line script for minting 10,000 NFT’s! Also Mintgate.io, cocoNFT and a growing list of other partners.
Even as the Protocol has evolved, I found its initial documentation and sample code to be comprehensive and extremely helpful even for someone just cutting his teeth on NFTs and web3. If you are looking to build an NFT app or just curious to learn more, I highly recommend stepping through their API doc, you can learn a ton not just about Rarible but about the entire underlying mechanics of lazy minting.
While the NFT ecosystem is currently drifting towards another oligopoly-driven market, now is a critical time for alternative liquidity mechanisms to evolve. Rarible Protocol is a fundamental part of that evolution.
Ezcode and their Web3 Plug-in Leadership
So if you imagine our no-code stack, we have two requisite pieces coming into maturity at this precise moment. One is Bubble.io steadily coming into its own as a true visual development platform. The other is Rarible’s transition to a DAO and open-source NFT toolkit. But there is another critical piece that was missing and that’s getting Bubble to work reliably with Metamask and the Web3 infrastructure. Enter Ezcode, a hugely talented team based in Eastern Europe that has built dozens of no-code apps for clients over the last 3 years.
While searching for precedents with respect to Bubble and Web3 integration, I came across an early stage Web3 and Metamask plug-in developed by the Ezcode team. While at that stage there were still some missing functions such as the ability to sign typed data, the team was super quick to add new features, building out a reusable plug-in that now the entire no-code/web3 community can take advantage of.
As you can see below, the functionality is now very extensive and can cover off on a broad range of Web3 applications such as ERC20 token trading, portfolio apps and now, NFT’s.
As the team has expanded functionality, they have also kept up with their documentation, which can be found here.
I had such a strong impression of the team’s work and responsiveness that I reached out to them and asked if they would help create what would be the first fully functional NFT marketplace built entirely in no-code, One2all.io.
Introducing One2all.io: Your NFT’s. Your Market. No Code.
With One2all, you can see the depth of functionality that can be built with no-code. I wanted to create One2all so it can be used as a stepping stone for others and further reduce the barriers to entry for all creators to control their own markets.
Let’s walk through a couple simple initial steps and get an idea as to how Bubble works with Ezcode’s plug-ins and subsequently the Rarible Protocol.
- Get Bubble and Ezcode Web3 Plugin
The first step is to subscribe to Bubble and Ezcode’s web3 plug-in. In full disclosure, EZcode’s plugin is a paid one and it currently costs $5 per month or $47 one time. This coupled with Bubble’s monthly fee for a live app of $29 per month is not insignificant. However, compared to the cost for a single solidity, front-end or back-end developer who can run north of $200 per hour (!!!), I hope you will agree that these costs are comparatively very fair.
That said, understanding that there are members of the community that need to bootstrap as much as possible, One2all is also looking into setting up a hosted option that will avoid the monthly cost. If you’re interested in that, please contact us!
2. Open your editor and create a button
So assuming you have signed up for a Bubble account and paid for Ezcode’s web3 plug-in (this is easily done by going to the plug-in tab on the left of your editor and searching for the web3 plugin in the marketplace), you can then start to link workflows. Let’s look at how that’s done.
As you can see in the demo app below. First, we create a button by simply dragging a button element onto the screen. Then in the element config box we can type in some new text for it. You have a button!
Bubble can accommodate a series of reusable styles. We won’t get into that here, but just know that you can modify the look and feel and even incorporate custom CSS scripts into pretty much every element you’ve created. There are plenty of great youtube tutorials as well if you just search bubble + whatever, e.g. “bubble custom css.” The forum is also super active and can be found here, again, if you do a search and chances are you’ll find some helpful info, like “custom css.”
3. Add the Ezcode web3 element to the screen
One minor step before we move on, we do need to take a small invisible widget that houses EZcode’s plugin functions and just place it anywhere on the screen, like this. We’ll come back to this later.
4. Create a simple trigger and workflow
One thing I really like about Bubble is how they’ve set up logic and workflows. It is super simple. You identify the trigger which could be a huge range of events from page loads to button clicks and even timed events (i.e. WHEN this happens… then this happens). Once you choose the trigger you then start putting together lego blocks of logic, one after the other. Let’s try a simple example and connect to metamask.
To create a workflow, you can either go to the Workflow tab on the left, or you can simply open the config window for your element by double clicking on it and then select “Start/Edit Workflow”. If this is a new button, Bubble is smart enough to create a new trigger which is “If button is clicked”. Nice!
5. Add a Connect to Metamask Event
Finally, to initiate a connection to metamask, click your trigger which in this case is “WHEN Button Connect Wallet is clicked”. You will see a window pop up just below that where you can add a series of actions. Click on where it says “Click here to add an action”. This will bring up a menu of many different action types. As you add plug-ins (both free and paid) the options here will expand to reflect the new actions you’ve subscribed to. The one we are looking for is under Element Actions. Remember that invisible widget we added? That is the Web3 and Metamask element and we’re going to ask it to connect to Metamask.
So we select under Element Actions “Connect to a Web3&Metamask”. That will bring up a small config box and in there you can simply select the first option that shows up to point to the invisible Web3 Element you added earlier.
6. Connect to Metamask!
These couple steps are all you need to launch Metamask and are the same underlying triggers used for One2all.io to accomplish the same behavior.
To prove that the wallet is indeed connected to the app, we can demonstrate below how the Web3 Element can also detect events such as a change in wallet or change in chain ID from testnet to mainnet or vice versa. As you can see it’s also sufficiently fast for a complex web app (always room for improvement though).
All of this without typing a single line of code.
This is intended to be a simple introduction to the concept of No-Code + NFT’s and to serve as a proofpoint as to what is possible. The Ezcode team and One2all are working together to incorporate a free plug-in focused specifically on the Rarible Protocol into One2all. This plug-in will also be freely available outside of One2all. When this is released, please keep your eye out for Ezcode’s documentation and demos for that plug-in.
To give a preview of that release, here is a quick walkthrough of the lazy minting workflow which leverages the metamask plug-in, free Rarible plug-in as well as an accompanying Pinata plug-in that saves the NFT to the decentralized Interplanetary File System or IPFS.
At a high-level, the steps above are as follows:
When start minting button is clicked and the content is an image (as opposed to a video or audio file)…
- Terminate this workflow if a wallet is not connected (good practice for error prevention)
- Not integral to minting, but save a status that shows minting is in process for UI and other related elements
- Generate Rarible Token, this is the app’s first interaction with the Rarible protocol, requesting a unique token ID that can be appended to the NFT metadata for identification.
- Pinata Upload. Next, you upload the content of the NFT (the image file in this case) to IPFS via Pinata. You can also upload directly to IPFS but Pinata ensures that the content won’t disappear if not accessed for a long period of time.
- Pinata responds with a Content ID link which basically is a unique identifier for your image. This Content ID for your image can get included in your NFT’s descriptive data (or metadata) along with its name, description and other traits or attributes (like rarities). Again, Bubble makes this very intuitive, as an input to step 5, one option is “Use the result of Step 4”. This means whatever comes back from Pinata as a result of step 4 can be parsed and passed to subsequent steps.
- Another step to track the status of the minting process. Not integral to minting.
- Finally, the Content ID for your NFT’s descriptive metadata will be signed via Metamask‘s sign typed data call. This basically says “Hey blockchain, i’d like to put my unique encrypted signature on this data here for future use.”
- Once signed, the unique signature is then appended to the NFT’s descriptive metadata and sent to the Rarible Protocol. Rarible has a different contract address for each chain ID (mainnet, ropsten and rinkeby) and whether the NFT is an ERC721 or ERC1155 so six in total. Be sure to double check here (thanks to Chris Raastad for the note on the updated link!) to make sure you are including the right address.
- If the signature checks out, Rarible will respond with a positive acknowledgement. Congrats! You have successfully lazy minted an NFT via no-code! You can then view your NFT directly on ropsten.rarible.com for example if that is the chain ID you targeted.
As mentioned, the editor mode of One2all is available for review here. There you will be able to see how all the inner mechanics of the app have been built and hopefully spur your own ideas. If you would like to leverage the One2all platform to jumpstart your own project, please reach out to us!
This is just scratching the surface of what is possible. One of the biggest advantages of using no-code as a foundational stack is how quickly the community can respond to the relentless velocity of the NFT industry.
We need a crowdsourced approach to innovation. In my opinion, no-code is the most viable way for the entire NFT community, not just its developers, to contribute actively to the advancement of NFT marketplaces.
If you are interested in this effort and the intersection of No-code and NFT’s, please follow us on twitter and send us a tweet or consider joining our brand new Element.io space.
Also, if you have an idea for a unique marketplace that doesn’t quite fit the visions of the existing Big Six NFT platforms, please let us know and we can start to brainstorm. Feel free to shoot us an email as well at hello@one2all.io.
In addition to the amazing team at Ezcode, I also wanted to acknowledge and thank Rebeka Dimitrievska and Rinor Rama for their amazing work on UX and branding, respectively. Please check out their work! A big part of the future of NFT’s is facilitating collaboration and commissions between artists and creators as they help to create platforms and assets for each other. One2all hopes to play a part in this process as well, utilizing its marketplace for commissioning work via utility-based NFT’s and crypto-only payments.
For the latest news on One2all and the intersection of No-code and NFT’s, please consider joining our mailing list here. Stay tuned!
A.H. Chu has been a product manager in institutional fintech for ten years, has founded an educational non-profit and is an active proponent of the twin ideals of Quality Work and Creative Intent. @theahchu on twitter and clubhouse. | chusla.eth | Hit me up!
