You Can Learn 95% Github NextJS Basics Like A Pro | Pull Request, Branching, CI/CD

hey everyone this is Sean today I wanna show you how to turn your vibe coded apps into something that's reliable for shipping for a lot of people who are watching my videos they're probably not from a technical background don't feel like Github is a monster it's very important for you to make sure that you control the versions of your code and if you're collaborating with someone it's also very important for everyone to contribute to the same

code base so that you're not creating conflicts all that kind of stuff and I want to make sure that you understand the basics which will cover 95% of the chances where you're going to use Github for deployment and for iteration of your products okay so let's get started right now you can see that I vibe coded this personal website and I actually just did it one shot with GPT-5

with a bit of tweaking and you can see that there's a like a solar system here where I can zoom in zoom out I'll show you how to firstly link this to a Github and then I'll show you how to make changes and then ship it you know constantly with the current app to for sale okay so you can see right now that I have this Cursor open I'm just just we're open this project

uh it's on my desktop uh my developer folder and get up to the ICD so I'm currently in my Cursor where I just had this built this like local project with G E 5 and I listed down some of the most basic steps for you right on the right hand side and we're gonna walk through it step by step okay so the first thing is that I wanna link the local project to Github

and the way to do it is that we should come to Github let me make this a little bit bigger and we should create a new repository right here github.com new repository okay I'll just say a YT dash get hub dash C I C d okay so I'm gonna keep it public um and then everything else I'll just leave it like this alright create repository cool

so you can see that there is a there's like two options the first one is create a new repository on the command line second option is push an existing repository from the command line in our case the second one cause we already built the product okay so let's come back here um let's open a terminal so by the way I'm in a Cursor come to terminal create new terminal or split the current terminal

alright and then let me just make it bigger for you okay so uh on the left hand side it's running the product on the right hand side you can see that oh we're currently in this folder called Personal Site if I just do get status and check alright we can already see that we kind of have some like untracked files over here alright so normally I think you should do get in it first

so what we're gonna do is that we're gonna come back here and double check you can see that it's pushing a new existing repository to the command line and it's doing like get remote add origin with the current link with the current link and then create a main branch and then push it to the main branch let's just copy this and come back to my terminal okay and then paste it here and hit enter

you can see all these like hundred percent done that means like you already pushed the current folder to your Github alright let's come back here if we just do command R to refresh the page yeah you can see that everything's here OK I also prepared a little um read me file over here for you to um double check after you finish watching this video okay so how do we connect this to deployment

how do we connect Github to something that's live so currently we built this website through Next JS um the natural way to do this is that you're gonna go to resell and then connect your current get Hub repo to your resell account so that the main branch over here will be automatically linked to your resell so let's go to versail.com

and then let's do at new project OK the Github current repo is public is created like a minute ago if I just like click on import it it will start importing if you don't find it that means like your your get your Github repo is probably private right you just need to go to do some setting and um turn you know the private one into public one let's import it uh

and then all these settings is basically telling you OK we're using Next JS for the framework we're running it in the root directory and if you have some commands you want to change you can edit here alright but in by default we're just using NPM run build to build and then um do all the installation with these commands environment variables environment variables is like if you say doing like logins

using Google Cloud for Google Oauth or if you're doing like some databases like Superbase you can put your keys here OK but this is out of the scope of today's videos unless we have time alright let's just start deploying this website alright now it's deploying so what is happening right now I'll just try to explain it is that is looking at the Github that has all the code and is looking at the main branch

remember this like I'm talking about main branch cause later I'm gonna show you how to set up a second branch so that you do not always like change the main branch which is directly linked to deployment over here right imagine situations where like you have like 10,000 users out there and you you just change some code and then you push to your Github and immediately everyone sees the final version which is great for fast iteration

but then you know it in cases where like oh if it breaks the whole thing right you don't wanna do that you wanna create another sub branch like a different version of your app and then run it first before you push it to the main one okay in terms of C I c d continuous integration continuous deployment it's always by default um pushing the main branch into production okay so I'm gonna show you right after this

after we um deploy the first version and then we'll be working on how to um set up some sub branches and then uh we're gonna like push it make a pull request and then you know merge all these kind of stuff okay cool let's continue so now this is done we can go to continue to dashboard okay so you can see that there's a dashboard here and there's a link here

if I just click on the link for the domains you can see that my app is already live YT get hub dot versal dot app okay I can scroll down to check out the solar system the second thing is that as I mentioned uh let's work on a different branch because we wanna protect the main branch okay remember when I said that currently we're in a main branch

and if we push anything to Github right now we're gonna end up you know pushing the main branch into the production level alright so now I'm gonna show you the example where like OK after we fix this bug instead of doing instead of pushing the main let's create another separate branch so that we can test things out before we push it to the final production OK the way we do it is that we can do say

like currently get status tells me that we're still in um the main branch so what I wanna do is that I wanna do get checkout dash B which is another branch I'm gonna call it um um feature iteration branch okay so currently we switch to a new branch called feature iteration let's do get status one more time

let me just make this bit a bit bigger for you it's very important um let me hide this okay so currently we are at uh the new branch called feature iteration get add space dot alright get status one more time you can see that oh we currently added the new changes to kind of a stage where you know it's kind of ready before we push alright so we're gonna add a message to it

get dash commit commit dash m and say um hmm commit to a new branch alright and then get status one more time you can see that yeah the tree is clean we're on feature iteration branch we do get push uh you can see that we got a little error which is fatal which is telling us in order to push to a current branch and set the remote as upstream

