YouTube Deep Summary

You've watched the Claude Code demos and you've seen all the magic, but between wow, that's cool and doing it yourself. There's still a gap. Well, today we close it from zero to deployed app in one video. It's going to be a great ride. Hang on. Okay, so I'm talking to all the devs out there. I know you guys don't really need this first chapter. It's going to really be about installation and getting everything set up. in the meantime while it's playing or feel free to skip it. But look, I've got a great idea. How about if you scroll down and answer a question or two or just say go for it for anybody that's saying getting started now. I'm trying to build a little community here of people that support one another. I really want us to lift each other up. This is an opportunity for us to help each other move forward in this new landscape. In any case, you'll almost certainly want to skip this first section. Everyone else, let's get on it. So, the first thing we'll need to do is open a terminal window. And terminal in a Mac and many other places, especially to people that are new is always frightening. In fact, I find it frightening because I always worry about typing the wrong command as well. So, don't worry about it. We all feel exactly the same way. But it's really not that surprising. Think of it as a chat with your computer rather than a chat with chat GPT. So, it's really you just got to say the right things. In this case, what we're going to do is figure out what we have to say to our terminal window so that it'll install Claude Code for us. Okay. If we look at the Claude Code web page, you'll see that there's this command down here that you can just copy and put over into the terminal window. Let's get real for a second. If you're really nervous about all of this, I'm going to have to skip through some of this. If you type in a command that doesn't quite work, you'll get error messages. I would say copy everything. Select everything from the last thing you typed in and everything below it and go to chat jp to get things solved. All right, so let's move on from there knowing all right we're fudging just a little bit hoping that when you type this command in it'll just work cuz it might. If we just paste in the command that we saw on the web page once you hit enter it will go through the steps of installing claude code and it will give you something like this and be ready for you to type in claude to get started. Okay. So now that we have claude installed we need to go about executing it. What I will say is you don't want to open claude in your home directory which is the first place that you usually land when you're in terminal. So if you land in an area in terminal and you're kind of nervous, you can use finder to do this or explorer to do this. What you really need is a folder in here that you will put your projects in. You can call it anything you want. Mine is called code. So if I change directory to code, then that will take me into my code folder which has all of the subfolders of different projects. I advise putting something off the root directory so that it's very easy to get to. And now what we'll do is make a directory here. Make diir. And so this is just a simple command. Again, if you don't know what these are, just go ask your your AI make their TV joy. I can move into TVJoy. And right now I am inside of my home code TV Joy folder. Okay, that's probably the last time I'm going to go through the adnauseium version of how to get things installed. We are now in a place where we are ready to get Claude going. So let's move on to the next section which is orientation of claude itself. Okay, first really briefly let me answer a couple maybe obvious questions here. What is claude code? Why is it in terminal? What is this CLI thing all about? And how does it differ from some of the others? So first what is claude code? That kind of covers the first and the third which is it is just a development environment. It's just basically an agentic coding system. In the old days, we would have said an IDE or some kind of code editor or something like that. So, we talked about Cursor, GitHub, Copilot, Windsurf, Bolt, and they're all really doing the same thing. They're allowing you to use natural language to help in the development of software. And when I say help, I really do mean working cooperatively with the intelligent system, the models that you're choosing to work with. The last thing that I will cover in this space is kind of what is a CLI and do we need a subscription? Last one, spoiler, yes, you need a subscription. Claude code actually is essentially free to use if you have a $20 subscription with anthropic. And then why in the CLI? Why didn't they build an application? It is the same thing as cursor sort of, but without the application wrapped around it. They just use the terminal as the application to wrap around it. So, if you just imagine it that way, you're just having to go into terminal to start it instead of being able to name it and start it that way. And it has its own window. And I think they built it that way because they thought things were changing so quickly that spending all the extra time to get a UI built out perfectly would really kind of be at cross purposes with all the changes they saw coming. In any case, this is the way it works. It also makes it very easy to utilize it as a CLI, which is what we call a command line interface, which allows you from a command line when you're in shell to be able to just say claude and then a message after it and Claude will run and respond to that message and just give you the response back. In fact, I think we should take a look at that first just for fun. Okay, so dropping back to shell, we can use claw directly. This maybe isn't the way that you can use it yet if you haven't yet opened Claude. So, we'll see that in a moment. But if I call Claude here at the command line, it's actually taking everything after that Claude word, launching Claude completely in agent mode and sending that prompt onto the the Sonnet or Opus uh model depending upon your subscription and then returning whatever response it gets. So, Claude can be used in a way that many of those other systems that are full Windows systems can't be used. All right, I'm going to have to rush through a lot of things here. So, let's dive into Claude very quickly so that we can see the moving parts of Claude itself. Okay, so here we are in Claude. When you launch Claude, it will give you some information of tips or tricks, those kinds of things. But once you're sitting here, this is the entire application. So, you're looking at the application. Yours may look a little bit different. Mine has been launched a bunch of times. There is a question mark down here. It says question mark for shortcuts. So if we hit that, you'll see it pop up a whole bunch of shortcuts that are just confusing to a newcomer. So I would hit question mark. Again, there is another one which is slash. The slash commands are quite useful and it might really help you out of jam if you get stuck. The one that actually you probably will find quite useful is slashexit. That's how you quit the application. There are other ways. This is the easiest way to to learn. Okay, there's others in here. You can resume a conversation and I want to say that very clearly. You don't have to be delicate about Claude. Claude is memorizing everything you do. While it's running, you'd like to leave it running. So, if it's in the middle of thinking, let it finish thinking before you hit /exit. But when you come back, you can just run this resume command, and it'll give you a list of previous conversations that you can just continue with. So, you don't have to worry about losing all of that context. A lot of people are nervous in that way. That's no big deal when you do have a lot of context. So, if we had said hello here, it's just building up context. And if I said hello and hello again, then it's going to send that to the model, respond twice. How many times have I said hello? It's going to go through all of that context just like chatbt is going back and forth with the model. So this context here will get big, big, big. You're in a coding environment. There's a lot going back and forth. You don't want it that size because everything that's being sent is what the model's thinking about to solve the question that you've asked. Hey, I want you to turn that button red. But if there's thousands of lines of context, it's got to go, do I know exactly which button they're talking about? Maybe it was the previous button they were talking about, and it's got to work through that. So, what you want to use, and this is a very important slash command, is clear. And that's the last one I'll go through here. Clear just simply is new chat on one of the chat windows for chat GPT or something like that. So, this just clears the context and gets you back here. Okay, so that's pretty much the overview of how this works. Now, if that's all there is to it, how the heck are we supposed to get coding? Okay, one more set of keystrokes here. If you hold down shift and tab, you will see this area down here. I'm hitting it again and again, you will see that this area down here changes mode. And this is really which mode you're in. You're typically in the default mode, which it will ask you for approval to do things. There is a way to auto approve edits. Now, this is just edits when it's editing files, changing files are those will be auto approved and you won't have to say yes to each different type of file being edited. Then there's planning mode and planning mode basically will not write anything. It doesn't write to files, but it will return big plans to us. And planning is what we're here to talk about. So, planning is a very important part of this. Other videos that I have, I I talk a little bit more about this. I plan on putting a whole video together about planning because it is that important. But here is the one thing that I will tell you as a newcomer to this kind of stuff. These models are incredibly smart and very capable programmers. They can't do everything. And one of the things that they absolutely fall on their face with and a lot of senior devs kind of like poking them in the eye about is they lose the understanding of what's going on. They don't seem to connect the dots all the time for the why things are occurring. They know how to do the how. They know how to write the code and make the different parts work together generally quite well. What they don't understand and what they need from you since you're a pair programmer here since you're in cooperation with this model, you have to bring the what. Your whole job here is to bring the what. And you can't just say, I want an alarm clock. It will give you anything. It's going to have to dream up all of the rest of the what. If your what was I want an alarm clock that runs in a web browser and gets started when you click a button and has snooze and all of those other what parts you need to send in and that's really important. So I'm going to start us with a prompt that gets us on the road of writing an application but this is not the plan. So remember we're in planning mode and I'm going to paste in a prompt here that we can take a look at after I submit it. All right. So, TV Show Explorer is a lightweight web app that lets users discover series at a glance and deep dive when curiosity strikes. The landing screen features a sleek hero search bar, plus two dynamic scroll snappable carousel, one surfacing TMDB's trending today posters, the other its current most popular lineup, inviting instant exploration beyond a plain grid. Selecting any show opens a rich detailed view packed with ratings, synopsis, cast, season, streaming providers, and similar show suggestions, giving newcomers plenty to click without feeling overwhelmed. Okay, this is enormous. If we pull this off, bully for us. But if we get anywhere close, I'll be super happy as we really don't want this video to last all day long. But I am describing basically what I'm interested in having. I want a system that does these things, right? That's what's the important part. The the how it is done is up to the system itself, the intelligence itself. So let's submit this in planning mode, if you recall, and see what comes back from this. And what it comes back with is a better version of a plan. Whether or not it's a perfect plan, it's almost certainly not. It's really important for me to say there is no perfect here. So don't try to get this absolutely perfect. No matter how well you describe each one of these things, it will miss some of them. Just like any engineer would miss some detail inside of a very detailed plan. Now, you don't necessarily have to make sense of everything that they're doing here. You don't have to look at it and understand what Vit is, what Tailwind is, the TMDB API. You don't necessarily need to know those moving parts, but you can see that it's saying for the front end, it's going to use a couple things. For styling, it's going to use a couple things. For state management, it will use something else. Okay? And this is really your road. Don't completely skip this step. These are the things that help you become a little bit of aware of the different moving parts of an application and what's important. And these are really important aspects, right? So they also give you a full breakdown of the project or the files that will be in this project and the structure that they'll follow. So let's go forward with yes and autoaccept edits. And so now we're on our way. And you can see it's changed us to that purple mode of autoaccept edits. So it's not going to tell us about all of those files that it listed out. It would have said, are you sure you want me to write this file? Are you sure you want me to write that file? I'm about to do this. Do you want me to do that? So some things it will auto accept. other things it will come back and ask permissions. Okay, just for completeness I will show you. I've used TMDB many times so I'm fully aware of this and I don't have to wait for the model to tell me this. If you're building along or anything like that, you will need a TMDB API key. That's a very common thing. You'll need to go out to the movieb.org and that will be tmdb set up an account. It's free. Then you can come in and ask for an API key. That little key is what we're going to use in the rest of the application. But it is important and I just wanted to show if you're building this along. I didn't get this for free. Okay. It's also worth saying that Cloud Code is just churning away. It's working through this checklist and you can see it's a very nice progression that you can see where it is in building the files. Okay. So, it says it completed. Excellent. So, you can see that it went through. It checked everything off of its list and it says, "Okay, here's everything that I just finished." It also has instructions in here to run the application. Set up your D TMDB API key like I mentioned. Create an ENV file. They have an ENV example that you just copy, take off the example, and that will be the the place where you put your key. Um, start the development server. And so, this one's an important one. You can always just ask Claude again. Claude knows how to do this. So, if I just said, how do I start the the server or how do I start this? How do I run it? How do I see it? It'll get you there. either way, but it does tell me when it completed npm rundev. And this is a very common development running process kind of command. Basically, we want to run this command, npm rundev. But our terminal window that we're running in is filled up with claude. You don't want to have to keep leaving Claude and coming back in because servers generally need to stay running. So, what we're going to need to do, and I'm using warp, I can just create a new tab. You're probably going to have to hit command N to create a new window. And that window is going to be the place in the same folder. So you have to go back to that directory. If the new window didn't open in the project folder, you'll have to go in there and do npm rundev in that location. So when I run this, what I see is a URL that I can click on and that will launch the browser to this URL. All right. And at this point when I launch it, I have a problem. Not surprising. So I just take the entire problem. I will come back to Claude, give him that entire problem, and basically make it his fault. I'm out. Okay, so Claude went about fixing that. But if I come back here and I reload, I still have this problem. So here is where the complexity lies. Claude changed something in a file that is read when things start. This doesn't happen terribly often, and you won't know when that's the case. Sometimes it will tell you, "Try refreshing your browser or restarting the dev server if needed." So in this case, because of the kind of file that we changed, I might need to come over to my terminal that has my server running. Hit control C. If you recall that C that we talked about earlier, that will cancel or close this server. So now we're not running that server. And if I reload, you'll get this. And then I can just hit the up arrow key, which will rerun the last command generally. And then come back. And now we're running. Maybe not successfully, but now we're off. Okay. Two things to do when something like this happens. I come back and check the server to see if the server had an error. Server seems fine. Doesn't have one of these big error messages. Second, I will rightclick and hit inspect, which takes me to the tools where there is a console. I'm going to leave that as that. But basically, we're trying to see the output of the application running in the browser. And that says this. And once again, I will take this come back to Claude and say, I don't know what's going on. I'm going to give you this error message. And more than likely most of the changes that the system has to make now will automatically refresh in this browser. So very often I will leave these two next to one another or related to one another so that we can see as this one is making changes, it's updating things and the server over here is smart enough to watch for changes and reload the server when it sees them. And okay, so it did say try stopping the dev server and restarting it. So once again, Claude is trying to instruct me of everything that I need to know. But I come and look and I say, "Yeah, okay. I'm going to close that for now and say maybe it missed the mark. I'm pretty sure this isn't what it meant." So here's what I'm going to do. I'm going to take a screenshot and come back over to Claw Code and paste that screenshot in right there and say, "Yikes, this is ugly." And it's saying, "Oh, the styling is not being applied properly." So that makes a lot of sense that this isn't the way that it designed it, but oh, it has an actual problem with the stylesheet that it was trying to apply underneath it. So let me go check and see how I'm applying creating stylesheets and things of that nature. And as you can see, it's flipping around in the background as he makes changes. And now the stylesheet is starting to be applied. Uh I think hopefully a little bit more gracefully than that last time. Oh, okay. In the middle of its changes, I wanted to show you this. It's been writing lots of files and doing lots of things, but now it needs to run a command that it hasn't seen yet. And I'm going to say instead of just yes once, I'm going to say yes and don't ask again. And what it does is it writes that in a local file that is its own settings file for this project. It's not global. It's just for this project. So it's very safe to say as you move in and get better permissions in a given project. that will enhance your ability to kind of more easily gracefully make changes inside of a project, but it won't necessarily solve other projects. Okay. And it finished. And in fact, problem was that it needed to downgrade from Tailwind version 4 to version 3 because it has some breaking changes that it didn't like. I don't know what those changes are, but once it did that, everything was happy again. So, this is the application that it built and designed the first time out if it wasn't for those two problems that we ran into. Really, frankly, this is pretty great. What do you think's going to happen if we click on one of these? Come on. Come on. No cast. One season, no streaming information. All right, let's see. How about Rick and Morty? They have a cast. Oh, this looks great. Oh my god, boy. Hi, Agentic Coding. I love you. All right, so we now have an application. Let's see. One of my favorite shows. If I go to I zombombie. Oh, score. Full score. Thank you. I am continually blown away by this stuff. If we look at what's in this, you can see how long this history is. This is from the initial request after all that plan, everything dropped down, all of the changes. This is the context. And this is what I was talking about. There's an enormous amount of context here. So if I was to say I really want this ended to be a different color, it would have to be aware of everything else that it's changed here and guess that I'm talking about the ended that's happens to be on the screen, not something that it had written previously in this context. So all along after it finished and it got to a successful place that first buildout, I should have said clear. Now I have no context and the conversations that I have with it are going to be far more successful. Okay, so now that we have the full picture of how to develop an application, we have one problem and that problem is it's only on our desktop. Let's solve that by a little bit of magic. We're about to install Git. Now, you may already have Git on your system. Fantastic if you do. I am not going to go through the steps of installing Git. So this is one of those engineering moments of if you drop down into shell and you can't run these commands that we're about to talk about, I'm going to advise frankly that you ask Claude how to do it. Claude can definitely help in this case. The next thing that happens on top of that is GitHub. Now Git and GitHub, two entirely separate things. They sound like they're the exact same thing. Git is the local thing that saves versions. That's just a local piece of software that everybody can use that saves versions of your software. Once you push it up to the cloud so that you can do other things with it, other people can see it. That's where GitHub comes into play. You usually will push it to GitHub. There's other places you can actually push it to. GitHub's not the only place. So, that's just an extra place. Now, you have to create a profile up there if you don't have one to follow along with what I'm going to do next. Also, a very solved problem. I would set yourself a task to do it. you you'll be done in 15 minutes and then we will need to push our files up into a GitHub repository and then take that last step which is not going to be a developer card problem. I'll let you solve this one on your own but it's going to be using a third party service that will deploy it for us on the internet but that is so simple that I'm definitely going to show that. So let's pretend like you have git on your system. Wink. Okay, so here we are. We love our application. We think everybody should see it. Fantastic. So, what we want to say here to Claude is, "Hey Claude, turn this into a Git repository and check everything in." That's it. And really, that took almost no time at all. Fantastic. This is all committed and ready to go or just about. So, what we have is a local version controlled system. Everything's committed. If I do anything else, I can roll back to this point. That's the idea of a commit. I won't go any further about that. either go check your local AI about that or check some of my previous videos. But the next thing we need to do is we need to get this thing into GitHub, a cloud version of Git. It's just kind of a holder of different Git repositories. So, there's a bunch of ways to do this. If you don't have a Git username or profile, there's a little bit of a challenge. I think I talked about that. So, you might have to pay attention on how to get Git into the GitHub. Pardon my southern. Okay, so that's what we're going to do, but we're going to pretend. Congratulations, you have a GitHub account. Wink. Okay, two versions of this. One, you go the traditional route. You go to GitHub yourself. You create a new repository with the name of the application and it will give you terrific instructions to check everything in and push it up. That's easy. Do it that way. I'm going to try it here with Claude. Hey Claude, can you create a new uh private repo on GitHub for me and push all of these files up there? Okay. I will say my transcription software Super Whisper that I used actually messed up where I asked it to make a private can you create a new uh on GitHub. So it made it public. Perfectly fine. Feel free to go look at this. You can pull this project yourself to get where we are as a starting point. And so this is the entire thing that we have. It's just sitting here waiting to be used. Great. We're on literally the final step. Okay. There's a few services. All of them allow with an account and a free account by the way. All of them will host your applications for free up to a certain number of them. They will stop being free after they will pull them down. I think they won't allow a certain amount of traffic into them. But as long as you're using this for yourself and just a couple friends or something like that, this is a really great way to get started. I use a service called Railway. Netlfi is a very popular one. Another one that's really wellnown is Versel, but there's just a ton of these. We'll start with Netlefi here. So, let me log in. And once we're logged in, we're just going to hit the add new project. And we're going to import an existing project from GitHub. This is going to be pretty straightforward. It's going to go out and say, is Netlefi authorized to read things in your GitHub? Yep. And TVJ is what we just pushed up. We're going to select it. We'll call it TVJoy. It will watch for changes in your repository, which is fascinating. This is called continuous delivery. So this is the concept of as something changes in GitHub the next time you push your files up using Claude like we just did. They'll go into this branch presumably this system is watching that branch and we'll see that there's a change, pull all of that information and deploy the new version. You'll never have to come back here and you'll always be on the newest version assuming that everything always works out, meaning you didn't have errors in your code when you pushed them up. But heck, that's Cloud's fault. All right. So, there's one last thing here that's kind of important because we're using an API. I am going to have to add an environment variable. And if you remember, I shared early on that ENV file, which is where we had to put our environment key. The key is on the left and the value is on the right. I'm going to put the key here and the value here. So, I'm just copying and pasting them from the ENV file that I have that works when I run locally. That env file is not pushed up into GitHub. So this system has no understanding of that. You wouldn't want to share your files, your your keys in that way. We'll go through security some other time. Okay. And now let's deploy TVJoy project deploy in progress. So it takes a minute and it's working on deploying it. Setting up custom domains, pushing everything. I'll be back in just a second. Okay. And before I could finish that sentence, this shows up down here which is the deployment. If we go and look at that deployment, here's our application on the internet. Wow. That's it. It was that fast. It was that easy. And it's not complete until we show I zombie again. Love you, Liv. All right, so this was kind of awesome. Maybe it went a little bit longer than expected. Let's pull out of here. That is it. Soup to nuts from zero all the way to deploying an application that uses a public API that you have to use a key for. That is a huge number of steps. If you take this project on, please let me know in the comments below because I would love to give you some applause. And if you have any open questions at all, drop them in the comments. Hopefully, some of those devs will still be around to kind of answer some of the questions or at least root you on as you move away from just watching these things and move all the way into building and deploying your own applications. I can't wait to see what you come up with. I know this was a long one, but I hope it really brought some value. Thanks for coming along for the ride on this one and I'll see you in the next