How I built an $80K/Mo mobile app with Claude Code (Full Vibe Code Tutorial)

So, I found a small niche in the App Store here, but some of these apps are making at least $40,000 a month. And this is the receipt and expense tracking niche. It is a small sub-niche in the accounting category, but we got apps like SimplyWise here that's doing 60k per month. We got another app that's also doing another 60k per month, and this one's doing 80k per month, just to name a few. And all they do is just one thing, which is scanning physical receipts. This just shows me that sometimes even in the smallest categories, you can still find very tiny apps that just does one thing but they're super profitable. So, in this video, I'll be showing you how to build this receipt tracker app using Cloud Code, but this time we're going to make an even better version like adding animations like this just to make the app more premium. And I'll show you how to put everything together without writing a single line of code and all the way to testing the app live on your phone. So, let's dive in. Now, before we build the app, let's talk about what this app does so we know what we're working with. So, if you look at the Receipt Tracker website here, it's basically a mobile app that captures a receipt from the phone using the camera, and it uses AI to analyze the data and put everything in your dashboard. And also, plus it connects and integrates with accounting software QuickBooks. So, it saves you a lot of time from manual bookkeeping. So, you can see how useful a tool like this can be, especially if you are a small business owner and you deal with a lot of receipts. It just saves you hours and hours from doing everything manually in your accounting software. Now, there are three reasons why I really like this category. Number one, it is in a boring niche. It's not a glamorous niche like fitness or calorie tracking app. It's not something that get a lot of attention, but it solves a very painful problem. Now, speaking of painful problem, it solves one single painful problem, which is manually handling receipts, right? And it is just one problem in the overall bookkeeping or accounting category, so you're not building a huge CRM or a complex accounting software, but you're just solving one painful problem within that broader category, and you do it well. And number three, it is B2B. Now, this is not always the case, but I've noticed that B2B apps tend to be more sticky because you're targeting small business owners and because you're solving a business problem, you can immediately tie this into how much time will I save if I use this app. Otherwise, I'm going to have to do this manually and waste so many hours. So, it becomes a necessity and not just a nice-to-have app like a meditation app or a habit tracker. And And once they subscribe, it's less likely that they'll move to another competitor cuz you already have all your data inside the app and that makes it sticky. And unless your app has massive problems, then I think most people will just stick to what's already working. So, without wasting any more time, I'm going to show you what we need to build an app like this. So, we're going to build a mobile app, but I'm also going to show you how to build a web app version, kind of like a dashboard here, and I'm going to show you how to make the data sync between the mobile app and the web apps. So, both apps can talk to each other. Now, in terms of AI tool, we're going to use Cloud Code to build both apps. And you know, everybody's talking about Fable 5. I mean, it's really good. I made a video about it when it came out, but you actually don't need Fable 5 to build something like this, right? I I think it's overkill and it's token hungry. And as of July 12th, you got to use the API pricing to use Fable 5, so it'll get more expensive. So, I actually built the entire thing using Opus 4.8 and Sonnet 5, which is also already a big upgrade from Sonnet 4.6. And to make our build even more token efficient, I'm also going to show you how to use multiple agents, where we're going to use Opus 4.8 to do the heavier work and Sonnet 5 to do the grunt work. All right. So, in this video, I'm going to use Cloud desktop app. If you haven't already, you want to download the desktop app and you want to head over to code here and you want to click on new session. You also want to make sure that you connect to a folder. So, for every new project, I like to have a dedicated folder, so everything gets saved here and easy for me to just upload everything online. And for the AI model, I'm going to pick Opus 4.8 here. And And again, the overall idea here is that I want to use the smartest or maybe second smartest model, to kind of structure the app, think about the architecture, and then we can hand off all the easier work to cheaper models. Like, so this way we can maximize our token usage. All right, so I've got this prompt ready, which I'm going to paste here, and I'm going to walk you through what I have here. So, I want to build an iOS mobile app called Strike Rabbit. It's just a name that I came up with to take a photo of receipts and and categorize them into a dashboard. It should be able to capture the data from the photo and categorize all the data accordingly. And also automatically sync the data to my accounting software, like QuickBooks. I want to build a web version just to view the data in the dashboard so I can see the financial position, see how much I spend, and see the categories that I spent, and also maybe set a budget as well. And I've also included the links to our competitor app. So, it's So, it's basically this website here, and also the link to the App Store. So, Claude can actually crawl the website and get all the information here and understand what the app does. So, it can suggest the features that we should have and think about the architecture, right? Now, I also said, "Give me the full plan. Do not build first." So, I just want to see the features and all the pages that our app will have. So, I think this is a good practice. You want to think about the features and all the pages before you actually hit submit and build. Otherwise, it's just going to build things that you don't want and you end up spending more in tokens. So, once you have that ready, you just hit go, and then it's going to analyze and come back to you with a plan. And just a few minutes, it came back with a plan. So, it's recommending me the tech stack to build the mobile app. So, we're going to use Expo React Native for the iOS app, and also Next.js for the web dashboard. And we're going to use Supabase to manage the database. So, So, basically, what you see on the mobile app will be reflected on the web application. So, both apps are sharing the same database, basically. And we're going to use Claude API for vision. And this is basically technology that allows you to take a photo of the receipt. The AI will parse that information, grab all the numbers here, and put it into a nice format like this, and it gets saved and gets categorized automatically. And it gave me all the features that it thinks we can implement. So, obviously, this one you can adjust it to whatever you want. You can add more features. You can have less features, depending on the app that you're building. So, now that I know how it's going to structure the app and the features I'm going to have, I want to work on the front-end design. I want to see what the app looks like. And And when that's done, I'm going to build out the back-end. So, it's a two-step process, front-end and then back-end. Now, for the front-end, I like to use Claude Design to design everything. I mean, you can do it in Claude Code, but I feel like Claude Design here has the best design harness. You give it a design reference, and it will give you a clean-looking design on the first pass. And because both apps are made by Claude, it's very easy to transfer all the files. Now, to do that, I just gave it a prompt like this. Give me a prompt I can give to Claude Design. Don't give any design direction, just the features, cuz I want Claude Design to have the creative freedom to come up with the design. And I also want to add these features to the list, right? So, I want to have the ability to optimize budget. I want to see a financial health animation and category breakdown of spend that can be filtered by month. And then I said, "I'm going to bring all the design back here for you to build out the back-end." And this is what we get. I actually prefer to do it this way rather than just typing everything, typing all the features here, because this is obviously more detailed. It's listing out all the features it's going to have. It's got the dashboard. It's got every feature here. So, again, you want to be as detailed as possible, so you get the result that is actually closer to what you have in mind. So, I'm just going to copy this and just paste it in Claude Design like this. And then I'm going to use, again, Opus 4.8 for this. And one more thing before I hit go, even though Claude Design will come up with the colors and the typography, I like to give it some design direction, so it doesn't just give me any random design, right? So, for this you can go to a website like Pinterest or Dribbble here and I actually found this dashboard design that I quite like with all these rounded corners here and green, orange. I think this looks really clean. So, I'm just going to grab this, save image, and we're just going to attach the file here so it can follow the style that I have here. All right, so I'm just going to hit go and just wait for a couple minutes for it to design everything. All right, so just in a few minutes this is done. So, you've got this dashboard here and I think this looks really good. If I go back to the reference design here, it actually followed all the typography and the styling is brought over nicely to our app. And I did ask it for this animation here. So, if I refresh the page, we got this small nice little touch here for the animation. And if I go to receipts, I can see all the receipts here. Now, it actually built the mobile app version as well. So, if I go to this drop down, I can select Track Rabbit iOS app and there you go. That is the mobile app design. Looks very clean as well. It's got this selector here. So, I can imagine what the app looks like before building out the back end, right? So, if I go to receipts, I can see the entries here. Click on Starbucks. So, this is where the picture of the receipt will go. I think everything looks good. So, you don't need Fable 5 for this, right? As long as you give it enough design influence and you give it the features that you want and be a little bit more detailed, you're going to be able to create some amazing design here. Now, of course, you can make some edits here. You can click edit and you can start to maybe change some colors here or you want to change the placements, you can do that here. And for those of you are not aware, Claude design actually got a massive upgrade recently. So, you have a lot more control on the left side here. So, you don't have to keep prompting it and waste tokens. You can just For simple things, you can just make your own edits here. So, I'll go back to the web application here. So, maybe I want to change this box to a different color. I can just click on it and I can just play around and see what colors I like. So, I I can do this without having Claude to regenerate the website cuz that will waste a lot of tokens, right? I think this is a nice feature to have. And if you're happy with this, you can just hit save and it will implement the new changes. Now, once you're happy with the design here, you want to bring this over back to Claude Code to build out the back end, build out the database and everything else, right? So, what you want to do here is you want to click on share and export and you want to save everything in a zip file. So, this will save all the design elements here for both the web application and also the mobile app. So, I'm going to hit download and just save it in the folder that you are working with with Claude Code. So, I'm back to Claude Code and I can just give it this prompt here. So, find the design files here. So, this is basically just uh where I saved that zip file. And I want you to give me a plan to build out the back end for both apps. So, both apps should share the same database. Give me the tech stack you'll be using to build both iOS and web application. I just want to confirm everything before I build it out, right? I want to be able to preview the app on my phone as well. Now, I want you to use a multi-agent workflow for this task. Use smaller cheaper models like Sound of Five for grunt work and heavier models like Opus 4.8 for heavier work, especially when reviewing the code base and making sure that everything is efficient. Give me your plan on which agents will do which task and give me the reasons why. So, basically, I want to know which agents are going to do what and the reasoning behind the selection. And I like to do this because I want to know what goes on behind the scenes. So, you're not just prompting it to do everything like, "Hey, just spin up multiple agents." But, I want to know what goes on behind the scenes, who is doing what. So, even though you're five coding, you actually understand the process behind everything, right? Now, you can hit go and then it's going to finish reading the design files, right? It's also going to confirm the tech stack for you. So, it's going to be using Superbase and it's going to use Next.js for the web application and iOS is going to use Expo React Native. And if I scroll down, it's going to give me the agent workflow, right? So, it's it's telling me what agents are going to be working on this project and this is still showing Fable 5. So, I'm actually going to tell it to swap out Fable 5 to Opus 4.8. So, if you see here, Sonnet 5 is actually going to build the website. It's going to build the mobile app. They're going to be using the heavier models like Opus 4.8 to do the review and also doing the final check before it hands it over to me. And you got a separate column here on why we're using this model, right? So, I'm going to say swap out Fable 5 with Opus 4.8. All right. Now, there's two things that you got to set up before we actually build the app. Number one is your Claude API. So, we're going to use Claude's API to scan the receipt like this. So, you can use anything. You can use OpenAI's API as well. It tends to be a lot cheaper, but I do have some credits here already. So, we're going to use this for this project. So, you want to go to platform.claude.com and this is basically your account and you got to top up some credits. This is separate from your monthly Claude subscription. So, make sure you just have enough credits to test this out and once you have credits, you can just click here and get API key and you can just name it whatever you want and then create API key. Now, once you have that API key, you can go back to Claude and just give it to Claude. But, remember when you are giving Claude any kind of API key, you want to make sure that it is saved in an .env file cuz if you just paste it in the chat, if the chat gets leaked, then anyone has access to your API keys. Now, the next thing that you want to need is an account with Superbase. So, Superbase is basically the database provider that we're going to use to store all the data. So, all of the information about receipts, your categories, your user information is called it's all going to be saved in this database here. So, you're going to just set up a free account and then you want to connect that to Claude. Now, Superbase has an MCP connector to Claude, which means that Claude can actually talk and set up databases without you having to do it manually. So, if you go down here, you can click on the plus icon here, go to connectors, and then I have this connector called Superbase here and it's enabled, right? So, so this is what you want to make sure that you have active. Now, if you don't have this already, you can go to manage connectors and basically you want to just add a new connector, browse connectors, and then if you search for Superbase, it's going to show up here and I already have this connected, so I'm going to hit back. And if you're doing this for the first time, it's going to probably ask you to authenticate yourself, but once that's done, you can just ask Claude to manage the database for you without you having to go in here and build the database yourself. So, once you have those things ready, you can then ask Claude to just build everything out. Now, while we're waiting for this to build, I want to talk to you about today's sponsor, ArKads. Now, most people wonder how apps like this get tons of users and the secret behind it is actually UGC videos, but but hiring influencers can set you back hundreds or even thousands of dollars. But now, you can use ArKads to generate these videos using AI actors to promote any type of product or app and have them say anything that you want. So, they've got the latest models like Cidas 2.0 4K and also the newly released Omni Flash that can create super realistic UGC videos like this. And I'm going to show you the videos that I was able to create with this technology. So, all I did is go into ArKads here and click see more and I just picked the latest model here, which is Omni Flash. So, this is one of the videos that I created with ArKads and I created this prompt with the help from Claude Code. I just described the scene and I gave it the app that I want to promote and this is the video that it was able to create for me. So, I'm going to play this real quick. >> I used to lose every Staples receipt. Now, I just snap it in Track Rabbit. It pulls the total, tax, and category straight into my dashboard. >> Isn't that amazing? And there's three other ones that I was able to create. So, this one is a UGC actor promoting a mobile ordering app for a cafe. >> I used to stand in line here for like 15 minutes every morning. Now, I just open the app on my walk over, pay in app, and it's waiting for me by the time I get here. No >> And the second one is a soccer app. >> literally nobody to kick a ball with. Found this app called Play. It shows you every pick up match near you tonight. Pick your level, pick your position, tap join. That's it. I had a game locked in within a day. Seriously, download it. I'll see you >> And this third one is a plant app. >> Okay, so I am the worst plant mom on Earth, but this app literally tells me everything. Meet Monstera Marge. I'm so proud. >> And what I like about this is everything is customizable to what you want, including the script, the model, and also the voice. You can change that as well. And Arcad has just added an MCP connector to Cloud Code. So, now you can generate videos without leaving the platform. So, simply have to add connector here, which I already have. And you want to make sure you toggle it on here in your Cloud Code session. And you can just ask Cloud to connect to Arcad and generate these videos for you automatically. Now, if you guys are curious on the exact prompt that I used to generate this video here, I'm going to attach it in the description below, so you guys can download it. And also the three videos here, I'm going to give you the exact prompt, the exact scene by scene. So, you guys can customize it for your own app and for your own product. So, if you guys want to try this out, I'm going to give you the link below to sign up and get the best deal on Arcad, but only if you use the link down below. Thanks again Arcad for sponsoring this video. Now, back to Cloud Code. All right. So, just in a couple minutes, it's done with both the web and the mobile app. So, on the right side, it's opened the web app in the in-app browser of my Cloud Code desktop app. You can preview everything here. And also, it gave me a QR code for me to scan. So, I have to download the Expo Go app on my iPhone. And once I have that app downloaded, I can scan this. I can preview the app on my phone, which I'm going to show you in just a bit later. Now, for the web app, I'm going to do a quick check here to see if everything's correct. So, I'm actually going to open this up on my Chrome browser so I can see everything nicely. So, I can click on this. This is my Chrome browser here. And as you can see, this is localhost 3000. So, it means that it's still sitting on my computer. Nobody else has access to it. So, just for preview purposes, right? So, I can scroll down here to see if everything matches what we designed in Cloud Design. So, yeah, I can click on this Starbucks uh receipt here. I can see the breakdown. Can see the total. And if I go to the second tab, I've got receipts again. I can now categorize everything. Uh which is nice. Software. All right. So, that's updated. And then, I can also do integrations. Okay, so we're not going to do this today, but I think potentially an app like this should integrate with your accounting software so you can automate a lot of the manual work. So, go back to dashboard here. I'm happy with the design. And now, I want to go to Cloud Code and I want to scan this QR code here from my phone. So, if you're doing this for the first time, this is the Expo Go app that you guys want to download on your iPhone. So, I have this downloaded already. So, I'm going to go to my camera app and just simply scan the QR code from Cloud Code here. Click on this link here and it should open up the app on your Expo Go app. Just going to wait a couple minutes for it to load. Yep, there you go. So, you got the app uploaded here. And now, I can test everything out. This is the dashboard. So, if I want to click on receipts here on the right, I can see all the receipts that are here. And then, if I go back to my web application here, and I just want to compare if we are sharing the same data here. Okay, so we've got Walmart on July 3rd for 87.42. Yeah, I see that on the mobile app as well. So, that is a good thing. So, target 225th 5418. So, this shows that we are connected to the same database, so which is a good thing. Now, of course, the most important thing we want to make sure that the receipt capturing feature actually works, right? So, I'm going to click on this middle icon here, which is the camera, right? And then I'm going to click take photo, and I've got this Starbucks receipt here that I'm going to just snap picture off, and then use photo. There you go. So, now it is working. Unknown vendor, and then once it's processing, there you go. So, let me see if everything's correct. So, $7 cheesecake, and the photo of the receipt is in as well. Awesome. So, everything's working. So, if I go back to the dashboard, let's see if I want to make some changes here so I can show you guys how to make changes. If you look at down here, you'll see that the category breakdown, all the months are quite messed up here. So, if you want to make changes here, you can simply just take a screenshot of the screen, and I think the easiest thing is just to indicate what is wrong here, and then you can just AirDrop it to your desktop, and send it over to Clock. So, I'm going to send this to my desktop now, and I'll just attach that screenshot here, and tell Clock, "Hey, please fix the month selector on the dashboard." And hit go, and then just wait a couple minutes for it to fix the code. Now, it's done. So, now if I go back to my mobile app, it's already automatically updated here. So, now I can select the month nicely. Now, if it doesn't push the update, all you need to do is to shake your phone like that, and then you can hit reload here, and then it will reload everything, just like that. Now, let's take this to the next level, and let's add some animations to the app to make it more premium, right? So, if you look at the app here, it does have like a very simple animation on the 90 here on the financial health. If I go to this page where I take a photo of the receipt, it doesn't have any type of animation. So, what if I want to add an animation there? And if I click on this Starbucks one right here, it's actually missing a delete button, right? So, let's say I want to remove this receipt. How do I do that? There's no button to do that. So, I want to add a button here, and when I click on that button, I want it to animate. Have some sort of an animation overlay, right? So, I'm going to go back to my desktop now. And for animations, I like to go to LottieFiles here, where you can download different type of animations depending on the category. They've got all these loading animations. They also have buttons, right? So, you can actually search for maybe a delete button, and it will give you a couple of options on the animation here. And by the way, they've got free and premium feature as well. So, I always try to find animations that are free first. And even with the free ones, you get a lot of options here. Now, I've already saved a couple of animations that I like in my dashboard here. So, I've got this delete button here that I want to use. And then, I also want to add another animation when the app is analyzing the receipt. I think it's nice to have some sort of uh animation. So, I'm going to use this rabbit thing here. And I think this looks nice, and it just makes your app more alive and just more satisfying to use. Now, the nice thing about Lottie here is that you're able to change colors if you want to. So, you can change the background color, or you can even change the color of the rabbit here. If I go to color palette here, I can change the color palette here, and it will change the color of the rabbit. So, if I click on this one or this one, this one, it will change the colors. And I can also set the speed of the animation here at the bottom. So, yeah, a lot of customizations you can do. Now, once I'm happy with this, let's say I want to take this and implement it to my mobile app. All I need to do is actually click on download here, and it will give you some options about the format that you want to download. I typically like to download this one here, Lottie JSON. It's been working seamlessly for me. And just take note that the ones that has this crown icon here means that it's a premium option. So, you do need to be on the premium plan to be able to access this. But, I think this one works just fine for me. So, I'm just going to hit download the file here. And I'm also going to save this one here, the delete button, and hit download. And if you guys are wondering the file formatting, it's just basically a JSON file which contains all the code here. There's no images or videos here, so it's basically code that Cloud Code is going to process and turn it back into this animation here. So, I'll just drop in those two files here and I'm going to give it a prompt. And then my prompt is very simple. For the mobile app, I want to add two animations. So, this should appear when the app just took a picture of the receipt. Show for at least 3 seconds, right? Delete animation, I want to add a delete button in the receipt page. And when I click delete, this animation should play and then the entry is removed. So, I'm going to hit go and just going to wait for it to update our app. All right, so that is done. So, I'm going to go back to my mobile app here. And again, I'm going to just shake the phone and then hit reload. Okay, and then I'm going to go to my camera icon here and and take a photo of the new receipt. And then I'm going to use photo. There you go. So, the animation is there. Perfect. And I'm just going to wait for it to process. All right, so let's say I want to delete this one cuz remember we added a delete button, which is here now. So, I can just press delete receipt here. And that is the delete animation. So, that is how you add animations to your mobile app. And obviously, what I just showed you is very simple, but that is the workflow. And if you run to errors or you want to make some adjustments, you can just prompt Cloud to do it for you. Now, there's one more thing that I want to show you to make sure that everything is connected nicely. So, if you log in to Superbase, I just want to show you where your data is actually stored inside of Superbase. So, if you log in to your account here, this is the database that Cloud Code created for me. So, if I click on this, and then on the left sidebar, you're going to go to table editor, and then under receipts, you can see that these are all the receipts that was in my account. And if I scroll to the right, you're going to see all the columns here, the totals, the breakdown, the credit card, and the categories. So, all the data that you see on the web application or the or the mobile app, is going to show up here, and it's going to be unique to every user that signs up. And obviously, after you've set up authentication, you know, the ability for users to sign up and create their own accounts. Yeah, so I just want to show you this in case you're wondering what's actually happening in the background, where is the data being stored and all these things. All right, so now that you know the basics on how to build a mobile app. You guys are going to ask, "What apps can I build to make money? What's working right now?" Now, if you guys want more ideas, I recently made a video about seven tiny apps that are making at least $40,000. I'll break down the strategies and how you can use those ideas to build your own version. If you want to watch that video, you want to click here, and I'll see you guys there.