Webstudio

All right, we're live. GM, GA, GE everybody. Welcome to what's going to be another great DevNTell. So if you didn't know, DevNTell is a 30-minute window for builders to showcase something they've been building, and this can be an awesome project they've been working on, demonstrating testing best practices, automation goodies, smart contracts, how to structure a project, etc. Basically, if you've got a passion for something, this is your opportunity to share with the Web3 community. And I am ecstatic to have back on, after one year, almost, Giancarlo. Welcome, welcome, my friend. Love to have you back on here.

Thank you, thank you very much. Thank you for having me.

My pleasure. Uh, so I guess, uh, for folks who didn't catch you the first time around, uh, back in 2022, uh, do you want to give a brief little introduction about yourself, uh, a little about your background, how you got into Web3, how you got into Developer DAO?

Yeah, perfect. Yeah, so, uh, my name is Giancarlo Sanchez. I'm a software engineer from Venezuela. I moved to Ireland, Dublin, Ireland in 2014. Uh, I started working for a small at that time startup called Glofox, building custom mobile solutions for the fitness industry, and then joined Amazon in 2017. First as an engineer, then transitioned as a manager, building basically my team on the time off an absence division services. And then basically on 2021, I started participating in Web3 hackathons. My first hackathon on the Web3 space was the Moralis first hackathon. I had the privilege of winning the hackathon and got excited about that, started figuring out opportunities. It turns out that last year, May last year, I decided to go full-time founder on a project that was creating, basically, template-based solutions for creating dApps because we saw that there is this lack of resources, the bottleneck on development and on the developer side. There's few developers just carrying the whole burden of creating smart contracts, infrastructure, dApps, UX, and it's just not scalable. So we wanted to kind of mimic what successful tools like Wix, Webflow managed to do, which is basically create this citizen developer profile in which a citizen can come like they don't need to have the technical knowledge and just build software by just using composable modules, using drag and drop and other means. And this is where we are now, we are in our second iteration what we used to call last year Dappify is now Webstudio. And yeah, excited to be presenting this today.

That's fantastic, man. Yeah, let's get right into it. I will bring up your screen here. Uh, you should be good to go.

Perfect. Yeah, guys, so, we're building Webstudio. Um, you can imagine this as the Wix of Web3. Uh, it's a no-code platform that leverages drag and drop Web3 native modules to create dApps, basically. So what we call website 3.0 is kind of an attempt for us to onboard normies into the Web3 space by telling them, look, you're going to be building your same exact websites just leveraging decentralized technologies. At the end, our vision is users shouldn't need to know if, you know, what's the infrastructure that they've been hosted on, or they just care about the features, they just care about the benefits, they just care about the security. And as soon as we can provide all the details for them, the information, but then abstract them from the complexities is where we're going. And that's where, you know, we're building with Webstudio.

So the way that we envision this is that the no-code tools are going to change the way in which we build Web3 software. Um, mainly there's three main problems that we want to tackle. The first one is the fragmented infrastructure stack on the Web3 space. We have a lot of infrastructure, we have a lot of networks, a lot of chains. Uh, we have a lot of tooling, infrastructure tooling, we have libraries, we have services that handle all kinds of from streaming payments, video, social, but they're fragmented. There's no clear, there's no way or streamlined way to just make them composable, interoperable into a simple solution unless you have a kind of a very experienced developer. And what this brings is a poor UX overall. So what we see here is that we have so many infrastructure, so much infrastructure, but the amount of dApps that we release is just very small. Like there's not, there's not that many good UX apps out there. And this is because what I mentioned before, there's a lack of developers. There is basically the universal bottleneck for software development and in Web3, this is exacerbated. Like, there's 40 million developers in the world, there's around 40,000 developers on the Web3 space only on a market share of 3.2 billion, that's kind of a lot to us for a small community of builders. Uh, and there's an opportunity that we see a no-code offers a faster and cheaper alternative that lets anyone build anything. So this is where we're knocking the door.

