# Build and deploy an onchain app in 80 minutes! by Austin Griffith | Devcon SEA

- Speakers: [Austin Griffith](https://streameth.org/speakers/austin-griffith)
- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2025-10-09
- Duration: 1:16:02
- Topics: Science & Technology
- Watch: https://streameth.org/watch/yt-BXimn0tony8
- YouTube: https://www.youtube.com/watch?v=BXimn0tony8

## Description

We will tinker with Solidity, build out a frontend, deploy the contract, and ship an app onchain—all in 80 minutes with state-of-the-art tooling.

Speaker(s): Austin Griffith
Skill level: Intermediate
Track: Developer Experience
Keywords: Tooling, DevEx, Public good, app

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum, https://warpcast.com/devcon
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/ 

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on Swarm, IPFS and more.

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers. 
Devcon SEA was held in Bangkok, Thailand on Nov 12 - Nov 15, 2024.
Devcon is organized and presented by the Ethereum Foundation. To find out more, please visit https://ethereum.foundation/

## Transcript

[Music] [Music] okay here we go thanks for coming out here today I think the goal today will be to spend a little over an hour and we'll build and deploy an app and I'm going to start from like complete scratch I don't even know what I'm going to build it will probably be something silly and stupid but it will show you how to go from zero to one uh building an onchain app so the the key piece uh the tooling we'll use today is scaffold eth2 uh if you just go to scaffold E.O you'll find it uh there and uh I'm going to do an MPX create eth so I'm going to paste this in here and just get started we're going to this will probably use some internet so we'll take some time this is uh my Devcon app okay and you'll notice here I have the choice between hard hat and Foundry you can choose whichever one you want uh doesn't matter really depends on if you're going to be writing a bunch of tests in solidity then Foundry is probably better but in this case I'm just going to deploy a simple app so I just went with hard hat but it doesn't either either one is just as good I think uh hard hat is catching up to Foundry in terms of speed but Foundry is faster right now and great for uh like I said writing your tests in solidity uh but I just went with hard hat today but it was just a random decision it could have been either one so uh we're going to let this install and it will take a little bit uh definitely there will be time for Q&A but if you have questions along the way just like shout them out and I can repeat them and try to answer them so so feel free to just shout questions out this should be like very open-ended I'm going to go through building something with the tooling and just kind of show off both writing the smart contract and the front end and then deploying the app to a chain we're waiting for it to install right now though and actually while it's waiting for that I could pull up cursor or VSS code whatever your uh preference is I kind of like cursor because I can throw some prompts at it and it'll do a little AI stuff for me here and there let's see okay uh let's see I want to CD into Devcon app nope not demo app done this a few times before Devcon there we go and I'm going to do uh so after you clone down the repo you get this list of commands you need to run so we're going to do a yarn chain and that's going to spin up our local blockchain and then we'll do a yarn start and that will bring up our front end and then we'll do over in this terminal uh here whoops we'll do a yarn deploy and that's going to deploy our example smart contract to our local chain oh CD Devcon app yarn deploy let's see if this works okay so this is this is kind of the starting point you have your uh your code up here oops Devcon app you have your code here and you kind of have scaffold eth over here and uh let's get right into the smart contract so here is our smart contract uh scaffold e comes with a uh kind of example smart contract that has uh a handful of different concepts already built into it um Primitives and data types uh you've got events uh modifiers Constructors all the all the good stuff here is kind of just an example smart contract for you to quickly just kind of Tinker around with solidity uh but it's a greeter contract right classic greeter we can set the string and uh looks like there's some extra logic here keeping track of how many times and maybe this uh this is an interesting thing here if you send in money it's going to set some premium flag to True right so let's go let's go test that out let's go play around with it so if I go to Local Host our web app should come up here and what I'm going to do is just dink around with this uh set greeting first just to make sure it's working the way we think it is okay so here's our app this is how it uh comes out of the box and I'm going to jump over to this debug contracts Tab and that is where you can really kind of iterate and see your contract and kind of poke at it so uh there was this set greeting let's say hello world this is going to complain that I don't have gas but that's okay let's let's hit it and let's see what it says it says oh you don't have any gas so uh scaffold eth uses burner wallets when you're working local when you're doing local Dev it's a lot easier to just use a burner wallet rather than have like metamask and have to set the chain ID and you know have all those problems that come along with that so you'll see here I just have a burner wallet here this is just a an address that's generated and to show that off if I just open up Local Host I get another address see that there's a new address there let's do that one more time let's just open an incognito window and go to our app and you'll see I get a new address every time because of that incognito window uh because it's stored in local storage so bad idea to have burner wallets in production great idea to have burner wallets for Dev because you can quickly uh just kind of like hit buttons here and make transactions happen without having to uh you know I have the metamask prompt come up so uh right here is a faucet that's the second thing I need so I've got my burner wallet here and I'm going to hit this button and it's going to give me some eth so now I have eth for gas now let's try this set greeting one more time and see if this works there we go hello world so we were able to uh let's say Hello World 2 let's try it again we're we're able to send a transaction and that's going to update the greeting in our smart contract and uh let's go try that that premium thing let's go look at that one more time right here it says if if there's value it flips this premium flag to True whatever that is so let's send in some value and you'll notice I can't do 0 001 right I can't just send that amount of eth it's a decimal you have to multiply it times 10 the 18 and so scaffold e has that little button over there that takes it times 10 18 now of course you would wouldn't want your users to have to type in you know 01 and then hit the times 10 to the 18 this is very much built for a developer and it's meant to kind of expose you expose to you what's happening kind of underneath the abstraction but I need to hit that button to take it to way and then let's see what happens all right hello let's say let's say Hello World 3 even right and we're sending in value now you can see that there's money that's getting collected in the contract and then premium flag got set to true so this this is kind of like the the core game Loop you want to get in with scaffold eth is you want to have your smart contract up over here and then your front end up over here and as you add things to your smart contract your front end will Auto adapt to it so let's just go uh add some thing here uh let's say um maybe we want to make a mapping balances that looks good so so for any given address there's a un 256 so there's balances and then let's make sure let's make a function called transfer right and hopefully just the AI writes this for me and I don't have to do anything but basically we made a mapping that keeps track of balances for any given user and then we have a function that allows us to transfer that balance and let's deploy it and go Tinker around with it so when I do the yarn deploy we'll get some more stuff over here there we go so now we have balances here let's check my balance it's going to be zero right yeah I'm goingon to I'm going to need an initial balance so let's copy our address and let's go back to the Constructor and let's set this dude's balance so we'll say balances of this address equals a th000 sure now let's go deploy that again see this kind of core Loop I'm in here where I'm like dinking around with my contract I'm hitting deploy and then I'm going to my front end and trying it out so what we want to do is say hey do we have a balance for this address we do okay and then if we wanted to transfer let's send one to vitalic right you'll notice this does ens resolution it has a nice ens Avatar this is something that you get out of the box with scaffold e it's made for for uh building apps so it has all of these components that you'll use to to build your app quicker so let's send one to vitalic here we go uh oh uh oh uh uh actually it's a thousand way right so I should not have done this thing I should just do one there we go yeah I didn't have the balance to send to him and then if I go check my balance again it should be 9.99 right okay so we're kind of in this Loop where we're able to write some solidity and Tinker around with it in the front end and try things out so let's let's let's think of an app to build let's say we wanted to make like a a really really silly prediction Market we might need uh an address that we would call the Oracle okay we're going to say address public oh man uh and I'm going to call this the Oracle and I'm going to set that to I don't know this dude's address I guess I don't really know what I'm doing right now I'm just kind of tinkering around trying to figure out what I want to do and then let's say there's like maybe three possible outcomes in our prediction market and I want people to be able to buy in to Any Given one of those uh things so let's see maybe we have like a function called like purchase I don't know and then let's do like a un 256 um maybe we'll call it index and it will be payable hey that's pretty good let's see what this is no I don't think we quite want that let's see what we want to do is keep track of uh how much someone has paid into this so it's payable yeah so let's see let's do this let's do let's see how should we do this maybe like an an uh let's let's do it like this let's do a mapping for an address to a number and then actually I want another mapping inside of that maybe uh maybe this is too complicated maybe I should do something simpler uh maybe I shouldn't uh build a prediction Market maybe we just uh let's just sell some things how about that how about we let someone buy a thing in our contract and uh we trigger an event for it or something like that maybe they purchase an item and the index is that item and so we might want to emit an event here um maybe we want to trigger some other action um let's yeah let's get rid of this Oracle let's just go with purchase and let people buy something and we'll uh trigger an event and we'll let them send in money but uh I don't know maybe maybe there's like five or six different items and they're buying those items maybe we want to require how about we'll require that they send at least uh 0.001 ether or something like that must send at least there we go okay and then yeah yeah maybe we yeah increase let's see balances yeah maybe maybe let's do a mapping and we'll have an address to account and this would be like items bought I I don't know we're just kind of dinking around here playing around so we'll keep track of a mapping of items bought and so then when someone goes to purchase this item we will set items bot message. sender plus equals one and uh yeah I don't know I don't know what else we'll do but it's it's up to you you guys are the solidity devs it's up to you to really write this logic in you can build you know whatever you want I'm just kind of showing an example app here so I guess we let people purchase something and we keep track of the items uh bought let's let's go play around with it and see if it works so let's go ahead and deploy this and let's go see if we can buy some items from our contract uh oh what did I do here uh balances right yeah get rid of this kind of like the prediction Market idea I should have uh prepared it a little bit better but for now we'll just have a little store that lets people buy things so let's try that out so we've got this purchase function now that lets people put in an index we'll have that in the front end so let's say you're going to buy item three and you're going to need to send in 0.001 and let's see if this works there we go so it did work I was able to trigger the transaction and the money went into the smart contract but now it's got me thinking hm what happens if that money gets locked in that smart contract I should probably set up some kind of like owner and it looks like there is an owner already here uh looks like it's passed in through the Constructor let's go look at that it's the deployer let's set us up as the owner okay and let's redeploy it and see how that looks what I want to do is make sure I don't have money locked in the cont cont I want to be able to withdraw the money I guess so if we were to put this on a live Network we wouldn't want a bunch of money to get trapped inside the contract so let's see we're going to buy item two for Point 001 and let's hit send and the money goes into the contract but now the question is can we withdraw that money back out and I'm going to there's a withdraw function here let's go look at that in the code real quick it was built into the contract before it looks like it checks to see if you're the owner and if you are it sends you the balance uh of the contract that's perfect let's try it and see if it works so we have what like $3 in the contract and then we hit withdraw and hopefully the money's gone Okay cool so you'll spend a lot of time in in this Loop where you're tinkering with your solidity uh you're you're in the front end poking at your contract you're adding new things to your contract uh kind of like what I was doing there where I was like oh I'm gonna make a prediction Market okay now I'm just going to make some items that you buy like you're you're still kind of playing around but scaffold eth lets you get in this Rhythm where you can make a small change in your solidity and then go Tinker with it uh in your front end with this nice Auto adapting front end but let's say we're we're pretty happy with it right let's say that we like the way our little store works here um and we are going to now maybe work on the front end a little bit okay so what is it it's not happy about this oh you know what we should do we should uh maybe emit an event right emit yeah something like that and then let's throw that event in here yeah there we go nice and then yeah the index is there it's still not happy about that is it let's see let's see if this works as long as it compiles I'm happy okay so now we have an event that is emitted when we buy things but let's go try to buy you know item number one for 0.001 let's try this make sure this works okay cool so uh you'll spend more time on your smart contract but let's say that I've spent weeks or at least days working on my Smart contract getting it right uh really I'm just kind of tinkering around so I have this simple uh little bit of code but you you'll take more time you'll spend more time on this you'll you'll get it working you'll probably want to even write a bunch of tests for it and stuff but let's say we're happy with it let's say that smart contract basically does what we wanted to do let's let's now move on to building the front end and have uh some react tuck to our smart contract so uh the front end will be over Let's see we probably want to let's just have like a couple of buy buttons and a thing that says how many you've purchased or something like that right that'd be a very simple front end so if we get out of hard hat and get into nextjs we can find our app here and this is this page so if I go to home there this will take me to this this front page here so what I want to do is kind of clear this stuff out out and prepare for adding some code let's see let's clear all of this out whoa let's see down to about here how's that look there we go okay and so then instead of Welcome to scaffold e we'll be like welcome to my cool crypto store or something like that right all right oh I spelled it wrong c r y p t o there we go all right my cool crypto store is ready for business now uh you'll see that we're using wagi for the use account I can get rid of some of this stuff and so uh the wagi docks are are always really e uh really nice if you need to look anything up we can just go look that stuff up right now uh for instance we're using use account right we could go look that up and see how that works but what it's doing is giving us um uh the basically the logged in user here the connected address is what we're renaming it to and then we're displaying it here and that's what creates this nice thing right here and so just to dive into that a little bit more look look at how this address looks if we were to take this address component out out and just have the raw address right in our front end it's going to look super ugly but let's do it just to do it just to see it okay connected address if I hit save oh no uh there we go yeah that's what I want there we go so now we have like this really ugly address right and you don't want to display an address like this in your front end for your users you'll want to have that nice address component wrapped around it let's do that again again I think I can just undo a couple times just to see the difference between this okay so instead of just displaying the raw address we're going to pass it into this nice component and when I hit save here then we get this nice looking component that has the block key or the ens Avatar the nice little copy button and then if I click this it's going to take me to the block Explorer so right now we're on Local Host so it's just the Local Host block Explorer but if you were on a live network uh and you clicked that address it would take you to that address on the Block Explorer whatever Network you're on okay so uh let's set up our store right I'm guessing we probably want to have some like buy button and then we probably want to like read how many items we've purchased or something so uh to do that let's go look at the scaffold eth docs normally I would probably already be just like prompting cursor to write this for me but I think it's a good practice to show y'all off y'all how it works uh so instead of prompting the AI I will actually just like build this thing okay so what I'm looking for is the let's see interacting with your smart contract and I want to specifically do use scaffold read contract right so this is how we're going to read from our contract I'm just going to copy this code exactly and paste it into my front end if I I can grab a hold of it there we go okay and we're going to put it with our other hooks here okay and we're going to uh import it okay and so uh this is really nice because anytime you make a change to your smart contract those artifacts are automatically injected into your front end so watch this if I go to this function name and I do open quotes it's going to give me a suggestion for all the different items that are in my smart contract this is really nice and I can go here and say you know total what like items bought I think is what we're looking at okay and then that's going to come back here and let's see does that take in what does that smart contract look like items bought takes in an address right so we'll need to have uh our address here and we'll say this is the connected address right so hopefully with just this line this line of code right here basically what we're doing is we're going to our smart contract and we're reading how many items we've bought and we're storing it in this object right here so let's go uh maybe down here uh let's see maybe we'll make a new div hopefully I don't have to center it okay uh let's say items bought something like that and then that and I think I need to do a two string here I think I've done this a few times before and had that mess up but let's look and see what we have here probably one okay there's one item bought it's really funny that that's not centered and I was joking about centering a div but I'm not going to go Center it it's going to stay like that and let's go purchase like item five for 01 make sure that counter goes up right make sure we're correctly reading the state oops big right you need to hit that button okay so let's go back and look here now our items bot is two okay so it's keeping track of how many items we bought and it's putting that in the front end so we're successfully reading from our contract now we want to write to our contract and to do that I'm going to go to use scaffold right contract and we'll bring this in here and we'll import it and then we'll grab this button which is exactly what we need it's for setting the greeting so we'll have to do something a little different but we're getting close maybe we'll set up another div here and then throw this in here and then uh you can [Music] see oh oh boy oh boy I don't think I got all of it make sure I get all of that and then paste that in here please work okay there we go so uh this is a button and uh when you click it let's see we're going to say buy um a hat okay yeah this will be for a hat and so that will be uh index one maybe right and what's the function we need to call we can do that same thing where we open up the quotes and it goes and looks at our contract and gives us that purchase function and what does that that purchase just takes the index right so we're just going to say hats are index one for some reason uh why is it not oh maybe it needs to be a big end okay and then uh value here we're going to have to send in some money right Z 01 whatever we want to end up charging for this and import parse ether from VM all right let's look and see what we have so far how is our app looking so uh if I hit buy hat what's G to happen here hey pretty cool yeah items spot goes up and the hat uh and and this increments right so maybe let's then copy a couple of these buttons oops okay so buy shoes whoops okay and maybe that is uh even more expensive I don't know and this will be item two for instance okay let's go let's go look and see how that looks so now I can buy hat and notice like there's no met mask pop up because we're using those burner wallets but eventually like we'll have metamask and we'll have all that stuff there so uh let's see if this works uh oh what did I do so I think it needs to be exactly 01 doesn't it let's try that okay cool so we have our cool crypto store we have the uh uh items that we've bought so far and then buttons that allow us to buy more items right very simple stupid app you're you're the builders here you guys can be creative you can write some good solidity you can build the front end all I'm trying to do here is just show you how scaffold eth can help you build this thing very quickly so uh we've got our store basically working it's super ugly but it's uh it's it's pretty good so now I think the next step would be uh to try to deploy this so let's see if let me I I've got plenty of time I could definitely like make this a little bit more advanced but uh Maybe not maybe let's just get this thing all the way out into production and try it out first oh you know what I need is a withdraw right I need to make sure that this withdraw works but I can always just come into the debug into it so I I think I'm happy with that yeah yeah let's just go with that o maybe events how about we list events that's a good good thing to do here let's go to yeah event history and I'm gonna grab this and I'll throw it in up here okay and what is our event name item purchased cool so we're going to listen to your contract item purchased I don't really need much of this stuff definitely don't need that uh I don't think I need any of this stuff let's see what happens so we should get some events here and then if I wanted to list those events uh let's just like output them in a really ugly way here oh hey how about that oh thank you let's see what that looks like uh oh oh I need to import use scaffold event history so I'll import that there there we go items bought we definitely don't see our events though what do we need to do to be able to see our events event transaction hash what is this I don't even know Let's do let's do something like uh just like a pre and just like spit the event out huh I mean that looks all right let's go to console log I don't know what it's doing let's see uh what this event well I don't even really care about this key to be honest let's see oh man it's freaking out uh yeah let's get rid of that so let's just have this div and let's have uh let's see yeah let's see what things we have on this event dot AR dot uh buyer yeah let's see it is not liking this what do I have wrong here yeah okay no events I'm scratching it for now let's let's get this thing built and deployed uh I'll come back to the events if I have time later let's get our store deployed that's the key here okay how's that looking do we have the store can I buy a hat can I buy some shoes does the items go up does the contract hold the money looks like it is looks like it's all working still okay so now uh whoa Let's uh let's deploy this thing let's uh let's put it all the way out into production so there's going to be two parts of that right we need to both deploy our smart contract and deploy our front end so that that will take multiple steps here um o I'm going to venture into the yarn generate real quick this is something new to scaffold eth I hope this works I might have to do some weird stuff here let's see if it does Okay cool so to deploy an app I'm I'm going to need a deployer account I can't just use the the zero account on hard hat or whatever I'm GNA have to actually like create an account and fund it and that's what this does here is yarn generate created my account for me and then I'll do a yarn account and that's just going to show my deployer account okay and then I'm going to send some money to that what what network should we deploy to Bas okay anybody I'm I'm gonna go to Bass here we go so I'm going to put like a dollar worth of Base into this deployer account okay $1 I'm going to use a punk wallet at Punk wallet.io it's uh built with scaffold e one okay so now we have our uh smart contract ready to go and I just sent a few bucks to this deployer account so now I'm going to do a yarn deploy Dash Dash Okay so yarn deploy is what I've been doing this whole time right if I hit yarn deploy it's just going to deploy it locally but if you do yarn deploy D- Network and then pick whatever Network you want to deploy to let's let's go to Bass okay so hopefully this will deploy our smart contract to base like a live Network we're going to spend real money and we're going to deploy a real smart contract to a live Network with lots of time left I could I could uh make a much more advanced app if we have time okay so I think our app is deployed now but we still need to do that front-end part we need to set the app to uh the right network uh and you do that right in here there's a scaffold config file this is really handy this is where you set up all your configurations for different uh different things within your app and we're just going to change this chain to base and if I hit save now come look come look at our app uh you'll notice that uh the burner wallet went away and now we have to connect and we'll use metam mask okay and I'll connect that o I'm not the owner though we should redeploy this with my metamask as the owner so I can withdraw the money I'm going to do that so over in my deploy script uh it's setting who the owner is right here I want this dude to be the owner instead and let's redeploy our contract and that that means that my address will be able to withdraw it was set to the burner wallet before and I don't want the burner wallet to be the owner because then I would have to have Bur while it's in production and it's you you'd rather not okay now let's check this out so if I go to debug who is the owner okay I'm the owner great and if I were to purchase an item like a hat this is a real transaction now I'm spending real money I'm putting money I'm loading $3 up in this contract uh yes I want to proceed uh bro okay there we go so we just made our first transaction on our smart contract and let's see if our items bot goes up and hopefully it does and also hopefully yeah I can see that I just executed on a contract too it's pretty cool when it's a live public network uh items bought is now one fantastic okay let's let's buy another Hat real quick just to load the contract up some more okay make sure that works make sure items bot goes uh up again and then uh what we want to do is go make sure we can withdraw the funds back out of the contract let's go do that next so if I go to debug contract I can kind of like go poke at my contract here and what I want to do is make sure I can withdraw this $6 so let's make sure the $6 comes back out to me when I hit this withdraw button so we're watching this money here and this money here to make sure that that works yep got our money back okay cool so our app our smart contract is already deployed to base but our app is still on Local Host like I said there's kind of like like two pieces to deploying this you need to deploy your smart contract and your front end so to deploy the front end I'm going to yarn versel YOLO prod this is my my favorite command uh and what that does is just like it um ignores like type safety and stuff is what that YOLO prod stuff does I think there's some kind of like um checks and stuff and I just don't want to even deal with that okay so let's see now uh sure no no uh it's called Devcon app okay and it's located there and we'll no we don't need to modify anything okay so now it's deploying so we've tinkered with our smart contract where we could set it up so we have the smart contract uh uh here right we had our smart contract here and we had this nice uh debug page and this was like our initial game Loop right we wanted to Tinker with our smart contract we wanted to build our smart contract we weren't quite sure what we wanted yet but we kind of like add things into our smart contract and then come over here and uh kind of feel how they how they work right we can kind of see the things here and we can poke at them and try them test our assumptions that was kind of phase one was building out this smart contract with this uh feedback of the the debug Tab and then phase two was kind of moving into the front end and writing uh some buttons and some some read and write functions right that's that was kind of f pH two and then phase three was deploying the smart contract and the app and that is on its way to be deployed but we're waiting on it for a little bit so uh there's there's quite a bit I could do um to to show off more uh scaffold e stuff but let me just kind of like pause there and open it up for questions and maybe those questions will take us down some other Rabbit Hole uh yeah go ahead so uh you're saying like when I hit by hat it immediately updates uh uh there's there really small block times on BAS so it's not like ethereum where you make a transaction and you have to wait 15 seconds for that to finish like the transactions are happening immediately because they're going to like a central uh sequencer does that make sense it's just an L2 it's just faster cheaper L2 on eth it would it would take 15 seconds I would hit by hat and it would wait you'd have to wait for that block to get validated basically so it'd be like a 15sec time between when I hit confirm here and when it actually like lands on chain the scaffold whoa uh so in a case where it takes like on another chain like longer scaffold eth is like pinging the chain at all times to to get the info yeah that's what that that read function is is like constantly reading and looking for changes uh let's look at that right here this the items bought right yeah all we said is go to your contract and read items bought for this address and from then on this items bought item is up to date with whatever is on chain okay thanks does that make sense yeah cool more questions anybody have any more questions about what we've done so far about how it works reading and writing to the contract anything else might just have to build oh here we go we got a question okay thank you very much uh I've learned many things uh but as I was wondering whether uh I can choose the account to use for deployment because uh when you you wanted to deploy the smart contract you generated an account and send some it to to this account before deploying yes so is it possible for me to set uh the account which I want to use to deploy it's yeah so um that is a good question so I just generate an account and this is what I like to do is I I like to have an isolated deployer account that is just for this deployment so I don't want to use another address from somewhere else I want to create an address just for deploying this contract and put just enough money in it so it's kind of like a onetime use account but technically uh uh you could like set some other uh deployer account in here the the way I'm doing yarn generate and yarn account is it's kind of handling the address for me but I could get in here and like change the private key if I wanted to I think does that does that make sense but you you really don't want to do that it's best not to do that it's best to have a nice isolated account that you put just enough money in and deploy with it does that make sense okay thank you I have a a second question uh as for the front end so you deploy the the smart contract on the blockchain which is a decentralized decentralized platform but for the frontend you you want to deploy it on Vel so are there solution to deploy the front end on the platform which is also decentralized that is a also a great question and I think that it's kind of an elephant in the room when we look at like decent ized apps and they all just like live on verel or something uh you can I think export this you could do like a static build and upload it to like ipfs or something like that it's just not something we have like I don't know let's if I do a yarn ipfs does this work I used to back in the day I don't think it does though is Carlos and crew here I don't know if the sand Garden's here no I don't see them uh you yes I I think the the short answer to that is you could make a static build of your website and upload it to like ipfs or to other services but it's okay if it's in versel because it's open source and really forkable so if someone wanted to redeploy this somewhere else they should just be able to Fork my code and bring the front end up in verell or whatever they want but it good question though like verell is centralized for sure and so if you're trying to build a decentralized app you need to make it in a a way where people can spin up their own front ends or Fork your front end and bring it up uh on any service but we just deployed to verell for for this okay thank you very much yep good good questions okay let's see where our deployment is did I did I do the yarn verell did that go maybe that already happened up here let's see if our thing deployed uh yeah here it is okay hey hey there it is okay so if you wanted to go buy something from my store you totally could right now uh I could share this URL with you and of course I would want to shorten the URL and uh make it look nice but uh I don't know in about 20 minutes we were able to Tinker with our smart contract we were able to deploy it to base and then we were able to deploy our front end to a live URL and let's go buy some stuff from our store real quick okay let's do a buy hat let's see what happens here yeah spend some money $3 okay and now this is at a live URL so this this app is decentralized as far as Bas is decentralized and versel is decentralized someone could definitely like Fork this and bring up their own front end on Local Host so uh but it is in versell and we were able to buy a hat and buy some shoes from our store and we're making transactions and they're working uh and then maybe we should go sweep that account uh and empty the the contract let's let's go do that next so let's go look at our contract has like $10 in it now and if we withdraw that let's see what happens please work man that's annoying I don't know what I'm doing why it's okay now we're watching to see if this money comes out of here and if successful then we built our first decentralized store and deployed It All The Way live and sold some shoes and hats and then we withdraw withdrew our money and it worked so I was able to buy the items I have the buttons I could even like send this URL to you guys you guys could navigate to this and you could buy hats and shoes also uh more questions anybody have any questions about scaffold e I'll be doing a uh yeah yes please builtin sorry so briefly showed the built-in block Explorer yes I think is pretty awesome if somebody was using say they wrote their own tests against Local Host could they use the block Explorer or would that would that work like if they weren't using scaold e if they had some pre-written unit test but wanted to sort of take a peek into the transactions possibly yeah so let's go well my BL now when I click this it's not going to go to the block Explorer it's going to go to the base block Explorer but let's go put the app back on Local Host and then we can look at that so let's go to yeah we we just barely touched on that block Explorer let's go let's go look at it so what I need to do is go to my scaffold config and I need to let's set this back to hard hat and hit save and then our app is going to just by doing that one change our app should go back to Local Host oh I'm at the live URL there we go here okay and it's going to have me switch uh networks this is really nice by the way if if a user comes in and he's on the wrong she's on on the wrong network uh you need to bump them over to the right Network and so scaffold eth is going to handle that too notice this nice switch but let's go look at that block Explorer again so uh yeah I guess that's for that address what else can we see here this would be all the transactions here right and I can click in and see you know there's a purchase of 0.1 someone called the purchase function so yes I think that to answer your question you could use this block Explorer to do some local inspection on things um I'm not sure if that was exactly the question but hopefully that answers it like so I just been in situations where I've wished for a a local host block Explorer yeah yeah uh what you can do uh so block Scout is also another one you could go get Block Scout it's an open source uh block Explorer and you could run that also like bring up a Docker container next to it and it would uh also work but yeah this this is kind of rough but it would work it would do what you want I think it would kind of tell you you can kind of see all the transactions there that are happening cool okay so our store is up uh we put it on base kind of just to recap sort of like phase one is editing the smart contract and uh playing with it in this debug tab so you'll get scaffold eth downloaded you'll Tinker with your solidity and you'll kind of play with it here getting it written correctly maybe you know do I want to use arrays do I want to use structs like how do I want to build this thing that's kind of like phase one is tinkering with your smart contract testing your assumptions poking at it with this debug side then phase two was that front end right we had to do the read contracts we had to do the write contracts and to do that I just like jumped into uh the docs and kind of copy pasted them you you wrote The Block Explorer right yeah that's that's Port uh so phase two was kind of that front end where I uh was put in buttons and reading and writing from the smart contract and I just use the docs here to copy paste uh how to read from a contract how to write to a contract and that was kind of phase two getting my front end going and then phase three was deployment right we deployed the smart contract we deployed the app and uh now they're all live talking to each other and you can do this anytime you want by just going to scaffold E.O and uh you can clone down the repo or you can do this MPX create eth okay more questions any any more questions yes sir if you would want to integrate more common building blocks maybe like uh uh chain link functions or like a graph or something is there anything we have to pay special attention to or would it just work out of the box that's a great question um so the the short answer to that is there is an external contracts file right here and so whatever contract you wanted to talk to like in this case we have die on mainnet uh what you would do is whatever contract you wanted to talk to you would put that in here and then you can just talk to it with the read and write functions from from scaffold e so uh uh let me see like chain link functions I don't think I could put that in right now now but uh yeah I I think the short answer there is if you want to go talk to an external contract there's this external contracts file uh here in nextjs and you can use that to list out the contract you want to talk to and then the read and wrs from scaffold leth would work the same does that sort of answer that question you you may even like possibly have multiple contracts here uh you might like inherit from another contract or something like that but uh yeah the the things to look out for would be I don't know you need to be on the right network uh just have have that contract in your external contracts and then start talking to it normally more questions about scaffold eth about building on eth about what we did today any any other questions Maybe could go back and uh work on that event page for a little bit we kind of I kind of did the speedrun it was a little bit too fast but uh let's see here let's see if we can get this history going I kind of want to dink with that see if I can get it working sorry they have one question yes please where are yeah is there anything that lists the full stack that um scaffold eth uses uh yeah it it's here on the website so nextjs rainbow kit wag me typescript uh anything in particular you're looking for or just wondering if if there's a list of like all the different tools that are floating in there like I see there's a difference between Foundry and hard hat I don't know if the differences between them or anything like that so yeah you uh at the beginning when we did that MPX create eth it gave me the choice Foundry or hard hat and uh you you basically can choose and scaffold e kind of keeps that that abstraction above so when you do yarn deploy it's going to deploy whether you're using hard hat or Foundry and it kind of takes you know abstracts that way so it's easier for you you just do yarn deploy whether you're using one or the other is there anything else to know with like versel just ran popped in as well anything else on the side it's hard it's hard to be able to think about all the things you might need to know um well that's included in scaffold I mean yeah yes yeah scaffold e comes with either hat or Foundry for your orchestration and then nextjs for your app and and within that you know we have rainbow kit wag me typ STP cool yeah more questions any other questions yes is this available for react native uh I think there is a scaffold e react native yeah I've tried that but I couldn't get it to work react native yeah I don't know we had one a long time ago but I don't know if we still have it uh a good way to find these things is to go to the uh build Guild like our actual app here and then go look at builds maybe we could even search this native let's see what comes up here yeah scaffold E3 act native you said you've already tried that one and it didn't work yeah but it was probably was doing something wrong probably it's pretty old yeah yeah yeah cuz this is you have to like reinvent a lot of things here yeah isn't this like the first version of scaffold yeah yeah this is like an older version of scaffold e too yeah so I don't think we have an upto-date react version yeah any more questions so uh later today I will be doing a similar talk but I'm going to go through um building your first five apps so let me just introduce that before uh before I take off here uh it's speedrun ethereum so if you haven't heard of speedrun ethereum speedrun ethereum is a curriculum that will help you learn how to build on ethereum by having to actually build a bunch of things it'll take you through building a simple nft a decentralized staking app a token vendor a dice game a DEX so this will take you through and have you build the thing and it won't let you just copy paste you'll have to like think for yourself and actually build the thing and so this is a really good way to learn how to build things by just building a bunch of things and I'll be going over each one of these in more detail this afternoon uh I don't know what time that is later later today but uh yeah so build Guild is the Dow that's kind of around all of this stuff that's how we're funded we're funded through the ethereum foundation and we work on tooling like scaffold eth um let's let's look at the extension system too so when we did that MPX create eth command uh here let me show this when we ran this command uh there's an option to do A- e which would be an extension and that lets you bring in uh a lot of other uh tooling so for example let's go look at yeah here we go onchain kit so here is an onchain kit extension so let's even just like copy this I'm just going to create a new folder and run this again let's see uh oops I don't want to do that uh yeah okay so MPX create eth latest and then we have this- e onchain kit and so what this is going to do is it's going to use this onchain kit extension and bring in the onchain kit stuff along with scaffold eth this is really handy you can build oh oh no oh no uh oh that's not good let's let's try another extension let's see if one of these other ones works I think something's broken with yeah say you wanted to do subgraph you'll look for Kevin Jones he'll be doing a talk not tomorrow but the next day and he'll do uh something with the the graph where he does some indexing let's see if all of this fails or uh oh we're going to have to fix that something is definitely wrong here where the extensions aren't loading in I'm not sure what what's that Pro what that problem is but the extension system is really nice because you can bring in some extra components uh for instance you could bring in um like we were looking at onchain kit there right so you could bring in uh some of uh bases uh like their smart contract wallet their uh swap component their token selector you can kind of just like with one line when this is working I'll need to fix it I don't know what's what's broken right now but with one line you can basically install scaffold eth and these extra extensions and it's just going to speed up your process of building even more but I can't show off extensions because it's broken right now I will have to figure that out okay so uh to recap uh scaffold e is a great tool for prototyping but also easy to deploy to production uh we saw today in only like 20 minutes I was able to write the smart contract test it out a little bit build a front end that talks the smart contract and then deploy that whole thing both to Bas and also to versel and so you should be able to do this at home also just go to scaffold E.O and you can get started today uh and then speedrun ethereum is a good way to kind of double click on that and go a little bit deep and learn about more concepts by actually building some things um that might be all that I have any more questions definitely open to questions uh I'm Austin Griffith on Twitter I'm this dude oh man Internet is slow oh no maybe that's what this is or maybe it's just like the internet's nah what's that oh really yeah the MPX d e is let me do I need to make a directory or something let me see let's do test and then CD into test uh oh I wanted to show that I was this dude uh this guy Austin Griffith yeah I can't do it right now I don't know what's wrong okay anyways uh let's see and then let's run that again nope I don't know I don't know what it's doing it could be oh it's telling me that there's rate limits yikes on GitHub is that what it is oh yeah wild okay that is a new one we'll have to we'll have to look at that one I'll I'll pass that on to the scaf team um yeah okay so in recap scaffold e 2 great tool for both debugging and also shipping apps it's uh a great way for you to Tinker and kind of figure things out as you go um once you have scaffold eth and you figured that out go to speedrun ethereum and take on these challenges there's a bunch of things to build here and that that's going to teach you a lot of things uh and and then at the build Guild as you go through speedrun ethereum we even have like onboarding batches and small grants available and I think that's it I'm very open to questions though if you guys have any more questions I'm 20 minutes early but the the app it was quick it was it deployed fast yeah thank you we we do have time to kill if anybody has any questions I just leave it open out there shout them out if you have them I'll some what do you got what do you got um so what's the kind of oh thanks I sound kind loud enough already right hi oh that's too loud for for the online person hey um yeah so when you when you Fork from scaffold e and you make your own apps obviously there's going to be improvements released to scaffold e so um how easy is it to benefit from those improvements if you for the project there's a lot of the improvements are they like scoped into dedication libraries and stuff like that that's a great question and it sets me up to talk about our extension system let's go so so going back to that extension system that wasn't working right now because it's rate limited uh the the point is you can have so an extension is basically just some solidity and some front end and the solidity and the front end aren't probably going to change that much but you're right like if a new version of wagm comes out you'd like to have that new version in your app uh so with the extension system you basically build an extension out of your stuff and then it stays state-of-the-art whatever new stuff comes in from scaffold e uh just comes in you could Fork it but then you have to like keep that merged down down wind down chain down whatever it is down Downstream I think that was what I was going for yeah so I guess the the answer is yes you will have to keep merging new changes to scaffold e if you end up forking it and there are you know improvements that happen regularly that you would probably want to pull down but the best way to do it is to make it in an extension and then have just the latest scaffold e at all times and just just your smart contract and your frontend injected into that latest version any other questions yeah I suppose I wanted to uh use scaffold e against like a a hard hat fork of say base is that yeah let's go so instead of the so here's my blockchain right here right if I kill that oh oh no my screen's not there that's okay uh so you just do a yarn Fork the the too long didn't read There is instead of yarn deploy or instead of yarn chain which is what we use to bring up our chain you do a yarn fork and that's going to Fork main net or base or whatever you have to supply like what network you want to Fork but yes that's not going to work but yarn Fork is is the answer yeah yeah and Foundry works a lot better I think than hard hat at that it's a lot faster any other closing questions thank you guys for coming out and checking out scaffold e make sure to hit up scaffold E.O make sure to hit up speedrun aum.com tell tell your friends if they're looking to get into building on chain to go speedrun ethereum and uh yeah keep keep your eyes out for the build Guild and the stuff that we're building any final questions what are you working on right now oh uh that's a good question uh um I I think that um we we as the build Guild want to do better medium to hard curriculum speedrun ethereum is a good start but it really doesn't quite prepare you for building your own protocol for instance and so what we would like to do is create some medium to hard curriculum that gets you closer to mainstream apps and building your own protocol and I think that looks like a handful of different things um we've got Elliot working on the ethdev tech tree which is a really cool kind of tech tree that's built out uh that's kind of a an offshoot of this if you go all the way to the bottom of build guild.com there's a tech tree here and it's like this really gross mirror Board of mine um but it takes you through all these different concepts and kind of like the tech tree of of all the different concepts behind like tokenization and Def and all of that stuff so this is kind of what we're working on right now it's just medium to hard content we've got the tech tree we have a CTF uh capture the flag that we'll be playing tomorrow keep an eye out for build Guild we're going to have uh a morning session where I do something similar that I did here and then an afternoon session where we'll play the capture the flag and uh you'll you'll take on some challenges uh from the build Guild and uh a third thing I think in terms of medium to hard content and what we're working on there's like this idea that's brewing in the back of my head that's kind of like this agent-based game where it's like you have to build a Dutch auction and there's like hundreds of agents and they want to use your smart contract and it's all just like Local Host and for fun but it helps you get a feeling for what a live protocol might be like and having lots of users use it even though it's just Local Host and fun but I think some somewhere in the cross-section of the eth dev Tech Tree rcts and this like agent-based idea hopefully we Converge on a good medium to hard curriculum and kind of extend we're not going to call it the speedrun because the speedrun is kind of like beginner we're going to call it something else maybe e Dev techch Tre is what we go with but it'll be its own meme but something along those lines medium to hard get people prepared to like build their own protocols yes sir yeah okay that's a great question it's misspelled um so it's like going back to the old like hodal meme right like back in the day with Bitcoin someone would say hold or hodal and then someone from the eth space kind of reframed it to bidd and so we were just we thought it was a cool name and we went with bidle Gill but I just say Bild Guild but yeah it's a play on that old hotal meme from crypto y can we use a I'll I'll restate the question maybe very long been very long time can be 10 minutes with oh yes yes chat GPT is way better let's let's just go do that real quick just to show that so let's say we were like on the front end right and we had uh those buttons let me just clean this out real quick yes uh with cursor and chat GPT it's so so smooth but let's say uh let's go down here let just tell it to add another button right add another button for buy coats or something like that right let's see what it does okay and then I just hit apply and save and now hopefully our app can have a buy coats button too there so yes it's way faster with chat GPT oh how is uh testing unit testing yes uh so that will rely on either hard hat or Foundry depending on which one you want uh Foundry would be your tests are in solidity hard hat would be tests in typescript but there is just like a test folder here that has like an example test in it right here and so yeah so here's the test right here and then you can run that by doing yarn test oh maybe not nope it is it is not yarn test maybe I need to hard hat test oh I'm in the wrong one yep let's go to that Devcon folder yarn test yeah there we go so then it runs your tests for you yeah so it it relies on either hard hat or Foundry depending on what you use but again it kind of abstracts it away to just yarn test cool cool yeah only 11 minutes left yeah uh oh you want to look at the test yeah yeah yeah you're saying this test here right yeah is that is that code big enough so yeah let's see what it's doing so it's going to like yeah set up the signers and get the contract ready deploys it and then it's going to expect that some certain thing so it's gonna you should be able to set the greeting right so we do a set greeting here or maybe we're just getting the greeting and we're expecting it to be that string so when we deploy it it should have that as the as the string so it's basically just checking that the greeting is correct and then uh here it is setting the greeting and then checking that it's set correctly all right last chance for questions if you have any more questions you got one you got a spicy one let's go so why do you uh have hard hat as the default option cuz I I would kind of consider it sort of not defate kind Legacy true uh so to defend the hard hat dudes yes they are like Foundry has kind of big respect to them by the way yes it's great Tech but I just mean I I feel like Foundry is so much more popular now yep I agree and um I think that the hard hat dudes are speeding up like they're I think they're even using revm now underneath so they're using some of the The Foundry stuff and I think that heart hat is a little bit better for deploying contracts but the the short answer is when we built we used hard hat at first and we're now transitioning to Foundry and it will be Foundry by default very soon no not that spicy I guess not yeah anything else all right thank you go speedrun ethereum go use scaffold eth and go build something cool thanks a lot