Consensys Web3 Starter CLI

GM GM! Welcome gang 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're passionate about or have been building in Web3. This can be an awesome project you've been working on, unit testing best practices, automation goodies, auto-structured projects, etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community here. And this week, we have the pleasure of having Meowy and Alejandro on from the Consensys Rapid Application Development team. They are going to be showing us a Web3 Starter CLI that's going to help you really get started with your next Web3 hack really quickly. So you'll have an opportunity to see what it is, how it works, and how you can start using it, as well as having a chance to ask your questions to the team if you have any.

Before we get going, let's hear a little word from our sponsors of the show. [Sponsor break for GasHawk]

Hey GM GM everybody. Welcome Meowy and Alejandro back on the show. A pleasure to have you on. Gang, if you recall, Meowy and Alejandro were on the show I want to say maybe four or five months ago demonstrating another project they were doing called Polis. But if you didn't watch that show, Meowy, Alejandro, would you want to give a brief introduction about yourselves just in case folks didn't watch that one?

Yeah, I can definitely go first. Hi there, I'm Meowy or Sushmita, that's just my name. But apart from that, I'm currently working at the Rapid Application Development contracted team at Consensys along with Alejandro. We build use cases of all of the products together, also create contents and see what's the best way to iterate all of that and how quickly the builder's experience... how we can make it better and nicer. So that's what we mostly do. And yeah, I was also in Developer DAO, active member, OG member, OG member. Okay. So yeah, it's been an amazing journey, so I'm so happy to be back here. Now I'll hand over to Alejandro.

Okay, well, I'm Alejandro, as Sushmita said. We both work as contractors for the Rapid Development team at Consensys. And yeah, basically we've been creating these templates and stuff, Sushmita already talked about it. So in my case, I like full-stack development, that's what I do. And I'm really passionate about creating and Web3 and looking for things that help the community to come into the dev space. So yes, that's what I've been doing. Excellent.

Excellent, and it's a pleasure to have you both back on. Really excited to see what you have in store for us. Meowy has been telling me a little bit about the tool both of you are going to demonstrate today. I guess in the interest of time, do we want to get right into the content?

Oh yeah, definitely. Before we dive into the content and the demo, I just want to mention that I know that we have a lot of Web3 hackathons. And still now, still in 2024, beginners really struggle to get started with really starter kits. There are many boilerplates, templates in Web3, but a lot of them might not be beginner-friendly and it might be really hard to clean it up just to make two things work. So we took this by heart and we were like, okay, how about how we can make it simpler? So we come up with a really simple template. Currently we have a few templates working. We want to add more so that there can be a variety of choices in the future and just to make things really simply work and to give them an environment for the hackers or builders to get started with. Well, without further ado, let's get back to... maybe let me share the demo. Let me find my window. Okay, I'm here.

Okay, so to run this, to get it working, we have to run this command, like `create-web3-template`. And it will prompt us a few questions in a bit. I guess my internet is a little bit stuck. Okay, it has to give me my... it's asking my project name. I'll just go with `dev-n-tell-demo`. And yeah, currently we have two options: Next.js Web3 Starter and React. So I'll go with Next. And yes, we want it with Hardhat, definitely. We would also love to include Foundry soon, but yeah, currently we have Hardhat. Now it will initialize and it's already created. So now, let me CD. `dev-n-tell-demo`. And it's right here. Okay, I will be sharing my screen to get to that, to how the file structure looks like and what it will give us right away so that we can take a look into that. Let me get to that. Start sharing screen. Oh yes.

There we are. So when we first run the command, we get these few packages. That is like the node module that we install after we run `npm install`. But inside the packages, we will have main two folders, one is the blockchain and the site. So blockchain is mostly the Hardhat that we picked when we are giving the choices. And on the site, we have the frontend part, that is the Next.js that we have. And we already provided Wagmi, Viem integration with the basic connect wallet button and a basic Hardhat integration. So let me just open the terminal over here so that we don't have to change the screen.

I'm going to run `npm run dev`. Oh, sorry, I have to go to packages. And site. I have to go to the frontend folder and then run the command, otherwise it wouldn't. Now let's go ahead and see what it gives us. Oh, I might need to re-share. Sorry, let me re-share my localhost part quick.

Just while you're re-sharing, just to recap. So this CLI tool, the command that you just ran, it spun us up a React and Next.js app that had all the basic components you need to get started with Web3 development.

