Windsurf Editor Beginner's Guide To AI Coding in 18 min (Claude AI, ChatGPT, GitHub, Firebase)
Other Videos📅 2024-12-06
Transcript
[00:00] we got the wind surf editor here let's learn how we can actually build out an application that deploys to a real website link number Local Host 3000 I don't like it and to make sure you can actually do this I'm going to provide you a free Google doc that's going to be in the description down below that's going to walk you through step by- step everything I do in this video or you thought it was over with free value oh no no a little bit more on top of that you can chat with this video ask questions about this video and use BUMP ups.com that gives you a free 60 minutes just put in this YouTube link and you're good to go so basically you found yourself on the easiest for beginner tutorial ever created for winds surf
[00:31] editor yes I said that let's jump in to get started here simply download wind surf editor once you download it sign up put your preferences in you should see something like this coming back over to the Google Doc let's do step one here which is going to be setting up our wind serve project what we're doing here is we're creating a react based app this is going to allow us to create backends for this this is going to be your front end a lot of this will make more sense the first step though obviously is we got to just generate the code and then once we generate this app we're going to go ahead and connect it to GitHub we're going to connect it to a back end like fire you're going to see everything in this video safe to say this is a foal
[01:03] guide so first let's put this prompt into Cascada make sure you have right selected here and then lastly go ahead and name this folder whatever you want this folder is where we're going to store all the code so when you deploy this as a web app or an actual software this is an internal facing name EG no one in the public will ever know this name this is purely for your reference but name is something that you'll recognize as this is my software or this is my website don't name it something random like 1 two three I know some of y'all do that so I'm going go and rename this to something better I'm going to go and say live website at as that's the entire purpose of today's tutorial we say create a react based app I want to
[01:33] have the directory be at this folder there you go just initialize it hit enter when leverage in cascad it either use Claud or cat gbt 40 this is going to provide us with the first terminal command here we're going to hit accept now chances are if this is your first time ever running this kind of terminal command you're going to run into a very specific type of error so let me help you out here this error has showed up so many times in my comments so I went ahead and created a whole second step for this which going to be install node.js this is going to let you run npx and npm commands basically give us the ability to mess around with react and create react apps so scrolling down here
[02:04] to step two here it is from Mac Linux and windows all you need to do is simply put in these lines in your terminal window for reference when I say lines I'm referring to the darker Hue backgrounds that you see here and then when adding it to your terminal you're going to Simply come down to your left terminal put the lines right there now if you still run into issues here's how yourself let's say I'm on Mac all I want you to do is copy all of this copy I'm going to create a new chat in this chat I'm going to keep it at right and then I'm simply going to paste it in here and just be like hey I need to install
[02:36] nodejs and then let it walk you step by step on how to do that so you can do the following commands best part about this is that once you do this one time for your desktop or laptop you'll never have to do it again so every new app you create you don't have to worry about this part this is just installing dependencies that are required to run a react based app so let's go ahead and go to our past workflow here where we're creating our app still in the sense of our directory so it looks like we ran into a little bit of error here so I'm going to go ahead and just just reor this it's going to put okay how I fix hit enter here and one really cool thing about wind serve that I like about wind serve that I've noed comparative to
[03:08] other idees that integrate AI is that it's really good when it comes to terminal commands as terminal commands are a pretty fundamental part of app creation and software creation I'm going to go ahead and accept here and this is going to create our react base app now what you'll notice is that when it's creating this we're not seeing anything happen like is there a bug what's happening is this going to get fixed don't worry all we need to do is simply open this folder when it's done you'll know it's all working correctly when you see that last load line there called happy hacking which basically means up to this point I have successfully hacked your computer while your data is mine
[03:38] I'm just joking but that that's how you know it's working correct and we're going to go so I'm going to ignore this last line here but npm start allows us to run this in a local environment which I'll show you real quick for now though we're going to open this so we can see all the relevant code open folder when you select that you can either search for it or alternatively just find it what you'll notice is that I called my live website here it is right here I'm going to go ahead and select and open you'll get prompted by wind surf whether you trust these files or not obviously we do so we're going to say yes I trust this author and we're in we've successfully created our front end which let's go ahead and show you real quick as you saw the previous command here
[04:09] we're going to come down to this little button right here we're going to go ahead and go to terminal let's go ahead and shrink down Cascade I get out of my way get out of my way and then in order to run this we simply just put an mpm start but this isn't a live website link which is the entire purpose of this video I'm going to show you how to deploy this to an actual live website link as Local Host 3000 isn't real it's just fake fake it's in my it's in my computer okay therefore up to this point though pretty cool now we can actually edit the front end get some cool code here so let's go ahead and just create a real quick nice little homepage here that we like and then we'll go ahead and
[04:40] connect this to GitHub want you to think of GitHub like putting the code in the cloud as right now this folder is just found on my laptop so if my laptop flies into the ocean naturally gets destroyed I lose this code we using GitHub you can put in the cloud obviously GitHub has a bunch of other advantages when it comes to software development which I dive into in other topics on this channel so make sure subscribe here but for now we're going to do GitHub then deploy to an actual back end but first I want to make this look pretty so we got our app.js here and we got our ab. CSS let's go ahead and talk to Cascada here and
[05:10] create something to make my life easy I'm going to do this little at symbol here I'm going to do app.js JS is going to be the structuring and a little bit of logic in the sense of code app.css is going to make it look pretty we like pretty stuff so app.js app.css we're going to say this I'm not going to go too deep in prompting on how to prompt with AI in this lesson in this video I actually created an entire entire playlist dedicated to this building out an entire front end it's over 3 hours long so I'll make sure I leave that playlist in the description down below it'll have front end next to it therefore if you want to learn a prompt and how to structure actual front ends you can check that out for now here's a
[05:42] prompt you reference both the files here of appjs and CSS create a landing page for a Blog I want to showcase one blog on how good corn beef hashes in the morning with some coffee I'll put all the code make the UI modern as apple as if Apple created it if you don't know me you just learned something new I love corn beef FH especially with some cafee early in the morning wake up did you did you wake up on time today or did you sleep in so with gasca here we're able to basically accept all changes here which obviously I'm going to do and then make sure when you accept changes you hit accept and then also hit control save or command save on your computer so
[06:14] it actually saves the files and it'll reflect in the Local Host 3000 it looks like we also have the ability to accept it over here so I'm going to say accept all and to make sure I save again and to be honest with you I have no clue how this is going to look but that's part of the beauty of working with AI and code is that sometimes you get some really cool outputs and as you can see from that very simple prompt here I mean this doesn't look bad at all like this was just one prompt and we already have a NIC looking user interface here obviously our image here isn't cor be fash get some pancakes close enough I like it so with all that done let's go and go to step two here and connect this to our GitHub for reference if you want
[06:45] to make sure you're on the right playlist when I was referencing that front end playlist this is it right here you'll see that like 3H hour and 11 minute video which basically combines all of these videos to one big one and that goes over how to code with AI in the context of creating react based front ends that are scalable all right enough of that with that all being said let's go to step three here which is going to be connecting GitHub as you know with these tutorials you can find that Google doc jump over to step three if you want to go and copy the terminal commands come over to GitHub here make an account completely free when I say free I mean free like they give a ton of perks for a free account then all we're
[07:16] going to do here simply is go to repository and hit new now personally what I like to do is name the GitHub repo the same name I have on my local computer so we went ahead and named that live website as you saw before like right up there as you can see see therefore I'm going to do the exact same thing now in this video I'm going to go off a public repo but in theory what I suggest you to do is go off a private one and I'll go ahead and reference a video in the description down below this shows you how to do a private repo the thing is on my channel I've done that like multiple times showing you how to connect GitHub on a private repo so just
[07:47] check out those videos you'll be good to go for this one we're going to do public because honestly I've never showed how to connect a GitHub repo to your local machine in a public way create repository so once we've created our repo here and just for a side note repo stands repository why do I keep saying that cuz I'm lazy and I just want to say repo go ahead and copy this first line here this code or terminal commands go and copy it comeing over here select this right here and then go to terminal create a new terminal with this plus button right here then paste it hit enter and it looks like we ran to our first area here so let going to solve it
[08:18] with Cascada we're going to copy all this we're going to create a new chat and then what I like to do is we'll paste everything that we just put into the terminal so has the most amount of context I'm going to go ahead and say I'm trying to commit to my GitHub for the first time and I get and then provide all the terminal hit enter and then let's go ahead and just see if cascate is this smart I'm going to walk through step by step using it suggestions get remote V okay accept wants to First remove the origin hit accept and then it wants me to go ahead and create my own P token here personal access token which is actually correct so we can access it so so far so good
[08:48] from Cascada just going to create our access token together to do this we're going to come over to our little face here and we're going to go to our settings scroll all the way to the bottom here and go to developer settings in developer settings we're going to go to personal access token find green tokens here go ahead and do generate new token put in your relevant password with that go ahead and put in your token name so this could be anything but name it something you remember so I'll do test token here because I'll probably delete this after this video expiration I'm going to do 30 days and then we'll do a specific repository here which will be the live website live website and then
[09:18] when it comes to permissions here just simply allow all access all don't miss any of these you have to give access to everything so you don't run into any errors when it comes to terminal I'm going to go and do that there we go and then on account permission same deal access to everything for reference some are only read only but basically just choose the one that is the most you can do with it once that's all done hit generate token from there it's going to show you your token make sure to copy that and get ready to use it so what we're going to do here because we're having an access issue is we're going to use these lines right here add remote repository and push using a personal access token copy these lines and fill
[09:50] in the relevant variables EG your username what is your username come back to GitHub that's going to be for me coffee feel bump you'll notice that it's also referenced here Cofe Feld bump live website G those relevant variables we need to put into these lines here so your username for me would be Cy field bump live website come down here your username coffee fuel bump etc for the personal access token this is we're going to paste that token we just got right here remove those little brackets on the side okay I'm going to go and do that and then we going to paste it over with all that done I'm going to close out of this chat with this new terminal
[10:21] I'm going to paste all of those lines with the variables I wanted to put in then I'm going to hit enter I can't show this part as there's highrisk variables obviously but hit enter once you do that you should see a message like this and if you're like w why is there so many live websites you just hit enter a couple times you're good to go and then when I reload the git there we go we have successfully connected our local code to the cloud to a GitHub pretty nice make sure to leave a like if you feel like you learned something so far so now that we've done that let me just show you how to update your local code to your Cloud code and then we're going to connect it to a live website so we got our little app here and maybe I'm like the perfect morning Duo I don't
[10:52] like that I want to change that come in over here to our app.js you can simply just go here and say the perfect morning command save and then if I go over to my read me maybe I just say I like coffee so these are just different changes I'm doing locally in the code and what you'll notice is that if I go to my GitHub and for example I go to the read me it doesn't say I like coffee and that's because of the fact that well maybe GitHub doesn't like coffee but in reality we haven't pushed our local code to the Cloud yet therefore to do that all we need to do is come to terminal
[11:22] and do three lines and these lines you're going to do for the rest of your life if you are a software developer and work with GitHub so you're going to remember them after first you're like well that's too many but then over time you're like oh this is easy so we're going to do get add oh not there right here get add dot get commit DM and then we're going to give a commit name EG what did we change in the code this could get random or be specific so for example read me changed rotation Mark and then the final part we got to do here is get push
[11:53] origin main with all that done the read me now says I like coffee and we are reflecting the most up-to-date Branch from our local computer now if you want to learn more about that and how to effectively create software in this manner go and check out that playlist I referenced in the frontend but let's go ahead and start working on the back end here and actually deploy this to a live website link to do this go ahead and create an account with Firebase here and we're going to say create project give a name to your project so I'm going to do live website again as we've been naming or get that local branch Etc we're going to hit continue for me I'm going to turn off Google analytics but for you
[12:23] obviously if you're creating your web app or software you're going to want this on create project we are creating a Firebase project that's going to allow us to deploy this to a real website hit continue and we just got to do a couple things here so all of this right here is huge especially for software development there is a ton of stuff we can do Firebase we can create functions databases hosting extensions authentication sign in sign up if that all sounds super cool to you I'm going leave this in the description down below I show you from zero lines of code and how to code with AI to create these kind of functionalities we're talking about
[12:54] sign up sign in specific user databases open AI functions how to integrate artificial intelligence into your software and actually call the API and a ton of other stuff such as integrating stripe payments Google analytics Google ad campaign conversion and everything you would really need for software now this is a separate playlist though so check that out I know some of y'all are thinking right now why does this guy have so many different playlist for so many different things but that's because in order for me to show you how to actually code with artificial intelligence it requires playlists and it requires 30 to 40 minute videos on
[13:24] specific topics this is not the channel that's going to be like a little five minute video like top 10 aii tools no no no no I run a real software company I'm showing you how to actually code a software when it comes to artificial intelligence as this is an entirely New Field New all we need to do today though is deploy this to a website so we're going to do hosting with hosting selected here we're going to say get started now what's great is that you can either follow my Google doc or alternatively you can follow the Firebase guide so coming over to step five here this shows you how to do it within the Google Doc but also within the Firebase UI it gives us a
[13:55] step-by-step guide as well so first things first we're going to go a to do npm install Firebase tools copy this comeing over to our same terminal here we're going to paste that line hit enter what this is doing is that this is installing Firebase into our application and what this allows us to do past that is create backend functionality everything I described before is dependent on Firebase there's alternative ways of creating backends such as AWS but personally I like Firebase once we do that hit next so the next thing we need to do is make sure we are logged into our Firebase account
[14:25] this is going to be the email you signed up with in Firebase I'm noticing I'm saying Firebase a lot fire fire catch a liar pants on fire to do this go ahead and do Firebase login for me I'm going to do log out and log in as this is currently an active profile and I may have logged in in the past but typically when you start a fresh day you want to go ahead and do Firebase log out Firebase login this circum navigates errors that could possibly appear that just make no sense Firebase login hit Y this should lead you to this screen make sure the email right here is the email in your Firebase project on top of that hit allow once you see this you're good
[14:56] to go next we need to initialize it so we're going to copy this what Firebase init does is it allows us to enable different features like I described before such as fir store functions app hosting hosting storage emulators like a bunch of different stuff we can do to create really cool software all we care about is hosting so we're going to do space here and hit enter then we're going to do use an existing project since we've already created it the project we're going to use is going to be the live website- C1 BFE which we identified before enter you want to use your public directory we'll say yes or just enter configure as a single page
[15:28] app we're going to say y say automatic builds for now we're going to say no file public index.html already exists over right we're going to say yes so far so good so there's a couple things you should see here first thing you should see the Firebase Circ firebase. Json looking good so far leading us to our final thing here to make sure it all connect which is going to be next we're going to be using this Firebase deploy later in this tutorial but for now we need to set up our Firebase .js to do that come up to your top left here say project overview and we're creating a web app today so we say web the name of our web app we're going to give the exact same name live website hit
[15:59] Register App so this is going to be blurred out for obvious reasons but this is relevant variables that we need to start leveraging first let's go ahead and install Firebase we're going to copy this paste that in terminal hit enter looking good so far so as notated in the Google Doc let's do our next line here which going to be touch Source Firebase IGS this is just basically creating the Firebase .js file hit enter and then we should see here there we go now if that done copy this code and paste it into fire base.js and it does look like I kind of messed up here with the index.html we don't want to overwrite that but in order to solve that it's no so biggie all we got to do is go to our
[16:30] GitHub and this is why GitHub is so important we can simply use older files to overwrite newer files that don't work so coming over to GitHub here I'm going to Simply go to public I'm going to go to index.html because this is the older code here I'm going to hit copy and then I'm going just paste it here nice and then the last step here in order to deploy is going to be two commands it's going to be npm run build this is going to build out our front end and then it's going to be Firebase deploy this is going to run our back end every single time you deploy your application you'll run these two commands so we'll do npm run build and then we'll do Firebase
[17:00] deploy and there we go we should see our live website at this URL hosting URL if I copy that and we paste it we actually get a white screen which don't worry I'm used to this kind of air basically there's been an overwrite when it comes to the build in the public folder so if you put in that link and you get this let's solve it so here's the situation when you run into errors especially when dealing with Firebase provide these files firebase.com scen on the website link what's super cool is that this goes
[17:31] through the workflow and found my solution notice that we're building to the wrong folder here accept all changes and then with that it's giving me the next command here so we're going to do npm run build again and then we're going to do firebeast deploy again there we go and then let's check out our live website boom with that live website link you see in the top left we have officially created a website that anyone can access on the entire internet now some of y'all might be looking at that live website link and be like yo Corbin that looks horrible I don't like web app don't worry check out that one front end playlist I referenced earlier I show you how to put a custom URL that we can
[18:02] start using there and of course if you leave any comments like yo I want to make a sign up or have it so that users can access an open AI function for an output or analyze a PDF like whatever you want to do when it comes to software development check out that backend playist that's where I show you step byep how to do that for now though we successfully created an app with a backend Corb fash I'll see you in the next video the perfect morning coffee corn beef hash Tabasco sauce yum