# Build $10k Web Apps in Minutes Using Claude Code (Ultimate Guide)

Channel: Create a Pro Website
Video: https://www.youtube.com/watch?v=XU8jeLRERrE
Duration: 21 min
Language: English
Words: 4720
Transcript page: https://viewrankai.com/tools/youtube-transcript/XU8jeLRERrE

---

[0:00] Today I'm going to show you the ultimate starter guide for vibe coding your own web app. Simple web apps like this invoice generator here that lets you quickly generate an invoice and send it off to a client. This site's getting over 2 million visitors per month. And if you notice, there are ads all over this website. So with nearly 2 million visitors per month, that means that this simple web app could be generating the creator some decent monthly income. But here's the crazy part. A few years ago to build something like this, you would need to know a developer and pay a decent amount of money just to get

[0:29] something like this off the ground. But today, you can just describe what you want to Claude and it'll literally build everything for you and publish it live to the internet so you can start to use your very own custom web app within an afternoon. So that's what I'm going to show you in this video. I'll cover the best tools to use even if you're a total beginner. I'll show you how to set everything up and what you need to do to go from a blank session to a fully working web app. And then I'm going to show you how to publish this thing live to your very own custom domain name so

[0:55] that you can share it with anybody in the world. So if you're ready to get started, let's hop in. Okay, so the very first step when it comes to vibe coding is we need some sort of tool to actually do the vibe coding in. And today we're going to be using Claude Code inside of the desktop app. So if you just head on over here to claude.com/d download, this is where you can download the Claude desktop app. And to me, this is by far the easiest way to access the power of Cloud Code inside of a simple app without having to do any complicated stuff. So, just make sure

[1:25] you have the most recent version of Cloud Desktop installed on your computer here. And you're going to want to make sure you're signed up for at least their pro plan here for about $17 a month. This gives you full access to Cloud Code. And that's what we're going to be using to do all of our vibe coding. The more you start using cloud code and the more you begin to vibe code, you may find you want to upgrade to the max plan, which just gives you even more usage. But for now, you can absolutely

[1:48] get started on just the pro plan here. And this gives us everything we need to begin. So once you have Cloud Desktop downloaded and installed, just go ahead and go right up here to the top and click on this code tab. And here is where we're going to be doing all of our building today. Now, to get started with any new project inside of Claude, all we need to do is set up a new project folder so that we can store all the files that Claude's going to be building for us inside of that one folder and keeps things nice and organized and clean. So, right down here, right above

[2:16] the prompt bar, you'll see this little folder icon right here. Go ahead and just click on this and click on open folder. Now, here I've got a folder called Claude Code and this is where I keep all of my Cloud projects just in one nice place. And we can scroll on down. I've got another folder called apps and here I'm going to go ahead and create a new folder and I'm going to call this ré builder because that's the web app that I'm going to be building today. Now once you've created a folder for whatever project you're going to be building, go ahead and just select on

[2:45] that folder and click open. So now Claude's using this folder for this particular session. Now before we start talking to Claude and actually start the vibe code session here, we can move on to step two which is coming up with our idea. So what is it that we're going to actually be building today? It's important to have at least a clear idea in our mind so that we can at least tell Claude exactly what we want so that it can begin building and at least we're in the right ballpark to begin. So you either have some ideas now floating around in your head of tools or web apps

[3:10] that you want to be building or you need a little bit of inspiration. I find I usually get the best ideas for just things that I Google or I'm looking for on a regular basis that I just can't find out there or things that I'm already doing that maybe use multiple different apps together and I can potentially make an easier way of doing that or apps or tools that I may be paying for that I could absolutely be doing and using for free if I just made my own version of it. Usually, these web apps are going to solve just one specific problem or do just one specific

[3:38] task and make it incredibly easy for somebody so that they can just hop on, use the tool, and then go about their day. You can absolutely just ask Claude for some inspiration here and come up with some ideas. Things like age calculators or mortgage loan payoff calculators or potentially random name user password generators, image compressors, time zone converters, random decision picker, or wheel spinner. These are all cool ideas, but generally I like to back up my ideas with a little research. So today, we already decided that the invoice generator that we looked at earlier was a really popular idea and was getting a ton of search results. So I opened up

[4:14] Google Trends and I searched for invoice generator along with a few other search terms here and the results were pretty interesting. You can see this blue bar here. This is all of the search for the last 5 years of people searching for invoice generator. Now, if that one website alone was getting 2 million views per month and this blue line here is showing this low, look how high this red line is for ré builder. Clearly, a lot of people need résumés when it comes to searching for jobs. And in this day and age, a resume is kind of an outdated form. I think people use social media

