Building Your First App on Ethereum I Kevin Jones

Thank you so much. Uh so great to see you guys. It's been a little bit of a break since I've done the ETH global and I'm super excited. I hope you guys all had a good new year and a good holiday break and let's just get ready to rock and roll. Uh we're going to be talking today about building your first app on Ethereum.

We're going to be talking a little bit about the build guild. We're going to be talking a little bit about speedrun Ethereum and Scaffold ETH and kind of like ways that you can get involved quickly. This is a developer focused uh workshop, but we're going to be talking about yeah, just like in general how you get started and and like some good examples of using Scaffold ETH and like getting your uh getting your uh hands dirty with Ethereum. So, let's talk about it. Let's let's dive right into it.

So, I'm just going to go right in and go ahead and share my screen here. Make sure that you guys can see this. All right. We're going to be talking a little bit about um kind of like uh how you can get started building on Ethereum, but more specifically like what's available for you for support. So, one of the cool things that uh when I first came into the space and I was looking for tools, uh it was very difficult to find the right tool, right, to get the job done.

And eventually I I I stumbled across Build Guild, right? And uh BuildG guild is a group of developers that support the Ethereum ecosystem that build tools that make it easier for you as a developer to write apps and build apps on Ethereum. So you can check out the website buildgild.com, but more specifically one of the cool tools is speedrun Ethereum that is actually put out by the build guild. Speedrun Ethereum is a developer focused learning and education uh tool that basically like tests your skills to building an app on Ethereum.

So, you might get started and say, "Okay, well, I'm pretty good at writing solidity. I kind of understand like all of the, you know, ways that I can interact with my smart smart contract, but I really want to like test and make sure that I have the right understanding of what makes for a good application and understand some of like core concepts, right? So, one of those first challenges is you you learn about tokenization like ERC 721s and ERC 1155s are a way for you to like tokenize assets on the blockchain. And this gives you like a strong understanding of what that means. And you actually deploy an NFT, you uh deploy it to a public network and then you can like submit that.

Then you get a little bit further down and you start learning about crowdfunding, right? How do you get like a bunch of people to come together and fund some kind of project inside of your smart contract, right? uh and this is uh uh it's been through this concept of like uh yeah getting people to advers groups of people to participate in your smart contract. Then you go a little bit further and you start learning about uh ERC20s and you learn about how you can like create a token vendor where you're actually like taking in some ETH and giving back some kind of token and like uh understanding the uh approved pattern of an ERC20 token as well. You start learning about that.

Then you learn a little bit about randomness and how randomness is a little bit trickier when you're dealing with a deterministic blockchain. And you start learning about the concepts of of that. And kind of in this one, you build like a kind of like a smart contract that can determine what the outcome is for a roll of a dice. Uh and it kind of teaches you about how to kind of like circumvent that. Uh and then you go into more concepts like building a DEX, right?

like understanding like how you actually do swaps, how you deal with like liquidity and keeping uh uh ratios of liquidity balanced with tokens. Uh and this is a very like uh this is kind of like an aha moment when you get to this point you really start learning how to kind of throw everything together. Um and then we also have other other uh stuff available. Oracles understanding how oracles work and why they're needed for like fetching exterial information from the blockchain. We have a whole quest on over collateralized lending.

So like understanding like uh things like the A protocol and like uh protocols where you can like take in some kind of asset and issue some kind of like um uh reserve or lend lend some assets out under that um uh deposit and kind of learn about how you keep the system whole. And then you go a step further and then you learn about stable coins, right? You learn about like this concept of providing some collateral and more specifically over overcolateralized stable coins and how you can uh build a stable coin that has a value based off of its reserves, right? and you learn a little bit about uh how you can keep the system whole uh by pro by making sure people don't go get overleveraged um and also like interacting with an oracle as well to make sure that the price versus what their like stable coin might be uh is in the right ratio uh and learn about liquidations and a lot of really cool stuff in the stable coin challenge as well. Uh then there's one on prediction markets which are quite exciting.

