GPT Pilot ✈️ Build Full Stack Apps with a SINGLE PROMPT (Made for Devs)

user password entered log in there we go you are logged in so it fixed itself how impressive is that GPT pilot allows you to work with AI to create sophisticated full stack applications I know I've reviewed a few other AI coding assistants but GPT pilot really stands alone the level of complexity and sophistication that you can build into a full stack application simply by working with AI with GPT pilot is incredible and GPT pilot is made for engineers and engineering teams so I'm going to show you how to use it today they're the sponsor of today's video and they have an amazing VSS code plug-in that just came out so let's use that let's go so with vs code open I'm going to go over to my extensions right here and I'm just going to type in GPT pilot and there it is GPT pilot Alpha so you're going to click this and I already have it installed so go ahead and click install and once you have it installed you're going to see this little tab right here on the left side click that we click open GPT pilot and since since I've already done this it's a little different but the first thing you're going to be greeted with is asking for your gp4 API key once you do that click create new app and the really nice thing is you can save your progress along the way if you build a complex enough application it could take a few hours to do in collaboration with the AI but a few hours is nothing compared to potentially weeks of work that it would have taken without this and what we're going to be building today is a full stack application that allows for authentication so logging in resetting the password registering Everything full stack so what is the project name off me hit enter describe your app in as much detail as possible so we're going to create a node.js app that enables users to register and log into the app on the front end create only three pages one that enables users to log in the other that enables users to register and the third one shows the data of the logged in User make sure that after registration or login the user is kept logged in in a session so that when you visit the homepage you could see the login user and we're going to be using for the database now you can build anything here okay now that we have this described go ahead and push send and it's going to start asking me questions so again this is an engineer working with the AI together to create an amazing application what authentication method should we use for the login and registration process if you don't care you could just say I don't care choose whatever you want but I'm going to say JWT tokens should the user verification process require email confirmation no do we need password strength requirements or complexity validation for the user registration yes but you can decide what that is should the homepage display any specific user data besides the username or email just the first name all right now it's ask me all the clarifying questions that it needs and it's giving me a project summary as you can see here I'm going to make this screen a little bit bigger so now it is doing planning and it's saying here are all the technologies that you're going to be using now it already stopped and it's waiting for an input from me so please set up your local environment so that the Technologies listed can be utilized when you're done write done so I can either write done or I can simply click this done button I'll click the done button I already have installed some of these things it can actually install itself but I like to just take a look and if I don't notice anything that I clearly don't have I go forward and click done and now it's creating the action plan for development and the nice thing is as you're developing you're going to run into bu just like any developer would and you can work with the AI to debug things to test things along the way and to make sure that you're ironing out things as you go and this iterative process between an engineer and an AI is really what distinguishes GPT pilot okay so let's take a look at some of the descriptions of what it's going to be building Implement user registration backend logic and we have the programmatic goal we have the user review goal here's another one create the registration page so it's saying exactly what it's going to be building now for the actual development implementation task one initialize a nodejs project with express.js and set up a basic server so here we go it says here to implement task one you'll need to follow these steps but that just means that it's going to run it for me and you'll see that in a minute so here you can see it's planning all the commands that it's going to have to write out okay here we go so now it paused and it says can I execute the command npm init Dy and it gives you a timeout window that it can execute that within so can I execute this yes yes you can and the nice thing is as it's building we're actually going to see the code being written over here on the left side all the files being created and if it ever needs input on a specific line of code it actually pulls up that file highlights the line of code and asks you for that input so here we go can I execute the command npm install Express yes you can okay so here's the first good example so I'm going to move that over a little bit and what we see here is that it ask me for input please open the file server.js and on line three check it out so here we go input required decide on a fallback port number other than 3,000 if necessary so it is highlighted for me I'll fall back to 3002 and that's it you just save the file and you continue and we keep going just like this so can I execute the command node server.js yes server is running on Port 3002 great and now what we're going to be doing is testing whether the server is spun up correctly so it's saying okay I'm going to spin up the server then you're going to run this curl command to just make sure it's up and running and it's also telling me what to look for if it did work properly okay so stopped we're going to click start app now the app is running on Port 3002 scroll up a little bit we're going to grab this curl command and it ask me to Ping Port 3000 but I believe it's 3002 so I'm just going to change that hit enter and there we go it's alive so we can either stop the app or we can just continue and I will continue now it's going to install packages task two and so now you're starting to get the feel of the kind of pingpong back and forth between myself and the AI building this application okay so we got to another stopping point can I execute the command npm install Mongoose yes so all I really have to do while it's sitting here building things is just confirm and make sure it's working so here we can see user.js just got built out and now we have a pause open the file. MV and online one check out the required input okay let's see so it just says replace with your mongod DB connection string if you're not using the default local but we are so we just delete that comment save and continue and yes you can do npm start okay so we have our first error so it says can't find module. MV and that's because we don't have it installed so can I start debugging this issue yes so here we go the error message indicates that M package is not there can I install it now it's asking me to install it yes you can npm start again and that seems like it worked we have two warnings which is what we're seeing here but that's okay now we've reached a point where it's asking me to make sure everything's working again so start app okay these are all warnings that's okay and mongod DB connected so it looks like it's working so we're just going to click continue now it's going to be implementing user registration backend logic with password hashing using bcrypt all right we got another one npm install bcrypt yes okay now it's gotten to the point where it actually wants me to test user functionality so I'm going to try to register a new user for the app so we'll go ahead and click start app and then we're going to run this request to just make sure that the user registration works now I could also do this through the browser no problem all right so I pasted in the code let's see if it works user created successfully amazing okay so now that we know it works we're going to come back here and we're just going to click continue and it's going to keep building it's that simple and it looks like we're about a third of the way done so here we go now it's creating a bunch of new pages it's also adding to the readme which is really cool so it's actually creating a readme as well okay so now it needs to install ejs and bootstrap go ahead and now it's going to start doing the front end I think so now it is asking me if I want to do something can I execute the command make directory yes I need human intervention copy the bootstrap CSS and JS files into the public SL CSS and public sljs directories respectively okay so it does seem like I need to do this part manually so let's go download those libraries so I go to get bootstrap.css it told me to and here it is so let's unzip it and there we go CSS and Js those are the two things I need so I am simply going to replace what I have in there there we go I'll delete these and now it should be good to go let's just make sure yep there's everything all right that was very easy next let's start the app just to make sure it works we have some warnings but otherwise it seems like it works so continue can I execute the command node server.js yes okay so we have a little error got incorrect CLI response it's a deprecation warning so this is a warning we shouldn't have got the error but let's see go ahead and debug it and it might just say hey this is actually a warning no big deal yeah the deprecation warnings are not critical and should not prevent the server from starting okay so it might try to fix it anyways no debugging appears to be necessary Okay so we've gotten to another point where GPT Pilot is asking me to verify that it's working so let's do that so we just click again start the app we have some depre warnings and these are all warnings so that should be fine server is running on Port 3002 mongodb connected okay so we're going to grab this curl request going to copy it switch over to terminal paste it in hit enter user successfully created let's try it again just to make sure we get an error warning now because this user is already created perfect user already exists okay now that's it we just click continue implementing task five Implement password strength requirements as a middleware in the registration route so now it's writing out the plan to put in stronger password requirements and now it's actually coding it okay there it made the changes okay now it's asking if it could do npm start sure next it's going to ask me to test if the password strength requirements are correctly implemented and it's giving me the code to do that so here it says password week and it's going to ask me to spin up the server again and try it again manually so there it is so I just click start app again I can scroll up grab this Command right here switch over to to my terminal paste it in hit enter and there we go password does not meet strength requirements perfect okay so I click continue we keep going now it's writing the JWT secret code okay so it wrote a bunch of code now it's asking me to install a few things go ahead okay and I can tell that it is asking me to verify something so anytime you see code highlighted like this it's asking to verify so let's look at it add a secure JWT secret key so I'm just going to add super secure it doesn't really matter for this test I'll save it open this back up and continue now we have another one session secret key and it'll be super duper secure and continue all right now we're going to test the login functionality so let's click start app grab that command I'm going to paste in the command they gave me and I'm actually going to use a user that I already know is registered so back up here for my previous commands copy that all right and then I'm going to use the password of password 1 2 3 and hit enter logged in successfully perfect and it responded with a token awesome all right back here continue and now we are 2/3 done congratulations 66.67% of your project generation and before continuing it's actually creating documentation which I absolutely love very cool and here's the documentation on the left side bunch of information about how this is built now Implement task 7 create login page using EGS and bootstrap and handle successful login by redirecting to the homepage and here's some of the code and we're on dev step 116 now and another really nice thing is that you can always go back if you have any problems you can go back to any step in this entire process all 116 steps you can restart from there and go forward in different directions if you choose so if you don't like the way something came out or if you run into any bugs simply go back to a step and restart it from there all right npm start again yes it's just making sure that it's working and look how much code has been written already I mean there's so many different files all right Dev step 121 to test if the task was completed successfully the user can follow these steps so now it's asking me to do it and now I'm actually going to use the web login to see if it worked and when it's done it's going to give me the little message to start the app yep so go ahead and click Start I'm going to grab the login URL right there and here we are so let's make sure that we can log in so I'm going to grab the same user that I just logged in through the terminal paste it in and then I'm going to grab the password as well paste it in login invalid email or password okay okay okay so let's make sure we can still log in with this found redirecting to home all right so it does work through the console but it's not working through the interface okay so we're going to debug this now so it says right here if something is wrong tell me so I'm going to tell it right away okay so I'm going to say through the terminal it works fine but when I try to log in using the same credentials through the UI I get this error and then I pasted it in we're going to click submit and hopefully it's going to be able to fix it okay so given the information provided by your colleague it appears that the isue lies in integrating the front-end login form with the backend loog login Logic the fact that the login Works through the terminal but not through the UI suggests that there might be a problem with the form submission okay perfect so it's going to try to fix it now let's see what it does all right now it's asking for some user input input required line 62 of users. JS so we're already there let's go to line 62 there it is and it says add the required input so add server logic to handle incorrect email password and redirect direct with an error message okay that's fine and same thing here that's fine okay so we're going to save and continue type y to continue okay submit all right now we're going to test it again start app grab this URL right here okay let's try it again all right user password entered log in there we go you are logged in so it fixed itself how impressive is that very cool switch back to the app and continue so it's asking to do npm start again yes great can I start debugging the issue so we have a deprecation warning so it probably doesn't need to do anything with that but it's asking to anyway so go ahead yeah so the deprecation warnings are likely not a cause of critical failure but may require attention in future updates so it's still going to try to fix it and do it a little bit better remove the deprecated Mongoose warnings now it's asking to run node Trace deprecation yes you can now it says manually verify that session persistence works by logging in restarting the server and verifying that the session remains remains active Okay start now here I'm logged in refresh the page I'm still logged in I'm going to stop the server I'm going to restart the server go back refresh and I'm still logged in perfect all right implementing task number nine build the homepage to display the logged in user's first name using the data retriev from the JWT payload okay here we go npm start again yes testing everything is working great moving on to the next step okay now it's going to ask me to do something so again log in then I'm going to be redirected to the homepage verify that the page displays my name and for a more automated way to test the implementation from the terminal using curl we can do that but I'm going to do it the manual way so I'm going to click Start I'm going to go over here welcome test refresh and I'm still logged in and it still says welcome test so perfect all right we're done congratulations you've reached 100% of your project generation so now we have a full stack application front end back end a way to log in a a way to store that login information in the database we have a JWT secret protocol set up completely done for us by AI by GPT pilot it is super impressive now I worked with it step by step throughout the process to verify that it worked I ran into some issues and I fixed it with the help of AI and finally now it's writing more information in the readme file the app is done now you can use it wonderful look at all that beautiful code written now it's asking me if I want to add any features or changes and so for now I'm just going to click enter for no but of course you can continue to extend this application and as I mentioned before if I click this little back arrow right here I select an app off me you can select any of these major steps so I'm going to say coding and then you can also select a development step so you can start over from any of these steps and these steps are referencing the different steps that we went through to build this application if you run into any problems jump in their Discord the two Founders are great they're super helpful they'll help you out I'll drop the Discord Link in the description below if you liked this video please consider giving a like And subscribe and I'll see you in the next one

Channel: Matthew Berman

Views: 157,205

Keywords: gpt pilot, ai coding, ai coding assistant, ai coder, chatgpt, openai, open ai, ai, artificial intelligence, coding

Id: iwLe6UWyaS4

Length: 17min 8sec (1028 seconds)

Published: Thu Dec 21 2023