you need to use this command instead alright what this one what this one says is that instead of doing get push you need to say okay I'm gonna uh set upstream to origin with this new branch name cause our get hub doesn't know there's a new branch already alright so what I'm gonna do is that I'm gonna copy this come back here paste it in hit enter cool so you can see that okay

the branch feature duration set up to track the origin slash feature duration alright what does that mean come back to your Github feature iteration had recent pushes 13 seconds ago you can do a pull request later alright before we do that let's double check okay so if you click on main Branch you can see that there's a new branch called feature iteration and main branch doesn't change anything okay

like if I click on 9 commits you can see that there's no new commits here but if I switch to feature iteration you can see that there's a new uh commit okay and you can see that there's a orange little dot here that's connected to Vercel automatically and it's kind of it's kind of building right now okay so I can click on the details I'm gonna do command click to start a new tab okay

alright if I turn on the building logs I can see that it's building it alright yeah I think it's that is already ready uh let's come to our main for sale projects you can see that the previous two changes let me make it bigger for you was in production mode the last changes was in preview mode alright preview means that it's not in production yet okay

so if I click into it I can see that there's another like there's a few domains here okay if I click on this new domains good no problem okay no problem so um if I come back to um my features one second come back to my main Github sorry uh you can see that the main branch still has the latest deployment

which says it didn't work okay so what we're gonna do now is that we're gonna come back to Github and say okay feature iteration had recent pushes one minute ago uh before I do this I wanna show you real changes so I'm gonna make something uh I'm gonna change something in the code as well alright let's come back to the code I'm gonna add emoji here I'm gonna say fire fire fire

alright like this click save come back to the terminal get status double check OK something modified again let's check we're currently in this branch called feature iteration we're gonna do get add everything check get status one more time let me make this a little bit bigger for you alright now we're changing something in hero section

I'm gonna say get commit dash m add it emoji fires and then get push guess where this is going this is going to feature duration branch not the main branch let's come back to Github refresh the Github page you can see that the main branch currently still stuck at initial update with a failed uh deployment with 9 commits only

but if we click on feature iteration it's basically showing you another copy of the entire cold base but then there are two commits ahead of main remember that we did one change for the formatting the other one is adding emoji how do we do this firstly let's click into the commits okay we can see that the new commit is running again added emoji files fires and then I can do command

click on the details to double check if it if it's building properly on Vercel OK this is done I can either click on either of these domains or I can click on visit good look at this we got the fire emoji on the preview version but if we come back to resell click on the main project come to the most recent production level okay

click on to it and click on visit you can see that the main website is not updated at all okay now we're gonna help you push from your feature branch to a main branch so that you're the rest of the users can see what's going on in your app alright how do we do that we come back to Github again sorry guys I know this is lengthy um

if you're if it's the first time that you watch get hub just appreciate you know how this is how people learn from the beginning okay I'm just trying to explain things in a very basic way so that it makes sense to vibe coders who don't necessarily come from a computer science background and um if you are professional get hub user let me know if you any if you knew any extra steps you wanna add here okay

but I'm gonna just gonna finish this real quick so um the way we do this is we come back to our main get Hub page you can see that feature iteration has pushes 2 has recent to pushes 2 minutes ago what I'm gonna do is that we're gonna do this thing is called compare and pull request or PR often times you probably hear the word PR

that's pull request okay click on it you can see what's going on here let me make it a little bit more visible if you scroll down you can see that there are two pending P a commits the first one is adding emoji sorry the first one is committed to a new branch second one is adding emoji fires okay and you can see the changes what's going on in your in your code alright

I click on each one of them I can see the details if I come back click on this one can also see the details okay so what I'm gonna do is that I'm gonna say uh I will merge this into main for production and you see the direction here from compare feature uh iteration back to main as a base alright let's create the pull request

now it's merging it there's some checks that you need to do alright the checks here are basically Vercel checks making sure that there's no errors when you're pushing it to Vercel and there's no conflicts now it's ready for a merging the pull request okay so uh let's just check a little bit more so there's a preview that was deployed 2 minutes ago now if I click on merge pull request confirm merge

congratulations you have merged it to your Github let's see what's happening now come back to your main hub you see the main commits increased from 9 to 12 already and there's a little orange brownish dot meaning that it's pending let's click into 12 commits can you see that there's a merge pull request by myself from this branch features okay

and if you click on this you can see that it's being pushed to our um production let's do command click come back here still building okay make a little bit smaller alright this is done and let's come to our production level of URL YT get hub C I C d versatile app

you can see that the emoji is back the formatting is fixed everything is done OK congrats I think you're you're done like with the 80% of the cases where you're gonna use Github for uh CICD cool I hope this is helpful and uh again this is a very simple and basic walkthrough on the the most used use cases for um

linking your local projects to Github and then to resell and making sure that you're not pushing all the changes directly to your main branch and that you're always making sure that you have a sub branch um and then after you make some commits you need to double check the preview of these websites to make sure that it works before you merge into the main which will be linking to the production level of code OK

I just think that this is a very good habit to have uh for vibe coders so that your code will be more reliable for shipping and air rating for the long term alright let me know if this video is helpful and I hope you have Learned something and if you're an experienced Github user let me know what other use cases you use most of the time but I guess for solo builders or for technical

smaller technical teams this is more than enough cool thank you very much see you next time