[4:43] and have their portfolios online a lot more times than they have just an old outdated document for a resume builder. So, this gave me the idea to maybe make a really cool resume building web app. I know there are a ton that are already out there, but for today's example, I want to show you how I'd go about actually building something that's got a proven track record for a really high amount of search traffic every single month throughout the years. And this will be a perfect example of what we can build today. So, once you have your idea and you're ready to actually start building, all we have to do is go back

[5:11] to this project here, make sure we have our project folder selected inside of a new session, and we can just start talking to Claude. If we just select this little microphone right here, this is actually going to let us just talk directly to Claude and start to describe our idea for our web app. So, that's

[5:25] what I'm going to go ahead and do now. Hey, I'm looking to make a really cool web app for a resume builder. Something that creates a one-page visual and interactive kind of resume or portfolio incorporating all of my social media content, links to my real portfolio projects, media galleries, or client testimonials and reviews kind of all in one nice place. This is like all the things you would use to actually get hired in today's day and age. You know, contact information with live sharable links that can actually be sent to an employer or to a client. I want a few templates to choose from, but these

[5:57] should not be just your standard generic resumes. These should be like mini one-page portfolio websites that can show off your personality and your experience altogether. The page can be customized with personal Loom videos or a cover letter introduction for each public link that is created so that it can be customized for each experience for the different employers you may be sending this to. If you need to create any accounts or need any access to anything, just let me know along the

[6:23] way. Okay. Now, if you couldn't tell, I have a little bit of a plan here going into things, but for this, I was just thinking, what would be the coolest use case when it comes to a resume builder? What would I want to see in a rum builder, right? And so I just tried to include everything that I could think of. I want to be able to show off all these things in one place. And then at the very end here, this is a really important sentence. I said, "If you need to create any accounts or you need any access to anything, just let me know

[6:48] along the way." Right? So this will now basically go through and do everything it needs to start building out this tool or something along these lines. And if it needs any permission or it needs me to create stuff, it'll actually let me know along the way. Now, before I actually click enter here, I'm going to go down here to where it says accept edits. And I'm going to turn this on to bypass permissions. And when you turn this on now, basically Claude can go through and do all of its building without having to go back and ask for permission all the time. Now, the other thing to keep in mind is what model

[7:16] we're going to be using. So, if you click right here, you can actually choose the different models. If you are on the pro plan, the $17 a month plan, Opus 5 is going to be your best model for the strongest use without getting to get too expensive or start to actually move into that max realm. If you're on the max plan, you have access to Fable 5.1. But if you don't have the max plan, you're going to want to conserve those costs of using Fable and instead stick with just using Opus 5. This will let you just use the credits included in your account without having to spend any

[7:48] extra to use Fable. For this example, I'm going to go ahead and use Fable. I'm on the Max plan. And this way, I can show you exactly what Fable's able to do. But both of these models are incredibly powerful and will get you some really, really cool results. So, let's go ahead and just click enter here and let it start building. Now, this first build usually takes about 10 or 15 minutes. And it might ask a couple questions along the way depending on what you're building. These are simple questions, usually just asking what options you want or anything that it might need permissions for along the

[8:16] way. But at this point, we're just going to let this go ahead and build. And we can actually go ahead and move ourselves into our next step, which is going to be getting ourselves a hosting plan and your custom domain setup. This way, as soon as this web app is built, we can have it published live and online, all within just a few seconds. So, in order to have any of your projects that you've built using Cloud or any web app that's actually functional to be functional online and actually be usable with a real link that's custom to whatever you want it to be, that's where we're going

[8:44] to need our own hosting plan. And my favorite option for this is called Hostinger. So, if you click on the very first link that's down in the description of this video, you'll be brought to a page that looks like this. And this is our special co-branded landing page here with Hostinger, which will give you the absolute biggest savings on our hosting plan, plus your own custom domain free for one year. So, all you have to do is just click on this

[9:04] button right here that says get a plan. And that'll bring you right down here to select your plan. And there's basically only one plan here. And that's the unlimited plan here. For about $359 per month, you can get started hosting your website. And the cool thing is we have a coupon code here that'll give you an even bigger savings. So, this gets you unlimited websites. It gets you that one-year free domain name. It also gives you access to build any type of website that you could possibly imagine or any type of web app that you would want to have hosted online. All can be hosted under this one plan. So, we can just go

[9:33] ahead and click choose plan right here. And here we can select how long we want to have our hosting for. So, by default, it's going to say 48 months, which is going to give you the absolute biggest savings. But if you don't want to lock in for 48 months right off the bat, we can switch down to something smaller like 12 months. So, with 12 months selected, you can see I'm still getting my free one-year domain name, which is perfect. So, now I have my hosting for one year and my domain hosted online for one year as well. And if we go over here, we can see the total price for the

