00:00:02 Let's talk about Git and GitHub.

00:00:04 Git tracks changes in your code, letting you manage versions and collaborate.

00:00:10 GitHub, on the other hand, is an online platform for storing and sharing your Git repos.

00:00:15 But Git and GitHub are not just for teams.

00:00:18 It's super important to learn them even when working on your own as they can help you keep backups of your code, track your progress,

00:00:26 and easily roll back changes if you mess something up.

00:00:29 And trust me, it'll happen.

00:00:30 This is a big project and you want to stay on the safe side.

00:00:33 Plus, it'll prepare you for future collaboration with teams.

00:00:37 Now, I know that it might seem like we're doing things the other way around by immediately creating a GitHub repo for this project.

00:00:46 I'm sure that you typically code out the entire project and only then push it to GitHub.

00:00:51 And I do that sometimes too, but don't tell anyone.

00:00:54 But trust me, from experience, I can tell you that is not the way in which you should be doing things.

00:00:59 It's just wrong as it defeats the whole purpose of source control.

00:01:03 Throughout this course, we'll constantly create new commits and push them to GitHub.

00:01:08 That way, you'll be able to check out the state of the code base for each individual lesson.

00:01:13 So now, let's go together through the process of creating the repo so I can show you exactly how I'll be pushing the code throughout the rest of the course

00:01:23 and exactly where you can find the state of the codebase for each individual lesson.

00:01:28 First things first, head over to github.com, create an account if you don't have one already, and then click this little plus icon at the top and choose

00:01:37 New Repo.

00:01:39 Once you're there, you can choose the name of your repo.

00:01:41 In this case, I'll go JS Mastery Pro underscore Devflow.

00:01:46 I'll leave it public so all of you can see it, and I'll initialize it without a readme.

00:01:51 Let's go ahead and create it.

00:01:52 And there it is.

00:01:53 We can see a completely empty repo right here.

00:01:56 Now let's push to it.

00:01:58 There are a few of these commands that we'll have to run, and if you're familiar with them, that's amazing.

00:02:03 If you're not though, I have recently done a detailed Git and GitHub course, where you and I will dive deep into everything that you need to know about Git.

00:02:13 So if you feel like your Git and GitHub knowledge is a bit shaky, and you just do git add, git commit, git push, you might want to pause this video,

00:02:21 go to that course, check it out, and then return.

00:02:23 But if you're confident in your skills, that's totally okay.

00:02:26 Even better.

00:02:27 Let's continue.

00:02:28 So just stop your application from running by pressing Ctrl-C, and then run git init.

00:02:35 This will reinitialize a new repo in your project, run git add dot git commit dash m.

00:02:43 Let's call it create a Next.js application, which is the name of the previous lesson that you watched.

00:02:51 Why am I naming it this way?

00:02:52 Because I'm committing all of the file changes that we have done in the last lesson.

00:02:57 Next, run git branch dash m main to change the name of your primary branch.

00:03:03 Copy this git remote add origin Paste it and press enter.

00:03:08 And finally run git push dash u origin main and press enter.

00:03:16 This will push all of your existing code to main, and at the bottom left, you'll be able to see that we're up to date with the main branch.

00:03:24 Now, if you go back to your repo and reload, you should be able to see your entire Next.js application along with the commit for the first lesson you watched.

00:03:34 Throughout this entire course, we'll be using Git and GitHub to track the changes in between different lessons.

00:03:41 And where can you see those changes?

00:03:43 Or should I say, where can you see the state of the codebase at a specific point in time of the course?

00:03:50 Well, you can click Commits right here.

00:03:52 If you go to Commits, you can see all of the commits of this application.

00:03:56 First, we have the initial commit from Create Next app, and then we have the second commit for our second lesson, Create a Next.js application.

00:04:05 I've got to tell you something, and this is super important, so take notice.

00:04:08 You most likely will get stuck once, twice, or many times throughout this course.

00:04:13 It's a long and complicated course.

00:04:16 And you wouldn't believe me when I tell you what the most common reason for getting stuck watching this course is.

00:04:23 Can you guess?

00:04:24 It is a simple typo.

00:04:26 Yes, we all make them.

00:04:27 Like if you go in your code and you misspell something, sometimes it's not even gonna be a variable like this, that it's gonna alert you that you misspelled metadata,

00:04:37 even though in this case it's not alerting me at all, because it's the name of the variable, right?

00:04:42 If you misspelled something like this, sure, errors show up, but here, no errors showed up, right?

00:04:48 Or for class names or strings, if you misspell something, it's not really going to alert you, right?

00:04:54 So for these types of things, these kinds of tricky typos are the most common way that you're not getting the expected result that you see in the course.

00:05:04 How do we fix those?

00:05:05 Well, you can use Discord.

00:05:07 We have a very active community there, so you can just ask and somebody will immediately jump in and point you to the typo.

00:05:15 Or even better, before you go ahead and write to us on Discord, check out the commit for this specific lesson.

00:05:22 Like go here, and here you can see the diff.

00:05:27 Okay?

00:05:27 Which means a difference of exactly the files or even more precisely the lines in files that were changed.

00:05:36 So you can see that I changed the title from Create Next App to Devflow.

00:05:40 So if you do make a typo, you will of course not know.

00:05:43 So what you can do is you can check out the changes for this specific lesson and then copy and paste the part from my code just to verify that it's the

00:05:53 same as your code.

00:05:54 Okay?

00:05:55 That's one thing that can very easily help you go over obstacles of different typos.

00:06:00 So you can see the whole diff, or if you want to study what I've done, or even maybe play with it, or maybe not watch the lesson,

00:06:08 but just check out the diff or see if you can then do it on your own, you can do many things with this code base, right?

00:06:14 And that's why I'll give my best to commit every now and then so you can track everything commit by commit.

00:06:21 Now, another super important thing is if you don't go into the commit difference right here, rather press this button at the right of each commit that

00:06:32 says Browse Repository at this point.

00:06:35 This will actually open up the entire code base at the time of the commit, and you can see that right here.

00:06:42 So you can go to app and you can check exactly how the app looks like at that point in time, even though there might be hundreds and hundreds of new commits

00:06:52 later on added to the code base.

00:06:54 And if you have a super tricky error that you really cannot fix, even by looking at the code in this repo, are you ready to get your mind blown?

00:07:03 Check this out.

00:07:05 Just press the dot on your keyboard or go to your URL bar and instead of github.com, change the com to github.dev and then leave the rest the same.

00:07:18 By doing that, GitHub will set up a web editor for you and you'll be able to explore the state of the codebase at that specific point in time and you can

00:07:28 compare it with your own code.

00:07:30 Even better way to debug things.

00:07:32 You can see we're looking at this specific commit in time.

00:07:35 And since we're using Arc, and if I hide the sidebar, you wouldn't even be able to tell that this is not an actual VS code desktop app.

00:07:44 Pretty crazy, right?

00:07:45 With that in mind, you have successfully set up Git and GitHub and learned the most effective way of debugging your errors for the rest of this course.

00:07:55 Great job.