Claude 3.5 Crash Course for Developers: Code 10x Faster in 2024 [Claude 3.5 artifacts]

Hey guys, welcome to this Claude deep dive, where you're going to learn everything you need to know about building software projects 10 times faster as a developer. And in this crash course, we're going to cover all the basics of working with Claude, and then we're going to dive into artifacts, projects, and knowledge bases. And right after that, we're going to dive into my favorite three-step process that I use to help me crank out code faster than I've ever been able to before for my day job at an AI startup, and to help me crank out projects here on this YouTube channel. I promise you, you don't want to miss this part. And along the way, I'll be dropping a bunch of templates that you can steal and copy to use for your own projects to help you crank out code faster than ever. And I'll actually drop those templates for free down the link in a description below, so you can just download them and use them in your own projects. So whether you want to use Claude to build a Next.js application, start a Python project, or just have Claude help you with some general debugging, this is the Claude tutorial for you. So enough of that, let's go ahead and start diving into Claude. All right guys, let's quickly cover everything that you need to know about Claude and all of its new features that are going to make your life so much easier and help you crank out code way faster as a developer. So first thing you'll notice, this is Claude. This looks exactly like ChachiBT, and it basically is. It's a user interface that allows us to interact with different models. So here's just a few of the models that you can interact with, and these things are crazy good. So what you'll notice is Claude has those three flagship models, Haiku, Opus, and Sonnet. As a developer, the main one you're going to be using is Claude 3.5 Sonnet because this thing is a beast. What you'll notice is whenever comparing this model to other models like ChachiBT 4.0, which has been the leading competitor, what you'll notice is it shines on two metrics that are super important for developers. The first one is obviously coding. This thing is awesome, which you'll see here in just a little bit. And the other thing is it is great at reasoning. And I've noticed Claude has probably been one of the best debuggers and helping me find issues in my code compared to any other model. And you'll see this later on. And if this is your first time using Claude, I do want to point out that it has a free and pro plan. The free plan does give you access to Claude 3.5 Sonnet, which is that beast model. However, it doesn't give you access to a lot of the new features that are going to make your life 10 times easier and help you crank up code way faster as a developer. And those new features are going to be projects. And the other one are going to be artifacts, which we're going to talk about here in just a second. So the first thing is that I want to talk to you guys about are projects. So in Claude, and you're going to see this all in just a second. I just want to like plant all the seeds for all the cool things that you're about to do. So the first thing is projects. What are they? Well, basically inside of Claude AI, what you can do is actually build a project. And it's a great place to store knowledge about what you're building. So this is where you're going to be able to upload all of your different code and files inside of your project. And then basically have as you're working on building new features or solving problems, you can actually just interact and have Claude pull out all the context it needs to help solve the projects. And the important part is like, you can see right here, each project has a 200,000 context window. This is crazy. If you're used to using open AI, you're going to get a few thousand. And this is just an insane amount. And this is going to be critical as you and I go off to build full stack applications and build big Python projects. This project knowledge base is going to be crucial to help us crank out code 10 times faster. So that's the first thing that's going to make our lives 10 times easier. And the other thing is going to be artifacts. Basically, artifacts are Claude's way of giving us a much better user interface. And you'll see it in just a second, but just know, as we're building out our projects, it's going to throw our chat on the left, and it's going to throw the code it writes on the right. And it's just a much easier way to work and interact with the AI. And I think once you kind of use the Claude interface, you're never going to want to go back to using some of the other models. So enough of this hypothetical, let's go ahead and just dive into you can see all these features in action. All right, so now we're on the fun stuff. So what we're going to quickly do is set up artifacts, so we can turn them on, start showing you a basic example of working with Claude. And then after that, we're going to dive over to projects and knowledge bases. So you can see all of that in action and see how it all ties together. Okay, so let's go ahead and start showing off how to enable artifacts, which are going to keep things nice and clean while you're working with Claude. So once you log in on Claude AI and head down to the bottom left, you'll see you can open up your basically your project settings, and you're going to want to go to feature preview. Once you click feature preview, what it'll do is show you this screen right here will ask, would you like to turn on artifacts? The answer is yes, you definitely want to turn these on so you can see all of your code snippets and text documents in a nice, easy to understand format. So once that's on, you're going to be brought back to a page like this. You might want to refresh it just to make sure artifacts do work for you. But what's nice is you can now go ahead and start asking questions, and you'll see those artifacts pop up. So show me a simple example of FastAPI. So what's going to happen once we send this off, going to go ahead and start a new chat, just like we will with chat2BT. But what you're going to notice is it has this little bubble right here, and it's actually showing the code on the right. So this, what you're looking at right here, is the artifact that was built by Claude. So super cool, it's going to make your super easy when you're over here. You can either download it, or most likely you're just going to want to copy the content and go paste it into Visual Studio Code or Cursor, whatever one you're using. So that's artifacts in a nutshell. Now let's go ahead and hop over to projects so you can see how that works. All right, so to quickly make a project, what we need to do is head down to the bottom left to go ahead and open up that sidebar and click projects. Now this will take us to the projects list view so we can see all of our previous projects that we've worked on. But in our case, what we want to do is go off and click create a new project. And for this example, I think it makes the most sense to let's say that you wanted to work on contributing to the Crue AI open source project. In our case, what we wanted to do is just add a new feature or maybe add some updated commentary on some of the functions inside of the code. So what we could do is create a new project called Crue AI open source. And what we want to do is click create a project. Now what this will do is it'll bring us into a new project view. And what you're going to notice different about this view is it gives us access to add update content to our knowledge base. And if you remember from earlier, this project knowledge base is where we can store up to 200,000 tokens worth of knowledge, which is an insane amount. So let me just show you what you can do to go ahead and start uploading your first lines of code so you can actually start cranking out some new features for Crue AI. So you're going to click add content. And when you're in here, I always go with the upload from device. And this will allow you to actually upload projects and files from your code base. So in this case, I already have the Crue AI project downloaded. And what I can do is go ahead and upload all of the main files that I need to actually start making, basically making some changes. So what you'll notice is it'll start uploading all of them. And you can see how the size of each file, and you can see I've used 10% of the knowledge base for all of these different files that I've uploaded. Okay. So now comes the fun part, just to give you some additional context. This project knowledge base will actually be shared between all of the different chats that we create when using this project. So what I mean by that is like you and I can have one chat where we build a new feature inside of the Crue project. And then we can start a new chat, which will still reference all of these different files that we've done over when we, let's say, build a new feature for a task. So the core lesson here is project knowledge bases are shared between a bunch of different chats that we can spin up. So this is going to be the first chat that we spin up. And as you begin to work more and more with projects, you'll see this down here, get populated with all the different chats you have inside of this project. So I hope that makes sense. And the best way to just show you is actually, let's just go ahead and start cranking out a new feature. So you can see this in action. So for our first chat, let's just say we want to go in inside of the Crue.py file, and we want to make sure that we add doc strings to all of the functions that exist inside of the file. So we can go off and send this over to Claude. And what it'll do is do the normal chat2BT like-esque thing where it starts a chat. But as it generates artifacts that we decided for it to make, it'll go off and actually just show those to the side. So this will be super easy for us to see all of the doc strings that we need to add to all the different functions. So what this will do, it'll add a ton. It usually takes a little bit just because this is a huge file. But I just want to show you, it'll actually go off in code and add all the doc strings for us in real time. And it's super nice. We can just copy and paste, and life's good. So yeah, you can see it's adding doc strings for all the different functions. So this is awesome. And the other thing, just as it's going off and doing its work, I just want to show to you guys, this is super important. Up in the top left, you'll notice that this is the project that you and I are working on. And over here to the right, it says untitled, but this is the specific chat that you and I are working on. And there's a few important pieces to this. First, when you're working with Claude, they are very strict on making, basically enforcing limits. If you work with Claude for a while, you'll kind of recognize that you'll get rate limited and have to wait three to four hours. It feels like timeout, honestly. And one of the ways you can avoid timeout is by hopping between different chats. So as this conversation gets longer and longer every time you add an additional request, it's going to go back and read everything that was just discussed, figure out what the problem is, and work on it. And this eats up your tokens and basically puts you in timeout for a few hours. So the better solution is as you're building out different tasks or solving different problems, you want to instantly spin up a new chat as fast as possible to make sure you're not eating up your credit. So I hope that's a huge lesson and helps you out. The other thing that I think is super cool about chats is we've talked about projects where you can add information that gets saved across all your different chats, but you can also add in information that's specific, add in files that's specific to this piece of chat. So for example, I'm going to paste in a huge file, which is all of the tests for our crudo.py file. And normally, if you were working with chatGBT, you could surround your code inside of three back ticks and start pasting in your code. But what's cool about Claude is it actually has a really nice editor. So you can like, see like, yep, this is like my Python code and it does syntax highlighting for you and everything. But in our case, if we paste in something that looks too big, in our case, I think it's like 15 to 50 lines. If it's over 50 lines, what it'll do, I'm going to go and paste it in so you can see it. It actually recognize that, oh, you're trying to pass in a file. And I can see that, yeah, this is a ton of code. So you wanted this to probably be a file that we can process later on. And what's cool is this file will say strictly to this chat, and it's not going to go over to your other chat. So I just want to show you guys how everything ties together, and I hope it makes sense. So enough of working about projects and knowledge bases and everything. And what we're going to do next is I want to take you guys over to my secret three stage process that I do using basically projects, knowledge bases, and artifacts to help me go through code faster than I've ever been able to before. So let's go ahead and start working on this new secret three-step process that you're going to love. Let's go. Oh, real quick. Are you liking this video? If so, you're going to love the rest of the AI crash course and deep dives I have right here on my YouTube channel. You're also going to love the free school community I put together for developers just like you. So far, we have over 2000 developers in the community who help each other out, and we have free weekly coaching calls. More information on that down the link in the description below. But enough of that, let's get back to the tutorial. All right, guys, welcome to my favorite part of the video where you're going to learn my new three-step process for using Claude to help me build projects 10 times faster. You're going to love this once you see it, and you're never going to want to go back. And what we're going to do in this part of the video is learn the key three steps that you need to do and the framework and process for actually running it. And then afterwards, we're going to dive into a real world example so you can see how this works and actually use some of the templates that we're going to be talking about in this high level. So, okay, let's go ahead and dive into the high level so you understand it all, and then right over to building this in real life. Okay, so the main thing that we're trying to do inside of our three-step process is first, we need to get all of the information out of our brain and into Claude. And the way we do that is we need to define a north star. So what we're going to do is we're going to have Claude, we're going to use a template for this that you'll see later, but what we're going to do is we have a template that helps Claude ask us all the questions it needs to understand the project we're trying to build. So this is where it'll ask us like, hey, what's your goal? What are you trying to do? Any technology stack you're thinking of? And what's cool is not only will Claude ask you these questions, if you're not sure on which database type to use or what you need to do, you can also throw the question back to Claude for suggestions. But the goal here is we want to go from an idea in our head to a strict document of requirements of what we're trying to build, because this is going to become our north star and help tie together everything else as we go off to build new features and files. So that's step one. And basically the way it works, and we're going to go through these one by one just so you can see it all action, but step one is, like I said, we have a template. It'll pull out all the information. Once we have that template, basically what's going to happen is like, we're just saying like, this is Claude. And what's going to happen is it will eventually spit out what we're going to call our master plan. So this is what happens once after we get all our questions, we're going to spit out a master plan artifact. And what's cool, because if you remember, we're using Claude 3.5 and we're going to be using projects because that's a key part, projects with knowledge bases. So eventually we can add our master plan into our project knowledge base. So this is going to set us up for step two, because now that we've defined our north star and we've spit it out as an artifact and put it back in our knowledge base, it can be shared for everything else that we go build going forward. So it's going to save you a ton of headache of like, wait, here's a new chat in the new chat. I want to like retell it everything I'm doing. None of that. Now that you have a master plan, it knows exactly what you're trying to do every time going forward and speed up exactly, help you build a lot faster. All right, cool. Let's go to the next part where we speed things up. Now that we have our master plan, we can then use another template to say, all right, extract all the meaningful information from the master plan and help me stub out the initial v0 or like initial files to help me build this project. And what this is going to be super helpful for is it's going to include like, let's just say you're building a next JS application. It'll go, oh, it seems like you need to set up main page that includes, you know, this component, this component, and this component, and you need these utility files. And we need to set up this database schema. So it's just going to spit out all of those files. And it's not going to include any deep information. It just going to include high level, like, oh, this file is going to have this function in these properties. So that's just going to set up that for us. And then this is going to set us up for phase three, because I'm gonna go ahead and drop this so you guys see it. Because once we do phase two, we're going to get all these files. Now, these files aren't complete yet. They're just shells and stubbed out files. But this is where we get into phase three. So what we can do at this point is we can add all of those files into our knowledge base. So let me just shrink them. And what we're going to do this for is because we want Claude to know everything we're building and how all of it connects. Because as a good developer, you kind of think in systems are like, oh, this relates to this, so forth and so forth. And here's exactly what we're going to do next, because this is where the magic flywheel starts to occur. And you will just fly through your projects. So what we're going to do next is start saying, okay, Claude, I would like to start building out file one, not only will say we're trying to build out file one, here's the exact features and functions that it already has. And here's what I would like it to do. And we'll talk about this all in the prompt, like I have a template for you guys. But this will all get eventually passed into Claude as a prompt, and it'll look at its knowledge base. And it'll start to spit out updated artifacts of like, oh, here's what I think your file one should look like. Or in our case, here's what your new web page should look like. Or here's what your new Python utilities file should look like. And I'll start spitting these files out one at a time. And what's super cool about it is like after you go, okay, yeah, that's exactly what I want it to do. Well, we can know that this file is green, meaning like this is done, we're never going to touch this again. And then we can start working on the next file that we want to start working on. And we're just going to rent and repeat working and knocking out these files one by one until we're completely done with the whole project. And you know, it's all built. Now, one other like meta thing I want to talk about why this is such a important process and flywheel to help you build out your applications. It comes down to a few core things. First, Claude does have those token limits that we talked about earlier. So like, as you have longer and longer chat, you're going to eat up your tokens, and you're going to go to Claude timeout. So by every time we build out each one of these files, we're going to be doing it in a completely new chat. And it's going to make sure that we get to use Claude for a lot longer and get a lot more value out of it before we go into timeout. So that's one of the main reasons why we're doing this. Another cool part of like step three, which we're just going to rinse and repeat in a new chat inside of a project for each one of these files is it also keeps your code and your chats tidy. So if ever in the future, you need to come back and be like, oh, shoot file three, as I was building it out, I'm actually missing a function. Well, what's cool is because we're going to be intelligent with how we name our chats inside of our projects, we can go like, oh, like I'm Yep, that's the utilities helper file, I'm going to open that and I need to add this new function into it. So it's just a nice way to keep our code base and our LLM chat nice and tidy to help us move faster. And we're not having to like hunt things down. So all right, enough, the theoretical, though, I'm pumped for you guys to actually see this in real life and see how fast we can go from an idea, use templates and this new process to actually start spitting out a real life Next.js application code that just works super well. So all right, let's go ahead and dive into the real life example. I am pumped to you guys in just a second. All right, guys, welcome to my favorite part of this whole video, where we're going to take together all of the information we learned about using cloud plus go through that three step process right here, where we define our North Star stub out our projects and build out each file. And we're going to put all of that information to use and actually start building out our demo project. And for this example, I'm just going to be building out a Next.js application just so you can kind of see how everything we talked about theoretically actually works. And this is where we're going to start using those templates I've talked about to go through each one of those three steps. I have a template per step so that you guys can actually speed up the whole process. And once again, just click that link down description below so you can download each one of these templates completely for free. So let's go ahead and actually start looking at what these templates look like. And just as we go through this, I just want to remind you for our first template, we are trying to define our North Star. And this is super important because we want Claude as we start building out all the different parts of our application to understand our ultimate goal. Because in the past, if you've used a lot of AIs and you hop between different chats, you probably know half the time you have to like restate, here's what I'm trying to do. And we're just trying to actually just say, forget that we're going to be good programmers here, we're not gonna repeat ourselves. Instead, we're going to define one master plan document that we can just throw into each one of our chats. And that way, we don't have to completely restate what we're doing each time. But enough of that, let's look at this template and actually start using it so you can see what it looks like. All right, and I'm just gonna like quickly run through this at a high level. So we're trying to basically do some prompt engineering here to say like, hey, you are a professional developer. And your job is to basically understand the app idea that I'm trying to build. And you need to ask me questions. It's kind of like the 20 questions game, but they're asking us to fully understand what we're trying to build. So you know, it's just going to ask us a bunch of questions. The whole goal is to make this master plan markdown file, you're going to be talking to us in a conversational manner. And you know, half the job of this prompt is to like, first off 70% of it's going to be like, figure out what we're trying to build. And the other 30% is educating you on what are the pros and cons of different options. So I like this is basically like, you're almost talking to a senior engineer who's trying to understand what you're trying to build. So they're going to go, oh, you want to use a database? Well, I would recommend a this type of NoSQL database, because you're doing this, is this kind of what you want to build? So that's why it's like half understand 30% coach. So I have found this super helpful as I'm building out projects. And then, you know, along the way, just offer explanations. And then when it comes to questioning, a lot of the times I know what I want to build, but I have found it super helpful when the AI is proactive, asking follow up questions. So for example, when I want to use, let's just say I want to start building out a new page in Next.js application, what I want the AI to do is go, well, to build a page, you probably want to have a nav bar or a sidebar, correct. So like, we just wanted to be proactive and always suggest. So that's, that's another thing that I think you'll really find helpful as we start to go through this. And the rest of it is pretty straightforward. The only other thing I want to say that's super important that you're about to see is diagrams. One of the main things that I think really helps set apart developers using AI is actually drawing out what you want to do, because a picture is worth a thousand words and you can only say so much information in a prompt. So you'll see here in just a little bit, we actually start using diagrams to kind of take our initial rough wireframe sketches that we've like done in our head and actually thrown it over to Claude to actually fully understand what we're trying to do. And basically it just gets us faster through the feedback loop of like, instead of AI coming back to us a bunch of times with stuff we don't want, we just go ahead and draw it out and, you know, leap forward in progress. Okay. So that's enough of that. Let's actually go ahead and run it so you can see what all this looks like in practice. So I'm gonna go ahead and hit run and it's going to start asking us questions. All right. So you can see now that Claude's ready to help us out and it's asking us, could you please tell me about your app idea? What's the main problem you're trying to solve? Also, don't worry if you don't have all the answers right away, we'll work through it together. So I already like working with this guy or gal. So let's go ahead and actually just paste in what we're trying to do. So as you can see, what I've just told Claude is, hey, I want to build a Next.js application. And here's a little bit of background on what I'm trying to do. First, I'm trying to automate my workflow using AI so that I can upload video clips, configure some prompts, and basically trigger a bunch of Lang chain runs to summarize my YouTube videos, to generate LinkedIn posts, Twitter posts, YouTube posts. Basically what I do as a YouTuber, I'm just like, take a step back where I normally create videos just like this one. And once I'm done creating those videos, I want to be able to post on different social media platforms to let you guys know, hey, like this video is coming out. So that's basically what I'm trying to do. I want to automate that workflow process. And what you can see here at the very bottom is I said, I'm uploading pictures of a few key wire frames of the app. So here's what you can see I've kind of done. So I just went ahead and doodled out all of these ideas and took some screenshots of them. And this is kind of like where I think as a developer, no matter what skill level you are at, this is super important to go ahead and put high-level ideas into a drawing so you can understand it. And then B, you can pass it along to Claude so it knows what you're trying to do. So you can see already right here, I've already kind of told Claude that like, yeah, I want to have a Next.js application. I want this type of database. I want to use this type of ORM, and I want to have a Flask backend constantly pulling. So this is just kind of like high-level orchestration. And don't worry if you don't know how to do all of this, Claude can walk you through it. It'll just take longer to get to that point to where Claude fully understands what you're trying to do. But I already kind of know, so I went ahead and threw it into here. And this is a good point to mention out. What's funny is this exact app that I'm building out here, I am turning into a full-stack masterclass course, which I'll be releasing hopefully here in the next month or so, but I'm actually using Claude to help me build it. And so far the app's looking awesome. You'll see it at the end of the video, but just know like, this is exactly what I'm doing to build real-world applications at extreme lightning pace. So just keep going along just so you can see what I'm trying to build. I want to have a list view where you can have projects. Each project would be a YouTube video that I'm working on, so like this Claude masterclass. What I want to do inside of each video is do a few key things. I want to be able to upload the video. I want to configure all the prompts. So like, once you summarize the video, I want this type of prompt to crank out a LinkedIn post, this type of prompt to crank out a YouTube post. Then I want to run it, and then afterwards I want to be able to see all the results. So this is just like rough ideas, and the other key thing that's super important is you can only have five images uploaded to Claude. So just only upload the few most important ones, and if not, Claude will get upset. So okay, cool. So you can see that's what we're trying to do. I'm gonna go ahead and upload those videos, and then now we're gonna run it again so you can see all of it in action as it goes off to start helping us make our master plan and keeps asking us follow-up questions to fully understand what we're trying to do. So let's give it a few seconds to think. All right guys, so Claude did a really good job of understanding what we're trying to do at a high level. It analyzed the four images we gave it and provided some additional information on what it understands it's seeing, and then it asked some follow-up questions to try to better understand our requirements. So at this point, what we need to do is put on our product manager hat, and we need to do two specific things. First, we need to correct and provide additional information on anything that Claude has said wrong, and then we need to do, as part two, we need to answer all of the questions that Claude has asked us. So let me just show you what that looks like and why it's important. Okay, so going back to what I said, we need to put on our product manager hat because at this point we're kind of steering the ship and treating Claude as a senior engineer, so we are just correcting their assumptions. So when Claude goes, oh I need to build this, we go, uh no you don't need to build that, you need to build this. And all we're trying to do is just make sure we are totally aligned on our north star. The AI is aligned with the human to make sure we're going in the right direction. So you can see, like I said, in part one, we want to provide corrections and additional information. So the first thing is, you know, this is basically you being the boss and, you know, reading your employee's work. So they go, oh you want to have a flash back-end component? No, it was supposed to be a flask back-end component. That's half my handwriting being bad, so I was a bad boss, but we need to fix that. And then what we need to do is just provide some additional information. So, you know, it's talking later on about all the additional stages that we want to build, and having this like main content area. Because if you remember back over here, I said we will have stage content here. So I just wanted to like be very crystal clear that yes, that stage content is going to include different components for each one of the stages. So I'm basically just elaborating. And then finally, we need to go off and answer all the questions that it's asking. And I just want to show you a few example ones, just so you can kind of see what this looks like. Because this is by far the hardest part of the whole process. We are just front-loading all of the work now, so that once we're actually building the project later on, it's just breezing through it. So don't worry if this kind of seems like a lot at front. It is. I'm not going to sugar coat that. It's just we are trying to extract all the information out of our head now to make life easier going forward. Okay, so can you tell me more about the AI processing? Well, as you can see, the AI just doesn't understand what I want to happen yet because I wasn't super crystal clear. So I just kind of start elaborating. Like I want to give you a bunch of clips. I want AI to transcribe them. I want you to generate a 2,000 word summary. I want OpenAI to do all this for me. And this is where you have a chance too to collaborate to say, tell me if you have suggestions for how to do it. Next, tell me about the workflow. And I just went crystal clear into each stage and to say what should happen in each stage. And you can feel free to even go even deeper and elaborate more. Like this is your chance to be a good boss and say like, here's what should happen. Here are my expectations for the artifacts that are generated. You know, you could go all out in this if you wanted to. And then I just, we really just keep doing this for each of the different stages. So another good question that I thought was like, do you have any preferences for authentication? Because it knows we're building a web app. So it's trying to be proactive and ask us, do we have any? So in this case, I know I want to use Clerk and I only want this to be used for individuals. So that's when I know what I want to build. But there's also times later when it's asking like, hey, it seems like you're going to need to handle video storage. Well, what do you want to do? So this is a part where like, if you're not super familiar with storing videos or blobs, you can ask the AI once again, like what recommendations do you have? And you can just keep going through this for each of the different parts of the application. And the final thing that's super important is we need to at the very end, say, give the AI a chance to ask follow-up questions and to elaborate because what if you and I didn't answer a question all the way? Well, the AI might not understand what we're trying to do and go a different direction. So we just need to keep giving the AI opportunities to fully understand what we're trying to do. So I hope you can kind of see how we're starting to like pull out all the information from our head into the AI. And we're just going to go through this a few times to finally build up our master plan blueprint. So I'm going to go ahead and run this and we're going to go through this cycle, maybe one or two more times. I'll skip through it if it gets a little boring and then we'll eventually print out our master plan. So let's give it a few more seconds, just to run. All right, guys. So at this point, I'm just going to start speeding through it, but you can see that Claude is starting to ask me some follow-up questions and start to get a little bit more into the details on what we want to do for each specific thing. So I went ahead and just typed up my questions and answers. You can see I'm getting short, but what's happening is like AI is fronting a lot of the work and I can respond with two words. So like, do you want to use Whisper for a transcriptions in chat GPT-4? Sounds great. Blobstore? Eh, I actually want to use this instead. And if a lot of these terms are kind of going over your head, don't worry, you can do one of two things. First, go in and just ask Claude, like, please explain the pros and cons of each one of these and help me come to an educated decision. But then also, thing two, like I said, I'm actually going to be turning this into like a full stack application tutorial and I'll be doing that over on my channel. So if all these terms don't make sense, you can actually see me build this out eventually in real time later on, and I'll explain why we're making the decision. So that'll be a full set course that I'll launch later on. But just know, ask Claude, if not, I'll be releasing a course later on. But yeah, so I'm going to go ahead, hit enter, and what we're going to do immediately after this, I think Claude knows enough about what we're trying to do. So at this point, what we're going to do is start asking it to generate our master plan document. So what I'm going to do actually, just so you guys can see it in real time, what we'll do is go and say, you now know enough, you now know enough, please generate the master plan file. So what this is going to do is be the document that we're going to eventually just download to our computer and start copying and paste it into our project. So let's go ahead. It'll take a few seconds to generate this document, but what you can see is it actually did a really good job of taking everything we want to do and put it into a really nice document that we can actually start sharing. And you can see it's doing a really good job of like actually creating conceptual data models and we can actually correct these. So what I'm going to do normally, if I was building out this application fully, I would come back in here. And once again, you have two jobs provide additional context and correct it. So in my case, I would probably add in some additional models and tweak them, but this is actually probably really good for a V1. Yeah. Even the job types, like everything about this looks really great. Like, and what's cool is like, you could almost hand this off. Like you want to get to the point where you can almost hand this off to a real life senior engineer and they would have like a good idea of like, Oh, I kind of know what they're trying to build. And that's what we're trying to get to. Cause it's just, there's not a senior engineer. They're just an AI senior engineer. So yeah, this looks honestly really great. So what I'm going to do, I'm going to go ahead and download the file. And so it just downloads my computer. And now we're going to move on to phase two. We're going to take this master plan and actually start spitting out and stubbing out some of the files and our next JS application. So let's go ahead and start working on it now. All right guys. So now that we've done all the hard work, we're going to start heading to phase two, where we're going to start stubbing out all the projects. And this is where it's easy and fun because the AI is going to start doing all the work. So here's what we need to do in the second step. So what we're going to do is head over to projects and we're going to create a new project. Now on this one, I'm just going to call it YouTube content automation. And this is the project that we're going to start uploading our master plan to. And you'll see why in just a second. So we're going to go ahead and just leave the second thing blank because it'll be covered in our master plan. And this is where we're going to start actually uploading our custom knowledge. So in our case, the only thing we're going to try and upload is going to be our content. Now I'm just going to go ahead and just drag and drop our master plan in here into our project knowledge. And if you remember project knowledge can be shared between all of our different chats. So as we have one chat, that's going to start stubbing out our files. That's going to be great. It's going to share the project knowledge. But once we start going into building out our navigation bar or start setting up our database, you know, this master plan will be shared. So it'll understand, Claude will understand what we're trying to do at a high level at all times. This is going to be a game changer and you're going to see just how effective it is here in just a second. Okay, cool. So now that we have uploaded that master plan, what I like to do is go ahead in this initial space is also add the initial four or five pictures that we wanted to upload. And the final thing we're going to do is head over and upload our second template that I've generated for you guys. And this template is basically just telling Claude, hey, what I want to do is go ahead and start stubbing out the entire project. So what's going to be cool though is like you can see that like nothing in here is specific to Next.js or anything like that. It all comes down to using this master plan. So I'm going to go ahead and kick this off so you guys can see we're going to start stubbing out a bunch of our files. So let's go ahead and run it and let the AI do the work for us. All right, guys, so this is super cool. Claude just finished wrapping up two important things. First, it made our overall folder structure. So as you can see, it has our, you know, our Next.js application. It knows we're trying to do projects with different stages inside of it. In addition to that, it went ahead and, you know, these pages are going to need components. It went ahead and stubbed out all those components. And once it made this folder structure, what it did is it actually went ahead and created all the initial pages and components for us. And I wasn't actually a fan of this because it did it in JavaScript. So I had to just say, hey, man, go ahead and actually please recreate it in TypeScript. And then, boom, now this is actually ready to go and start stubbing out all of our files for Next.js application. So here's what's cool. I went ahead and just copied and pasted each one of these pages and layouts over to this Next.js application right here. And I just want to show you guys that like, A, it looks slick. We have like, you know, this is a ton of progress, all the pages and everything copy and pasted over here. And I have it running right now. And you can actually see once I like refresh the page, you know, this is a stubbed out version of our project. Now, obviously, this isn't like, oh, my God, beautiful. But, you know, it actually is like pretty kind of functional. Like I click View Projects. It takes me to a project list view. Whenever I go to a single project, it'll take me to a project detail view. And the important thing is this is the core logic of our application. And this actually sets us up perfectly for step number three, which is where we're going to do a deep dive into actually creating each one of these pages. So let's go ahead and hop over to part number three, and you'll see how we're going to start using cloud projects and a new template to actually start really cranking out and making each one of these pages beautiful. Let's go ahead and hop over to step number three. All right, guys. So welcome to the third step in this process where we're actually going to start fully building out each file within our project. And you're going to repeat this step right here for each file. So let me show you what we're going to do at a high level and actually start actually cranking out and building out the landing page so you can see it in action. So the first thing we want to do is start adding all of the different files that Claude just created into our project knowledge. And if you remember, what we're going to do is like add all the stub files plus our master plan, complete an individual file. Once it's completed, we're going to add that file back into our project knowledge and start working on the second one. And basically what we're doing is just like building up a foundation of completed work. So we're going to have the completed master plan check. Then we're going to have our completed landing page check. And then we're just going to start building each file out one by one and we'll iteratively work towards building a complete solution. So that's the process we're going to start working on. And as you can see what we're in, we're in our project right here. So let's go ahead and add in all of our content for the new project. So what I'm going to do is upload from device and I'm in the project folder. So what I'm going to do is I'm going to add the package.json because this is going to include all of the different versions of all the different packages I'm using. And then outside of that, what I'm going to do is start uploading those library files. We're going to add in all of the different components that we are going to be using. And then outside of that, we need to start adding in all the different pages and layouts. So this is where we're going to be adding in the majority of all of our files. As you can see, we'll go ahead and messed up real fast. I don't know why it dances on the screen whenever you're trying to click everything. There we go. Cool. We're adding in pretty, yeah, we pretty much just want to add in everything that is relevant to what we're building. And then finally that route page. I think we got it all. Fantastic. So let's go ahead and open that up and you'll see that we begin to use a lot more of our project knowledge base. But what's cool is because we've kept everything lean so far and just stubbed it out with to do's. We're not using up a bunch of our project knowledge base. So now it's time for us to start actually building out the first, you know, build out our landing page. And if we head over there right now, you can see this page looks just like this and you know, it's just not pretty. So what I'm going to do, we're going to head over here. I went ahead and typed it out. We're going to do two things. First, we're going to dump in that template, you know, like, Hey, uh, this, once again, this is coming from the template. We're going to just dump in the eventual, the template that's going to tell it like kind of provided instructions for like, Hey, we're going to start now stubbing out an individual file. And then at the end of it, I'm just going to start pasting in what I need help with right now. So the first thing I need is with a root page and that's just going to be our app.page.tsx. And it's very bland. And yeah, basically what we're gonna do, going to go ahead and run it and what it'll do because we've already uploaded everything about our project. It kind of knows exactly what we're liking to do. And what's cool is it's going to start building everything on the right hand side. And what you'll notice actually, if it does it properly, sometimes for specific pages, cloud will provide a preview for some reason. It's not doing it right now. I think cause it's still coding, but normally it'll have two buttons up here, a code and a preview. You just kind of get hit or miss depending on the types of functions it's generating. So sometimes if it's generating a HTML or just like JSX, it does a much better job of showing a preview. So you can actually see what you're building in like nice little components. So let's go ahead and copy and paste this and back over to our code, paste it in here. We're getting one install issue. If this ever happens to you, pretty much all you gotta do head down here. We'll just install it and it'll take a few seconds. Great. We run our project and take a few seconds to kick off. Life looks good. Now we'll refresh it. So as you can see, it's starting to like add more, but it didn't do a good job adding styles. And that's because we haven't added in tailwind really fast. So what I could do is like, I have all these colors. Basically it's not recognizing any of these tailwind colors. So we'll quickly get Claude to help us figure out why none of these styles are being added. So let's go ahead and work on that super fast. All right. So what I did is I went ahead and hopped over to Claude and just said, Hey, I don't think my styles are working in my global CSS. Can you please fix it? And then what you'll notice is it goes, Oh yeah, I'll fix it. And it looks like we were just missing all the tailwind directives. So what I can do, hop back over to our global styles, paste it in here, and then I can just restart our project super fast. And now whenever I head over, we have an awesome looking landing page. Isn't this pretty cool? You know, and each one of these will take you to different parts of the application. So if I click get started, it'll take us over here. Yeah. So all of this is just pretty freaking cool. So nice looking app. And let me just show you like the cycle that we're about to go on. So now that we have updated our global CSS and our page.tsx, here's what we're going to do next. Cause let's just imagine this took a lot more work than it did. Well, what we'll do is head back to a project and what we're going to do is add in our new page.content. So upload from device. So what we'll do is we updated this page and we updated our global CSS. Fantastic. So those are fixed up and I believe it, let's see globals. Yeah. So it replaced the old ones with the same, the same one. So what's cool now is we're just going to sit, repeat this for each one. So what we would do next is come back over here. We copy and paste our template for working on phase three at the very bottom. We would then say, all right, cool. Well, what's the next page that we want to work on? Well, in this case, I want to work on our project list. So I would just say, I want to work on the project page.tsx. You can paste in the code if you want. It already knows it, but sometimes it's nice to go ahead and add it in there. And what it'll do is like, if it doesn't know what we want to do, it will actually go ahead and ask us some questions. But what you can see now is like work on a piece of code, get it looking nice. Once it's nice, add it back into our knowledge base and just rinse and repeat. So you can kind of see this is looking nice now. Head back over here, copy, paste. We're missing a, yeah, we'll have to, you know, it's creating some new. So this is like the part where like, hey, you have to start actually developing. So you can see now it's like asking for some buttons and asking for a new project modal. So it looks like it created the project modal for us. So we would just come over here, copy and paste this, which is crazy because in the past, this would have taken us developers forever. But now we're just like, you know, really just control C, control V at the max. So let's paste this in here. Looks great. And you can start to see that we're going to need these UI components. And this is because we're using ShadCN. So if you didn't know, like, hey, I don't know what to do with this. You can ask, come back over here and say, what is, how can I create it or download or install it? And what it'll do is it'll go, oh, well, you're working with ShadCN when, and all we need to do is, yeah, you're working with ShadCN and we just need to add in all of these different, you know, different components. So, and this is the part that's so cool. It's like, make us incremental step, get blocked, ask a question to get clarity, follow the instructions, provide some feedback. And we're just going to keep repeating through this over and over and over again. So, yeah. So I hope you guys can see that like, this is actually fully like, this is the process to work way faster than you would have ever done on anything before. And you're going to be able to crank out projects 10 times faster. So I hope you guys are really appreciating this and like, this is hopefully going to help you 10X your output as a developer. And as a quick sneak peek, I just want to show you like, how I've used Claude on my own more advanced version of this project. So let me just show you a quick demo of what it looks like. All right, guys. So here's the project that I've been using Claude a ton to help me turn an idea into a real world full stack application that I'm eventually going to turn a course for you guys. So as you can see, comes in here, we have a landing page, super simple right now, but we have authentication using Clerk, like we talked about. And then you can see, we actually have like, a page that actually has our projects. So we have a side bar where you can like, toggle, make this bigger or smaller. Then we can actually like, look at our projects. As we look at our projects, we can come in here and you can see like, I've uploaded videos. And then eventually I have, you know, configurations for all the prompts. So like, everything that I just told you guys, I'm using to help me build this application out faster than I've ever been able to before. So I've been able to do probably most of this in like, four or five hours where in the past it would have taken like, you know, like a full week's worth to get it to where it's at right now. So I'm just going to keep using Claude to help me crank it out because eventually I don't have run or results working because that's where a lot of the logic's headed to next. But as you can see, this is pretty cool. I hope you guys are pumped and I'll keep you guys posted as I actually like, turn this project into a course. So excited to keep you posted on that. But that's a wrap for this video guys. I hope you enjoyed everything you just learned about using Claude and I can't wait to hear what cool projects you go off and build now that you've mastered everything we've talked about today. And just a quick reminder, I have a ton of other awesome AI related content right here on this channel. Everything from crew AI, deep dives, lane chain, masterclasses, full stack tutorials, everything. You're definitely want to check those out right afterwards and click one of the video pop-ups that come up. And I also have that free school community with over 2000 like-minded AI developers from beginners to experts. You'll definitely meet some cool people along the way. And we do free coaching calls every Tuesday. So click the link description below completely free to join and love to see you over there for more support. All right. See you guys. Hope you have a great one. Bye.