Code A Personal Portfolio In React With ChatGPT | ChatGPT + React + Hostinger

hey guys how's it going I'm back here with another video and today I decided to bring this video where I'm going to be building an entire portfolio website using react however I can't write a single line of code so everything will be generated through responses and prompts through traged PT and I'm going to be using shaji PT to make all of this based on my own specifications meaning that I'll try to make a website as reliable to what I want as possible without writing a single line of code at the end I'm actually going to be deploying this to hostinger so that you guys can also check out the website and see how it looks if you guys are interested in that too so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so I have over here charging PT and this is basically where all the magic in this video will happen um I have a couple rules that I set up for myself especially because I've tried making this video a couple times already and uh I realized that some stuff has to be established in order for this to work first of all I'm going to be um like I can't write any piece of code I'll just copy and paste however if I see something really dumb that I have to fix like a quick fix I'm not going to waste too many of my messages with charger PT by asking it especially because I'm going to be using gpt4 for this I'm aware that this is paid and I I pay for this however the reason why I want to use this instead of this is because I feel like it will be a more reliable test since gpd4 is actually more capable it has more reasoning more Consciousness and it's just better overall so I want to see the best website I can build with this and and I can set some standards like I would say which libraries I want to be using or but also let them choose some other ones and also focus on like uh UI and making it look pretty you know it's a portfolio website I imagine if you're a person who is a programmer and doesn't want to spend time building your portfolio website but also doesn't want to have one that looks like it was made from using like Wix or something you can use JoJo PT to do so you'll just ask treasurypt to do this stuff for you and you'll just copy and paste and the website will be done so let's put this to a test and see how everything will turn out so I have already a prompt that I want to put and it is this one over here I'm saying hey I will be building a really nice portfolio website tonight I'm a software engineer with three years of experience I want to build it according to my prompts and just tell in chargept in general like what I'm going to be doing basically in this video I'm also going to say my name I am and I'm gonna lie my name is Pedro Machado as you guys might know I'm gonna say my name is John Smith also everything here uh is like fake right I don't have three I have more than three years I've experience like I'm gonna put some fake data just to make it look uh authentic and to also explore a little bit more and put more stuff into the website so I'm going to press enter and let's see what it says so it says hello John Smith excited to create this project with you um I can do all of that for you uh okay okay it's telling us for to give more details I imagine it wants us to give like libraries that we want to be using so like I want to use react for you to do this and how the CSS should look a little bit of like how coloring should look or like your art palettes and stuff like that so I'm just gonna say something like this okay so what I put here is firstly I want to build I want to build it in react and I want it to follow all the react best practices I also expressified a little bit of the pages I wanted to have I wanted to have a page on myself a page on work slash studying experience and a page for contact information then I said that you can use whatever libraries you want but I want to use normal CSS for styling because I realized that charge PT has trouble using CSS libraries at least this was my experience uh I want the color palette to be whatever it wants but one of them has to be navy blue I don't know why but I I like the color for portfolios and I've used it in the past I wanted to be responsive I'm using white for this project so give me the correct white commands to use I want to use JavaScript for the website and just a bunch of stuff like giving me npm install statements and all of that finally I also gave it some fake info about myself which you can read over here but it's just saying stuff like where I studied where I worked stuff like that remember this is all fake it's not my real work experience so I'm going to press enter and let's see what igbt will do for us so it's saying a bunch of stuff but I'll be back when it's done uh with a prompt okay so this is basically what it told us to uh to do so I'm gonna say I'm gonna copy this command I'm gonna come into over here to our project so I'm going to paste the command over here and press enter so we created this folder with a bunch of files because this is how Vite works I'm just going to copy this command and paste it over here oh I don't know what I what I did uh I'm gonna just copy what does it say okay I'll just copy whatever it says here I'm just going to copy this press enter and then uh I know for a fact we have to npm install that's what it said before so I'm gonna say npm install and then npm run Dev to run our actual um white project so we'll open up our Vibe project over here and you can see it is working which is pretty good uh judgment actually gave us the correct commands but let's see what it's what it did for our actual code so it says that we have to create a structure of our website and specifically want to create a main.js file and a main.css file all of them in the source folder I actually don't want that to be the case I want there to be um like um first of all I wanted to be a structure where we have a folder called pages and one called Styles and I wanted to give us that structure specifically with the code related to that and I also want this to be using react water Dom so I wanted to give me the code in the app.js that will make routes work in our project so I'm going to write it to chargept the following so what I told jgpt is that I want to get the folder structure I want them to give me the folder structure and I want there to be a folder called pages and one called Styles and also said that I want to be using reactor Dom and to put that code for that in our app.jsx file so as you can see it's giving us the install statement this is a thing that I forgot to mention but charger PT is outdated right this is a downfall from this which you can take it as uh like something you you'll a reason to not use it for situations like this or just a negative aspect of it which is what I'm doing in this video like it is updated because it only has data Fed Up from until 2 2021 so an example is that reactor or Dom is already on version six and on version six there's a lot of changes like this is not how you define routes and react to our Dom I know personally but this is how they're telling us to do so it doesn't really matter that's why I asked it to give me the versions of the install statements because now I'll just follow whatever version try GPT thinks it's right and I also forgot to change my directory to to my portfolio before installing so I'll do that right now and it's also telling us to put all of this in our app.jsx which is what I'm doing I'm gonna copy this paste it all over here and also one thing that is important is we have to create our folders so I'm gonna create them right now and come back in a second okay as you can see I created a like a file for each of them and I forgot to change this to CSS but I'll explain while I'm doing this I created an experience file a contact file and a main file for each for both Styles and Pages because we need three pages in our website and charger PT can't manually do this for us we have to manually do this but it is fine I count that as also similar to like copy and pasting code you still have to do a little bit of work uh but yeah this is how our project is looking right now we can check to see over here it's completely empty especially because we don't have anything uh actually done in any of those pages the only one that might have something done is our about.jsx which are actually our main.jsx which we're going to copy right now and paste it over here so I'll just copy and paste it and we'll copy the main.css as well and I think I have to fix the the the import statements because before they were all in the same directory but now we'll do this uh styles slash me this should work let's check out to see what rgbt made uh it seems like it didn't make anything which is weird let's check out again oh it seems that because we haven't actually created at least a component inside of the the contact and experience files it's giving us an error so what I'm gonna do is I'm just gonna create them over here I'm going to follow similar um actually oh yeah they're using just normal uh error functions as well so I'll just copy this and paste it here and then just change it to contact and delete everything that is inside because we don't want that we just have to export something for this too for the the files to work and I'll do the exact same thing on experience and just change this to experience so now we should see this working we'll come over here refresh the page and yeah this is how this is how it looks it looks really ugly but I I'm trusting charger PT that it will look good even if it looks ugly we're still gonna deploy this we're still gonna see how it looks we're gonna try to make it look better but um I'll probably say something like hmm the main page looks kinda ugly is there any CSS files any CSS I should add to my because the problem is it's it's it's dark in behind because white has some predetermined CSS in our um app.css and index.css files so I'm gonna ask charging PT to override those so I'll say to my app.css or index.css files generated from Vite so let's see what they're gonna give us okay so it gave us um okay so he gave us a CSS file for our um or updating apps okay yeah told us to put this in our app.css and then to update our index or app.jsx or actually our main.jsx so that's what I'm going to do I'm going to come over here I'm gonna put this on our app.css just like this and then we can already see some changes hopefully or maybe should have puted that on our on this one yeah kind of kind of looks good it kind of starting to look a little bit better then we're going to um change our main to see how they think it should be now uh I'm gonna put this on our main.jsx let's see how it looks oh it looks pretty good like it doesn't look the most amazing thing ever but honestly that's better than I was expecting I'm gonna tell it to make this the website flow actually I'll say make the web the styling fill the website right now there are a lot of empty space but make it look good and modern I don't like how it looks now this is my last attempt at making it look better okay so it gave us more CSS files to put uh which I will okay this is for both of them again I think so let's again open our CSS files uh our app.css apparently I have to put it here and I put it here as well let's see how it looks now okay at least it's centered which is better I'm gonna tell I'm gonna say that I want a navbar uh can you make a beautiful navbar 2. make the background color of it navy blue and the text white okay so it made the navbar apparently it's telling us to create a file called navbar.jsx in our directory so I'll put it over here navbar.gsx let's copy this stuff over here paste it here and then uh some CSS so I do have to put this in the Styles so I'll create a navbar.css file paste it all here see it's pretty quick actually to do all of that I know it's kind of annoying to like have to specify what we want from uh like your why why's but to be honest I don't know where like we made a lot of progress so far and the video has like it's it's not it's not been that long since we started the video um it's saying that we need uh maybe I I called it wrong way let me see navboard.jsx oh I have to the correct code see sometimes they make mistakes wow it kind of looks cool kind of I kind of like this color in the in the fonts like they're not perfect but it is what it is and it does work like we can keep switching between the the stuff right and as it seems to be working like we're moving routes but yeah this is pretty cool now let's ask for it to make our next pages can you make the next page okay let's see what it says okay so it gave us a couple things um okay I'm gonna copy this and paste it in our experience uh component let me close all of this because I keep opening files but let's go to our experience.jsx and I'm just going to paste this uh so if we go here it doesn't seem to be generating The Experience file so that's kind of weird let's check out why this is happening it doesn't seem to be actually switching routes when I click so I'm going to come over here and say uh it seems like it is not switching to the like switching routes when I click on the links of the Napper I'm gonna say like it works like I go it goes to another URL but the component being displayed looks the same let's see what it says okay so I actually did fix uh the mistake but I didn't use JoJo PT because it didn't seem to be giving me like uh answers that uh were actually helping at all I don't know what the mistake was I'm not that familiar anymore with version 5 of reactor Dawn because it's been a while since I've been using it so I made the decision to just upgrade it to version six I know charged PT didn't give me the code for this because it doesn't have access to the new updates of reactor Dom but the changes were minimal so I don't think it will matter at all uh and they like end result you know so I did that to fix and this is how our experience page kind of looks like so far we can also add some more CSS to to our experience.css file so I'll do that I'll copy this and I'll come to our experience.css and just add it here and also it says something like in this experience page we have three sections huh please replace the Ellipsis I didn't even notice oh yeah it didn't finish writing the the text to just put this stuff um but let me see what else it says uh you also might want to update your app.css or index.css to adjust the container since we now have a network okay I'm gonna come to our app.css where does it say container okay there's a padding so I'll just copy this put it over here and I'll do the same with our index.css on the container okay let's see how it looks it looks fine it looks the same to be honest I'm gonna tell you Taj PT to invent uh can you replace the Ellipsis with text that would make sense to be put there you can make things up just to like get some fake data from them so let's see what they give us okay so they added some stuff I'm just gonna again copy this and paste it in our uh experience.jsx just over here and let's see what it says okay it adds some information for us it'll be kind of cool to have like a timeline kind of thing like I know that there's a library that can do this I've used it in the past so I'm going to ask it to uh to make it can you add a timeline uh graphic to it uh I'll phrase this better okay I said uh can you add a timeline graphic to it like I want the experience and studies to be displayed in chronological order maybe using one of those uh cool looking vertical timeline libraries and react I know that there are a couple I've used them so that's why I'm asking for it uh them there's literally a library called react vertical timeline component is this the one that I used before I'm not sure so I'll just okay I'll just install it anyways let's install it and let's change okay it's making it look kind of cool so I'm gonna wait for it to be done and show you guys what igbt gave to us okay so this is done let's just paste it in our experience part and damn this looks kind of weird it doesn't fit but it's kind of cool uh I'm gonna say this is not fitting in my website it is currently uh overlapping with the navbar and there are no icons on the timeline um elements so I'll just put this and see what they do so now it's telling us to install react icons which will give us some icons I guess and then it's telling us to replace our experience page so I'm gonna put that over here in our experience page hopefully now it will work and it now we have icons which is great but it still doesn't work because it's overlapping this thing so let me look at what it said for overlapping okay so I have an idea of how to fix this uh like the thing is the padding issue so I'm gonna add a padding top like this and I'll put like 350 because actually that's perfect look perfect and it's only for this one for the experience it will push everything down and you can see all the experiences being displayed perfectly in our screen now let's ask for the contact page just to finalize all of this can you give me the contact page code and I think it kind of looks cool bro like it didn't take that long to make this it took barely anything I know it doesn't look perfect but it's not the worst portfolio I've said I've seen I've seen people take months a month to build a portfolio website that is actually worse than this not throwing shade at anyone uh actually I think building a really bad portfolio website as your as a project to learn is really nice I've said this a bunch of times in the past is what I did so I I'm kind of joking to to myself as well because I I went through this I built a horrible website but the thing is like this is more for people who already know how to code or for people who don't have interest in coding and it isn't using this opportunity to actually learn they just want to get something done really quick and I think honestly tragic PT has done a pretty good job like it's not the worst website ever and it's it was done quick definitely and like I I did have to make some changes but but that's like it was barely anything you know I do think you can you can generate a pretty nice website if you put a little bit more effort than I did as well so I'll just copy that code and put it on the contact over here and then same thing for the CSS actually it's not done so now it's done I'll just copy this and paste it in our contact.css and uh let's see what they did with a contact that's actually kind of cool let's see it's actually pretty nice contact I hate the button I'll just ask it uh give me a different styling for the button make it look cool and have a hover effect just to finalize this I want to make it a little bit cooler uh but it looks kind of nice right like you can write some stuff does it actually actually send anything I don't think it does right yeah it doesn't uh but it's fine honestly I don't really care uh I think they can definitely do it for you if you were to add a backhand or deal with an API to do this for you uh I think 100 can resolve that but for Simplicity reasons I don't want to do that for this video I'm gonna copy this over here and um I'm just gonna change the submit part so this two parts over here let's see what it does now so it literally looks the same uh just to make it look a little bit better I'm gonna add a a border radius just because that's exactly what I wanted to be added because I can't deal with uh and I'll make the height a little bit better so I'll make it 60 pixels I can't deal with ugly buttons this looks a little bit better I'll also change the font size see I'm already breaking I'm already breaking my rule of not interfering but to be honest now it's the end of the video I think I've proved that charge PT can be used for for this specific use case and this is the website it looks pretty nice was built with react completely completely done with judge BT in real lifetime since I'm waiting for the responses it took around 40 minutes and to be honest it's a really good website not even joking I kind of liked it so now we're going to go to the part of the video where I'm going to deploy this to hostinger okay everyone so now let's deploy uh our application into hostinger it's another day it's just that I was kind of tired so now I'm gonna do this today and uh it's actually pretty quick I've shown how to deploy stuff to hostinger in the past it's a really quick process and uh soon it will all be live so we're going to be using hostinger like I said and the reason why I like using hostinger is because first of all I've deployed in the past I think three or four projects already with hostinger and I've never had a single problem with it uh they have a lot of people using their platform I've always said this um and that means that they they work to create a support system such that they have 24-hour support so like if you have any issues whatsoever with your website being live you can just reach out to them and I can guarantee that at least from my experience they've been pretty good with stuff like this and if you're hosting a website and you you know you want it to be live then uh being able to deal with any kinds of blockages or anything that can happen that can bring your website down is really important and I think hostinger really excels on this now it's also really cheap to host your website on hostinger I've always emphasized this um technically you can get um so they have a bunch of different web hosting plans uh for example the premium web hosting which is the one I'm going to be using uh it has a lot of deals as you can see and also I have a discount code since this video is sponsored by hostinger I've always had a discount code that you guys will be able to see and get even more discount on top of this uh they have a lot of stuff for example you have unlimited when with uh you get a free domain which is really cool uh which means that like basically you don't have to pay for the domain you can just get that domain if it's available and set it up for a website we're going to be doing this as well in this video and a lot of stuff you get a free SSL certificate a bunch of stuff storage uh as you can see they have a lot of different things you get a free email which is really cool with the domain that you get you can use that to create an email for uh for your business right or for whatever you you want to uh with that domain and you can also obviously uh get your money back if you if you want to in 30 days which I don't think you would uh they have really good connection especially because I did see a picture yeah this one over here where they have like a lot of data centers right so they have it all around the world uh if you're someone in South America they have a really good one in Brazil uh if you're someone in the North America they have two of them in the US I'm over here so it's pretty good connection for me and in Europe and in Asia they have really good connections as well so I would say it's a pretty good uh website I'll just show you guys how to kind of deal with getting the premium web hosting I've already done this so I'm not gonna actually show me buying the thing because I've already done it uh but basically you would click on something like this and you have a lot of options over here I'll select the 48 month one because uh what this will do is um if you want to pay for two years in advance right it will come down to be only three dollars a month which is insane it's USD but like it's insane because for three dollars a month you get so much you get hosting you get uh domains you get everything that you might want to and of course it is cheaper because it's some it's for longer periods of time and uh you end up saving 432 dollars in the long run compared to um some of the other options I would click this one over here and click continue uh then I'll choose my country right the state I'm just putting whatever here I'll just make something up this is not my actual zip code but uh I would I will log in right now so I just logged in as you can see I logged in with my Google account I'm gonna click continue and then uh you have a bunch of stuff over here you can pay with credit cards PayPal Google pay alipay which is really nice and coin gate as well which is pretty interesting uh if you're using cryptocurrencies I'm going to choose just normal credit card and um you see the price you actually get a really nice discount right it only turns out to be 143 for 48 months two years of Premium web hosting and if you were to come over here and put Pedro Tech look at this you would get an even bigger discount right uh it was a hundred and forty something now it's 129. uh that's pretty good wait let me see how much it was before yeah 143. uh so yeah like it's it's a pretty good deal I'm not gonna put my credit card information but I would recommend you doing so and just click on this and you will actually have your hosting your account now I'm going to cut to the dashboard where I have already got my plan and show you guys how to deploy this real quick okay so as you can see we have over here the dashboard to go to the dashboard you go to hpanel.hostinger.com and here's where you can do all of this setup and everything necessary now I've never seen a setup process as easy as hostinger and I've seen you guys talking about this in previous videos where I used hostinger it's actually really simple and we can do this really quick especially if you're dealing with a react project so you can see I already have a lot of different stuff that I've already used in hostinger so like I said I have experience using this platform but the one we're gonna do is this one over here first I'm going to claim my free domain because uh I want to do that first two in order to set that up with the the website that we're creating so this over here is just a personal portfolio for John Smith um what domain do I want okay I actually chose one that that honestly I don't even know why I chose this one it's called pediotechworld.com the reason why I chose this is that I was very in doubt with what I choose and since I get a free domain like this is an example project right I'm not going to do anything with with this personal portfolio I'm just showing you guys how to deploy this uh so I wanted to find something cool even though it's not fully related with the website because the website is a personal portfolio for John Smith I wanted to get something that might be cool and I chose pageotechworld.com because it was one of the only ones available uh I might use that for the future I'm not sure yet but that would be cool yeah so you can see I chose that and it was available and um it literally cost zero dollars a year it was supposed to cost 14 a year but because of the premium web hosting it comes out to only zero dollars which is obviously way better so when you click on claim domain and um now uh okay it I don't know it seems to have worked uh pageotechworld.com yeah but it says pending setup and the reason why it's pending setup is because we actually haven't set up our hosting yet so we have this option over here of a business web hosting so if you recall when we're going over the plans we had uh the premium web hosting we had the cloud startup and also the business web hosting I talked a lot about the premium web hosting but the business what I'm hosting is also really important because it is optimized for small and media businesses like I said uh in this case could be really cool uh because it allows for bigger flexibility when working with uh with your data and it has a lot basically all of the same stuff as before and even more and the difference in price is one dollar per month which to be honest is a hundred percent worth it so you have a lot of stuff as you can see higher performance more CPUs um better security no actually it's the same security yeah it's secure all around right and um you have a lot that you can do with uh the business uh web hosting the process for getting this is similar to the premium web hosting I actually got the business web hosting one but I struck but but just showing you guys how to get the premium one I realized that uh it is the same thing you just follow the same steps and um this is how we set up I'm gonna click on setup just over here and it will give us this page I'm going to click Start now it's going to ask us to either create a new website or migrate an app site so the thing is you can either put a website that was currently being hosted somewhere else and two hostinger or you can actually use one of the hostinger's uh built-in website creating tools such as the WordPress uh and other content Management systems that they might have I wouldn't want to do any of that I want to skip and create a empty website I'm going to choose the domain I'm going to choose pedotechworld.com I'm going to click select so I'm using the domain that they gave us for free then it's asking us for uh our existing profile you need to put like information about you like your email your phone number and your locations stuff like that I'm not sure if that's optional but I appreciate sure you have to put because if someone want to contact you to buy the domain they have to know how to contact you so I already put all of that into my account so I'm going to click on next step and then um we're going to open this up it's just registering the domain now we have to choose our server location this is really important because you have to choose one that is similar to where most of your users are going to be in probably similar to where you are for me obviously it would be in Arizona I'm in the west coast of Canada so that would be the best option and my domain like we said it is pageotechworld.com I'm going to click on finish setup and our actual setup for our business hosting has been done so now all we have to do is actually wait for it to initialize everything and finish it and then deploy the files from our code into our okay so it seems to have finished all the setup uh now we can either look at our website or go to the control panel I'm gonna do both I'm gonna go to the website just to show you guys that the domain as of right now it's a preview but it is uh everything seems to be working as you can see it just has nothing there right because we haven't put anything there so I'm going to click on go to uh the the panel and this is our panel over here so what we want to do is we want to be able to get the files from our account and put it inside of of our hostinger file manager so I'm going to open this up this is this file manager is where our which files are being served to display in our website so when you click on this and you can see we have a public.html file over here folder over here I'm going to click on that and we have this default.php file that was created I want you to delete this file so I'm going to click on this delete and now we're going to open up our code so what we want to do in our code is we want to create a build version of our project so I'm going to come over here to our package.json and you see that there are a bunch of different commands right scripts and the build command invite allows you to create a build version of your website similar to how in a normal create track tab would also be the same thing so I'm going to run npm run build and you can see that a build folder or a dist folder as you can see should appear inside of our project so I'm going to open this folder in finder I'm going to reveal it in finder and I'm going to open up this and copy all of the files inside of here into our actual uh thing over here our folder so I'm going to open this up and just drag and drop and this as you can see everything has seen to be deployed now it was basically just that that's all you have to do which I find amazing because now if I were to come over here um and refresh this this is just a preview but our website is here see it's completely here which is really cool this is a preview obviously but we can check our website for real if we just go to Pedro tech.com dot nope yeah Pedro techworld.com and it is fully deployed see how quick it was like our whole website being displayed over here uh we do have an SSL certificate the connection is secure everything seems to be working perfectly and yeah that's that's that's how you deploy to a hostinger now I'm gonna give you guys before we end the video just a quick thoughts on on Judge ptn and the whole video as a whole I think it can be used for sure to build your stuff do I recommend it well if you're a developer and you just want to get stuff done I think a mix of both a mix of you like being able to use your own common knowledge and fixing some stuff and asking questions and asking for code for chargept might be a good thing if you're a person who doesn't know how to code is not interested in coding and wants to build a website using code for some reason you can use strategypt I recommend staying away from libraries such as react and stuff like that that because those update really quickly like they're they're not fully updated accordingly to what um to watch adbt knows right but if you were to use something very simple like just normal JavaScript HTML and CSS I think it would pretty much work all along so I think it was a good experiment I liked making this video I really like tragedy as a whole so if you guys want I'm Gonna Leave the prompts in the description but yeah that's that's basically it I really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] [Applause] thank you [Music]

Channel: PedroTech

Views: 7,827

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, chatgpt, chatgpt 4, chatgpt ai, ai, chat gpt coding, chatgpt reactjs, will chatgpt replace jobs, web development, chatgpt coding, chat gpt

Id: j1UnaZ-De10

Length: 35min 52sec (2152 seconds)

Published: Wed May 17 2023