zSt2ZXs54Ik
Create an App's Frontend with AI
Transcript
[00:00] we have arrived to lesson three of never paying for a website again never paying for website again yes never paying for a website again in lesson one we went over the what how and why in lesson two we learned how to set up our vs code project with Firebase 2 never pay a dime again did you just say code Corbin don't don't worry if you have no experience of coding it doesn't even matter there's a new way to code that was only you were only able to do it like a year ago and I'm showing you how to do it on top of that if you're unfamiliar of this series I provide you with entire Google Docs of instructions videos to go along with it and on top of that I provide you with a
[00:30] free Chad gbt link that allows you to talk about that lesson with Chad gbt to get answers right away so don't worry if you have little to no coding experience these are the perfect lessons for you as I show you real and practical ways to use AI to code and it's super simple you literally could have no clue what you're doing and still bu out a website this doesn't seem real Corbin what are you talking about trust me just follow the series now we're on to lesson three in lesson three we're going to go over security and how to set that up for your vs code project and then we're going to build a very simple user interface together and I'm going to show you how render that on a website live and then
[01:01] finally we're going to go over SEO let's get started y'all we are going to do this today this is the guideline as you already know this Google doc is going to be in the description down below I'm also going to include a chat gbd chat that is specialized for today's lesson so if you run into walls run into issues have questions ask it in addition if you are skipping to lesson three or this is the first video you're watching in this series I encourage you to go back to lesson one and start from the beginning as some of this may look very foreign to you or may look like what is going on
[01:32] but in reality we already did all this so make sure to watch lesson one watch lesson two and that can kind of get you to the point of what we're about to do in today's video last two things to note here make sure to leave a like right off the bat CU you're going get a ton of free value this is a free Doc free CH gbt chat and by the end of this entire series you're going to be able to have a website hosted on a custom URL for free which is kind of crazy if you think about it considering how much web flow Shopify WordPress and all these different websites are charging you nowadays therefore number two get a cup of coffee let's get to it no cream no sugar let's just do number one which is
[02:03] setting up security so what we're going to do to set up security is we're going to go to Craigslist we're going to set up a job posting we're going to save you know $22 an hour to protect no I'm just joking but in this we're going to show you what security means in this context so there's plenty of ways to do security in Firebase itself when it comes to storage like you'll set up storage rules this gets into more advanced development for our specific use case today it's purely going to be so we can protect high-risk variables what do I mean by high-risk variables in the previous lesson we had set up together our Firebase config variables this is going
[02:34] to connect us to Firebase that's going to allow us to do our hosting but these variables are high risk if anyone ever got access to those they could do some crazy stuff so what I'm going to do is I'm going to show you how to create a EnV I'm going to show you the use case I'm going show you why we create these because another reason we're going to need this.v is that when we set up our web hooks to handle the conversion event in my context the conversion event will be when a user provides their email which puts them into my mailing list now in order to do a conversion event like like that we're going to need some type of web hook in order to communicate with our newsletter provider that web hook
[03:04] itself is highrisk therefore we're going to put that in the EnV file as well in a later lesson if anything I just said to you doesn't make any sense you're like what did this dude just rambl about for the last 30 seconds don't worry step by step let's jump into it this Google doc will be filled out completely by the end of this video right now it's not finished because I'm doing this all live let's do number one together we're going to set up a security with an environment variable but before we do that go to your cheat sheet what's the cheat sheet Corbin where you for lesson two no that's why you don't know what the cheat sheet is coming over to a cheat sheet
[03:35] grab your directory command C paste it enter now we're in the directory last video we connected this to GitHub so we can push our code into the cloud let's follow some best practices here or just things you should do so you don't run into errors what do we start with Firebase log out Firebase log out but Corman I logged in yesterday do I have to do this again yes because you will run into errors that shouldn't happen that's like I did everything right but I'm running into an air still these are the kind of things that you just set up in your workflow when you start coding for a day or at least start messing
[04:06] around for a day that you just want to do Firebase log out Firebase log in I know y'all seen Karate Kid wash on wash off kind of same deal here there we go we're logged back in we're going to go we could take this one step further here and make sure it uses the correct project so let's go do that as well now in order to find what your project name is you could either go to firebase.com or alternatively just ask it within your terminal let's do that Firebase project semicolon list enter and sometimes you get little errors like this and sometimes it can help you so it says
[04:37] basically I forgot to add the S let's try again with this command Firebase projects list you can add that to your cheat sheet if you want to you can find out what the project ID is that you can reference so now that I know my project ID is web Cafe Landing what I can do to ensure that there's no issues with the emulator no issues when I'm pushing to it in the staging environment or production environment I guess in this context we just do Firebase use what Cafe Landing but Corbin it said it was already using it trust me best practices this is what's going to help you a lot also another thing I want to note is that when I logged into Firebase it
[05:07] asked me to like install an update for Firebase if you're only like one or two versions off it's not that big of a deal it only gets into a big deal for really large updates so don't worry about that kind of stuff you don't have to be fully up to date with the dependencies you use now in the previous video we did a ton of stuff but we never pushed it to the cloud or GitHub so let's go to do that right now this is always a good practice that if you really mess up like you delete a file and you don't know what the heck happened you can roll back to a previous commit we're going to do get ad that get commit DM quotes and then let's
[05:40] name it we're going to say firebeast and get connected we're naming it so that if we really mess up on our new version here we can roll back to this and we're good to go we're good to go again get push origin and then the branch name main boom this all should go away all went away and then this new read me is going to change to the most recent Branch we just pushed here which is Firebase and get connected you can actually see what's changed within that Firebase push or get push and basically
[06:10] make sure everything looks good there but now we can roll back to that if we run into issues it's kind of like you're playing a video game and you started at level two you get to level four and you're like wait I missed like an Easter egg in level two so you go all the way back to level two to make sure you get that right does that kind of make sense okay let's go now that we got all that out of the way best practices let's do number one here in our terminal we're going to do touch. EnV enter when we do touch. EnV this is going to create a very specific type of file what does this file represent Corbin this represents any highrisk variable Keys API Keys anything security you put in
[06:42] here and then you reference it in the project from this file so the next step we have to do here is we have to ensure that this specific file doesn't push to GitHub but to be honest with you to make this even more clear Let's do an example together of the type of information we'll put in this EnV I'm going to go and cover this just cuz you know these are high risk but when we said this up in lesson two we don't actually want to reference the specific API key off domain project ID storage bucket all this within the actual fire base.js file itself therefore go to the Google Doc paste this over we're going to do this
[07:12] we do a hashtag here to name it this is like commenting out code this is basically stuff that's not read but it's purely for your use case of like understanding what this is I'm just going to capitalize Firebase why are we doing this because of the fact that when we add future things to this EnV this just helps with organization so for example another one I could add is web Hooks and then we'll basically utilize this in the future as you see here what are we going to put here basically the relevant your API key your off domain your project ID everything that you saw within that firebase.com
[07:59] env. reacta API key this is the variable that we set here and the reason we set it like this is for security reasons this.v is local to us when we build with it it is encrypted this is high security then we just follow that same logic across this file boom done one is out of the way we've successfully set up aemv which will reference in future workflows to securitize high-risk variables high-risk variables not to beat the dead horse here it's just variables you wouldn't want the general internet to
[08:30] know this could be a stripe key this could be your open AI API key to access AI like very high security variables here on top of that when you deal with backend functions you'll have a EnV like this but also you'll use a cloud form of security such as Keys within Google Cloud this will make more sense and that kind of stuff I just described there is going to be more relevant for my AI software tutorials that will come out later this year but for now number one number one is done which leads us to number two if this EMV is highrisk we can't have this in the cloud either
[09:01] unless you do the measures that I described earlier we don't want this in our GitHub so we're going to use a file within our vs code called get ignore what this file does is it just ignores these files and doesn't push them to the cloud so when I make an update from the main branch let's say I make an update to app.js those changes go to GitHub or GitHub but if I had app.js here those changes would not go to GitHub knowing this the way we approach it is we simply just addm here as well I'm going to come right here and type in
[09:33] EnV that simple I want you to notice the change here it's green right now which means it hasn't been pushed to our GitHub it's like yo I'm supposed to be in the cloud bro put me in the cloud but when I add it here EnV that green goes away just like some of y'all when you invested in nfts in 2021 that green went away all right I faced it too okay we were all on the same boat during 2021 don't worry about it we all made some money lost some money we'll leave it in 2021 but there we go now your next
[10:05] question might be Corbin why is there local. development local. test loc. production loc and all this when we set up logic when building out a website and especially when building on software there's like three major stages here I don't want to get too deep into this this might have to be a whole lesson in itself but this is a quick overview let me just try to describe it to you as best as possible I don't want to get stuck here but let me explain this as fast as possible so we got our main branch this is the code and let me shrink down you know like in Super Mario when I hit a mushroom or hit a shell I
[10:35] go we got our main branch and this is going to get into more logic about setting up different branches and committing but for right now all we need to understand is why is there A.V why is there a do let's call it a staging environment and why is there a do production environment got Main and we got our three emvs this will probably make this is probably going to make a lot make a lot of sense we're do EMV and then we'll do QA staging could be called QA in EMV is your local environment your local environment is what you saw in lesson 2 with the Firebase emulator on your laptop this doesn't connect to the
[11:07] internet if you break something very severely it doesn't really matter because you just can close the program no one has access to it because it's on a local host 3000 the variables that are associated with this like they're all connected to this local environment coming over to mv. q.v. staging what's the difference between sage and QA just a different way to pronounce the same thing potato potato what this environment is is it's exactly like your production environment but it uses its own variables this is what developers use when they push out an update to confirm it works in a live
[11:39] website if it's confirmed that everything works perfectly and no breaks incur then it's pushed to prod which kind of makes obvious what prod is then right env. prod is like the live website what people on Google see as the website like this is like anyone in the world goes to this website that's your prod that's why like when you push to prod it's a big deal you don't want to work in prod you want to make sure anything you push to prod works perfectly Therefore your variables in your EnV between local and staging are going to be basically the exact same to an extent
[12:11] when it comes to open AI Keys when it comes to Firebase hosting when it comes to all those kind of variables they will be the same between these two this is due to the fact that because the local and the staging is offer testing and development the only differentiation you're going to see between aemv and a.qa is going to be like the underlying URLs that are referenced in a local environment we're going to be using that Local Host URL in the staging and QA environment we're going to be using like a live website URL to do the functions and to everything necessary for that
[12:43] process now the EMV and QA are going to be completely different than the prod the prod is going to have its own unique IDs own unique variables everything's going to be unique to prod because it's production it's we're live let's get going someone hit record if you have any questions on that as Chad gbt that chat that I specialized in that Google doc SL inth description Down Below on top of that leave a comment down below let me know if that was confusing there might have been a lot of information at once I try to explain as best as possible I could go a lot deeper than that to explain it even better but some of y'all that already know what emvs are like
[13:13] Corbin come on then the ones that don't even have an idea what an evvi EMV is like Corbin come on okay one out of the way two out of the way let's hit three purpose of number three here is building out the homepage itself this is going to lead into structuring of how we do our folders here how everything communicates stuff like that best practices here is let's begin we're going to hit right click here we going to say new folder the First new folder we're going to add here is going to be called assets what are we going to add in assets this is just going to be images and
[13:46] Gifts new folder again gifts therefore if we ever need to add images We'll add them in the images folder gifts We'll add them in the gifts folder and then the assets is just like the parent folder to make this all more organized now let's go ahead and create the folder that's going to store our homepage and do new folder here and I'm just going to say views there we go with views this is where we're going to go ahead and store our hom page.js and homepage. CSS now there is a way I could approach this where we could basically make a bunch of
[14:16] different components what is a component think of a component like uh if I were to come here the component could one component could be like this top bar another component could be the actual page itself don't worry about that right now for now we're just going to do home page.js and homepage. CSS as I referenced earlier check out that Google doc the code that I'm going to show you in this video is going to be available there I'm going to say new file homepage. Js new file homepage. CSS now this specific lesson I'm going to provide the code walk you
[14:47] through it a little bit explain it a little bit but this isn't going to be the lesson where I show you like the new way of coding the new way of using Chad gbt to code out an entire page that's probably going to come next or maybe the lesson after that purpose of this specific lesson is for you to understand how to connect this to this render it on a website understand what how to read the code basically like I got to give you a little bit of context of how to read the code before I show you how to code with AI therefore let's begin I went ahead and pasted this over you can paste this over from the Google Doc as
[15:18] well I'm going to walk you through step byep here what everything means now the beauty when coding with AI in this new method is that you don't have to deal with typing all this this stuff can be outputed fast using lame IND dictation let's go and explain this real quick though first Imports what are Imports Corbin Imports are things we'll use in this file this is a react based app therefore we're going to import react and a use State I put this logic here just to show you the difference in how a file is structured next thing import homepage. CSS if you don't know what CSS
[15:48] is this is what makes things look pretty for example in this file when they chose to put the JS here in the homepage like the coloring of the actual text itself was made through CS ESS therefore when structuring files you'll have your Imports here what are other examples of imports we will be importing stuff from Firebase for example we may be importing things such as a database a function in this specific series we don't have to worry too much here because we're going to do mostly hosting now coming back over to home page.js you're always going to wrap your quote unquote component
[16:19] Within These Little brackets here and you'll name it this naming is important because we'll also export it therefore when we export it you know like taking it somewhere else we will be able to export it to our app.js why are we exporting this to app.js because this is what's rendered on our website using index.js notice how it's imported here and notice how it's app therefore let me go ahead and add the CSS let's launch the emulator this will become more clear now to launch it in the emulator all we need to do is type in npm start remember that is on
[16:50] the cheat sheet here this is not pushing to the actual hosting URL this is for local use let's go and copy it simply Press npm Start and hit enter here we go notice how it says Local Host up there well this looks different Corbin that's because we using this code over here now just to show you what this code does for now and the purpose of this video is purely just to teach you good practices when it comes to importing files and understanding a JS and a CSS file all it does is just change color is this going to be the final landing page no but I want to show you functionality here now real quick things first thing notice how
[17:22] if I delete this command save goes away there perfect live editing live results if there's an error it will tell you like this and you'll see it over here cool command Z boom furthermore we have created a CSS for this as well we've created ajs for this and we've imported it let me explain why also side note this will all be available in the Google Docs so you can paste over as well first major thing I want you to identify is that we've imported the homepage. CSS this is where we are referencing these
[17:52] specific classes when you're naming a class you don't want to use redundant class names for example the I'm creating a different button for a different use case and it looks different we want to do button button You' add some type of hyphen here to identify it even further for me I just add a cafe therefore when we reference this class we can build it in the CSS that's been imported here so notice Cafe homepage command f is the class right here for Cafe homepage actually it isn't it looks like there was a little mess up here with the four boom there we go and notice how it
[18:24] changed it as well so Cafe homepage Cafe homepage next major thing to identify here notice that we have H1 which is header one and P we can actually change the underlying way it looks using Cafe homepage H1 and Cafe homepage P think of it like Cafe homepage is the parent and then the little things in it is H1 and P now alternatively we could actually give a CSS class to each of these as well and edit them that way what I encourage you to do is kind of set up the page that you see here I mean you don't have to do welcome to web Cafe AI but set up the
[18:56] situation you see here play around a little bit so for example what does margin bottom do so we know it's H1 which is this what does margin bottom do add five oh okay so it moves it up and down good to know what does font size do 1.2 okay so it shrinks it so play around with a little bit but as I said when coding with AI you don't have to worry too much about this for example if I'm coding with AI and I'm like this looks cool but I need more spacing between the header one in the P I don't have to know that margin bottom does this I can just
[19:27] ask AI to do it for me and then then it will give me the correct code which we'll get into in later lessons I'm just trying to show you what it means right now so now that we understand that I want you to Now understand what return means return is what we're going to visually see here think of this like HTML code HTML is the structuring of the website and CSS is the beautifying of the website making it look pretty if you just have a purely HTML site you will know if you search the internet in like 1999 you're going to see some HTML sites so return is going to be how it's represented on the front end CSS is
[19:58] going to be how it looks on the front end what is this Corbin this right here is going to be functions that we use in the front end now I set up like a really dummy one right now just to show you the difference between return and the code before that and all it does is change the color from red to blue we'll get into more of what this means and how to do this I just wanted to show you this example here notice how when we're referencing it in the HTML return here we're referencing toggle color toggle color togger color toggle color say that four times fast we're
[20:30] doing other things such as setting up bullings here which will make more sense bullings are true or false I don't want you to get too confused here don't worry a lot of this will be done with AI I just want to give you some structuring so now that we know the JS we the CSS and that represents this how did we even render this the way we rendered this is that we used our app.js this is where we're going to put in all of our Pages we are going to use the import again this is how we import components we're going to import the homepage why is it called homepage because the export default is homepage and then we're going
[21:00] to say where it's from notice how it's slash okay it's in views we know that oh and then it's named homepage okay boom that's kind of have the connection there so it's the slash like when you get further and further in I'll zoom in y'all my bad finally in order to actually show it we going to Simply put in this kind of structuring here notice if I delete this hit save it goes away command Z save it comes back this is going to be the structuring now with in a component itself we can make more
[21:31] components don't worry it's not that confusing so the idea here would be this this is this is good frontend structuring the way we're going to create this homepage is in theory I could go out of my way to basically make the entire homepage like the footer the different sections all within the same file this is 100% possible this is 100% doable but for the purpose of this series I'm going to show you how to create a homepage as the parent component and then within the parent component we're going to create child components the child components are
[22:02] actually going to be what structured the homepage itself what's an example of a child component the footer of our website the newsletter CTA of our website so our homepage. JS is going to be our our parent if that doesn't make that much sense as a chat gbt chat but don't worry in later lessons we'll learn more about that we did step four now we're on to step five which is going to be our SEO I'm going to explain a little bit more about this future lessons we're going to do a bunch more when it comes to just coding with AI and start building out this web page page but I think for now you're getting a better grasp on how all this works when it comes to importing exporting and really
[22:34] creating a visual element therefore let's set up our fave icon our logo and the way it shows up in search as you'll notice right now it shows up in that little tab right there as react app and then gives me the react icon I don't want that so in order to change that we're going to come over to public and before we do that let's go Ahad and push our commit here and just call it like homepage made all right let's do get ad get Commit This is always a good practice when you make like a a decent amount of change commit homepage made is this going to be the final homepage no I
[23:04] just wanted to show y'all how to do it get push origin main enter we're going to go we have successfully committed to our Branch if we check our Branch right now A if I reload and I come over to Source you will notice that in views we have hom page.js and all of its relevant code pretty nice in public let's go ahead and set up our fave icon. I let's set up our logo go which is going to be used in alternative ways of showing the fave icon and then finally the way it shows up on the Internet or short term
[23:35] at least how it shows up in our emulator therefore I'm going to come to my current set right now zoom in a ton and just save the image to my desktop now go ahead and find an image software that we can go ahead and create our fave icon together this could be done C as well we're going to hit new file here typically what I like doing is just starting with like a baseline of a th by, I'm hit create now with this we're going to zoom in I'm just going to Simply add my icon best practices for fave icons and and in general is typically just whatever the logo is that represents your company and you know how you want it to show on Google Ming and Yahoo so for me I'm just going to go
[24:06] ahead and hit enter here looks pretty good and sometimes I want I like to go a little bit more to the right so move this to the right a little bit and that's good enough for me so I'm going to go and save this now that we've saved it to the cloud SL your desktop let's go and Export it we're going to come up here to file export save as quick export as PNG now whatever software you're using same deal export as a PNG I'm going to put this in my desktop and hit save now that we have it saved let's go ahead and do three things first thing is we're going to have to create two versions of this one that is 192x 192 and another one that's 512 x 512 and
[24:37] pixels and then finally we're going to have to create a Ico version of this which is going to be 64x 64 let's go ahead and do that I'm going to go ahead and double click this and actually let's make three different version this command C command V command V for Best Practices let's go ahead and name them I'm going to go ahead and call this one 192 and we'll call this one 512 I'm going to double click this now Within review on Mac OS all we need to do is come up to Tool adjust size if you are currently operating windows and you know how to do this on Windows let people know in the comments I go to pixels and
[25:08] I do 192x 192 hit okay command save same thing for 512 tools adjust size 5 12 hit enter command save now that we got all that let's do one last one and we are just going to rename this to fave icon fave icon now before we convert it let's go Ahad and adjust the size down to 64x 64 yes this is going to look blurry but when it's super small you can't really tell the difference command save go to Google and just type in PNG to Ico I'm going choose the first option here and then we're going to select file with the selected file here we're just going to
[25:39] hit convert and download here we go let's go ahead and take the files we just created together and push them over here so I'm going to go ahe and make my vs code a little bit smaller here we're going to grab our file drag it into the public folder Oh wrong one now we got the right one so we're going to drag your file come over here we hit replace to make our life easier so that we don't have to retype in the specifics in the code we're just going to rename this to all the way down to logo 192 delete and then we'll do that for 512 as well this is just going to make it so that when you drag it over it'll just ask to replace both and boom replace replace
[26:11] there we go we have our fave icon now branded and we have our logo 192 and 512 that's used Elsewhere on the internet branded as well first thing you'll notice is that if you look all the way up to react app it's our fav icon good start here let's go and update our index.html so it stop says stop saying react app is this a react app I guess technically it is but don't worry about that now this is the default way of structuring your index.html I'm going to use a new way this will be in the Google Doc I just like the structuring better on this it's a little bit more clearer I don't like it when there's like random indentations but here we go what you'll
[26:42] notice is that now the description is webcafe ai ai driven web applications I'll change this in the future this is how it's going to show up when you know on Google when you search something up like apple and it has a little description under it that's what that is and then the title is just the way that the tab incurs so if you look up here it says webcafe ai webcafe ai now for me I'm just going to real quickly add what shows up on Google anyways and based off my previous website so going copy this paste it over here for now just copy this first line here and paste it right here pretty good pretty good with all
[27:13] this we have successfully created a better SEO oriented site now I'm going to also show you in future tutorials how to create the social link so for example if someone were to copy your link or custom link send it in a iMessage WhatsApp or slack Channel it actually shows you like a little preview image and it this looks good therefore let's go ahead and save this push this to get and then push it deploy it to our hosting URL we're going to do get add get commit DM fave icon set up quotation
[27:44] mark get push origin made now what I like to do before I push and deploy to the hosting URL is typically just say Firebase you use and then the project name again to reconfirm it so we're going to do Firebase use web Cafe landing and this should give me a confirmation that we are currently going to be using that project Now using web Cafe Landing coming back over to Chichi here and my head is in the way if you remember to push it to our hosting URL or live link that's on the internet we do npm run build and
[28:16] then we do Firebase deploy npm run build build your front end Firebase deploy build your backend all we have initialized right now is hosting so this is just going to give us the hosting URL this should be pretty fast hit command V hit enter there we go if I go to the link presented here like command C and boom zoom in there right now zoom in as you see this is our live Firebase URL with our new fave icon with our new fave title or SEO title on top of that this has the homepage. JS that we showed today this is a live URL this is good to
[28:47] go which means in the next lessons to come you're going to finally see how I code with artificial intelligence to make the process of building out a website extremely fast that successfully completes lesson three we've done security UI and done some SEO make sure to leave a like is completely free I'll leave the playlist at the end here of all the other lessons that are going to be associated with this playlist but for now we've done a lot of stuff go grab some more coffee go drink it get going and I'll see you in the next video