Building Your First Full Stack Dapp on Ethereum | Kevin Jones - BuidlGuidl

[Music] what's up everybody thank you so much for coming to my talk my name is Kevin as you guys mentioned or heard uh I work for the graph as devell engineer and I also support the build Guild uh on scaffold eth and today I'm going to be talking to you guys about how you can build your first uh application on ethereum um and I we'll try to do a demo if we have time let's see how it works uh so I don't actually have any slides just kind of walk want to walk through some assets for people to uh get familiar with um the first of all when I first came into the space I was kind of struggling with like finding the the the right tools um you know there's so many different tools out there these days to like accomplish the same thing and uh it was a kind of a long journey but eventually I found myself actually to to scaffold eth it was kind of my entry into ethereum um because it really uh provides everything you need out of the box to get started quickly on building and it also is really great for hackathons because you can spin it up prototype you know uh and and and basically iterate really quickly uh it's built on uh nextjs so it's react with nextjs it's all typescript so which is amazing and everyone should be writing typescript and it's also integrated with uh wagi uh and rainbow kit and it's got a huge Community behind it so uh we're going to spin it up in a little bit but I want to kind of walk through a little bit some other tools another thing you can look at is uh cookbook Dev um cookbook. deev is just a great resource if you're just starting into like writing smart contracts it's a good place to find like starting smart contracts so on there there's a lot of open Zeppelin contracts if you just do a search for open Zeppelin um you'll you should be able to find all the open Zeppelin standard uh smart contracts and you can also spin them up inside of scaffold eth which is really cool they have a direct integration um the internet's a little messed up here uh but you can uh go to the homepage and you can go to cookbook and uh you can basically look at contracts here we go on the top right if it loads up I don't know why it's not loading okay well we'll give it a second uh but yeah any kind of like erc20 erc721 is available through there uh there's also some examples of like just whatever you want to build uh staking contract stuff like that and inside of each contract you have this option to open it in scaffold eth and you can actually download the entire project uh and it will be a scaffold e project and all you need to write is the deploy script and you can kind of have a good starting point so it's a great spot to go sorry the site's not loading um another thing that everyone should be familiar with is speedrun ethereum speedrun ethereum is a great tool for uh like when you want to validate like what you've learned and like being able to implement this into like a real world uh scenario and so if you go to speedrun ethereum.org and there's a series of of challenges that you can go through right so the very first one is very simple it's kind of a a no coding kind of challenge like you don't have to actually write any smart contracts you deploy an nft and it teaches you about how nfts Works teaches you about scaffold eth as well and it um uh it's just kind of a fun little first entry way into speedrun ethereum and then you get more difficult you learn how staking works right like how does a staking contract really work you learn about uh how to do like swaps like with to a token vendor where you like deposit some asset and get back another asset um and then you start learning about Randomness in a dice game which is uh like kind of teaches you that on a blockchain there's this kind whole other level of like Randomness uh that can be gamed and it's kind of just a real a real good example of that and then eventually you build a deex right you get very much like kind of down the rabbit hole on like how aex Works um how liquidity pools work and stuff like that and after you do these challenges you actually join the build Guild so anyone can be in the build Guild and you have some special telegram chats where you can work with other devs uh on building eventually there's some other ones like stable coins which is actually a new challenge really cool uh prediction markets another new challenge which is you know prediction markets are really hot right now so you actually build one there uh you learn about deploying to a layer two and you learn about multisig and SVG nfts which are like our more advanced nfts so there's lots of fun stuff you can do in there um another cool thing that uh I've been working on for the last few months I work obviously for the graph of melso and the build Guild and so speedrun ethereum has been like a a very uh influential part of my experience coming into the space uh I created a new platform called graph Builders base camp which is kind of aimed at the same kind of scenario you're building smart uh writing smart contracts but this actually um teaches you and validates your experience on how to write subgraphs on the graph Network as well so if anyone here is interested in like the graph and like data this is also a really good and I have a video that I'd like to play for this uh so you guys can check it out huge shout out to our design team at the graph who created this [Music] awesome so yeah you guys can check that out um you can go to basec camp. theeg gra.com and there's a series of missions you can do up here on the top left um they're range all the way from like again very basic like an orientation Mage all the way down into like more advanced subgraph development uh and after after you do each one you actually get an nft so you meant this kind of like onchain soulbound nft uh that kind of like just verifies you know that you've been uh done it uh the cool thing is this entire platform is also decentralized it's utilizing uh smart contracts and it's all built on chain link functions so you can technically spin up this project uh which is a GitHub project and you can run all these on your laptop you don't even actually have to connect to the Bas camp.