Yeah, that's right. And this is what comes out of the box. Yeah, this is totally comes out of the box. It doesn't have really extra things to get... normally when we get templates and stuff, we have to clean this up to make it how it looks like just to make our connect wallet part working and sometimes things start breaking when we are starting to build for the very first time. So we wanted to give a really simple solution for the first time and then also more options. Like if people want to get started with a simpler way, they can do that. And if they want more things to come out of the box, we can also... we will also add that, like those options. Currently we also have this connect wallet here.

You can reload the site, it will work.

Okay, yeah, it happens from time to time. Okay, it's already connected. Yeah. So it's already with Wagmi, Viem, MetaMask SDK. Correct me if I'm wrong, Alejandro, integration already there. And also Linea integrated. Like all of these are really customizable and to get started over that. And also we have a really basic... what is it called... doc site, but we plan to make it much better which is `create-web3.dev` which we can share. But I'm not going to share my screen because it's embarrassing currently, the doc site.

Okay, I think this is still a work in progress, but yeah, the idea is to make easier for devs to come and start building something, probably at hackathons, probably for a personal project and probably in the future for big projects too. So the idea is to yeah, make it easier for them to start building in Web3. Right now we are using Hardhat as Sushmita said, but we also want to add Foundry. Right now we are using Viem, but we are going to add the option to use Ethers too if they want to use Ethers. So yes, basically that.

Excellent. Yeah, I love to see this kind of thing coming out here. Just being a previous hackathon participant myself, I remember the first time I spent probably half the day to a day just setting up like the very basic things to just get started and I'm sure many, many, many other developers, especially the first time Web2 developers entering a Web3 hackathon they have gone through this. So just how much research and feedback did you and your team kind of take in to build such a tool? I'm sure it was feedback from many different hackathons Consensys has hosted or been part of, but yeah, just interested to see the research that kind of went into this.

We have Eric... let me just take it, then Alejandro can go ahead. We have Eric who is also the manager of also the... and also the DevRel over here at Consensys, Eric Bishard. So he always brings us really incredible feedback, what the hackers need and who are struggling, how the beginners are feeling about new tools and boilerplates. So we always get some feedback from him like how people are using this tech and how are they hacking within this. And one of his feedbacks was that people found it, like newcomers found it really hard to get started with all the existing boilerplates because they tried to make some things work, customize it, but sometimes they don't understand how everything works. So some things can break down the line. So this was really multiple hackathon feedbacks and all of it together. But I'll let Alejandro to take over for more.

Yeah, basically that. That's correct. But also we've been doing a lot of dApps lately, I mean, so we've been like, okay, we've been doing this button like 10 times. How can we improve this? You know? So yeah, it's a way to make it faster also for us. I mean, we've been creating connect wallet buttons like a lot, bunch of times.

Yeah, we are a Rapid Application Development team so we start developing application... we are all full-stack, like really rapidly. And every time we set up something, we have to get started with, okay, let's do a connect wallet button first. Let's do this. Even though we can take things from our previous one, but sometimes things get upgraded and then we have to change the whole process. For example, when we first joined, we didn't have Next.js App Router integrated with our... we had like Page or something, but then we had to change the whole process. Many things moves and changes, so we wanted to make it in a way that, okay, we don't have to just change everything one by one and go back and update everything again and again. So this was also one of the reason.

Yeah, yeah. We as developers are lazy, we don't want to do the same thing over and over again. So anything that can speed-run the process is excellent. We have a question from the crowd here we can entertain. Potato of Doom asks: 'This is great for the frontend, but what about backend setup or doing some sort of IaaS deployment? Are those integrated or planned?' So basically, any plans or what are the plans for extending this tool? Is backend part of the plan?

Well, in this case, I would say this specific case, like logging as a service, I think we are trying to start adding like the main functions for a new project to work. We have a backend part with the smart contracts if you want to deploy smart contracts using Hardhat, and we have the frontend part. By now, those are the two packages we're going to have. We are going to improve from there, but probably if we find something or an example dApp that we want to build, we can add it as a template to the CLI and that way we can add a logging service. We're also planning to add a ZK dApp using zero-knowledge proofs, deploy it to Linea and stuff like that, but yeah, this is still in progress but will be coming like pretty soon.

That's the thing, like we need more feedback, like we want to hear from the community that what do we need? Like we can think of the problem, what are the problems that needs to be solved. For example, like just like Alejandro mentioned the ZK-proof app, one of our teammates is working with ZK-proof with ZoKrates, Linea and all of these proofing into a form-based application, feedback form-based application. And we can think of that, okay, we can get another template or starter kit for the ZK-proof enthusiasts. So these are the things that we might need, like if you have more ideas, those things are needed, we would love to add them. And for the backend, currently we have Hardhat, soon we will add Foundry and anything else that we get feedback from. So yeah, I saw 'No Ethers, please' there. People are tired of Ethers.