[10:01] entire year here. And it's even applied our Creator Pro website coupon code for that additional 10% off. So, we're looking at the entire year of having your website online with your custom domain for about 53 bucks, which is awesome. So, let's go ahead and click on continue. Now, here it's just going to ask you to go ahead and create your hostinger account. And this is how you'll be able to log in and access all of your hosting information for your custom domain name and everything. So, you can either do that with Google or using your email address here or if you already have an account, you can just

[10:30] click on login. All right. Now, on this page, it's just going to ask you to enter in your billing information and select a payment method and go ahead and just click on submit payment. And congratulations, your journey begins now. That means you're all signed up for hosting. All right. All right. Now, as soon as you've selected and finished paying for your hosting plan, you should be brought to a page like this, which is the startup guide for getting your website set up. So, in this instance, you're going to go ahead and just click on migrate an existing site since we're

[10:58] building this all using Claude. Now, when you get here, we're going to have a couple options, and we're going to choose on upload your website files and we'll click next. And don't worry, we won't actually be doing any uploading ourselves. Claude is going to handle all of that for us when we get to that step. Now, here is where we can actually choose our own custom domain name. And you can see we have one free domain available right now since we just signed up for that hosting plan. This is that

[11:24] free domain that it's going to give you. So, down here on this bar, we can just search for whatever domain you'd like and see what's available. All right. So, for this example, I just searched for ré forme.com, which is a pretty cool name actually, and surprisingly, it's available. So once you find a domain name that's actually available, you'll see right here it says free and you don't have to pay anything for the first year. So let's go ahead and claim this

[11:46] one here and click next. And here just go ahead and confirm your information so you can register your domain name. Cool. And it says your domain name has been added to your site. Let's click on continue. All right. So now Hostinger is going through and actually setting up all of the backend and getting your server space set up. So, give this just a second here. All right, cool. Now, once we get to this page right here that says, "Go ahead and upload your website backup files." This is where we're going to let Claude take control and do all of the hard work, right? So, we can

[12:16] actually go ahead and close out of this whole entire setup process. We've done everything we need to do here. Let's go up here to where it says Hostinger and just click on the logo. And we'll click leave. This will bring you here back to your Hostinger dashboard. And here's where you can find all the information for your newly purchased hosting plan or your domain name or any professional emails that you want to set up. All of that can be found right here inside of your Hostinger dashboard. But there is one more thing that we need in order for

[12:41] Claude to take control using Hostinger. So, in order for Claude to be able to actually control everything and do all of the publishing to Hostinger for us, we just need to install the Hostinger connector inside of Claude. And it's really easy to do. Let's pop back over here to Claude. And as you can see, it's

[12:56] been building now for about 13 minutes. and it's done a lot of work. So, it's probably just about done here. But before it finishes up, let's go ahead and install this connector. Over here under the customize tab, you can click on this tab that says connectors. And right here where it says search connectors, let's just search for Hostinger. Cool. And you can see this one right here that's called the Hostinger connector. Click on that and we'll click connect to cloud. Now, whenever you click on that, it's going to go ahead and open up your web browser again and it's going to say, do you want to finish connecting a connector? Go

[13:26] ahead and just click on this button right here that says continue connecting. And since we're logged into your hosting your account already, it's already seeing that this is the account we want to use. And we'll just go ahead and give it access by clicking allow. All right. And just like that, it brought us right back here into the cloud desktop app. And you can see now

[13:42] our Hostinger connector is connected. And that means it's connected to our account. So if we go back here to connectors, we can go over to this little tab that says yours. And here's a list of everything that you've ever connected to your cloud account. And we can see your hosting or connector is right here. So perfect. Now if you go to your recent tab right here, we should be

[14:01] able to click on the most recent one. And here's our session here of our actual build. So that's it. Now we have your own hosting plan. You have your custom domain name and it's connected here to clog. So now that that's all set up, as soon as our web app is done being built, we can easily just push this thing live and online within just one simple command. Awesome. All right, it's come back and we are done with a first version of the build. So, we can go up here and kind of take a look at some of the work that it's done. It's given us a

[14:30] couple screenshots here of some of these options for these resumeé templates. But, if we want to actually view the real website, we can actually go over here to the top right corner where there's this little browser or this little globe icon. And if you click on that, this opens up the browser. And this is our actual website here. So, it looks like it's calling it Folio. Let's go ahead and open up full screen by

