Transcription
All right. So, you don't know how to write a single line of code, but you see AI and you see AI being so fast and you look at people online building this that and you want to build something, but you have no idea where to start, what to do, blah blah blah blah blah.
So, in this video, I'm going to teach you exactly how you can build your first app and what if you want to build something and scale. This is going to be a very beginner level video, but it's going to give you everything that you need to build your dream app. I built this using Claude code and I help businesses grow by leveraging AI and Claude code has been my main tool for the past 5 months. So I know what I'm talking about. That said, let's get into it.
Number one, there are three ways you can use Claude. The first is the terminal. So we say open terminal. And if you don't know what this thing is, it's called VS Code. It's nothing but an IDE, like an app that helps you code. So what you should first do is I want you to go into VS Code. This is number one and we're not going to be using this. So you go on top and you say new terminal and then you just type Claude, right? And then say yes, I trust this folder. It'll come up. And if you haven't downloaded Claude code yet, I've left a link in the description below. Just read the document. It's literally in the beginning, the official Claude document. It's very easy. Download it and just put Claude. It'll be up.
But the way we are going to be using Claude is we're going to download the Claude extension. We're going to click on these blocks and just type Claude code here. It's the first result that comes up. I think it has over 6 million downloads or something. 8 million. My bad. Download this and you'll see this symbol on top. Click on that and you'll get this web chat interface type. And this is what we're going to be using to build our app. And I want you to look in the description below. I have linked this app building guide.
So here's why you should know how to use something like Claude code. You can use something like lovable, bolt, Firebase, I don't think that's there anymore. You can use all these to build apps. But if you learn to use Claude code, if you start with Claude code, you know how to build an app, whatever you want and scale it because the world's largest companies are literally using Claude code to build features and to push it out. There are so many nuances involved. But in this video, we are going to keep things very simple and beginner friendly.
That said, there's a new programming language. It's called human. And this was said by Jensen Huang, the CEO of Nvidia. I just see stuff, say stuff, run stuff, and copy paste stuff. And it mostly works. This is Andrej Karpathy. And he is the one who coined the term wipe coding. Highly regarded in the AI space. And as you can see, coding is not a problem anymore. Software development, building an app is not a problem anymore. And if you can't build an app and if you can't get the right results, it's purely a skill issue and it's not about the model. I'm going to show you what I'm talking about in a bit.
But wait, you don't just go run off now and type something like, "Hey, Claude, build me my tree map." Nope. The first thing and the maximum amount of time you should actually spend. I spend 90% of my time in planning and you should plan down to the tea or down to the minute details of what your app should look like, what it should do, what is the data coming in, how do you want the output, keep it as clear as possible, right? And if you don't know how to prompt, you can literally list every single requirement of yours. Every single thing literally the vision you have of your app. Describe it as vivid and in detail as possible and use something like Claude to make that into a proper prompt. And here are a few questions that you should ask before you get into the build. What does this app do? Who uses it? What are the key screens? What data does it handle? And what are the constraints? You can go above and beyond and essentially give all the instructions you can in the first prompt itself and be as clear and detailed as possible.
But for this video, we're going to be doing something really fun. We are going to be building a to-do list app on steroids. And I know this is a little bit pissing off, but trust me, this is done on purpose. You literally have to take each and every line and uh paste it here. But as you can see, I've given you an explanation of what each line does. And the second block is something that developers would call text stack. And this is nothing but your toolkit to essentially build an app. Let's say you're a plumber or an astronaut or a physicist. Anyway, let's say you're a plumber. In order for you to do your work, you will need a certain set of tools, right? So a text stack is like that but anything web development. So here we are going to be using React, TypeScript, Tailwind CSS, Vite. This will take care of hosting a website locally. This will take care of all the design elements, you know, the color, color buttons and the entire app will be built on something called React using TypeScript. These two in combination because it's scalable and it's slightly more secure than JavaScript. All this seems like gibberish, but the explanation is given below. Or if you don't know, use something like chat's voice mode to just go back and forth until you get everything crystal clear.
Now, we're just entering the prompt and you're going to see magic happen. Yeah, literal magic. But trust me, you have to spend your time in planning your app as detailed as possible. The more you plan, the less number of iterations you're going to do here. Simple as that. And as you can see, I already have something called a front-end design skill. If you don't know what skills are, I've made a video on that. Watch this video and you'll understand everything about skills. But skills in a nutshell is nothing but an SOP to Claude, a custom instruction to Claude. So now let's say I'm building front end, right? Front end is nothing but what you see visually. This is the front end. This is what I see because I've opened the website and I'm seeing this. But each thing you see here has a code behind. And you see if I hover over over the shop iPhone button, it has a glow, which means it will have a certain codebase behind this that's making it glow whenever I hover over it or when I click it takes me to this page, right? All I can see is the page. But the behind logic that takes me to this page once I click the button is called back end. What I see is called front end. So I prefer my front end to be in a certain way. So I'm going to describe how my front end should look, the colors, the fonts, how I want it to feel, etc. And that will be given in the form of a skill. And now Claude knows that okay, hey, for this app, I need a front end. And what does this individual want?
Anyways, let's wait for the build. Come back. We're going to be building a feature live. All right, here it is. First thoughts, very white, very simple, very clean. But this is our first output. Let's see. And here it's asking for a OpenWeatherMap API key. Shall we do this in this video? Why not? Well, an API key is nothing but an application programming interface. And what this does is it lets two apps talk. That's all you need to know. And so if I have a request, I'm going to send a request. Like if we both are talking and I need something from you, I'm just going to say hey can I please get this or can you please tell me about this? What will you think? Should he know about this? Does he have the permission to know about this? Right? And only if I know it be like oh yes it's him I can trust him. And boom he'll give it to me. And that's how you and I communicate. And if you want something you will send a request I'll see if you have ticked all the parameters and if I can actually give it to you I will give it to you. That is what read, write and different different permissions are. So that is API in the simplest form and as you can see top three where it is that is working properly. Quick notepad boom boom that's working and as you can see we asked for a quote good evening. Well, it's actually night, but uh Thomas Hobbes, the life of a man is solitary, poor, nasty, brutish, and short. Well, anyways, uh let's just ask uh Okay, let's let's ask her to make a few changes.
All right, I've seen the app and the first thing I have to say is it's very simple. So, what I want to do is I want you to add a lot of color to make it lively and make it usable. And the quote is very depressing. I want you to give happy quotes where if I just open the app, I'm just happy after reading the quote. And let's remove the weather thing for now. And also when I take off a priority, I want my app to throw a celebration for me with confetti, opening a champagne, etc. So here are the thing. This is not the right way to prompt. As you can see, I used "and" in the middle and I made a few changes, but um yeah, let's see what changes it gives us. And this is how you add features to your app. You just focus on one thing. Here, I purposely focus on multiple things to show what it does. But if you're actually building something that you want to scale and eventually give it to people and start making money from it, build one feature at a time. Be extremely descriptive about whatever feature you want and build it, test it, get it right. You know, obviously you have to test it in a sandbox to a lot of testing. Claude can do the testing as well. If you want to see an advanced course like that on how to take anything from start to scratch, sorry, from scratch to an absolute expert that can be a website or an app, leave it in the comments below and I'll bring that video next.
That said, let's see what changes Claude made for us. Well, voila. As you can see, Claude has implemented our changes and you can do whatever you want. If you want the app to look a certain way, if you want a certain vibe, if you want music to be playing in the background, you can do whatever you want. But these are the changes we gave, it's done. Let's see what it gave. As you can instantly see, it's way more inviting. It's way more pleasant. And definitely the quote is better. "The most uh wasted of days is one without laughter." Way better than "a man's life is miserable." And as you can see, the quick notepad has saved our previous entry, which is boom boom or whatever it is. This is good enough for a prototype as this is stored locally. Whatever you entered here was stored locally. But if you want to scale your app, you'll have to take a service like Supabase or you have to essentially link it up to Postgres and have a quick cache memory using a platform like Redis or whatever.
But now I want to test one main feature, a priority. Let's say filming a video, YouTube, right? We enter that and it's there. Right now, if you click the priority, there we go. The celebration. Now, this app was generated in a matter of minutes. Literally a matter of minutes. Now, think of the capabilities. What used to take weeks now takes hours. Well, if you know how to code. And what will take you days will take you one day at max. And here's what I propose most of you do. Learn while you build and learn how to use Claude in terminal because you can use something called slash, by the way, btw. So essentially you can ask it to go build and use that feature, the /btw to ask what's it building? What is the coding thing it's used? Explain the code and what's being done, blah blah blah blah blah. You can just build while you learn. That way, whatever you learn will stay in your mind. You'll retain the information and your next build will be better. That's it. If you want some other guide, leave a comment below and I'll bring it to you. No problem. And congrats on your first app. That's it. Thanks for watching. Catch you on the next one. Take care and peace.