Uh teaching you about the concepts of um you know uh basically this concept is like you have maybe you have multiple decisions for something and what you do is you sell a token that is for each decision. So like yes and no you sell yes tokens you sell no tokens and then at some point like if someone buys a whole bunch of yes tokens uh the price of no to no tokens gets cheaper but then as soon as the decision makes uh a final kind of like check all the no tokens are worth nothing right so it's this concept of uh of creating a prediction market uh also zero knowledge which is really cool uh uh this is keeping the con concepts or the basic concepts of zero knowledge and actually deploying that uh we also have a multi-IG challenge which teaches you about having multiple signers. So, there's a lot of cool stuff. So, please check this out. This is just a really good thing for you to u get your hands dirty and get going.

But, we're going to talk about scaffold now. So, uh I'm going to dive right into it here and we are going to go to scaffold.io. So, what is scaffold? So, scaffold is a starter kit that basically comes with everything that you need to build a production application on Ethereum.

It is a full stack environment. So it comes with a front end that's written in Nex.js and a backend that you can choose between hard hat and foundry and that's for like deploying your virtual blockchain, interacting with the the blockchain when you deploy your contract and it has a bunch of like boilerplate code to get your front end hooked to your backend. So very very useful for hackathons because you can just start this up and you immediately have a chain running. you immediately have a visualization of what's going on with your smart contract, which we'll show off here in a little bit.

There's different ways you can install it. You can just clone the repo, but the easiest way is just to use the npx create-ath command and cloning down the repo. Okay. There's also really great documentation, which we'll get into in a little bit, but the docs uh have a lot of details about all the different components and hooks, and we'll kind of like dive into those a little bit as well. Um, so you see those.

So, let's just grab this here. npxcreate- at latest and let's go ahead and copy that and let's start up a terminal and build an app. Okay, so we're going to run this. Now, what this is going to do is it's going to give you this kind of like choose your own adventure uh style of interacting, right? You say, okay, what is your project's name?

Uh we will call it example just to be very boring. Um and we get to choose our chain. So, we're going to choose either hard hat or foundry, right? You don't know, choose hard hat. If you uh probably care and you understand the difference, you're probably going to choose Foundry for some reason.

But hard hat is fine. You can just use hard hat. Uh Foundry is a little faster. Uh it's got some additional features. I think we're still using an older version of hard hat maybe which does not support solidity tests uh for your contracts.

So that's the one of the major differences is with Foundry, you can do solidity tests. Uh I don't think we've added that into the hard hat version. So use hard hat uh if you're if you're new and uh just because there's more like support out there and stuff like that uh for that. Okay. So after you uh do this, what I always like to do is I open up Windows for every single thing I'm going to need to do, right?

We're going to need this is still installing, but once it's done, we'll have that. We're going to need a window up to have our chain, and we're going to need a window up to have our front end, and then we're going to need a window up to like orchestrate things on the command line. So you can see I just split my screen up into like multiple terminals. You can just open up new terminals. And then what you want to do is go into that uh project folder on just all these.

Okay. So let's do that. And then what I'm going to do is load this up in cursor. Okay. So let's load up cursor.

Um cursor is just an IDE. It's a an IDE that lets us kind of like visualize and see uh our let's see get rid of this. Okay. It's going to let us see what we're working with here. So, I'll zoom this in a little bit so you have a little bit more uh visibility.

This is downloading right now. So, like all these files are kind of showing as blue. But the minute that it's completely installed all the dependencies and initialized the Git repository, this will all go uh go normal colors. Okay. So, we're going to keep that window open.

There we go. Uh and then we're going to go over here into the window that just finished. Okay. So, this window is going to tell you exactly what to do. So, it's going to tell you to go into the directory, right?