I guess what type of feedback are you looking for specifically? Maybe we can get into that and then how can people give you that feedback?

I think one of the feedback that we got from ourselves is that, okay, we are doing this setting this things up over and over again, so we can just simplify this process. And other's feedback could be that what newcomers are facing, problems to get started with or what are they finding difficult which we can try to simplify it. And we could also get some more feedback on something like let's say that there are many NFT ticketing marketplace or something, that there are many templates over that, but there isn't much template on DeFi applications or something else. If we get those feedback, we can understand that, okay, this is a problem that we can try to solve using this CLI and we can iterate over that. So something along that line.

Gotcha. And if people do start using the CLI tool today and they do have feedback for you and the team, how can they leave that? Should they leave an issue or yeah, I guess what's the process for that?

They can actually leave an issue, they can actually reach out through Twitter, Lens, Warpcast. Yeah, even on Linea Discord. Like anywhere, they can tweet us, they can leave some issues or on Linea Discord or even, I mean there is something we can go check over that oh, someone left something, or they can just even tell you about the issue Narb and you can give it to us.

Sure, yeah. Would be a pleasure. I'd be happy to forward it to you if it comes my way. I'm kidding, but you don't need to do that, but I'd be happy to forward it to you if it comes my way. Awesome.

That's excellent. Konstantin mentions that you can just ask all the hackathon participants what they need, which I'm sure you've probably done. And Potato of Doom wants some Web2 integrations as well, perhaps adding some cloud solutions in there as well as a suggestion.

We would consider that, noting it down. Excellent. I guess have... or has anybody used the CLI tool for a hackathon or for their own personal project yet or did it just come out and too early to say?

Well, to be honest, this is the first time we are talking about it publicly, even though it's been published and all of this, we really haven't talked about it anywhere. So DevNTell is the first way to go. It is public, but this is like the official release.

That's awesome. I love that. Folks, you just got some alpha released on DevNTell. So I mean like what else, what else could you want for to end your week today? That's awesome to hear. So I guess what would be something you would want the folks here at Developer DAO to do? You want them... would you want them to take the package for a spin over the weekend or use it in their next hack? I guess how can people get started if they are interested?

Well, I mean they can take the package and get started over that and whatever feedback we can get is always just valuable even if it's just something simple. So we just want some feedback and that's where we can get, improve it further and develop it more.

And what if folks have or sorry, what if folks want to get a head start and add some of those integrations that they've mentioned? Is the repo for the project open source? Can they contribute to it or is it closed source for now?

It's open source completely. Yeah. Meowy, do you have our repo link to share because I have to log into Octa right now. So yeah. Let me get... yeah.

Would you say there are open issues now or it's kind of like open season for folks to create their own issues?

Well, we are open to feedback and issues and if someone wants to contribute they are more than welcome to do so. And if someone can make it much better than us, of course we would welcome that. Awesome. Love to hear it. And yeah, folks, we will have the GitHub link for you added on the description of the video right after. So don't worry about that.

But I guess that is a wonderful way to kind of end things off here. It was wonderful to have both of you on, Sushmita and Alejandro. I really, really love to see tools like this come out especially for new folks, onboarding new folks into the space. Breaking down those barriers as most we can is quite critical to onboarding the next wave of devs. So really wonderful to see this out there and thank you so much for choosing DevNTell as the first platform to showcase this. That's pretty awesome. And yeah, really looking forward to seeing the folks at Developer DAO and future hackathon participants start to use this and yeah, seeing what they build.

Sounds good. I'll log into my GitHub and share the link with you right after the call so that you can add it to the description. Of course, sounds like a plan.

And folks, just before you leave today, I want to share with you the QR code. Sorry for blocking your head there, Alejandro. The QR code for you to scan to claim your NFT for being an attendee here on DevNTell. So what you want to do is scan this QR code, fill out the form, and you will be airdropped a NFT for being an attendee on DevNTell today within the next couple of days. And you will have a hour and a half from now to do that. So definitely get on that.

Just want to wish everybody a very happy Friday, happy weekend, happy hacking with this Web3 Starter CLI tool if that's in your plans for this weekend and yeah, we'll catch you back here next week for another great DevNTell. Alright all, have a good one.

Yeah, have a good one. Thank you. Thank you. Have a good one. Bye-bye.