And the way that we're doing this is well, okay, let's, let's, let's do that. Let's make it easy for, for people. The first thing that we're doing is just creating, uh, pre-made templates. Pre-made templates that leverage Tailwind so you don't need to think about the styles, everything is kind of pretty much built-in using Tailwind CSS. Uh, and we have Web3 native components, composable blocks, smart blocks, like something imagine that you want to interact with a smart contract, you want to send a transaction, call a function a smart contract, you basically drag and drop the block, configure it and then that's it. Uh, and the style, well, basically with Tailwind we kind of make it easy. The second part is, which is something that we see is being built in progress, is the community marketplace of reusable plugins. These Web3 native composable blocks, the templates, we want to outsource them so that people can build their own blocks. People can build their own templates, they can monetize them within the platform. And then we can offer the end user a vast, uh, you know, a vast selection of options for whatever they want to build. They want to build a marketplace, they want to build a Linktree clone, they want to build a streaming site using decentralized technologies, they should be able to do it. And everything is built on a drag-and-drop experience that we mentioned before like Wix, Webflow, Squarespace that they use. And we're kind of implementing an AI co-pilot to help there as well.

Uh, this is kind of a video, but I'm not going to put the video, you can see it yourself in the presentation. What I'm going to jump is to the demo. So you can go to webstudio.so and here basically you can just register yourself and, um, once you're registered, you'll be prompted to go into the studio, to the editor. What we're going to be building today is a very, very minimalistic, super, super simple example on how to build an NFT minting dApp inside on Goerli testnet. So here for example you can see my projects, we're going to just create a new one. Uh, we're going to call it DevNTell, so this is going to be devntell.webstudio.so.

And in here we select our template, so these are all Tailwind-based templates like I mentioned before. Um, not a long selection, but our expectation is that when we open the marketplace, we'll see a lot more. And once here we have kind of our editor, so, uh, let's just do a few edits, let's for example Developer DAO logo.

So let's just modify a little bit our site just to make it, we can change an image, we can use Tailwind for this, so rounded-full, and let's MINT your NFT. And we're just going to remove this, this. So it's basically simple. There's a lot of components that we have here from text to button, images, whatever you call, and then we have a Web3 section in which we have a Web3 button. This is kind of our latest addition to the stack. This allows you to call a specific function, we pre-mapped variables. But if you want for example something more flexible, you can import the connect wallet button and then create your own forms, like if you want to call a smart contract function that has five attributes, ten attributes, then you can put them and map each attribute to a specific attribute on the smart contract call. But we're just going to mint, so we're going to use our very basic component.

So this opens up kind of a wizard. So in here it's basically just selecting the network, so we support all EVMs, uh, these include testnets. The contract type, we can upload our own ABI, or we can just use a predefined one. For the exercise we're going to be using a thirdweb smart contract. Let's say for example that we want to launch our own NFT smart contract from here, you could do it here, and say well yeah I'm going to kind of deploy my own contract. For the sake of this, we already deployed a contract. Uh, let me connect my wallet.

Uh, and we're going to be using this 721. Uh, basically just going back to the editor, we kind of paste our contract address, and then on the function we select which function we want to call. In this case, we want to call the claim function. Uh, and here is the attributes how they're mapped, so we can map specific attributes to either the user address or a static value that we provide. And these are all the attributes that this ABI for this method requires and the pre-mapping. Uh, and then we can say well on the property side, the label that we're going to display while we're not connected, and whenever we are connected, then we're going to display MINT. Uh, and yeah, basically that's it, then we can just publish. When we publish, basically this all gets repacked and deployed to IPFS. Uh, so we can for example see it on IPFS here. Oh well we missed something. In order to get the, we can add a toast, so we know when an interaction has been successful or not. For that, we can just come here, toast, and add it to any part of the screen. And you're not going to see it until the event happens. But yeah, then we can publish.

And then again, like I mentioned before, we can see this on IPFS, which is deployed there. Uh, and likewise we have kind of a visible on our subdomain. Uh, so in this case it's devntell.webstudio.so. You can also have your custom domain and so on. Uh, and then basically it's as simple as just connecting.

We kind of link our address, we deployed on Goerli. So now you see that now it says MINT, so we go click MINT. We see the confirmation. Give me a second. We confirm, and then we see the transaction down below with our toast. So we can see here the pending transaction. It's Goerli testnet, so it's going to be a little bit slow. But as soon as it confirms, I'll go back to this screen just to confirm. Uh, but this is basically it. It's a very simple way of creating a good-looking dApp with functional components.

