Build3r is a multi-purpose web dApp builder platform with composable modules, similar to “legos”, that users drag and drop into a canvas for a WYSIWYG experience. These modules are composable and interoperable meaning they can talk to each other.
Build3r lowers the entry barrier to creating dApps by allowing anyone to become a builder. It abstracts users of the complexity of coding and blockchain domain specific protocols. The tool allows them to drag and drop components into a canvas which are interactive and leverage different tech stacks that become interoperable via Web events.
This project is a fork of Grapesjs https://grapesjs.com/ designed to work using decentralised tech stack e.g deploy projects to IPFS. Each module is enhanced and enriched to be able to communicate with other modules via custom Web events that allow different services and providers to communicate, enhancing interoperability and composability via no-code drag and drop editor.
While other editors may allow drag and drop and no-code composability, the power of build3r comes from:
UI and modules
The framework is a fork of Grapesjs https://grapesjs.com/ designed for decentralised interactions. GrapesJS is a free and open source Web Builder Framework which helps building HTML templates. All projects are deployed to IPFS and the site is hosted in Firebase.
This is where the interesting part comes, creating wrapper for each of the sponsors technologies to demonstrate how they work together in synergy for a simple app use case.
Full source code can be found in https://github.com/gianksp/build3r
I created a module for build3r for some of the sponsors to showcase their value as a no-code module in build3r and also to showcase how they can interact and communicate with other modules via Web events.
This module is capable of injecting price context so other components can translate token native prices to USD
This module is capable of searching NFTs by topic or filtering within a specific collection
#### Polygon (Smart Contract UI)
This module works in conjunction with the wallet module and is capable of allowing interactions with smart contract methods from drag and drop modules
#### TheGraph (Chart)
This module is able to render a Chart.js using subgraph data and is configurable to select the subgraph, dataset and chat properties
This module is similar to the Intercom widget module, is a floating button that spawns a chat window that enables users to talk with admins or support team and is configurable
All projects are packaged and deployed to IPFS, because IPFS adds certain restrictions to SPA deployed, for example, they need to have relative references to other assets within the application, packaging is a complex problem solved here by transpiling everything to vanilla js.
You need to create a
.env file in the root
SERVER_URL=<Moralis server URL> APP_ID=<Moralis app Id> MAGIC=<Magic link pkey> FIREBASE_DOMAIN=<Firebase subdomain> FIREABSE_API_KEY=<Firebase api key> FIREBASE_ID=<Firebase app Id> COVALENT_API_KEY=<Covalent API Key>
Clone the repo, then install dependencies
npm run dev
npm run build