How to Build a FULL App With ChatGPT in 20 minutes!

guys I just created an entire application from scratch using artificial intelligence in under 20 minutes using chat GPT for the code you know front end and back end and then stable diffusion for all the image generation I did this entire process pretending to be somebody who doesn't know how to code at all just riding the AI prompts with a tiny bit of Common Sense code modification and it was able to create this entire nft project from scratch the smart contracts the website the artwork everything this is really crazy you have to see this so in this video I'm going to take you over the shoulder and show you exactly how I did this step by step I've documented the entire process that you can learn do the same whether you're not a coder at all and you want to see how you can use this technology to create your own apps or better yet if you're already a developer or you're trying to become a developer so that you can leverage this technology to increase your Effectiveness while you're learning or doing your job so I'm going to show you all this is a blockchain developer myself who works this technology on a daily basis and has been using AI tools like chat gbt in my own workflow to get more done faster so trust me you don't want to miss this if you're new around here hey I'm Gregory and on this channel I turn you into a blockchain master so if that's something you're interested in then definitely smash that like button down below for the YouTube algorithm And subscribe to this Channel and if you want to become a blockchain master step-by-step for start to finish break into the web 3.0 industry increase your salary well past 100K I guess you had to do that over at dappeniversity.com forward slash bootcamp all right so let's jump into this so literally the first thing I'm just gonna ask chat gbt pretending like I don't know that much about programming is can you help me create a full stack blockchain app so it says yes you can obviously there's a lot to this but then it just tells me exactly what to look for so choose the blockchain platform uh we're gonna go with ethereum in this case we already know that design the smart contract develop the front end connect the front of the smart contract and then test and deploy the application and so I say okay let's go with ethereum so it says okay great if you decide to go with ethereum then you're going to need to do these next steps install a text editor installed node.js ganache truffle and metamask so I obviously have most of these things already I've got a text editor Alexa blind text but if you don't have one installed you can do that all right but now it says install node package manager and npm so I can just verify that I have that in my system like this no dash fee and then I make sure that I have the ganache personal blockchain installed that's this point-and-click blockchain here it even tells you inside chat TPT that you can download from the website so I've already done that okay and also uh truffle okay so I can see that I've got Truffle in my terminal here truffle version if I don't have it obviously I can install it just like Chad GP tail tells me to uh with this mpm install Dash G truffle and then finally metamask is this little fox icon up in my corner uh my browser here and if I don't have it obviously I can just follow it steps to set that up and so now that I've got all this set up um it says you know once you've got this set up you can start building your full stack ethereum app here are the general steps involved so designer smart contracts compile them and deploy them develop their front end and connect the front of the smart contracts and test and deploy the app that's kind kind of what it said up here again so I'm not gonna fault chat GPD for doing that but I'm kind of in a block I've got this stuff but like what's my next concrete step so I say okay how do I create a new truffle app and it says to create your truffle app you know go to your terminal find where you want to do it and do truffle and knit okay so you want to go to your terminal find exactly where you want to create the project um I'm going to cheat a little bit because I'm a programmer and I like to create directors like this I'll say make directory and it's all I've done here is just create a new folder and enter it into that folder and that's exactly what it tells me to do I'm just doing it my way because I'm a programmer you could create a new window and finder or in your Windows File Explorer whatever okay so I'm gonna do exactly what it tells me I'm just going to copy and paste the terminal command okay it's funny it says C sharp on here that's obviously not C sharp uh it's bash so I do truffle and knit this is how you create a new truffle project all right and then boom it's done okay so I'm going to open this in my text editor I'm using Sublime Text and now I can see that I've got all the basic stuff inside of your contracts migrations tests etc etc and also this truffle Dash config file and so I've done a deco chat gp2 toby2 and so it gives me the directory structure which we just saw but it says once the Project's created now you can start writing your smart contracts in the contracts directory okay and then it kind of goes to the next step of compiling them uh you know and deploying them and all that type of stuff which chat GPT alluded to previously okay there's some repetitive information in here but let's go back to our big road map at the top where I said you know hey can you help me create a blockchain application so we already accomplished step one you know choosing the blockchain platform we say let's use ethereum and it told me how to create an ethereum application let's go to the next major step which is designed a smart contract okay um we have the app here and it told us where we can put the contracts okay inside this contracts directory but now we want to go through the process of actually designing the contracts so we need to come up with the concept and then we need to tell chat gbt what that concept is and how to write the code and how to actually put it in the projects that we can use it and so next I said I'm ready to create the smart contract so can you create a mental nft collection of 10 nfts where users must pay 0.01 ether to Mint each one and so it says sure you know here's an example of exactly what we're talking about now really quickly I know you might want to do way more than 10 nfts we're just going to make that a small variable that you could obviously change later this is just for example purposes so it gives me the full smart contract code here okay and then it tells me exactly what to do okay it says once you've done this you need to install the open Zeppelin contracts which you can see are imported here inside this uh file and it says you also need to update your truffle Dash config file to include the following code you know this stuff right here so let's go to the step by step so first of all let's go ahead and create uh this nft smart contract here I'll just say where does the nft smart contract go where do I put it in my project or I'll say how do I add it to my project and it says the nft smart contracts be written solidity and basically you just create a new folder inside of here and it's you just put it sorry a new file inside the contracts folder and then you add this code up here uh to that so I'm gonna go inside Sublime Text I'm going to create a new file and I'm going to call it my nft.soul just like it told me to okay I'm literally just going to copy and paste all of this uh code here all right paste it in here all right save it I'm gonna do exactly what it tells me to next I'm going to do npm install uh opens up on contracts it tells me to run this in my terminal okay so I'm gonna do that do npm install Pacific contracts all right that's done and so once I've done that I'm going to follow its next instructions which is to update this truffle Dash config file to include the following code basically what this is doing is just setting up my network and adding the correct solidity version uh which it used up here so let's go to our treble Dash config and let's just clear out the whole thing basically and then just do this all right and then let's take our next steps which chat GB tells us uh we want to compile the contracts compile just make sure it compiles properly all right so I hit an error which is actually to be expected whenever you're coding with a an AI like this because it's going to make mistakes but it can sometimes fix its own mistakes and that's what's really nice so it said you know parse error source file can you know contains this blah blah blah blah all I did was copy and paste the error message into chat GPT so I said how do I fix this error I literally just took what's in my terminal put it in chat GPT and it says this error indicates that you're using a different version of solidity compiler than specified in this particular file so what you have to do is go into your truffle Dash config file and update this line right here okay so I did that and then you also need to update your solidity version inside your main contract so did that 0 to 8.1 and then I re-ran shuffle compile and it is now working properly okay so now that we've got that contract done I'm gonna go back to our roadmap that chat GPT gave us you know we have compiled the smart contract but now it says how do you you know you need to deploy the smart contract so I just said you know how do I deploy the contract so it says update your truffle Dash config file Okay so we've actually already done this this it looks like what it told us to do before again chat TPT kind of repeats itself but then it says you need to create a new script under the migrations directory for example you can create a file called to deploy contracts with the following codes so let's do that so I just created this file to deploy contracts and I pasted in the exact code that Chad GPT gave us and now it says run the migration script using the triple migrate command Okay so that's going to be in the terminal all right so let's do that let's go to here and do travel migrate and so womp womp I got an error here of course I know what this error is because I'm a developer I do this all the time but I'm pretending like I'm not so I just asked chat GPD I said hey I got an error how do I fix it and then I just paste it in the exact error that it gave me and it said hey this error could be for several reasons and the number one suggestion here it says you should try these things is make sure that your ethereum development client example ganache is running and listening on this port okay that's got a couple of the suggestions but this is the obvious one because at the very beginning of our roadmap you know it said hey uh you know it's awesome like ganache and make sure you run it in order to uh build your project so let's go ahead and start ganache all right so now that I've got ganache running let's go ahead and uh try it again and boom it worked all right so now that we have done these first couple steps okay we have uh it's on the contracts you deployed it and put it on the blockchain these the exact high level steps chant if you told us um now we need to develop the front end okay it says you can choose some options here react angular review let's just choose react okay so down here I went ahead and said all right I'm ready to create the front end how can I make a react.js application for minting nfts and it says great here's the exact steps go ahead and copy and paste this into your terminal MPX create react app nft Mentor alright so I have done uh that right here there you go MPX create react app nft mentor and it has gone through all the steps of doing that so now let's go and enter into that directory all right and let's do the next thing it says uh npm install so CD and ft Mentor that's what I just did it's npm install web 3 react bootstrap and bootstrap paste those into our terminal all right so all that stuff installed and I went ahead and opened up this new application inside Sublime Text so again we got two apps here we've got the Truffle app for the smart contracts and then the uh react app for the front-end application and so chat GPT is saying next you want to create a file called web3.js and the source directory of your application so just some basic literacy says go into the source folder here and create this new app called web3.js okay I did exactly that and we're going to copy code all right that it tells us here all right it's just saying uh that this is what you need to do to connect your product to the blockchain so now we're going to create a new file called my nft contract.json on the source file all right so I've done that okay and it says put the Json representation of your nft contract Avi inside there so I'm going to cheat a little bit I know exactly what it's talking about and where to find it but if you don't know where this is you can just ask chat GPT hey what does that mean okay and it would tell you because I've had these error messages I've asked it what it is and it tells me but I'm going to speed things up a little bit and go track that thing down inside my truffle project that's just this ABI here this is the Json representation of the smart contracts I'm going to copy this and uh put it inside if you're just like jazz if you told me to and the next step it says import the web through JS library and your nft contract ABI and set your app.js file okay then use this so I'm just gonna look to see what's in the app.js file so far okay and then let's just close this close this see this app.js file and uh what we're going to do is literally just take this entire thing and copy it and replace what's inside of here okay so let's just save that and then uh let's just see what happens okay so there's replaced network ID with the network you are connected to example 577 for ganache so that's this network ID right here all right let's just go into our app let's find this network ID and then replace it just like it told me to with this and then we want to implement the functionality for your nft UI Mentor components such as allowing users to Mint their stuff um okay so that's we'll do that momentarily but let's just go ahead and um you know do this part deploy the app to a hosting provider or serve it locally using a development server I'm just going to say how do I use a development server locally and so basically it's saying just type you know open a new terminal and type in npm start and it says just make any changes you'll see it and when you're done you can click control C to stop it which is actually pretty nice that it tells you how to stop it sometimes people just get totally lost with that so let's do npm start all right once I did exactly what it told me to it opened up a new uh browser window here with the nft mentor on it okay I can even see my metamask is connected uh with my account from ganache and we're ready to rock and roll alright so now let's make this look better I'll say can you update the react app provide people uh the ability to purchase the nfts the click of the button and then can you show the nfts on the page so I'm just going to go ahead and copy that and put it in here okay we'll do that I'll save it let's go direct to our page and see how that's looking all right check the network and then boom you can see we got something here okay it's pretty basic it just has some copy that we can change shows our account you own zero of tenant fds and we can now click to buy the nft but we see we have a problem we don't actually have any pictures for our nfts okay um there's ten that are possibly able to purchase here but we never made any pictures so let's ask chat GPT how to do that so here I am going to cheat just a little bit okay but we're still going to use AI which is pretty cool okay so uh you know we need pictures for the nft that's obvious but let's ask Chad GPT how to put these pictures into our project so um I'm gonna use an AI image generator to make the nft images in the first place okay so I just went to the uh stable diffusion release for huggingface.co okay and I just added in a prompt here so mutant monkey on the Moon cartoon steampunk and it gave me four images okay so I need 10 total so I'm just gonna do this a couple times to give me 12 and I'll just pick the best 10 I'm we can add those to the project all right so I went ahead and did that and then just picked the best tin that I'm gonna add oh I kind of like this one that could be the first image that we show but now that we have these I'm gonna ask like Chad gbt how do we put this into our nft app Chad gbt is saying that I've got a couple options here to do these 10 images I just asked it how to do it um you could upload them to ipfs that's the interplanetary file system or you could just import them locally into your project so just for the sake of crank out this app quickly let's do it locally we could always ask Chad GPT later how to actually use ipfs so I just took all these 10 images that I downloaded from the AI image generator and I'm just going to drag them into this images directory that chat if you told me to create uh inside this uh source file or Source directory right here right next to my app.js and then I'm going to simply just replace this line right here to actually show the image from that directory okay you could ask chat GPT how to do that but that's kind of just a basic thing that I'm gonna just kind of infer here okay gee just a tiny bit so anyways now we can see that's what it looks like on the page okay so this is looking a lot better now we have our AI image generation here but now I'm going to say can you just take the nav bar or make a nav bar at the top that says our our brand name Moon monkeys nft on the left and shows the user's address so I just paste in the code for reference so it knows exactly what we're working with so it returns this I'm going to copy the code all right toss it back in our editor here all right got that navbar here now here's the container okay got that in new import at the top and let's save that and check our page and that looks a lot better okay so now we've got that we can take out this like my nft Marketplace the connected account let's just clean up the code a little bit so this is pretty self-explanatory I'm not going to ask chat GPT to do it I just highlight these two lines and delete them okay let's go back and look at our project here and then now boom that looks a lot better okay and then I'm just going to go back in here literally just like move some of this HTML code down reorganize it it's like pretty self-explanatory like you don't have to be an advanced code or just be able to understand how to do this basic manipulation just like Dragon drop some HTML code let's save that just reorganizes code blocks and that looks a lot better okay so now we can see our collection title here here's the address we're connected with here's all the nfts and we can buy the nft let's make sure we click the button and that we can sign the transaction with metamask and then boom there we go we own one out of the 10 nfts in this entire collection all right so that's a complete demonstration of me creating a full stack blockchain application from scratch completely with artificial intelligence using chat gbt and also AI image generation like stable diffusion it's really crazy what I was able to accomplish in such a short amount of time with this technology now where could you go from here of course you could take this project and put it out there on a blockchain deploy your website live to the web and I can leave that to you as an exercise but I want to show you is how quickly you can get something off the ground with this technology now the question I'm gonna get all the time is oh my gosh is this going to replace the need for coders well I don't think the technology as it stands right now is going to completely replace any for coders because as you were seeing I was kind of having to ask it to change some things here and there and my knowledge coder helped me do that although I was trying to sort of pretend like I didn't know very much and I was able to accomplish quite a bit so here's what I think it's going to do instead I think it's going to actually increase the effectiveness of coders and help them get things done faster and that's also really good if you're trying to become a blockchain developer because you can learn twice as fast with this I'm helping my students Leverage The Power of chat GPT to learn blockchain faster and it's helping them do just that and I hope it'll help you do the same so if you're as excited about this as I am then make sure you smash that like button down below for the YouTube algorithm subscribe to this channel if you haven't already and if you want to continue your journey as a blockchain developer definitely go to my YouTube homepage you can find those free courses there they'll like you to make courses but they're totally free and if you like those videos and even to the next step or hey maybe you want to take a master's shortcut entirely I shouldn't go for the throat and become an in-demand blockchain Master step-by-step for start to finish over adaptive version.com forward slash bootcamp I can start a break into the booming blockchain industry increase your salary well past 100K you don't have to be an expert to get started right now I thought people with zero coding experience become real world launching developers in a matter of months so that's all I've got and next time thanks for watching to adversity

Channel: Dapp University

Views: 151,117

Keywords: ethereum developer, ethereum solidity, dapp ethereum, ethereum app, ethereum development, ethereum dapps, ethereum application, ethereum tutorial, ethereum mist, decentralized applications, ethereum web3, dapp, ethereum contracts, solidity, programming ethereum, ethereum programming language, ethereum coding, ethereum contract, ethereum code, ethereum virtual machine, ico

Id: i_a9bqvqmzo

Length: 18min 35sec (1115 seconds)

Published: Wed Apr 19 2023