[14:50] clicking this little arrow. So, awesome. This is like a little homepage here. Basically just saying a onepage portfolio that you can personalize for every employer. You can see there's a couple different templates here and just basically a couple of features as far as like what this thing can do for us, right? But if we click on build yours for free, this actually opens up the actual web app, which is awesome that it thought to even build out a homepage and everything for us, right? So now we just got to go through and kind of play around with this and see if we like our web app, right? So, it looks like we

[15:18] have our overview. We can create a new personalized link if we're wanting to send out a link to somebody. We can actually click on this. This looks like this is the demo portfolio that it built for us. So, we can put in all of our social media links here. We can include some different keywords or different skills potentially or like apps or softwares, different things that you're actually skilled in and have experience in. Can have some projects linked here when you can actually view the actual link to the real project, which is great. This is kind of like a live portfolio here. Going to have our

[15:48] experiences, some real testimonials, all the stuff that I asked for. Here's a little gallery of some social media stuff. So, some YouTube content, maybe some images and other video stuff, and then just a basic call to action. Let's like work together, right? Let's get a email address or a call going. This would be really awesome to send to an employer or a future client if you're about to get some work done as opposed

[16:11] to an old stuffy style resume, right? So, let's go back here real quick. So, under profile and socials, looks like here's where we can customize all that information. We can upload our photos. We can enter in our contact and all of our social information here. Sweet. Makes this really, really easy for people to go through and just kind of fill this out one tab at a time. Here's our experience. Now, obviously, every single tool that you're building is going to be different than what I built here, but this is just really cool because it basically got everything that I wanted included all in one shot, right? Here's a media gallery of being

[16:41] able to add any type of content we want. And we can just quickly add stuff if we want to add some testimonials. Looks like we have a couple sample ones already in there. Or we can just add a new one right down here at any time. We can control the design. So here's where we adjust the actual uh template or our main kind of vibe. And these are those different templates that I saw kind of previewed inside of the chat window. But here we can actually adjust all the

[17:03] colors. This is really cool. And we can go between a light mode or a dark mode. We can open the full size here. Oh, this is a really cool one. Much more modern looking. Much more kind of creative. Definitely better off for a creative type of role. So, yeah. I mean, this is just a really, really cool tool. Um, and again, if I wanted to maybe tweak this and say, I want this a little differently, uh, you know, we could absolutely go back and forth. I could just say, you know, I don't really like this, or I'm liking this, but let's go a different direction. Um, this is all now

[17:39] fully customizable to our liking. So, we would just go back and forth with claude until we have a version that's running and working here locally inside. But that's the biggest thing, right, is this is local. So, this this tab here or this actual URL you can see is open up here on localhost. And this actually wouldn't load if you were to type this into your real web browser, right? So, that's where Hostinger comes into play. And since we already have that connected with our connector and we already have our hosting plan purchased now, we can literally just one prompt away tell this thing to make this thing live and

[18:09] online. So we can go ahead and move into that step of actually publishing our website now. So I'm going to go ahead and close down the browser for a second. And because we just installed that connector while this was building and actually doing work in the background, we haven't had a chance to refresh Claude. Basically, anytime you install a new connector, it's good to just close Claude for a second and then reopen it back up to make sure that that connector is all working correctly. So, let's go ahead and just do that really quick. I'm going to close since we're not building

[18:36] right now. Nothing is actually loading. We're just at a nice pause state. Let's go ahead and close this out. And I'm going to open it right back up. Now, if we go back to our recent tab here, can open back up our website. Now, we can basically tell this thing, hey, I'm ready to deploy my website. So, let's do

[18:51] that. Okay, I'm ready to publish this website using the Hostinger connector to my domain name. Here, I'm just going to go ahead and type that out, which was ré4me.com. So, that's all we need to do is just literally tell it, let's publish this website using Hostinger, and give it the domain name that we purchased, and we'll click enter. So, Claude's going to go through and find your Hostinger account, find that custom domain that's tied to your hosting plan, and actually push this website live to that domain name, all for us. All right, sweet. It's showing that it is live at réumé forme.com. So, we can click up here to

[19:26] our browser. We can actually click on this and it'll bring it right here inside the browser. Or we can go ahead and just open this up inside of our actual web browser. And just like that, our website is live to our actual custom domain name. And here we can see our homepage. And now you can

[19:42] actually start sharing this with people. And you can see it's actually telling me go ahead and make an actual account because now this is a real live thing. So, I'm going to actually have to create an account and be able to use my own tool here. So, you can see it's got this cool onboarding process for me. So, I can select this template and start filling

[20:00] out all of my information here.

[20:22] So, just like that, your web app is now live and online and ready for people to actually start using today. And if you haven't got started yet, remember to use that first link down in the description to make sure you get the biggest saving on your hosting plan. And I'll see you in the next video.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt