# How to Build a Blockchain App Step-by-Step with AI (2025 Edition) ## Метаданные - **Канал:** Dapp University - **YouTube:** https://www.youtube.com/watch?v=KV92WQoAIQE ## Содержание ### [0:00](https://www.youtube.com/watch?v=KV92WQoAIQE) Segment 1 (00:00 - 05:00) Blockchain is still one of the hottest industries for developers in 2025. But if you want to jump on this rapidly growing tech trend, then you need to know a couple things. Number one, how to build a blockchain application. Duh. And then number two is how to use AI in the process. And in this video, you're going to learn how to do both. So whether you're a newbie just writing your first lines of code or you're a developer already trying to jump into blockchain, then you've come to the right place. And you know, if you happen to be new around here, I'm Gregory, founder of DAP University. And on this channel, we turn you into a blockchain master. So, if that's something you're interested in, then smash that like button down below and subscribe. And if you like what you see in this video today and you want to jump into the exciting world of blockchain to increase your income, work remotely, and work on this incredibly hot tech trend, then I can show you how to do that over at dapuniversity. com/bootcamp. All right, so let's get into this. Now, in order to show you how to build this application today, I'm going to bring on my co-instructor, Anthony, to show you how to do this step by step. He's going to show you everything you need to know. So, let's get started. Hey everyone, welcome back to the Blockchain Mastery University video vault. I have an awesome video demo I want to do for you guys today. This is going to be more of anformational code along, whereas I'm going to provide some code for you guys and we're going to still do a demo. You're going to follow along, right? We're going to build an awesome project, but I think it's going to come out different for everyone, and that's a good thing. So, this video, I'm going to show you how to jumpstart your ideas on the blockchain using AI. We're going to use something awesome called Bolt. new. So, what is Bolt? If this is your first time hearing about it, Bolt's been pretty trendy. They just did a hackathon. A lot of our alumni and our students joined. We had a great time. I even participated. So, just bringing some awareness to Bolt and what they are. It is many things. What is it not? It is maybe we should start here. What is Bolt? So, Bolt is an AI powered browserbased development platform that transforms plain language ideas, right? So, you just kind of speak your ideas out loud into fully functional applications. You can make websites with this, mobile apps. There's, you know, any type of app you could think of, you can make in a few minutes. Honestly, really, just a few minutes. a full stack application, front end, back end, everything. You can create it all with Bolt. It's built for creators at all levels. So whether you're an advanced blockchain developer, you're a beginner, maybe you're doing some vibe coding, right? This is going to be an awesome app for you. So in basic terms, you can just describe an app, it'll build it for you. The cool thing about this, in my opinion, is that you don't just like prompt it and it builds it for you. you get access to something called stack blitz. Bolt and stack blitz are together. Basically, it allows you to jump into the code, the files itself, and make your own changes. So, you can of course have the AI do a lot of the, you know, brunt work for you, but then you jump in and you go and fix the fine details. So, if you are a more advanced developer, you are going to love this tool because it's going to do a lot for you. And again, you kind of just got to go in there and fix up any, you know, problems or anything. If you have not heard the term vibe coding before, basically it was just coined by one of the people doing AI. From what I found in my research, it was from Andre I'm going to butcher his name and I'm so sorry. Andre Capathy. I'm going to link this in the citations below if you want to look into it. But by just simply writing, this is in quotations what they said by simply writing the wave of the moment. You say what you want, the AI writes it, you run it, maybe tweak it in a flow-like state. Uh but this is a creative process where the code feels invisible. Vibe coding essentially you're not really like doing a lot of the coding. You're prompting the AI and it's building it for you. So rather than typing out each line you kind of guide the idea. Hey this isn't working. Hey this didn't come out as I expect. Can you do it like this? The more information the better. So the history of Bolt Bolt. emerged from Stack Blitz. They are a company that's behind a bunch of different browserbased development environment containers. Essentially, uh, we have Eric Simons here. He is the CEO at Bolt. I'm going to link all of this information for you guys. Awesome interview with a mini documentary behind the code from Superbase. They're one of the partners of Bolt that bring the technology to the platform. And, you know, definitely watch this. There's another great interview I'm going to link. It's about an hour long. It's kind of how I got into Bolt and learned about them. It was an interview with the CEO. Really awesome interview. And you know, that's kind of how I got uh into seeing both. So, it's it really was designed as like the ultimate vibe coding platform and it gave creators instant prototyping power, right? So, usually you might mock up something in Canva or Figma. And I'm just going to show a quick example while I'm chatting here. You can just if you wanted to maybe do a token, I just did one prompt, one or two prompts here, just asking for a connection with ethers ### [5:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=300s) Segment 2 (05:00 - 10:00) and it made me a and now this is all dummy data, right? This website doesn't work right now. just for a concept, but it made a beautiful website. There's drop shadows. There's hover effects. Maybe you want to do a token sale. It's got the status bar here. Nothing is hooked up to a smart contract at this point, but just as a proof of concept. Wow. You can brainstorm your ideas here. This is really awesome. So, from idea to publishing, Bolt really I think can like ascend your development speed, accelerate your de development speed here. None of these people are real to my knowledge. though. But really, you know, and then you come in with your links, your Discord, your Reddit. You put all your links here. people here, your information, your assets. Change this up a little bit. Phenomenal. It can make a better website than what I can make. And I can develop a smart contract. So, why not have a beautiful front end get created? And then we come in. This is how you could. You just tap code here. And it lets you go into the code. There's a source file, components, a header, a footer, everything you want. If you're not familiar with code, this can be a little messy. This could be a little confusing. Guess what? You can actually chat with it like a regular AI and have it explain to you the files. You can be like, "Explain to me the structure. Explain to me how this app works. " One of the problems I see with building with AI is that people will build something with AI and kind of just like pretend it's theirs. That's not okay to do. Don't do that. Right? If you build something with AI, make sure that you can talk about every single line of code. Make sure that if someone were to say, "Hey, how does this work? " You could be like, "Oh, yeah, that's actually in the road map file, we go here, it works here. " If you know how every single line of code works, if you can explain every file, if someone were to ask you something, you could jump around and find it. It makes it your code. If you can't do that, AI wrote it. It's not your code, right? Uh, no need to invent reinvent the wheel. You can't like patent code. You can't say, "Oh, I coded this. You can't code this. " That's not how code works. everything. You know, you should be able to copy existing projects, make something. But if you don't know how to co the code works on the inside, it's not your code. So, just keep that in mind, my friends, while you're developing. Uh, check out these interviews. Bolt has a great community. Like I said, they just did a hackathon. I just want to talk about that real quick. So, announcing these hackathon winners. We had a lot of alumni and students and I even participated. And these are really nice looking apps. They all kind of have a similar flow, but take a look at these. It'll show you what's possible, what you can build with Bolt. They just had a design challenge and they had some really cool apps that came out of this. So, take a look at these. I'm going to again link all of this. Check it out. Really awesome stuff. But let's get into the demo, right? I want to show you guys how you can have an idea, brainstorm it a little bit, build a smart contract, and then connect it because you want to be able to go in and make these connections for yourself once you have it, right? Maybe there's a button or something like that. So this is kind of what the end result might look like for your application. I am running a hard hat project here to use their local blockchain. So I really like hard hat. If you are from the DAP University mentorship or have done some of the other lessons, you know we like to use hard hat. So for this demo I am going to be using hard hat. I'm going to link all the documentation. Hard hat has hard hat 3 now. It's a new version that came out. It is production ready even though a lot of the features could still be considered in beta stage. Essentially, I will show you how to install it. Just mpm install hard hat. I will link the documentation here so we can install it. Real quick, just pivoting back. I just wanted to show you guys some of the other websites. So, you know, no matter what your idea is, someone had an awesome idea for patents on the blockchain. legacy assets for their family. Uh and they made an awesome app with Bolt with it. Shouting out some of the students from the mentorship. But you can make really any idea. Brainstorm with Bolt. So uh if you wanted to go ahead and build a DAO, again, this is like one or two prompts. Beautiful looking website. All dummy data. None of this is going to work right now. Um but you maybe you make a DAO contract, connect it, you know, put it all together, right? future web 3 development. Another token sale website. This is an NFT drop. So you can go ahead and mint some NFTts. If you want to go ahead and make a minting website, the NFTs can be displayed here. And this is all about vibe coding, right? Or the type of coding that I want. I want to do like a hybrid and we could think of a name for that and coin it ourselves. There's a hybrid approach here where you have the AI build up a lot of it and then you go ahead, right? We're going to go encode our own smart contract. You can have AI do it. Do not put anything on the mainet without it being audited. The smart contract today that I'm going to share with you guys in the description under the video, do not put that on the mainet. It is not ### [10:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=600s) Segment 3 (10:00 - 15:00) audited. It is not ready for the mainet. It is a contract from the mentorship that I removed a few of the bells and whistles because I just wanted you to be able to mint an NFT. That's the only, you know, feature on it really. So, while VI coding is cool and everything like that and you're making these apps, definitely do not put this on the mainet without getting an audit or anything like that. Also, if you want to make a portfolio page for yourself, you know, it will work. It'll do it all. There's a lot of flashy stuff here. I'll show you how I added this. It's a lot easier than you think. It's part of the demo. So, don't worry. I'm going to give you guys all the skills to jump start your development on Bolt. I kind of just prompted it to make me a portfolio website for a blockchain developer. It did it. I'm going to move the cursor over here so you can see it a little bit better here. But all these cool components that are moving around. This thing follows you around like the MetaMask box. Um, you could have your featured projects here. So, kind of just showing you what is possible with Bolt. Maybe you guys are watching this right now and you've already typed it in. You're making yourself a portfolio site. Go for it, right? Uh, it makes you look more credible when you have a nice site here. Maybe you're trying to get some freelance gigs here. You can add in a pricing chart. These are all Tailwind components and you can use Tailwind do this all manually. The fact that I could just prompt Bolt to do this for me and it comes out awesome and I can resize the screen. It works on mobile. You can't beat that. That is just awesome. So, we are going to jump into the demo now. We are using hard hat. I'm going to show you how to set it up. We are also using pinata. So I will go over how to set that up in a second here. Uh let's remove some of these tabs. So bolt new amazing technology. Check out Eric's LinkedIn. Follow him. Connect with him. Check out this documentary. It's awesome. Really awesome content in here in the Bolt blog. So you can check out like what people are building, what's going on. All right. So this is kind of the finished project product here. I have a hard hat account imported. I'll show you how to do it. So, really quick, I'm just gonna run my hard hat node just to show you what we can expect here. So, MPX hard hat node. I will say right now that there may be some errors and that's okay. I intend to leave them in the video so you could troubleshoot them. uh working with an in browser you know AI tool like this when you try to connect your wallet execute blockchain stuff things will happen it also looks like recently MetaMask got a UI update a lot of things are different I saw on Reddit and the recent reviews a lot of people were complaining about this update so you might get some weird finickiness you know if it I can't recreate some of the errors I had but if they happen again I would love to show you how to troubleshoot them live so let's jump into it I'm going to connect my wallet It reads my account. I have that 3D robot thing. All this weird stuff. I just wanted to show that you could add it. Let's go ahead and upload a photo. I'm going to upload a photo of myself here teaching the DAP University class. Uh, you know, test image. Uh, I got a hair trait. It's brown. Uh, so, you know, just how NFTTS work. And I will show you how I linked all of this up. It was all with Bolt. I fed the piñata documentation to Bolt. It helped me code out the connections that I needed. Boom. And then it did it. You could see that transaction confirmed. We could go look at my NFTs. I have a few NFTs here already. I'm going to jump into my Piñata. We could see that it has uploaded to Piñata. When I reloaded the page, it just added two more entries here. And you know, so that that's how it all works. So, get on Bolt. We're going to do a new chat here. Um, all right. So, this is how we should prompt it, right? The more specific the better. I would like to create an NFT minting website where we mint NFT uploaded by the user. We will be using ethers. js. JS as well as we're going to use ethers. So you and this is why this demo is going to be different for everyone. We're all going to get different looking apps, but I'm going to show you guys how to go ahead and customize it and build it and put all of your keys in it, anything that you're going to need. ### [15:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=900s) Segment 4 (15:00 - 20:00) Please create a file that will hold a smart contract AI that could be referenced in the front end. We will also need to have a connection to upload our file to pinata. So please leave variables for the pinata, API key, secret key and public gateway. also the smart contract. So this is simple language. I am purposefully like not using grammar properly and stuff just because you know who knows what you guys might prompt. I just want to show you the experience I get from having like a loosey goosey prompt like this. You do not ever ever ever want to put any of this stuff in the front end. This is only for demo purposes. You would create an env file. You will have environment variables. Do not put any of this if you are planning to put this on the mainet. This is just for the demo. I want to show you guys how you could quickly jump start your idea, get it started, get a, you know, get a feel and a look to how it might work. I will show you how to bring it to GitHub, put it on Netlefi, and you know, you can take it from there, right? So, and it even says in here, you can import an existing project from Figma or GitHub if you already have one. So, if we have like one of these project projects here, if I put them on GitHub, I could pull them right into Bolt and edit it. So you guys might have an existing project and you want to edit with Bolt. Go ahead. That you know that's going to be awesome. Bolt also has an AI to troubleshoot his problems and we'll see that in a second. So we have all of this. Let's prompt it. Let's see what happens. Any edits because I want this video to be super raw. Any edits that we might get are going to be just us not waiting for the AI to finish because it might take a while. So all right. So, it's going to create a beautiful NFT minting website with these uploading capabilities. It may not get all of it right. That's a okay. We'll fix it and figure out what's going on here. All right. So, we're in the future. Still building. It looks like it's about to build. Let's see the preview. So, this may happen for you guys and I'm actually kind of glad it went ahead and did this. It didn't really understand what I was asking it to do. This is a good idea and one of our students actually went ahead and did this. They made an app in Bolt and they have a section where you could actually provide your Alchemy API key, a smart contract address, and a few other keys if you wanted to use their app so they don't expose their own keys. Kind of a cool feature. You got to be careful with something like that, right? But it's saying that it needs this stuff. So, uh, you could right away prompt it if you don't know how to prompt it. This gives us a great way to use this feature. This is a discussion feature. So we can now chat with it. Hey Bolt, I think it's always best to talk to these LLMs as you know human as possible. Hey Bolt, I notice that you have a UI element that has setup instructions. Please remove this. I want to manually add these to the front end code by pasting them in. Just leave the fields open for me. We need to be able to use the smart contract in the front to mint NFTts. Please provide a UI element to upload and mint an NFT. I also need and this is the most important part a connect wall button. ### [20:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=1200s) Segment 5 (20:00 - 25:00) Uh, so again, I didn't directly prompt it. I'm asking for more of a discussion because if you prompt it, it may just go ahead and do whatever. If you have a discussion with it, it can actually come up with the plan. Please read this. We might skip around down to the bottom. It's important to read every line and understand really what it's saying. Uh, all right. So, it says it understands we want to remove the setup instructions. handle this stuff manually. The current application already includes components for this stuff. Uh to achieve your request, we're going to do this. So, we're going to modify this. Remove the import statement. Uh remove is configured. So, after these changes, you'll need to ensure that your env file. Yeah, let's implement this plan. I just want to go look at the code here to see what it's doing. So, we have some components here. We don't have a header yet. We'll probably see this get updated in a second. We could actually see it live changing up the code. Do we have an ENV file here? It created a contract for us. Let's do environment variables here. See is app. js importing the environment. typescript file. I don't see it. All right. So, I connected my wallet. The connect wallet button did work. Let's just see. Can we upload a photo to anything? All right. So, it does have a menu, right? It looked kind of doesn't look as good as the other one, but that's okay. So there are a few problems here. What I want to know and now this is another thing that we could do that's awesome. Where do I put my contract address and API keys? It said to do it in an ENV file. I know it's said to do that, but it's not really clear to me. There's also a bunch of mess in here, right? I will show you guys how to clean this up, but I want us I want you to see that you can actually talk to this thing and have it explain these files for you just so you kind of know where to look. You should place your contract API keys in an env file to read your projects be used by Vite to expose these variables to your front end code. I also don't see any ethers. js stuff in here. And so I I just want to make sure that we're using ethers. And I also want to make sure. So I actually do see ethers in here, but I'm not seeing it used in the front end as I expect. And I also was not aware that we can actually even use an ENV file in the browser environment. I'm just kind of looking for some clarification. Phenomenal. So let's figure out what Vite is, right? Vite is another type of software. Bite is the next generation front-end tooling that aims to provide a faster and linear development experience for modern web projects. So essentially, it's just going to let us use these environment variables. All right, so we see how the environment variables are used. It's telling us that we kind of just need to make an ENV file. I just want to see how this one do we import in here. We're looking at Okay. So, we could just do Let me copy this. All right. So, we have an env file here. We have to provide it some information an API key. we have to provide it a few other things here. So I am going to go ahead and show you how to get a piñata API key. So hop over to Piñata. You will log in. I logged in with Google. And then from here we see our dashboard. Your public gateway will be listed here. You can go ahead and copy this. And we're going to jump back to Bolt. paste in our gateway. I love that it obscures it for us. We're going to go to a over to API keys. This was the test key I used in the last app that I made. So, let's go ahead and make a new one. You can call this bolt key. Give yourself admin privileges. Now, this is really important. If you hit done, you will lose this screen. Of course, you could just make another API key. Just revoke the old one. We're going to go ahead and copy the API key here. Going to jump over into Bolt. ### [25:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=1500s) Segment 6 (25:00 - 30:00) Now, the API secret is very secret. So, I'm going to probably edit this part out. I'm just going to copy this and paste it in the file. All right. So, now that you have that, you can hit done. I'm also going to link this documentation under the video. If you are having trouble getting Bolt to upload your files, simply just explain to it how it could do it by providing it the documentation. If ours has a problem with it, I will show you how you could go about doing that. You shouldn't have a problem though. It seems to be able to do it right off the bat. It seems to be familiar with Piñata. But if you get that problem and this is for any LLM, you could just teach it how to use it. Claude, Bolt, Claude, ChatGBT, any of these guys. If you feed it documentation, it will know how to use it better. So, we go over to Bolt. Anytime you want to do manual stuff, you can go in and do a save. Let us go back and look at the preview All right. So, it knows we are here. It knows that we are connected. Uh what is the problem? All right. So, we're just going to ignore this for right now. The next part of this is going to be actually getting the hard hat connection and deploying a contract. So, I keep connecting wallet here. You guys are probably itching to connect your wallets. Get hard hat running. Let's jump into it. So, you could go ahead and get started with hard hat. I am going to kill my node really quick and I'm going to just open a new terminal just so we can see. I have a Linux distro running. I have a code directory if you join the mentorship. This is something that we all do if you are running Windows. So, you might not be familiar with this, but I know other people are. This is just how it looks. This is how my terminal looks. Yours might not look exactly like mine. That's a right. Type in ls. That's a listing command. This shows all of the different projects I have in here. Now, when you want to install hard hat, you could just simply uh if I have the command in here still. So, you could you most likely will run something like hard hat and knit or you basically you probably will run hard to knit. I think it's better to go ahead and first make a directory. So we'll do micr bolt hard hat. You could call this whatever you want. So we'll go ahead and make a directory. We will cd into bolt. Cool quality of life thing. After you type the first three letters, if you hit tab, it will autofill it. So it's a nice quality of life thing. LS. There's nothing in here. We're not in a nested thing. Let's go ahead and do mpx hard hat dash init. Awesome. So, it let me know right away that hey, you are using node 20. It's not supported by a hard hat. You might have a problem. Let's back out. You could hit control C. You could hit Q. There's a few things you could do to back out. But the you know the just to make sure we don't have any problems you could do nvm or just double check do node- version. I am using 20. So if you are familiar with nvm you could just type in nvm. It gives you all of your nvm commands. If you wanted to install 22 you would just uh if you want to install node 22 you just do nvm install 22. I already have it. So, I'm going to do nvm use 22. So, we'll do that right really quick. You can also set it as the default. I'm not going to do that just because I'm going to be jumping back to version 20 for the rest of the stuff that I code and teach. But right now, we have switched over. We're using nerd nerd. We're using node version 22. Let's run mpx hard hatit. That warning is gone. We are going to So, it says Hard Hat 3 beta. It's not beta. Don't worry. We are going to I like using Mocha and Ethers. If you're familiar with Testrunner and VM, go for it. I know a lot of my Linux friends might not want to do that. So, jump into Mocha and Ethers. You could hit enter. Awesome. Type in ls. We're not in ### [30:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=1800s) Segment 7 (30:00 - 35:00) a nested file or anything. You can see it made us a bolt project. Here we have contracts. We have ignition. Really quick, if you come from hard hat 2, ignition is where you will do your deployments. You would set your information up in here and give it a This is how you grab the contract and deploy it. These are the contracts that come pre-made. We are not going to be using any of this. We really just started up the hard hat project to run the node. If you already have hard hat, and maybe I'll make a little note of this cuz I should have said it earlier. If you already have a hard hat project, you can run your node in your terminal. So if you already have a way to run the node, go ahead. We just did all this just so we can run the hard hat node. So run mpx hard hat node. You should see a list of 20 addresses pop up here. Hard hat is awesome because you get to use these addresses in your MetaMask if you wanted to and they all come with 10,000 test ether while you're on the network. If you don't have hard hat set up in MetaMask, I will show you how really quick. So let's jump over to MetaMask. We have several networks here. I'm just gonna Can I delete it? I can't delete it. Normally you can. All right. So, you'll go here, right? You'll go to your manage networks. You have choices of E, linear, basset, hard hat won't be there. You can look at your test networks. You have some additional networks down here, right? Go to add a custom network. You will go ahead and type in hard hat. Add a RPC URL. Well, when we ran the note, it actually gave it to us. So, you can go ahead and copy this. https127 8545. So, that is the hard hat server. This runs on your local Wi-Fi. It is a local blockchain. As soon as we kill the server, the memory goes with it. So, we can make a bunch of contract deployments, do a bunch of changes. Do control C. It kills it. Anything that we've done is gone. It's not affecting the main net. The money you're spending is not real money. It's all to test. And if you have a good idea, a contract, you want to test it, bring it over to Bolt. Wow. It's a match made in heaven, right? You're doing awesome stuff. You're streamlining your development. You get to mess around with a lot of ETH. All right. So, we go over we add a new Networks. We add a custom network. Hard hat. So, we add that URL. It's going to make me lose it. Chain ID. Hard hat's chain ID is 31337. Now you will get a little error. It's saying something different because I already have a hard hat chain ID going. But it okay this it might say something like hey this is the go chain test net. You can ignore that. For the ETH symbol it's going to say use go. We're not using go. We're using ETH. So do that. And then you can hit save. It's not letting me save because I already have it saved. But you'll be able to hit save. If it doesn't let you hit save it is because the node is not running and it doesn't think it's a real network. So make sure that your node is running. if you try to go ahead and connect. So, we are going And then we have our hard hat running. Now, I have one of the accounts in there. How can you do that? Go over to accounts. Go over to add account or wallet. You're going to do private key. You can then come down into here. Take account one, zero, or two. You're going to take the private key. You're gonna copy the key and paste it right in. And when you hit import, it will bring it in. I already have the account in, so it's not going to let me do it again. And you will be able to have the 10,000 Ether. It may not say 10,000 Ether. Go into your settings. Go into general. Set your currency to ETH. You just type in ETH and it will pop up. Then you will have instead of USD, you will have 10,000 Ether. Awesome. All right. So now you have MetaMask set up with hard hat. You have created a hard hat project to get the node. I will link all the documentation in there in case you're having a hard time installing it. These are some differences between hard hat 3. We don't need to go over that. So for this bolt project, we are going to be using an ERC 721 contract. Open Zeppelin is a great company, a great audit company that creates these ERC20 uh 721 token contracts. If you are just looking to follow along with me and ### [35:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=2100s) Segment 8 (35:00 - 40:00) kind of do what I'm doing, I you know, I think you guys should try out your own contracts, do your own things. But to follow along, you could just take this documentation if you wanted to and just upload it to the chatbot. I'm going to paste my smart contract underneath the video for you guys to use it. But I just took one of the smart contracts that we make in the mentorship. I DAP Punk's NFT contract, removed a lot of the bells and whistles, made sure it matched this new Open Zeppelin version five or version six ex I forgot exactly what version the new Open Zeppelin is, but I wanted to, you know, be current with the new compliance and everything like that. So, this is the contract. We're going to hop into it here. This is a simple NFT contract, right? So, you go over to We are using something called the Remix IDE. If this is your first time with it, you're just going to go over into the internet, type in remix. We're just going to go over here and do it real quick. It's going to be the first thing that pops up, right? Go over to your contracts. Just going to X this one out. All right. Maybe I won't. um new file, call it NFT. soul or anything you want really, right? From this documentation here, it says to import open Zeppelin URI storage. soul. That's how they're doing it now. So, we go ahead import that. I always like using ownable in my contracts. You don't have to use it in yours. Again, this is not going on the mainet. This is for test purposes. is just to see my you know I had an idea about NFT marketplace. I just wanted to see it work. This is not going on the main net. This is not audited. Please do not use this right. It's not meant for the mainet. It's just meant to make sure that this app I'm trying to do works. So simple NFT really not doing a whole lot here. We're setting a minting enabled to true right away. We have a set function. All the bells and whistles for token owner all that. This you know none of that's included here. We just have a simple mint function, right? You could copy and paste this code. It's going to be underneath the video or just pause it and code along with me here. You can jump into the Solidity compiler. Make sure that your version is above mine. I'm just using a carrot and just saying, "Hey, anything above 8. 20. " So, we go ahead and compile it. No problems. Phenomenal. We are going to go ahead. I'm going to remove this old one. And you choose your contract here. Choose the simple NFT. So for a name, let's just call it simple. bolt NFT and it may not like so let me just come back. So you compile your NFT. We come over here. We are now able to choose what NFT that we want. We're going to do this one for the environment. You could choose many things here. It's going to be on virtual machine Cancun. Don't worry about any of these things. Choose developer hard hat provider. We're going to go ahead. It's saying, "Hey, make sure you use that RPC. " We are using that RPC. Let's go ahead and make sure that our MetaMask is set. Awesome. The node is running. Let's go ahead and deploy this contract. It went ahead and deployed it. Awesome. We can go ahead now and grab this address. Jump back into Bolt. Let's look at the code. I am now going to be able to put my contract address here. I was looking for where to put the AI. Next, we'll jump back into Remix. We will go ahead and look at the compiler. You can just easily copy the AI. So, we'll do that. Grab it. Now we are going to get everything. So copy the first bracket all the way to the next bracket if you know if it did this all for you and just paste in your new ABI. Go ahead and hit save. I don't expect this to work right away just because I haven't provided my gateway. gonna go ahead and do that really quick. I'm just going to grab my public gateway. I'm gonna say please incorporate my public gateway for when a user uploads images to IPFS. Pinñata. ### [40:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=2400s) Segment 9 (40:00 - 45:00) So this is the new way developers are trying out things, right? This is called vibe coding. A lot of people are doing stuff like this. All right. I want to ensure that your plan update your let's see erase my env file. All right. So, it's saying that we should be aok. Okay. Wasn't able to get the contract information though. Did I give the contract an ad? Oopsie. Just look at the enviables. Oh, okay. Contract address. All right, great. So, the reason is because we did not update the contract address. Let's go ahead and grab I thought we grabbed it. So, let's go ahead and copy the address. Jump back into Bolt. The gateway proper. Yeah, that looks good. All right. So, we'll hit save. Go back to the preview. Give it a little refresh. Maybe it's got to rebuild or something. All right. Connect. What's this fix here? What do we need? What are we having a problem with? Is this going to go through? So, we tried to do a mint. It said contract. mmin is not a function. This to me is letting me know that the front end made up a function. It didn't leverage the AI properly. If it's not able to fix it right away, I'm going to let it know that, hey, to do that. So, it should be able to troubleshoot it itself. Uh, but this is why being a developer is good because now I know that, you know, that it probably had a problem in one of these components here that we're trying to mint. So, it might have fixed it if it didn't. And we get the All right. And it looks it does have the proper contract information. It did fix that component there. There is no supply yet. So, all of this is looking good. It is definitely reading the contract now. It's got our address and everything like that. So, okay. Wow. All right. Connection to the MetaMask. Awesome. No warnings or anything like that. We're interacting with the test contract. Let's confirm it. Awesome. Minting completed. It even lets us view it on Ether Scan. Phenomenal. I didn't ask it to do that, but it did it itself. Wow. So, this one actually took less troubleshooting than the other one. I was hoping a little bit more errors would come. Knock on wood. Right. But because I don't want more errors to come, but I wanted to show you guys how you might fix some of these problems here. Let's just see. Let's mint another one. Let's find another picture here. Let's upload a picture of the class. So, we got a picture of us in the mentorship here. We're having a great time. Family photo. and we can go ahead and mint this. So I notice the total supply did not get refreshed. Let me just refresh the page here. So that is something that we can ask it to do. We could be like hey you know make sure that on mint it refreshes the page and you can ask it to do that right. So I'll just on mint should it refresh the total supply. Now if we wanted to do that ourselves manually you would hop in the code here. You could start discussing with it and asking it how this works and you should do that to get a proper understanding. I'm thinking that this is going to happen. Contract information. There's probably contract info. Look at that. Named really readable. That's awesome. Get contract info. That is a function here that is using a use effect ### [45:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=2700s) Segment 10 (45:00 - 50:00) and it has these dependencies into dependency array. Basically, if the state is connected, it's or the refresh trigger is activated, it's going to run the load contract info. So, if we and I think that's just actually what it added here. Uh, this refresh trigger. Where is this? They're right in front of my face. Okay. So, it's just it's pulling the state in. Essentially, what's going to happen though now is the next time we do something, we're expecting it to change it. it was the right file to go and edit if we wanted to. We would want to give it a use effect or have an event listener talk to the blockchain. Let's see if it does it. Awesome. Wow, it did that. And it all it did was take a single prompt. Again, we could have went in and manually did it because we knew where to go. But hey, if you didn't know where to go, you can always chat with it and ask it. Uh you can have it explain to you all of the files. Now, I showed you guys some really cool stuff in the beginning there, right? of with like what the extra so there's after Bolt did their hackathon they had a bunch of cool sponsors one of them was 21st dev and me and the people in the cohorts for the mentorship have been loving this but this is where I got that interactive one so you go on this website explore it there is a ton of awesome things in here you have to sign up you have to make an account right but it's free it is free to use these things if you want make an account and you can actually customize them a little bit So, one of the prompts that I liked was this pricing chart here. It's so easy to grab this. What you do is just hit copy prompt. I opened it up in a new tab, but you could hit copy prompt. You can add some additional stuff here if you wanted to. Come over to Bolt, right? Paste it in. It gives it instructions on how to make this. It's a Tailwind component. And you know, this should not really affect the project structure. It's made for TypeScript, Tailwind CSS, right? and let's just go ahead and add it. It's going to add it right in. It's awesome, right? So, I'm going to link all this for you guys to check out. But you could see how quick you can make a project, right? Within this video, we went ahead and we made a project. The smart contract was already made. So, you know, some developer time got cut out from there. Uh, if anything, make a dummy contract using a chatbot or go out there, go on Ether Scan, look for a NFT project that you like, mimic the NFT code, have some AI explain it to you because we are in a new age. The game has changed. Everyone has access to these tools and you will be doing yourself a disservice if you are not using them. It's not cheating. It's not a shortcut. As long as you know how the code works and can explain it, you are not ripping off code. you're not stealing it in my opinion at least. Right? If you could if again if you don't know how to explain the code, how the wallet connect works, it's not your code. If you were asked and you don't know how any of this works, it's not your code right now. This is not my code. I don't understand how the entire app works. Right? Bolt made it for me. If I spend the next two days really sitting here inspecting the app, touching every button, looking at the code, looking over every file, having the AI explain to me every file. This code is suddenly now mine. I understand it. I can explain it. It works. Let's connect our wallet here. The component is not fully integrated. Do we have to add a picture or something? I wonder where that comes from real quick. Let's add the other because I really This is my favorite one. I like this. And we can remix it with AI, but I love this thing. It It's awesome. Maybe you can have like a cool dragon or something like that uh for your website. Let's go ahead and add this prompt. So, make sure you know the code. Remix is great to quickly just deploy a contract, grab the AI. You could even play with it here. I love this that gives you a little user interface. You could always code one out yourself or just do everything in the terminal. But having these buttons is really nice. This was not audited. Please don't put this on the mainet. It was a quick little contract based off another contract that we have. So, all right. So, it's not adding the components to the UI. We just added two of them. It's not doing it right. Even though we pasted it all. I assume that the app. js cuz I think it did make the components. I'm thinking yeah, all these new files just got created. They are not imported into the main app. jsx app. typescript file. That's what I am thinking. Yeah, we just have our file upload. So, it's not being rendered in the front end, even though it probably did create those components properly. Uh, let's ### [50:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=3000s) Segment 11 (50:00 - 55:00) give it another chance to see if it can redeem itself. And then we'll talk about next steps, what you could do going forward. What What's next, right? It was taking a little bit long to do the prompt. So, I canceled it and had a discussion. I genuinely think the discussion feature is better than just prompting it. And it confirmed literally what I just said to you guys that it did make those files for us, but it didn't put them in the front end. So, it's going to go ahead and add these components to our UI, the app. typescript file. We again could have manually did it. Not fully familiar with every file yet. So, it was just kind of easier to prompt it and ask it to do it. I am going to show you guys how you could bring this code into your text editor, so do not worry. Right. And we edited it. So, I asked it to fix itself. It did. It's got the drop shadows. All this stuff works. The these annual thing. Look at that. The confetti. I love that. Wow, looks great. So, it's, you know, able to jump around now. You saw the other sites had some really awesome effects, but we could still connect our wallet, mint the NFT. It's got all the data here for the contract. So, but guys, jump on Bolt, play around with it. Try to attach a smart contract to it. This is great testing. And if you want to, it gives you an awesome opportunity to go in here and figure out how to connect a button. You can you could discuss with it. How can I connect a button to read something, right? Cuz on remix there's all these things that you can read. You could read the owner. You can read the symbol. And you could just practice. Be like, how can I set up a button to do this? Don't have Bolt do it. You do it, right? It's build. It's about building the wraps. It it will all pay off. Make sure that you're sitting here learning how to talk to your code. I'm just jumping back to one of the other portfolio sites that I had it, you know, make me. Not like it's like the best site in the world or anything like that, but just from a few prompts, from a few imports from 21st Dev, you know, it came out nice. Links to your GitHub, LinkedIn, and Gmail, all this awesome drop shadows and everything like that, the buttons, you know, this looks great. It really does. And what do you do going forward, right? How do we take this code? the NFT minting website that we just made and bring it home? So there are integrations you can actually publish this repository to your GitHub. So we can do like bolt NFT mint call whatever you want. It's going to create a repository in our GitHub and it says right here. So any changes that you make will affect the GitHub. So now it's connected to GitHub. If you want to make more changes here, it's going to upload it. So, if we go to my repositories, I might just edit this part just to jump to the repository so you don't see everything. Awesome. It made it. Bolt NFT mint. It's got everything here. And now, if you wanted to hit the green thing, download the zip, get the code on your device. Boom. Now, you can go ahead extract this guy and you can bring it right into there. And look at that. Bolt NFT mint main. And it's got the ENV files. It's got everything we built. It did not save the original ENV file cuz those won't that will not go to GitHub. That is what an ENV file is. It's supposed to be a private file. But it has the components. It has just real quick any of these zone identifier things you could delete. It gets it happens when you unzip a file and pull it into Linux the way I did. There's probably a better way to do it. I just drag and dropped it. But it has all of the awesome interactive components that it did from 21st dev and everything like that. So everything's in here. This is literally awesome that you could just be able to pull your code, bring it right build something in bolt and bring it right into your text editor, take it a step further. Now that it's on your GitHub, you can then go on Netlefi. All right. So then I typed in bolt. I had to do a few things with authentication and give access to this repo. But now I am able to publish my from bolt from the idea we had. We did a few prompts. We built the code. We added hard hat. We added MetaMask, right? We imported the wallet. We ran the node. Built the contract, connected it. Everything's working. Deployed it in Remix. Got some awesome components from 21st Dev. Brought them in. We are able to easily publish to GitHub. You can then bring the zip file to your text editor, edit it some more, re-upload it. You can also just keep editing it on Bolt. But hey, maybe you want to bring it into your text editor. Maybe you have Amazon Q or Augment, which you guys should totally Google that. I'll throw links into the chat. A lot of our students and alumni swear by those. It helps you code a little bit better. Same thing with like Bolt. It's like going to be, you know, an AI assistant that can help you scan your code, answer questions, build ### [55:00](https://www.youtube.com/watch?v=KV92WQoAIQE&t=3300s) Segment 12 (55:00 - 58:00) things for you. Really awesome. So you can then grab the stuff from Bolt, bring it in here, talk with another AI about it, maybe you're using C-pilot or something, right? And keep editing it from your computer. Now that it is on GitHub, you can easily link it to a site like Netlefi. I love Netlefi. I put all of my projects on here. Versel is also good. And you can then like click this. Romeulan Labs is my team. I'm not going to actually go ahead and do this, but then you can actually deploy Bolt and have it on a real website. You can then go ahead and hook up a domain. You can publish it on here and have an active website, but you would get a lot more control of your code if you brought it into the text editor, edited it some more. There's some things that you can't simply do in this code editor here. And with prompting bolt, there there's just some things it's not going to be allowed to do, whether it's like a JavaScript execution. I'm not really too sure on the nitty-gritty, but there's, you know, not all thirdparty things are going to work. Bring it into your text editor, work it on it some more, upload it to Netifi, get a real domain for it. You can 100% use a website like Unstoppable Domains. That's where I get all of mine from, or an Athereum name service domain and, you know, have it work out. So, you know, going forward, make sure you know your code. Make sure you chat and take the time to look at this website's, you know, your website's code. I hope you guys generated an awesome website. I hope everyone got something different and it's cool. If you if any of this was a little bit confusing or don't didn't make sense, definitely feel free to send me a DM in the Blockchain Master University Slack. I am super pumped to help you guys out and, you know, share this information with you. Again, this was submitted from one of our alumni. Really awesome idea. I love this idea. If you guys have more ideas, you know, ping them to me in the Slack DMs. I was really happy to go ahead and build this for you guys. The power of Bolt is literally insane. You can have an app idea from, you know, conception to publishing in literally a day. And, you know, a smart contract, you probably want to have it audited. put a little bit more work into it. This again was just for the demo. I just wanted to have a mint function, you know. So, make a simple token contract, make a simple crowd sale, a simple DAO. You know, we had a few There was a few really awesome projects that got built here. And just play around, have some fun, build your idea, build a proof of concept. I loved what one of our alumni did. He actually went ahead built some websites and bolt got him connected to some smart contracts and started marketing himself that he could build websites for people because he knew how and he's, you know, a more intermediate developer, but he can actually go in the code here, make some changes if he wanted to. He's confident to bring it into the text editor here and he doesn't have to focus on building his front-end skills. So, a lot of people think AI is going to take jobs. I don't think so. I think it's going to be an assist tool, right? With something like Bolt and maybe instead of hiring 40 developers, you hire five developers cuz someone uh is really good at doing back-end development and can make a beautiful website with Bolt and then they can actually go in and do the manual coding. Having the power to be able to create a beautiful front end and then go inside and edit it is you can't put a price on that and that will literally give you an edge and help you excel in this environment. You got to understand how to pivot properly. We have chat, we have Claude, we have all these things that are coming out. Don't look at it as a job replacement. Look it as an assist. You got to understand how to use this stuff on a foundational level or you're going to get left behind. So that's the sp that's my spiel, guys. I hope you enjoyed this video. It was a lot of fun to make and I will see you guys in the next one. Keep learning, stay curious, and keep building, my friends. --- *Источник: https://ekstraktznaniy.ru/video/39099*