And it's going to tell you to spin up the chain. It's also going to tell you to to deploy your contract and it's going to tell you to start your front end. Okay? So, that's all you need to do is do yarn chain to spin up your chain. Right?

In a second window, yarn start to spin up your front end. So, we have the chain in this window. We have the front end in this window. And then over here, we can do the yarn deploy. Now, scaffold comes with a smart a starter contract.

It's like a a greeter contract like a hello world contract. And you can see that we get some output that shows that the transaction was successful and it deployed to this address with this much gas. And then we get some like console log output that comes from the smart contract. So, it's working. We also get some output from hard hat.

And then we get the front end here. So, it's really a way for you to like visualize everything that's going on, have these three terminals, and have control. So, if we go to Scaffold ETH, which runs on port 3000, right, localhost 3000, we're going to get uh scaffold ETH, which is of course an X.js application, and we're going to get a a front end kind of like already ready for us to start with, right? So, let's get it started up real quick.

So, we have uh these three windows. Okay. So, we go CD example, yarn chain because it's not going to be up, I don't think. CD example, and we're going to go into yarn start. So, we have our chain, our back end, CD example, yarn deploy.

All right, cool. So, there we go. We got uh our our front end's up, our contract got deployed. By the way, you can always deploy your contract. It might tell you that it's already deployed and that's fine.

It says nothing to compile. Uh let me zoom in a little bit here so it's easier to read. Uh if you ever want to force your contract, you can do yarn deploy-reset and that will like force your contract to get redeployed with a completely new contract address. So uh that's that's kind of useful because sometimes you just want to make sure that it starts from from uh from from from the scratch. And uh here we go.

So now let's go back here and let's look at debug contracts. So we have our debug contracts tab and what this why this tab is so useful is when you deploy a smart contract you might know that you have an AI right you have an uh application application binary interface that basically tells your front end how to interact with the smart contract what kind of data types what kind of function calls what kind of variables stuff like that and what happens with scaffold is at the time of the deploy there's this deployed contract TS that gets run and or that gets generated and it's basically all of the TypeScript definitions so that you can easily just interact with your contract. This uh debug tab automatically feeds in that that that uh file and automatically builds a UI for you. So you can instantly start kind of like toying around. So without even looking at this contract, I know that it has this greeting counter function to read an address or to pass an address in and get some kind of value out.

I know that there's a greeting function that lets me set a greeting, the new greeting and I can paste some value. So it's a payable function. And we do see that there's a greeting function. So obviously I can come here and be like hello money like this and hit send and it's going to update that greeting. Right?

So it's a very very basic uh example of how you would u make changes to your smart contract. You get like a fancy little receipt uh which is like the JSON response essentially uh the JSON RPC and then you can kind of like start kind of like toying around. So if we look at our app now let's again let's load it in cursor and let's take a look here. If we load up our app we'll there's two a few places you're just going to want to make sure that you're comfortable with. The first is this packages folder.

There's two different directories. There's the hard hat directory and there is the uh Nex.js directory. So everything related to the smart contract is in the hard hat folder or foundry depending on what you chose. And there's a contracts folder with your contract.

So if we come here, we can see that we have a contract. Let's close the AI thing. And we see that it's a very basic greeting contract. It has says building unstoppable apps. And we have the contract address uh set as the owner of of who deployed the contract.

And then we get this function here that lets us like set the greeting. So very very basic example of a contract but is very useful for just like testing and seeing what's going on. So um if you were to make any changes in here like you were to say oh I want to have like a string that's public called uh the boss and uh save that. And then I want to have like a function to like set the boss. We might say function set the boss.

And maybe the boss is passed along in a string. Uh from there, oh wait, we don't want to use a string. Why would we use a string? We want to use an address. Uh address.

And then we want to do address here. Address. Okay. So we have this like and we don't want is owner. We can just have anybody do it.