So our transaction should be ready. Here it is, success. So we minted token 26. And like this, you can create any type of experience that you can imagine. So um, I'm just going to come here, I'm going to continue with the presentation, I'm going to show you a few use cases, a few good success stories that we built. Just notice that this last iteration that you're seeing we launched in April, so it's relatively new. Uh, and it's pretty much been my wife and I behind the wheel on this, so there's a lot of things that need to be improved, a lot of things that, but you know feedback is appreciated. I would love to hear what you guys think. But continuing with our presentation then, the way we're seeing this is we kind of ran a survey uh, later last year, we found out that 83% of the Web3 builders that exist today don't have a technical background. And if you take into consideration there's 40,000 or so Web3 developers, then you're talking about almost 200,000 builders that are not served by comprehensive tools, no-code tools for them to do DIY solutions on the Web3 space. Uh, so it's a good opportunity and it's growing. And we already have builders, there's a lot of things that are being built today. Um, most of them kind of on the prototype MVP side, in which we want to take it a step further and have these people build full solutions. For example, the ETHDublin agenda was built using Webstudio. So you can go to I think it's agenda.webstudio.so. Uh, and yeah, it's basically what we used to for our first hackathon in Ireland, Web3 hackathon in Ireland on May.

This was one of the projects that we built, that one of the groups built during ETHDublin 2023, it's a kind of a renting, a Web3 renting site in which people can view properties and rent properties using Webstudio. Uh, this is Turtleneck, another project from ETHDublin 2023, which is for sponsoring creators. So if you want to go to hackathons and you don't have the money to travel and so on, you can ask for a sponsor. And then if you win, you distribute the prices across your, across the people that participated in your sponsoring. Uh, another one, this is not related at all to Web3, it's something that kind of got our attention. This is not only a tool for Web3 enthusiasts and you don't even need to know that there's Web3 technology on the, behind this. And this is GeoNiti, it's a traditional landing page for an AI startup and they're basically starting to scale this up, adding other functionalities for CMS.

Uh, Dauthenticator, this is my particular project that I built for HackFS last week. Uh, I got a couple of bounties there, but it's a TOTP tokenizer decentralized app. So basically it stores the tokens, it stores the one-time passwords, seeds on blockchain, and then you can basically just generate them and receive them via push. Uh, and we launched on Product Hunt on May 27th, the reception has been great. Again, it's we're super early, but we're excited to see what people think about what we're building. So far it hasn't, it has been exciting. Uh, so we got 4th on Product, Web3 of the month, 3rd Product of the Day, we have eight 5-star reviews, over a thousand, no, over 300, actually over 300 followers on Product Hunt.

Uh, and yeah, people are excited, you know, there's obviously things that we need to build, there is a lot of things that we need to take care of, but the reception has been great. Uh, especially among explorers, Web3 builders on hackathons, people that are trying to build, you know, artists and community content creators. Uh, we've been growing, we have users all around the world. Uh, and you know, that's a trend that since April we've seen growing. Uh, for example on April we had 256 registered users, on May 1.5, which was boosted for participation in Product Hunt and as sponsors and, not as sponsors, as part of the team organizer of ETHDublin. Uh, on June, the month hasn't ended yet and we're also breaking another record. So the reception has been great. And not all of these are Web3 users, and it's something that excites us because this is something that we're trying to break, we're all trying to lower the entry barrier for builders into the space. And as long as we only try to capture a name for Web3 enthusiasts and Web3 knowledgeable savvy people, that's never going to happen. So we need to break the barriers, make it seamless for people, and just let them know look these are the benefits if you use our technology, how is built behind it, we take care of that.