theeg gra.com uh because you're using smart contracts and the chain link decentralized Oracle Network to Mint those nfts so really cool use case of the graph as well um and if you look on like the build Guild website so like if we go to the build Guild right and we go to the app and I connect my wallet so here's me you can see that I have the build on there so my my uh ens is cryptomaster doeth and so if we click on that there's a link to the live demo and then there's a link to the code so you can come here and kind of see what it is uh how it works um and you can spin it up on yourself as well too and check it out so please do that but let's let's get into some coding Let's see we have uh what 13 minutes to go let's see if we can push a application uh out really quickly so we're going to use scaffold e so we're going to go to scaffold e doio we're going to grab this npx command which is basically uh like a a script that you can run that gives you this kind of like Choose Your Own Adventure uh to spin up an environment of scaffold eth right so we're going to do npx create eth at latest we're going to choose a name so we'll just do Ed for like e Denver it's going to ask you what framework for your uh chain that you want to use so we support hard hat and Foundry so if you're new uh to writing smart contracts um hard hat has been around a lot longer I recommend that it's probably easier to find like documentation if you just want to write your smart contracts and tests and solidity Foundry uh is a good good one for that it's a little faster it's a little newer you're really up to you I'm going to choose hard hat it's going to kind of go through and install all the all the dependencies for you so it's a it is a yarn package so it has a package Json file it's a mono repo and it has everything defined for you so this is going to spin up all the proper packages for you and then it's going to format the files for you and all that good stuff um I've actually already did this to save time just because of the internet connection so I have a directory called eat Denver here when it's finally done you'll get this output that says okay are you ready to get going we need to spin up a chain we need to deploy our contract and we need to to start the front end so that's exactly what we're going to do is we're going to do yarn chain which is going to let me spin up my uh hard hat we're going to go over here you always need a couple windows open with scaffold eth so you can just do this in separate terminals uh it's up to you I use t-u which is just easier and we're going to spin up the front end so we have this virtual chain on the left we have our front end on the right on Port 3000 and then now we can go into this last directory and we can do our yarn deploy so all these commands are yarn this yarn that makes it really easy to orchestrate now we've deployed a contract to our uh hard hat node and we get a contract address and we get some gas and everything's good uh we have some console output and you'll see this really this last line is the is the most important thing it it created um a special set of typescript definitions for our smart contract which is really powerful because um when you're writing in your front end you want to be able to like interact with a smart contract using those typescript definitions is like really really awesome because it's super easy and if we look at scaffold eth running on Port 3000 we'll take a look and see what it looks like uh there's a really cool feature called the debug contracts Tab and if we go here it takes a second for it to compile because it has to compile for the first time so we'll give it just a second there we go uh we're on the wrong Network let me disconnect there we go and you'll see this this is like your hello world page kind of can ignore this this just kind of gives you some hints but here in the debug contracts tab is where the the real magic of scaffold eth is is it has this ability to ingest those types and just build this kind of UI for us which is really cool because then we just know how we can test our contract without having to write any front-end code right so I I can tell right now that this contract has a string called greeting it has an owner which is an address it's got some like a boole on and then it's got an counter and and it's got a read function and a couple write functions right so it's really easy just to know what's going on I haven't even looked at the contract but let's let's change the contract so we have this like building Unstoppable apps um we can try to change the the greeting to something else because we see there's a set greeting function so let's call it eth Denver boom boom boom and try to send it's going to tell us we don't have enough pay to pay for gas there's a built-in faucet so you just hit this little faucet button it will give us some funds from the faucet then we can hit send again and there we go we updated that state variable to e Denver right so we've kind of like messed around with the contract we get a receipt transaction receipt that has all the the response we can also pay some value if we wanted to like if we do 0.01 eth You' think you could just hit send but we need to contract or uh we need to send it in way so there's this cool little function here that allows me to uh translate that to way and then I can hit send and there we go now I got some money in the contract here there's $22.67 in the contract but there's this withdraw function can I withdraw the funds no probably not says I'm not the owner right because I've kind of protected this we know that this has has some kind of protection because it's probably like blocking me right it says no you're not the owner you can't withdraw those funds so let's look at the contract real quick let's let's open it up in uh VSS code or cursor whatever you prefer so we have uh vs code here we have our packages folder so scaffold e is basically this might be hard to read let's see it's two folders in the case of like a standard install um I will tell you that there are extensions with scaffold eth which are really cool and one of those is called the subgraph extension uh that's actually how I built the uh graph Builder base camp is using the subgraph extension which has a built in like the graph functionality to to spin up the graph but then there's other ones too so you might want to use an extension and if you do there might be additional folders but in this case we're just doing the standard kind of scaff setup so we have our chain and we have our front end right those are the two folders that we'll spend most of our time in inside this packages hardap folder there's a contracts folder and then there is our contract so we have this kind of starting contract it's basically exactly what we just saw um you know in the in the UI so we could probably make some changes here so uh what I'd like to always do is kind of just like make one simple change like let's do uh address public uh the boss we set a boss and then maybe we want to have a function to like update who the boss is uh set boss something like that there we go so we have this kind of new new variable we're adding right and then we have a function to update the boss right uh and then we're going to pass that in as a as a string and or as a address sorry and so if we want to deploy those changes we can come over here and just do yarn deploy again it will push the new changes to the chain uh we could also force a contract like if you need to like make sure you get a new contract for some reason you can do a Das Das reset and it will force a new contract um just kind of a nice little neat to know and then if we go back to SCA now it will refresh and we'll get that new boss variable right so we have this boss and we can set who the boss is so let's set it to vitalic doeth Boom he's the boss all right there we go so now vitalic is the boss and you can see it's got this cool like ens resolution uh it kind of shows us it's got a little copy paste thing um and so this is cool for like testing you know you make a smart contract change and then you publish it but maybe you want to like edit the front end right uh if you go to scaold eth and you go to the docs there's a whole section on components so everything you see in the scaffold e like the the little address component that has the ens resolution and the copy button is there there's a balance component that lets you switch from e to um uh dollars there's uh an address input field that does ens resolution so you can put in an enss and then you have the ability to interact with the contract as well so if you want to read from the contract or if you want to write to the contract there are existing hooks in react that let you do that so it's super fast you don't need to like mess around with uh writing your own hooks they're there and they work great I mean for there's a whole bunch of apps that have been built on scaffold e that are that are really really great so I'm not going to do any of the front end stuff because I only have five minutes but let's try to deploy this uh to a test net so at this point we don't have a deployer account because we've been using these keys that come with hard hat so we need to generate a deployer account so we can do yarn generate that's going to spin up uh basically a private key and a public key pair and store it on my machine with a password so let's do that there we go it creates a private a public key right here which is here and I can fund that so and I can if I want to look at see what my balances are I can do yarn account and then I can put in my password again because we don't want to keep private Keys laying around on the machine and it gives you a little QR code and then it goes through and checks all the balances let's just send some funds there real quick so I'm going to use metamask uh let me grab the address again let me just send uh bolia yeah sapoia soia I have a lot of FIA here let's send [Music] 0.25 sure confirm cool so I just sent the some funds from my metamask to this deployer so if I do yarn account again it might take a second so uh actually you know what we'll do is we'll do yeah let me do it one more time yourn account see if it went through there it goes so now we have a balance of uh 0.