So now we have this function to set the boss. And then we have a function to uh that what the boss is. So if I take this and then redeploy it, we'll basically get a new instance of the contract. And if we go back to scaffold, then we will see that uh right here, this refreshes. And then there we go.

We get the boss. And then we could set who the boss is by just saying like vitalic. Like this. Now uh probably a lot of of the hackers in this hack hackathon are going to use AI to code, right? So we are in the era of AI coding.

Whether you like it or not, eventually you're not going to be doing very much coding at all, but it is good to know a couple things. So first of all, I mentioned the docs. The docs have uh a bunch of information around how to create components. So there are like reusable components in scaffold that make it easy to do something like have an address displayed uh have an address input field right so where you can like type in an ENS name um get the balance of a contract address and have it toggled with ETH and USD right um and then there's like an avatar a blocky avatar there's an ether input that lets you switch between ETH and US dollars which is really really useful so these are all like components that you can easily just add to the app with all the syntax right here. So, we have really good examples of how to integrate that stuff, but the AI also knows.

Okay, so all the components are there. Also, real quick, I know like given my my computer crasher, I lost a lot of time, but if we go to hooks here, there's also hooks. So, what are hooks? If you're not a front-end developer and you're like that sounds scary, it's really not that scary. all it is with your contract or interacting with something.

Um, and there are read and write hooks which are the most important ones which let you read contract data from a from a smart contract. Like let's say you want to know how many times someone has like uh done something in your contract. You might have a counter that you do that, right? This will let you get back some data in a specific uh variable name and you just reference the hook to like go out and query that information and you can pass in any arguments you need and then you'll get a data object back with what you need, right? There's a hook for reading and then there's another hook for writing.

So you can write to the contract and same thing, you call the hook, you determine what you want to name the hook. So in this case, you're probably going to have a a separate uh use scaffold write contract uh asynchronous function that you'll define for every single thing you do. And so you can come in here and specific specify the contract that you care about. You're probably going to have multiple contracts to like you might have a contract for ERC20, you might have another one for a DEX or whatever, and you'll have to use these different contracts. Um anyway, so so you'll have this ability to do that with scaffolding.

Now, I was going to show you guys how to build that, but I don't have time. But I do want to show you here that there's a cursor file and there is a rules file. At least there was. Oh, maybe it's not there anymore. Oh, we're just using the MCP now.

So, I guess we have uh the context 7 as the direct source of truth. So that means it's always going to go out to context 7 and it's always going to know how to use uh the docs or how to like use scaffolds based off of our docs. So as long as our docs are up to date, scaffold is going to like automatically work well with AI. Uh that's new. I didn't know that was there.

We also have this uh grumpy uh Carlos code reviewer which is really hilarious because it's the first time I've seen this but it lets you um uh I guess this is like examples of this is very funny. So there used to be like a a a file in here that would like tell you how to interact with um your your project. I guess we probably are using it and I don't know exactly what this does. So this is funny though with the names just caught me off guard. So anyways, so Scaffold is going to work really well for AI out of the box.

So you can use cursor and you could literally just tell tell AI like, hey, build me an app that does XYZ and it's going to orchestrate and build you a pretty awesome app. If you're using uh AI, use Opus 4.5. It's really really good at UIs and at applications and I think you'll get a good experience. So uh I know we're at time.

I think I want to be respectful of that, but I'm happy to stay uh further and answer questions if people have it uh if needed as well.

I definitely think we can go a few extra minutes um for you to take any questions if you like. No problem.

Okay, awesome. Cool. And apologize again everybody for uh for that catastrophe that has never happened to me on the live stream that bad, but um I've gotten lucky until this far. So yeah, what questions do you guys have? feel free to type them into chat.

Uh happy to uh answer them on the chat or if someone wants to come off of mute. Um I can go into detail on whatever you need. And also I can't see if there were maybe existing questions that maybe I missed but um can you please share any insights of how to use utilize AI to learn all those concepts? Yeah. Yeah.

