WEBVTT 00:00:00.000 --> 00:00:02.640 I found this app that makes $800,000 00:00:02.640 --> 00:00:27.730 a month and I just built the entire thing without writing a single line of code. So this app is called Recipe and it basically lets you grab a recipe from any website or even a YouTube video and uses AI to organize everything into a clean collection of recipes. So in this video, I'm gonna show you a step by step in how to design and build this app using Cloud Code including all the features, how to add the AI functionality, 00:00:27.730 --> 00:01:11.645 and how to even test it live on your phone. And not only that, but I'm also gonna show you how they market the app because you can build this app, but you're not gonna make any money if you don't know how to get paying users. So I'm gonna show you what they did to market this app so you can see what's working for them and adapt it for your own app. And if you're beginner, don't worry. I didn't touch a single line of code building this app. I just basically had a conversation with Claude in plain English. So if you've used Claude or Chat2bt before, you'll definitely know how to do this. But before we start building, let me show you what this app does. So the core functionality of this app is basically very simple. So let's say you're watching a recipe on YouTube and you wanna save it. Normally, you'd have to manually dig through the description here and copy everything manually or if it's not here, if it's on a site, 00:01:12.045 --> 00:02:09.640 you have to click here and you have to copy and paste everything. It's very manual and then you're probably gonna dump it in your notes app and it will get very messy and very hard to manage once you have multiple recipes. But with this app, you just paste in the link and the AI pulls everything out and puts it into a clean recipe card with all the details right there. Or you can also scan a physical recipe like this. Maybe you have an old recipe that you wanna bring into the app. You can just take a photo and you can have the AI reads it and format it in the same way. And because the app is AI powered, it can also give you an estimate of the calories which is a really nice feature to have. There's actually another app called CalAI that does something similar. You take a photo of your food and it counts the calories and and this app is making millions of dollars. So there's clearly a demand for this kind of thing. And speaking of demand, the app that we're building today is ReciMi. So this is a validated idea and people actually wanna use this tool. And by the way, there are two things that makes an app like this very attractive to me. First, recurring revenue, obviously $800,000 00:02:08.865 --> 00:02:17.265 every single month. And secondly, it is quite sticky because once you sign up, they make it hard for you to leave. Right? Because imagine if you build a collection of twenty, 00:02:17.505 --> 00:02:39.855 thirty recipes, if you cancel, you lose everything. And that layer of stickiness helps reduce churn. And there's also a huge potential for a good exit here. Apps like this typically sell for two to four times its annual profit, so you can check this data on acquire.com or Flippa or even Trust MRR. And just to give you guys a rough estimate, let's say this app makes 50% margin, so that is $400,000 00:02:39.855 --> 00:02:43.455 a month times twelve months, that is $4,800,000 00:02:43.455 --> 00:02:51.550 a year in profit, which means that even with a low multiple of two x, you could potentially sell this for at least $9,600,000, 00:02:51.710 --> 00:03:02.715 which is pretty sweet. Now there are already some players in the market which is actually a good sign in my opinion. It just means that there's really strong demand for this and all you need to do is build a version of this that is unique. 00:03:02.875 --> 00:03:15.400 And I think one idea is that maybe you can target a specific demographic, like maybe target a particular country, which is exactly what this app is doing. This app is called Cookpad. It was created for the Japanese market and they're actually making $900,000 00:03:15.400 --> 00:03:30.875 a month. And this just proves to me that narrowing down or niching down does not mean you're gonna make less because you may potentially do better because there are particular things that different cultures value that maybe we don't. So if you build around those things, your app is gonna feel more personalized to that demographic. 00:03:30.875 --> 00:03:39.115 So there are a lot of ways to position your app. But just to be clear, the goal of this video today is not to tell you to clone this app and expect to make $800,000 00:03:39.115 --> 00:04:13.135 a month. But I just wanna show you what's possible today with building mobile apps, the workflow behind building something like this, and also how to market it. And this knowledge will apply to whatever app that you end up building. Now I'm gonna show you the full setup, but feel free to jump around if you're already familiar with some of these things. I'll have time stamps in the video to make it easier. Now to build this app, we're gonna use two main tools. Alright? So first is Claw Design. So we're gonna use this to design the user interface, which is basically what you see in terms of design and the buttons, the colors, and all of these things. Right? And the second tool here is Cloud Code, which is what we're gonna use to build the back end functionality 00:04:13.215 --> 00:04:17.020 of the app, and I'm gonna show you how to connect these tools together 00:04:17.180 --> 00:04:43.370 seamlessly. Now if you're using Codex, you can also follow along. It works the same way. I think that the Codex desktop app is very similar to Cloud Code. So if you're using Codex already, the workflow is gonna be identical. Now for the framework, we're gonna be using React Native. So if you're not technical, think of this like the building materials for mobile apps. Right? It's what makes all the buttons work, how the pages swipe, and all these things. And the main reason that we're using React Native is that it works both on iPhone 00:04:43.690 --> 00:04:46.650 and Android. So we're actually building for both platforms 00:04:46.730 --> 00:05:32.935 on a single code base. And we're also gonna use Expo Go. So this is the tool that we're gonna use to be able to preview and test the app on our actual phones. Now at the end of video, I'll also cover what you need to check before submitting your app to the App Store because there's a lot of bycoded apps that are getting rejected recently. So I put together a checklist here for you to cross check, and I'll show you where to grab this towards the end of the video. Alright. So let's start building. First, you wanna download Claude code. So if you haven't already, you can go to Claude and download the desktop app. And by the way, you're gonna need at least the $20 subscription to get this started. And if you're here for the first time, you will see three different tabs here. You got chat. This is where ask questions and it will give you an answer. And then you have co work and code, which is basically the same thing, but I prefer code because 00:05:33.015 --> 00:06:00.065 it's more capable. And I think if you are serious about building things, I do recommend using Cloud Code instead of co work. And, yes, I know the word code may sound intimidating for some people, but we're not gonna be working in the terminal today. So we're gonna use the desktop app which is very user friendly. So if you know how to click buttons and you know how to prompt in plain English, this is gonna be pretty easy. Now before you start prompting, you wanna make sure that you're working in a folder. So I like to keep things organized. So for every project, I like to work in a specific folder. 00:06:00.305 --> 00:07:10.310 So here you can see that I have called this project recipe snap. If you click here, you can change the folder. So you'll see here that I've already connected it to recipe snap folder here with some images for reference. But if you're doing this for the first time, obviously, you just wanna create new folder here and just connect to it and hit open. Now for the AI model, I like to use Opus 4.7 when I'm planning the app, when I'm structuring the app because I want the smartest model to be able to think through all the functionality behind the app. But once that's done, when I start building the app, I like to switch to Sonoff 4.6 because it's faster and it uses a lot fewer tokens. So if you are on the $20 plan, you wanna conserve tokens, This is something that you wanna be aware of, but obviously if you're on the max plan, don't need to worry about this. Now before I start building any type of app, I like to always plan out the features and the structure of the app because you wanna give Claude some type of guidance in what to build, the features that you want. Otherwise, you're gonna build something that you don't like and you're gonna have to keep regenerating and waste a lot of tokens. So what I'll do now is actually go back to this app store page for Resume and grab the URL and paste it in here and just say that I wanna build an iOS app like Resume, suggest all the features that I should have. 00:07:11.430 --> 00:07:30.165 And then hit enter and then it's going to study this page and do some research and it's gonna give you some features that it thinks that you should implement. Alright. So it's giving me a lot of features now. It's writing. So you got the universal recipe import, so that is the primary function of this app, manual entry, you got a library, cook mode, 00:07:30.485 --> 00:07:44.110 a built in timer, shopping list. Right? All of these are primary functions of the recipe app, and you can just pick and choose which one you want and then we're gonna start designing the app. So I'll just prompt it again. I wanna implement features 00:07:44.350 --> 00:07:58.395 one through eight and I'll be using another tool to design the UI first. So give me a breakdown of all the pages and features in detail, format it so I can just copy and paste. Once the UI is built, I will be bringing it back here for you to build the back end. 00:07:59.435 --> 00:08:00.795 And you wanna hit enter 00:08:01.115 --> 00:08:23.615 and it's gonna compile everything and just grab the first eight features and it's gonna format it in a way that's easy for you to copy and paste because we wanna bring this over to Clot Design to design the front end of the app. So once it's done, you can just copy and paste the whole thing and you wanna bring this over to Clot Design. Now to access Clot Design, you have to go back to your browser and you wanna just type in claw.ai. 00:08:23.695 --> 00:08:27.855 And over on the left side, you're gonna see something called design here. So click on this one 00:08:28.335 --> 00:08:54.315 and you're gonna land on this page which is Claw Design. Right? Now the main reason why we wanna use Claw Design instead of designing directly on Cloud Code is that I think that Cloud Design is the best for designing any type of app or landing page by far. Now I spent a lot of time on this. When I'm designing directly on Cloud Code, it usually doesn't give me what I want. It is messy even though I have the front end design skills installed. 00:08:54.395 --> 00:09:06.155 It's still giving me maybe 50% there. So there's a lot of tweaks and a lot of reference that I have to feed it to even get it to 50%. But when I'm using Cloud Design, it usually gets you to about 95% 00:09:06.270 --> 00:09:20.510 and you'll see why in a second, but that's the main reason why I use Cloud Design. And then from here, you can easily bring this over to Cloud Code to build the back end functionality of it. Alright. So once you're here, you just enter a project name. So you can put something like RecipeSnap 00:09:21.725 --> 00:09:22.525 app 00:09:22.685 --> 00:09:25.405 and you wanna choose high fidelity and just 00:09:25.805 --> 00:09:56.775 hit create. And then you wanna just paste the prompt that you got from Cloud Code. So I'm gonna paste it here and you'll see that it's pasted 205 lines. It's the exact prompt that I got from Cloud Code. So if you wanna see the actual prompt, this is what it looks like. Design a polish iOS mobile app called Recipe Snap inspired by app like Recipe. Right? So it's got the pages and the screens that I want. So it's very detailed, gives Cloud a lot of guidance in what I want. And it's got all these different screens, 00:09:57.015 --> 00:10:12.510 even the buttons that I want implemented. There's a search bar here, a shopping list screen, and also a paywall, and and everything is here and Cloud Code came up with all of these without me having to do anything. So my job now is just to go through all of these and see if I'm happy with everything, 00:10:12.910 --> 00:10:21.625 and then I'll put it into Cloud Design. Now there's one more thing that I like to always do before I send it off. Like I to find a design reference 00:10:21.705 --> 00:11:03.440 and I like to go to Pinterest for this. So if you go to Pinterest, you can search by recipe app. And what we're doing here is we wanna find a design that we like so the output is gonna be as close as possible to what we want. Right? So I found this one that I really like. I think it's pretty clean. It's got this green that I think looks really fresh and I do like the way the buttons look and how the different colors come together. And what I wanna do now is just save this image and just save this in that folder that we're working in and hit save and then go back to Claw Design, add a screenshot, and this is the screenshot that I wanna attach and I'll just hit open here and it's in here. So I've got the prompt here and I've got the screenshot. 00:11:03.520 --> 00:11:30.320 It's ready to go. So I'm gonna hit send and this will usually take about four to five minutes. So I'll come back when this is ready. Alright. So it looks like it is done. So it created all the pages here. You will see that these are all the assets that it created, all the design files, and here is the page that you wanna click on. Click on this one, open a new tab, and there you go. That's the app. So it actually followed the design reference that I gave it from the screenshot and also looks like this is the dashboard 00:11:30.480 --> 00:11:36.800 where I can just scan a photo. And if I click on get started here, there you go. This is the collection 00:11:37.120 --> 00:11:53.095 page. And you see we've got four different tabs here, home, library, shopping, settings. And if I click on one of the recipes here, let's see if this works. Yeah. It works. So it has a photo. It has the prep time, cook time, cook mode. This is a dummy data, obviously, but all of these are clickable. Right? So I can 00:11:53.655 --> 00:11:57.690 check it off and I can even edit it apparently. So edit recipe 00:11:57.770 --> 00:12:13.805 and I can add more text here. Yep. There you go. And I don't think this will save changes. It's just dummy. Yeah. It doesn't save the changes. But this is really, really good from just one prompt. So let me go back to the main page and let's see what I can see here, recipe, 00:12:13.965 --> 00:12:19.565 and let's click on library. So I can see all the meal types here. It's already categorized 00:12:19.565 --> 00:12:20.285 nicely. 00:12:20.525 --> 00:12:21.565 And if I go to shopping, 00:12:22.340 --> 00:12:30.740 it creates a shopping list for me. So this is exactly like what a recipe has and I can add items manually. Let's say I wanna add a white 00:12:30.740 --> 00:12:31.460 pepper. 00:12:32.740 --> 00:12:35.300 Yep. There you go. So I can probably 00:12:35.795 --> 00:12:44.355 add the the category here but that's something that's easy to add as well. And settings. So settings, I can choose the measurement units. 00:12:45.155 --> 00:12:47.475 I want dark mode. Maybe that doesn't work yet. 00:12:47.955 --> 00:12:59.780 Upgrade to pro. Yep. So that is the the the paywall. Yeah. So I like it. Now the nice thing about slot design is that it automatically gives you tweaks. So tweaks is basically some options that you get immediately 00:12:59.860 --> 00:13:16.935 if you wanna preview your app in different colors. Right? So right now it's Sage. So if I click rust, it's gonna change everything into rust. Right? So it changed the colors globally. So in every page, it followed that color theme. And if I go to ocean, it gives you this nice teal 00:13:17.415 --> 00:13:18.935 blue color or plum 00:13:19.950 --> 00:13:41.585 and it carries over to all the pages here which is really nice. But for me personally, I think I like the sage is what the reference design looks like. And obviously, if you want to make more changes, let's say you want to move a button here to somewhere else, you can just do a markup and you can just click on this one and can move this under the scan recipe 00:13:41.665 --> 00:13:46.065 button maybe. So send to Claude and then it will 00:13:46.385 --> 00:13:47.585 make that change 00:13:48.250 --> 00:14:20.190 And there you go. Done. Scan recipe is now the primary dark card at the top and they just swapped it for you. Now I think at this point, we're ready to bring this design over to Cloud Code to start building the back end. Now keep in mind that even after you bring this over to Cloud Code, you can still make changes to the design. So let's say you want this to be a button instead of a text, you can do that as well. But the reason why we're using Cloud Design for this is to get all of these design elements nicely positioned, nicely colored like this. Because because if you were to do this directly in Cloud Code, you usually won't have the shadowing 00:14:20.190 --> 00:14:23.390 and you won't have these nice buttons, 00:14:23.550 --> 00:14:49.170 especially if you don't give it enough reference. Now once you're ready to bring this over to Cloud Code, you can click share here and there's a couple of options to do this. Right? So you can download this file as a zip file or you can click on hand off to Cloud Code. But today, I wanna download this project as zip so I can save it to the folder so I can click on here. And here is the zip file that I downloaded and I wanna just unzip it and I'll just rename the folder recipe snap design. 00:14:49.330 --> 00:14:51.090 And I'm just gonna delete 00:14:51.330 --> 00:16:39.075 the zip file here. So you will see that all these files here are exactly the design files that it created for you. Quick break from our sponsor, Kittle. The design tool that I've been using quite a lot lately. So the biggest difference with Kittle is that whatever design that you wanna create, you don't have to start from scratch. They give you a bunch of examples and templates because that is the problem when I'm designing. I always get stuck on the idea. But with kiddo, they basically have templates for any type of product that you wanna promote. Images, posters, and even UGC videos which is really powerful now for marketing your product or your app. So if I find something that I like, for example, this woman here eating a cookie, so I just click on it and this is completely AI generated by the way. This was made using the Cdance two point o model inside of Kitto and the AI has gotten so good that it's not only holding a product anymore but it's now eating food and I think it looks flawless. And what if I told you that this was actually created by just uploading two very basic images? And I'm gonna show you how to do that if you click on use template here, you'll see exactly how this video was created, what images were used and in this case, it's these two images here which is the brand logo and the cookie itself. And it uses the latest nano banana to take these two images and create a product shot like this. And with that product shot, you can animate it into a video like this. So if you click on this video here, you can even see the exact prompt that was used. Create the video, so you'd have to figure out the prompt and you can even see the model that's being used here. So all you need to do is just copy this prompt and adapt it to your product. And you also get this nice wireframe which allows you to have more control over what the AI will do scene after scene. So this is one of my favorite features. So as you can imagine with Kittle, you can create a huge volume of content very very quickly especially with the help of these ready made templates so you spend less time figuring out the AI but actually producing 00:16:39.155 --> 00:17:00.305 results. And on top of the AI features, Kittle is actually a full design platform where you can create banners, posters, and even Instagram posts and stories. So you can literally do anything design related all in one place. So if you wanna give Kittle a try, I'm gonna put the link down below where you can start creating some designs. They've got a free trial here. But when you're to upgrade, use my code jason at checkout and you're gonna get 25% 00:17:00.305 --> 00:17:13.520 of their pro or expert plans. So thanks again Kittle for sponsoring this video. Now back to Claude. Alright. So now I'm back to Claude and I'm just gonna copy and paste this prompt here. I've added the design files in a folder called recipe snap design, 00:17:13.760 --> 00:17:16.400 built this app from my design file 00:17:16.640 --> 00:17:37.000 using expo react native with typescript for the mobile app, and used local device storage for safe data, a and small Node. Js express back end for AI functionality so API keys stay off the phone. So you wanna do that to make sure that your API keys are not exposed. The app should run on my real iPhone through Expo Go. Use Open AI API for recipe extraction. 00:17:37.160 --> 00:17:58.875 Please inspect the existing design first, then wire up the functionality based on the design and write on my local machine for preview. Now for this, I'll just use Sonnet 4.6 because it's not a complicated app. Unless I run to some issues, then I'll switch back to Opus and I'll just go ahead and hit send and then wait for it to process. Now it's going to analyze all the design files that was created by Clawdesign 00:17:58.875 --> 00:18:01.275 and it's gonna give you the next steps. 00:18:01.835 --> 00:18:05.915 Alright. So looks like it's done. So it pulled up the preview here on the right side and 00:18:06.280 --> 00:18:21.135 it took about five, six minutes. It it was quite a lot of pages that it had to build. So let's see if everything works. Right? So if you scroll down here and get started. Yep. So if I click on the recent recipe here yeah. So this looks like exactly 00:18:21.135 --> 00:18:26.495 what we had on Claw Design which is really good. Yep. I can check this off. 00:18:26.815 --> 00:18:35.440 So let's try if this cook mode works. So yeah. There you go. So so it gives you this nice format to look at when you are actually cooking. So next step 00:18:36.000 --> 00:18:38.400 yep. So all of this works correctly. 00:18:38.800 --> 00:18:42.400 And if I go to exit, okay. That works. Edit recipe 00:18:42.720 --> 00:18:46.560 and let's see if this will actually take in the changes. 00:18:46.720 --> 00:18:48.400 And if I go to save changes, 00:18:49.195 --> 00:18:51.355 not yet. So I can have that 00:18:51.595 --> 00:18:54.715 fixed as well. And if I click on add to shopping, 00:18:54.955 --> 00:19:03.500 so this is not working yet. So so I wanna see what is working and what is not. And if I go to shopping, 00:19:03.740 --> 00:19:15.340 does this work? Yep. It does work. So alright. So now let's say you wanna make changes. So what's nice about having this preview on the right side is that you can just annotate what you want and then tell Claude to 00:19:15.500 --> 00:19:25.295 change that specific thing. Right? You can just click on this pencil icon here and you can just circle and you can just click add to chat and then it will appear here 00:19:25.695 --> 00:19:27.215 and then you can just 00:19:27.695 --> 00:19:36.400 type in what you want. Right? Or you can also click on certain elements. So let's say I want this color to be green instead of orange, so I can click on this and it will select 00:19:36.720 --> 00:19:43.600 the exact UI element that I wanna change. Right? So I can change this to green. 00:19:44.000 --> 00:20:08.140 Hit enter and it will just change that very very quickly. And there you go. The progress bar is now green, matches the heading and primary color throughout the app. Now let's go back to the home page and I wanna see what happens if I click on scan recipe. So this is the place where you wanna take a photo the recipe. It does not work yet because we have not connected the API for this. But if I click on this, it will actually show you the animation, 00:20:08.460 --> 00:20:16.785 scanning image, extracting ingredients, and then creating the recipe. So that is the workflow here which is really nice. But before I connect the API, 00:20:17.025 --> 00:20:30.500 let's say you wanna add a feature. Right? You're at this point and you wanna add a feature. And maybe you don't know what feature to add. You can also ask Claude, hey, I wanna add some features to this app that is unique, that has a wow factor. Give me 10 ideas 00:20:30.660 --> 00:20:32.820 that I can implement for this app. 00:20:33.140 --> 00:20:40.900 And it's gonna go and give you a couple of ideas. Alright. So let's go through the list quickly. What's in my fridge, serving size scaler, recipe remix. 00:20:41.305 --> 00:20:55.340 Alright. So this is interesting, make it healthier because a lot of people are conscious about their calorie intake. So let's say you have this dish here and you wanna make it healthier, there's a button to click and then it just updates the ingredient list and it gives you a substitution. 00:20:55.500 --> 00:21:13.635 Maybe heavy cream becomes Greek yogurt. I think that's a great idea. Let's implement that one. So let's prompt it again. I wanna implement idea number five. I'm thinking about a button called make it healthier and when someone clicks on it, it will adjust the ingredients and make it healthier. So build this into the app and show me the preview 00:21:13.875 --> 00:21:18.035 and hit enter. And then I'm gonna let it cook and come back in a couple minutes. 00:21:18.195 --> 00:21:27.970 Alright. So it looks like that is done as well. So you can see the preview here, it added a new button called make it healthier. So let's give it a try. Click make it healthier, analyze the ingredients. 00:21:28.530 --> 00:21:34.370 There you go. So it gave you a couple of substitutions here. Spaghetti becomes whole grain spaghetti. Heavy cream becomes Greek yogurt. 00:21:35.025 --> 00:21:54.330 Awesome. That's really nice. And keep in mind that if I click tap to revert okay. So it goes back to the original. Keep in mind that this is just dummy data for preview only. So when you're actually launching the actual app, it's gonna also call the OpenAI API to perform this task. So you do need the API key for this to work. 00:21:54.650 --> 00:22:01.930 Now speaking of API keys, that's what we're gonna set up next. Now I know a lot of people, they are confused about what an API key is 00:22:02.345 --> 00:22:32.210 and why do we actually need this. So for example, when somebody snaps a photo of a recipe, let's say you have an old recipe on a piece of paper and you wanna take a photo with the app, the app will take that image and send it to OpenAI. Right? The AI looks at the photo, it reads all the text, and figures out what the ingredients are, what the steps are, and sends it back as structured data that this app can display in a nice clean recipe card like this. Right? And also the make it healthier option. Right? When you click on this, the app will call OpenAI 00:22:32.425 --> 00:22:51.640 and in the background, the AI will process the information and give you the output that you want. Now to get the API, you're gonna need some API credits. And this is not your normal ChatGPT subscription that you pay monthly. It is actually a pay as you go credit that you need to top up. But before I show you how to add some credits, I wanna show you the pricing 00:22:51.800 --> 00:22:57.480 for the AI model that we're gonna be using. And if you don't know which one to use, you can actually ask Claude 00:22:57.560 --> 00:23:20.250 to give you the best one for this purpose. And for our specific app that we're building today, we're gonna actually use g p t 5.4 mini. Now the amounts here might be confusing to you. Essentially, what we wanna know is how much it costs when a user takes a photo and extracts an image. Right? We wanna know the cost. So I asked Cloud Code to put that in perspective. So if a user extracts a recipe from an image, 00:23:20.490 --> 00:23:47.450 it will cost you half a cent here. And if they're doing a 100 image scans, it's gonna cost you 50ยข to a dollar, and a thousand image scans is $5 to $10. So it's very, very cheap. I don't think most people are gonna do thousands of scans every single month. They may do a 100 maybe in the first month, and even that, the cost is only gonna be a dollar. And if you charge $10, that's 90% margins. And in the subsequent months, they're not probably gonna use up a 100 scans 00:23:47.450 --> 00:24:05.735 every single month. Also, in mind that the more scans that they do is actually better for you because they get more invested into your app. Again, imagine if you already have a thousand recipes in the app. It makes it hard to leave. Right? Now to get the API key is also very easy. You wanna you wanna go to platform.openai.com 00:24:05.735 --> 00:24:26.205 and you just want to add some credits. I have about $4 here. And this API runs on a pay as you go credit system, so you add money to account. So let's say you add $10 or $20, it draws down from that balance every time the app makes a call to OpenAI. And once you top up your balance, you can just go to API keys here and you can create a new secret key 00:24:26.365 --> 00:24:29.245 and you can just call it recipe snap 00:24:29.485 --> 00:24:33.805 default project and create secret key. And then you can just copy 00:24:34.045 --> 00:25:03.025 the API key and bring it over to Claude. Now once you have the API key, you can give it to Claude, but you don't wanna just paste it here in the chat because if it gets leaked, anybody can access your keys and they'll just drain your account. So what you wanna do is you wanna save the API key in a file called a dot env file, which is an environment file. And for this, can also ask Claude to do it. You can say something like, hey, create a dot env file for me to paste in the API key and show me how to access that file. 00:25:03.505 --> 00:25:09.500 And then hit enter. Okay. So I can just close this off and then I can go here and click on files 00:25:09.820 --> 00:25:11.020 and under 00:25:11.260 --> 00:25:24.245 back end, right, it's in this location here and I can just click on this and then paste in my API key here. And I'm gonna hit save and close this off and say 00:25:24.565 --> 00:25:54.475 it's in. Alright. So it looks like it is loaded and back end is back up with your key loaded. Now the next step is to preview this app on your phone. Now in order to do that, you're gonna need to download something called ExpoGo. So this is something that you can download for free from the App Store. So go to your phone and look for this app in the App Store and go ahead and download it. Alright. Once you download the ExpoGo app, you want to ask for a QR code. So you can just use your phone's camera and scan it and it will load up the app automatically. 00:25:54.635 --> 00:26:07.580 Now normally you have to do this on a terminal but you can also ask it to give you the code here and it did that actually. So what you need to do is just to click on this one here and look for the PNG 00:26:07.740 --> 00:26:13.020 and you can just now grab your phone and just try to scan this and click on 00:26:13.420 --> 00:26:23.315 that. There you go. And the app is now loaded on your phone. So now I can browse through and see if everything is working correctly. So if I click on creamy garlic pasta here, you can see 00:26:23.715 --> 00:26:28.435 everything is loaded up nicely, and I can check any of these boxes here. 00:26:29.555 --> 00:26:31.075 Let's check the cook mode. 00:26:31.395 --> 00:26:37.100 Yep. So that works exactly like it did on Cloud Code. And if I go back to 00:26:37.580 --> 00:26:38.540 library, 00:26:38.940 --> 00:26:40.860 yeah, it's all here. Perfect. 00:26:41.100 --> 00:26:42.940 All the categorization works. 00:26:43.100 --> 00:26:52.225 Chopping works as well. And this is the green progress bar that we edited. Now I wanna test the primary function of this app which is to 00:26:52.385 --> 00:27:05.620 scan a recipe. Right? Because we connected the API key and I wanna see if that works. So I click on this one and I wanna take a photo here and and I found this recipe on Google that we can test this with. So I can just click on take photo here, 00:27:05.940 --> 00:27:12.260 and I will just put that in the frame and take a photo and see if that captures the information. Use photo, 00:27:12.580 --> 00:27:14.420 scanning image, extracting ingredients, 00:27:14.895 --> 00:27:20.175 green recipe card. Amazing. So that did it. So it took the messy 00:27:20.175 --> 00:27:37.270 handwriting here and turn it into a really nice recipe card and you can just hit save recipe here to bring it to your collection. And the only thing missing here is probably the image because this original recipe doesn't have one, but we can do as well is you can ask Cloud Code to automatically generate an image, 00:27:37.430 --> 00:28:03.960 like a random image so that it doesn't look black like Right? But that's very very easy to add. So I'll just hit save recipe and it's safe to elaborate. If I go back to the home page, yep, it's right there. So that's still missing the home page. Now the other thing that I wanna try is pasting a link from YouTube. So I'll just use this smash burger recipe again for example. So I can click on the share icon here and then hit copy link. So it'll grab the YouTube URL and put it into 00:28:04.200 --> 00:28:30.390 the app. But normally, what will be nice if your app will actually show up under the share here as one of the icons, but we're not able to test that because this is not a real app. It's on Expo Go. But if your app is published and it's installed on the phone, you can actually show up as one of the icons here and the user can just click on the app and it will automatically push the URL to the app. But for now we're gonna do it the manual way which is copy link, go back to the app and paste in recipe link 00:28:30.550 --> 00:28:35.125 and then I'm gonna hit paste here and then I'm gonna hit extract recipe. 00:28:35.365 --> 00:28:43.285 That is beautiful. So it took everything in including the instructions as well and actually gave you a reference here imported from certifiedangusbeef.com 00:28:43.285 --> 00:28:53.250 and it also pulled in an image as well. So obviously this is from a YouTube video but it was actually able to go to the YouTube description here and if I click on description, 00:28:53.330 --> 00:29:10.535 it has the ingredients here but the website is actually this one here. So it should pull in the image from this website here, which is pretty nice. So let me go back to the app, and then I'm going to save this as a recipe. And there's one more thing that I wanna check, which is the make it healthier option. So if I go back and the burger is here, 00:29:11.255 --> 00:29:15.230 and then let's say I wanna make this healthier, click on make it healthier, 00:29:15.550 --> 00:29:23.790 and now it's because your API is connected, it's gonna use AI to actually analyze this and make it healthier. There you go. So obviously, you can customize 00:29:24.105 --> 00:29:28.105 on how healthy you want this to be. You can code that into the system 00:29:28.585 --> 00:29:35.305 but I just wanna show you that something like this can be vibe coated easily with Cloud Code and it can be added easily. 00:29:35.465 --> 00:30:09.120 And I think the apps looks really really good considering that we just vibe coded this in just about ten fifteen minutes. Now let's say you're happy with the app, the next step is you wanna add a database. Right? A database simply means that you wanna have some place where the user can store their data. Right? So all the recipes, all the settings here, they have to go somewhere. That's where you'd need a database. So for database, you wanna use super base for this. It's a very common option for mobile apps, so Cloud Code will know how to connect this for you. And, also, secondly, you need a tool to take in payments to manage your subscriptions. For So this, we can use RevenueCat 00:30:09.120 --> 00:30:17.120 here. It's very popular and it's approved by Apple. Using something like this, it just makes it really easy for you to manage your user subscriptions 00:30:17.280 --> 00:30:53.325 and also very common, which means that Cloud Code knows how to integrate everything for you. And last but not least, you also need to get an Apple developer account. This will cost you about $99 a year, but with this subscription, you can publish as many apps as you want, so it's just one time for the year. Alright. So now you have built the app, the next important thing that you need to do is think about marketing. And I would argue that this is actually more important than building itself because anyone can now vibe code an app, but if you don't know how to get users, you're not gonna make any money. Now for an app like this, the best place you wanna start is by looking at how your competition is already getting users. The first place that I will look at is TikTok. 00:30:53.325 --> 00:30:55.085 Right? So if you search for resume 00:30:55.165 --> 00:31:13.370 on TikTok, you're gonna see that they have their own account and they're creating this type of UGC content and they're also paying influencers and also reposting those videos on their account. And for those of you who are not familiar, these are short videos where someone just shows a quick hack or a tip and at the end the app is the solution. Right? So you've seen these videos before. 00:31:13.610 --> 00:31:48.620 It's the I wish I knew this sooner kind of format and someone shows the problem and then shows the app solving it in like about ten seconds. It is super simple but very effective. Now I think if you're building an app like this, you have three options here. Right? The first is you can create your own TikTok account and you can start posting these videos yourself. You just post videos and if one of them goes viral, you get a flood of free users. Right? But the downside is it takes a lot of time and you gotta be consistent. Right? Now the second option is you can pay UGC creators to make these videos for you. So typically you'll pay a fixed fee to make the video and you pay something once and the video keeps bringing users 00:31:48.885 --> 00:31:53.045 long after you paid for it. Now the third way is using AI UGC. 00:31:53.045 --> 00:32:10.460 So you're actually using AI avatars to create these videos. So you can use tools like Arcats here to create these UGC videos with very realistic personas, or you can also use Higgs field which is a very popular option. And this is exactly what a lot of successful apps are doing right now where they create multiple TikTok accounts 00:32:10.780 --> 00:33:29.648 with different AI personas. They post a high volume of content, and when they see a video that goes viral, they'll take that video and put ads behind it. So you can see the marketing strategy for this type of app is actually very simple. You wanna create a lot of content, you find out what works, and then you wanna scale it with money. Now there's one last thing that you need to know before you publish your app to the app store because there's tons of issues recently with a lot of vibe coded apps that are getting banned from the app store. And it's not that Apple are banning vibe coded apps, but a lot of these vibe coded apps are missing a lot of security layers and they're not reliable, so I've actually compiled a list of things to look out for before you publish your app. So I've done the research here and I've got about 18 items here that you wanna look out for, and make sure you have all of these checked off before you submit it to the App Store. Now if you wanna grab this checklist, I'm gonna provide that in the description and you can even copy and paste all of this information into Cloud Code and ask it to go through the list and make sure that your app covers everything. Alright. So I hope you guys get value out of this video. And by the way, tell me in the comments what you want me to build or what video you want me to create, or what are you struggling with so I can address that in my next video. Now if you wanna watch another video of me building another app, I recently made a video here on how I vibe coded a coin identifier app that makes about 400 k per month with Cloud Code. So if you wanna see that video, click here and I will see you there.