How does it work? So there's two parts of this, there's the studio, the builder, and then there's the apps. So the first thing I'm going to talk to you about is the builder. The builder is built on AWS. The way it works is basically it's a simple database with an API that allows us to store the content and we use GrapesJS for the drag-and-drop editor. It's a kind of a boosted version of GrapesJS, I've modified it a lot. It's open source if you go to github.com/webstudioso, you'll see everything there from our SDK to our editor, front-end editor, the API, the lambdas, everything. Uh, it's a simple API that stores the configuration of what you're building on the front end on the editor. Now there's other things that happen here when you go to the, and this is something that happens on AWS scope as well, you can go to yourcustomdomain.com Web2 domain and you will get redirected to your IPFS address. You can go to yourproject.webstudio.so subdomain and you will always be redirected to your IPFS or you can go directly to IPFS. The bottom line is all the applications when they're packed, they're compressed and deployed to IPFS, and then all the redirection that happens is towards the IPFS CID. Uh, so everything is involved there, images, media content, everything is deployed to IPFS. And then we use several gateways, in fact we had an incident with the Moralis gateway a few weeks ago we had to change it, but um, yeah, I'll go over that later on. But that's basically the infrastructure on the studio.

For the app side, then it looks something like this: you have your project, which is basically a folder of your index HTML, your other pages HTML, your JavaScript code, your CSS code, your images, and that all gets packaged and deployed to IPFS under the same CID. Uh, and underneath the project when it's compiled, when it's built, when it's deployed, we add a library, the Webstudio SDK library, which is also open source and you can see the content of that we have basically everything we need for the Web3 modal for authentication, thirdweb SDK, ethers.js SDK, and Moralis SDK. We're going to be adding Alchemy and Lit Protocol, and that allows us to interact with all the EVMs and all the services that we need in the back, while still being hosted on IPFS. Uh, you can override your own Infura keys to interact with, you know, the network if you want even more decentralization you own your own keys for the service. Uh, but technically Webstudio goes out of business, your application will still live there and yeah.

And yeah, well my name is Giancarlo Sanchez, like I mentioned before, software engineer from Venezuela, super excited to hear. And well guys, this is, you know, a call to action to all of you, go webstudio.so, uh, take it for a spin, uh, let me know what you think. This is something that we're super excited to be building, my wife and I. Uh, we see that it has a lot of potential to bring in new builders with innovative solutions so we stop seeing basically clones. Like today every application is a clone of another, every exchange is a clone of another, every marketplace is a clone of another, just because there's too few developers to build this. And we want to just make this a worldwide accessible for everyone. And that's our mission. Thank you, guys.

That's amazing, Giancarlo. Yeah. I mean, uh, I saw I think I saw a tweet a few days ago from Nader Dabit who was saying that um basically the same thing kind of that you said that we're seeing repeated clones of things that of infrastructure that we don't really need clones of, but we actually need usable applications by people and I think this is one of those things that fits the bill exactly. So that's amazing to see. Uh, and just want to let people know if you have any questions for Giancarlo, please post them in the chat here and I will ask on your behalf. But in the meantime, I have a couple questions of my own. So the the marketplace that you mentioned, uh can you elaborate a bit on it? How can people create components and upload them to your marketplace? And are there any restrictions?

Yeah, so the marketplace is something that is kind of a work in progress. Uh, let me walk you through, this is something that was we're still looking for funding. This is something that we have planned for our roadmap this year. If you go to GitHub Webstudio and you go to projects and then open up the Webstudio project, you'll see all our technical roadmap for the rest of the year. This is what we built so far, this is what's coming and this is what's in progress. This is all for the rest of the year. So this includes kind of transforming Webstudio into more of a CMS, adding dynamic collections so you can create, you can create blogs, you can create kind of dynamic pages, you can create dynamic content that you pull in from an API or from a smart contract. Uh, and also kind of the marketplace, the basics so that people can start uploading their modules and templates. So so far it's not there yet. We want to see, we want to be the ones that build the first iteration of modules and then expand this opportunity for other builders. And eventually in our second year from now, so 2024 to 2025, what we're aiming is just creating a DAO and creating a DAO so that the same community can work around the curation of these modules. So we want to abstract ourselves from the creation of these templates and these modules, delegate that to the community, provide them mechanisms so they can, you know, promote good actors and demote bad actors, and us just be super focused on the core of the platform itself. So yeah, like to answer in a nutshell it's not ready yet, probably coming later this year, early next year.