So, I mean, honestly, like when you're using AI, AI is a little aggressive right now. So, it will just automatically fix stuff and like if you don't tell it in the settings to like let you see what what changed, it's just going to like fly through and like do a lot of stuff. And I think that's not the best learning experience. I think in the future like we're going to really need to understand the code still even though like AI can fix things pretty well but for debugging it's very useful to just um after you do a code review like look through and read through and try to understand the changes it made also use git. So if you're if you're building a project after every feature that you change with AI push it to git because that is a historical information of everything that you've done in the app.

So you could always go back and be like, you know, I did this change. I don't remember what it did. And you're going to have that in your p in your uh your commit that you did, right? Use AI to do all your commits. Be like, hey, like do all my commit work for me and get and it will just automatically come up with a really good summary which is easy to search later.

Um, how can we switch the theme to light again? Oh, darken. Oh, you're talking about scaffold. There's like a a toggle in scaffold to switch between light and dark. Um it's just kind of uh in the bottom right hand corner.

You just like toggle. Um if you're using uh cursor, if you're talking about cursor, it uses your system. So if your system is in light mode, it will use light. And I think you can change that behavior. Um what's the other question?

How can we find context? For examples, uh we use yellow or ENS. Uh, how would we fe Oh, so if you're going to feed context, just give it like if you really want like if you're using cursor and like you just want to like build something in the scaffold, just literally just paste like the docs into the into the cursor thing and be like, "Hey, I want to integrate this." And just paste the docs that's most relevant. Be as use as much good like natural language as you can to explain what you're trying to get across and it will do a really good job.

Um, can you also advise in particular how to learn a new skill with AI without the risk of letting AI do everything? Yeah. So, I think I just touched on that is like it's very easy to just let AI do like all your work for you. What I do is I I use multiple AI approaches. I go into claude first and I say, "Okay, hey, create a context for me that is going to basically uh audit the code uh give me best practices if I was a site reliability engineer, if I was a UX and UI designer, uh like and then I take that and I punch that into into cursor and I'd be like, "All right, based on this context, create a bunch of reports for me that explain the app in its current state."

And you'll be surprised how awesome that is because it will literally go through your code and it will recommend like these are the security patches, the issues that you have, these are the UI and UX improvements, these are the SDK like issues. This is your packages that are out of date. Create reports that are in markdown and then read them because that's the best thing you can do is like like let the AI do its thing but then read what it does. Um when am I not using VS Code or cursor? Uh, why am I using not using VS Code?

Uh, I don't know. I used to use VS Code a lot, but I like cursor because I do rely a lot on AI now. I'll be honest with you. I do a lot of coding in AI. Um, I think it's I think it's to the point where it's reached like critical mass where like it's going to do most things good.

Where it doesn't do well is like smart contracts. And that's where you really really really need to like manually write your smart contracts. Uh, still I don't recommend using AI to do that because you're dealing unless you're not dealing with money. if there's no money and for a hackathon it's probably fine but if you're going to go to production on your app application and it's going to have real money then I would really really really advise like using AI to audit them but then just kind of like yeah uh being very careful I think that's all the questions so um any other questions last minute before we end it awesome thanks again and I'm so so Sorry about that. That was really really uh crazy.

Never had that happen.

No, it's totally fine. You bounce back. Um and it's obviously always a pleasure, Kevin, uh to have you. Your your workshops are really incredible and I know they help a lot of people. Is there like a better or a best way for people to kind of contact you with any questions outside of this workshop?

Yeah, absolutely. I'm I'm open, willing to help. Uh on Telegram, I'm Kevin Jones Creates. Uh that's my like I don't really use Discord all that much. I'll try to hop in there, but I really like Telegram is best.

So, Kevin Jones creates, you can also message me on um uh on X. So, it's cryptomastery_. But really like Telegram's the best. Um but if you are on X, I would recommend just give me a follow. Appreciate that.