25 so now if I want to deploy to sapoia I can do yarn deploy D- Network sapoia and this will push it to toia that's it uh it's going to ask me for the password one more time because I need to sign a transaction with hard hat it's going to compile my contract it's going to create the transaction for me and it's going to push the the contract hopefully it's a little slower obviously than local hosts um and then while that's doing that we need to point our front end there it goes it was successful we have the contract deployed we need to point our front end at sapoia so let's go back to the project and let's come down here into the nextjs folder and let's look at the scaffold config file it has the change. whatever so we can do change. sapoia like that this is uh basically the target Network so it it does the chain ID and it figures out what the RPC is automatically buil with the built-in types and so now if we go to scaffold eth we can load it up uh let's get refresh real quick and you'll notice we get kicked out of the burner wallet so before with scaffold e you have this cool little burner wallet that's built in and we didn't have to connect to metamask but because we've published to a test net we need to actually connect our wallets now so let's connect it boom there we go and then there we go now I have the debug contracts Tab and it's pointing to sapoia and I don't have a boss set I could set it to vitalic eth send boom there we go so I've deployed the contract updated my front end probably the next step would be I'd want to publish my front end uh you could publish it to like ipfs or some kind of like decentralized network but we do have the uh or like Fleek is a good option um but we have this built an ability to publish to uh versell so you can do uh yarn versel uh I think it's yarn versel see what is it there yarn versel colon YOLO d-r okay so what that does is it basically like it'll ask you to sign into your versel um it's basically just versel uh CLI and it's going to ask you if you want to set up and deploy we do I think yes do I want to use an existing project yes uh found a project do I want to use that one no uh do I want to link it to a different project no and then you can just create it so we can do eat Denver and hit enter and no and there it goes so now I'm uploading my front end to versell so um in a few minutes this will be available if you have versel you probably need to log in and make it the deployment public but from the for that from this point we basically built an app pretty quickly like within 10 minutes it's not a cool app it's just something silly but uh using scaffold e you can see how you orchestrate very easily um you know using those built-in commands so I hope that was useful and uh I'll be around here so if you guys have questions afterward I would love to answer them for you uh but the tldr is you scaffold eth speedrun ethereum.org gra.com all right see you guys [Music]