Gotcha, gotcha. Makes sense. Awesome to hear. And then, uh, is there I'm just curious to see uh what was the reasoning behind going with IPFS for storage versus another? And do you have plans to expand that functionality to let people who care about where their thing gets deployed?

Yes, at the moment we're kind of still on an experimental basis. So we're building all these modules, these Web3 composable modules. But our vision here is to make it modular at all levels. So one of the features that we're going to be adding then is whenever you're going to deploy, you specify what is the where do you want to deploy this. Do you want to deploy it on AWS? Do you want to deploy it on IPFS? Do you want to deploy it on Arweave? Do you want to deploy it somewhere else? Do you want to download the source code? Like this is something are going to be several options that we're going to be providing as we go. We started with IPFS because uh at the time well first it was technically feasible, I had a lot of experience with IPFS. We also got sponsored by Protocol Labs for our accelerator last year, so we kind of took that and gained a lot of knowledge, we kind of optimized the approach to IPFS on how we deploy. But we're looking into other alternatives that include Arweave and Filecoin in the short term.

Gotcha, gotcha makes sense. Awesome to hear. And I guess since your code is open source, um is there an opportunity for folks who might be interested who are on this who are viewing this to be able to pick up an issue or help out to build it? Um how can people get involved if they're interested?

Yeah, of course. Look, the the instructions should be super clear on the readme, if not please kill me. Uh, but here you can spawn your own, you know, your own Webstudio and just give take it for a spin locally. And yeah, I mean get in touch with me through Twitter or through my email or you know whatever means you have. Uh, we'll collaborate. Uh, I'm super open to this. One of the things that we're trying to do is also build in public. So we want to attract developers to collaborate with this. We want to see in which directions they would like to see this going and we're open to to, you know, to that and we're super receptive to that. We have a few other things that we want to share with the developer community especially, which is basically every time that we run into an issue, hopefully not many, but for example we had our first outage couple of weeks ago and we kind of posted the whole thing on Twitter. This ended up as a COE, a COE is a mechanism that we used to use in Amazon for correction of error in which you specify what was the incident, how did it happen, what was the infrastructure like, what was the timing of the incident, how did you figure out and so on. And basically you end up asking yourself five questions: Why did this happen? Why that? Why that? So you basically define what are the mechanisms to make sure that this doesn't happen ever again. Uh, I kind of I wrote all this, went through that exercise because I love that that way of thinking. And we came up with some mechanisms that we also added to our technical roadmap. It's available here, so if you want to check it just go to Twitter and see our technical documentation there. We also have a technical dashboard, for also if you scroll down to the website and you see Operational Metrics Dashboard, it's kind of a CloudWatch AWS for all the metrics that I'm currently tracking because I'm on call 24/7. So I need to be aware of what's happening and so on. So this helps me track what incidents, what major incidents happen, how is the traction going and so on. Uh, so feel free to just look at that if you have any questions about the source code, the metrics that we're using, the services. Let me know, let's schedule a call and I'll jump with you and walk you through on how it works.

That's awesome. Uh, that's awesome to see and yes I've had to write a couple of those same style of docs on on-call support. So I know what you went through. Uh, but unfortunately that brings us to time here. Uh, just want to thank you again so much for coming on Giancarlo and really excited to see this product of yours Webstudio, sorry, continue to grow as the year goes on and uh look forward to you potentially coming back on once you have the marketplace stuff up and running.

Oh, count on that, count on that. No, man, it's been my pleasure. Thank you for the space, thank you for what you're doing. This is a great space for showcasing products and getting in touch with the developer community. So thank you for this, man.

My pleasure. And for our folks that have stayed on until this point, here is the QR code for you to scan and claim your Mint Koodos for watching DevNTell today. So what you want to do is you want to take out your regular QR code scanner on your phone, scan this QR code and you'll have up to one hour from now to claim your Mint Koodos for being an attendee today. So again, pull out your regular QR code scanner, scan this code and claim your Koodos within the next hour. And with that, I just want to wish everybody a very happy Friday, happy weekend, and that will see you back here next week. All right, gang. All the best. Cheers.

Thank you, Narb. Bye-bye.

My pleasure. See ya.