I Built a Real App With AI (Copy My Prompts)

0:00Crazy, we just built this app in 25 minutes with full functionality to be able to track your macros and your fats, your carbohydrates, and your protein all in one just by uploading one photo. Let's upload this picture of some steak. Photo uploaded. Now it's going to analyze with Gemini Flash 2.5. Let's see if this actually works. Oh my goodness, it actually works. 950 calories, 55 grams of protein, 90 grams of carbs, 45 grams of fats, and that took about 30 minutes to build out, and that is crazy. If you want to learn how we actually build this whole app from ground zero all the way to the finish line, you're going to watch the whole length of the video on how we set it up, how we use Idea Browser, and how we use Google AI

0:47Studio to build the whole app out. So we're going to be using two tools, Idea Browser and Google AI Studio to build this app off the ground with full back-end support as well as optimizing the front end. And we're going to be doing this all within an hour. So I'm going to just walk you through the process and the tools that I'm going to use specifically to build this out. So we're going to go to Idea Browser, and we're going to find ideas. So they have a database over a thousand validated ideas, and we're going to search for most popular and pick the one that we can build within an hour. Ah, I found one. AI-powered protein tracking. I like this. So most people have been in nutrition tracking because it feels like doing homework every day. Protein Pilot is an AI-assisted app that helps hitting

1:32that makes hitting your protein goals as easy as checking your Instagram. So it learns what you actually eat, it generates generates personalized meal plans around your real schedule, and then automatically adjusts when life's happen. Okay, cool, cool. So unlike MyFitnessPal or static meal plans, Protein Pilot learns your food preferences, understands your eating patterns, and gets smarter over time. So start with bodybuilders, CrossFitters, and people with medical needs who already care about protein tracking and just hate the current options. So it's a $9.99 a month subscription free day 7-day free trial. So for the MVP, build a mobile app that uses image recognition to identify food and calculate protein content, add personalized meal suggestions based on preferences,

2:18schedule, and goals. Awesome. All right, cool, cool. This looks great. I think we'll start building it as a web app first, but we could see how it would work with a mobile app inside of Google AI Studio. But yeah, let's get cooking on this. The best thing with Idea Browser is it comes with the build kit where we can take more prompts and really just give this whole idea to Google AI Studio to start building it out. So the first thing we're going to start with is the product requirements document. We're going to go to build, and we're just going to copy prompt and see all tools, and we're just going to go into Google AI Studio. This is where we're going to build it all out. And we're just going to paste it in. And you give as much context as possible as well as the feature specs and as well as this

3:03little snippet here. Also has some other, you know, talks about like the go-to-market strategy, execution plan, proof signals. It's going to be a mobile app, and it's good that you do have validation as far as other, you know, successful companies and apps just like this already making money. So we don't need to reinvent the wheel here. And then we're just going to hit build and let it do its thing. That literally took 37 seconds. That was fast. And you want to make sure when you are in Google AI Studio that you are on the pro preview latest model. That is very important. Sometimes it'll default to Gemini Flash preview. So just want to make sure you're on the frontier model. So here what it went through, the product requirements document super important. This is the vision and the brain of your actual

3:48project. I we also give it the feature specs and a just a snippet of the actual idea. So let's see what it came up with. It says here's a comprehensive PRD for Protein Pilot. So just comes up with like the executive summary, product vision, strategic alignment. And then like going back to the actual PRD, if you are new and you don't know what a PRD is, basically Idea Browser provides a prompt for you to have the LLM create the PRD for you. So it says like you are a product senior product manager and a technical specification expert, create a comprehensive PRD that clearly defines what to build, why to build it, and how success will be measured. Feel like a lot of people getting into the AI space skip this and then get 90% of the way of

4:35their project and then they figure out why it's not working or the LLM is hallucinating. This is probably why. The PRD is helps guide the project along, basically. So Google AI Studio just knocked that out in, yeah, like half a minute, which is super fast. Basically, yeah, it goes over strategic alignment, resource requirements, problem statement opportunity, opportunity analysis. So very cool. Let's see if they go over the feature set. Yeah, so core features. So AI vision food logger. So it's going to use, obviously, the camera on your phone to identify what the food is you're taking photos of so it could track the macros, right? I mean, I personally pay for an app $15 a month for this same

5:21exact thing. So it's like we could build this now and build out our own personal, you know, MyFitnessPal or BuiltWith Science app, and you can do that nowadays. Um secondary features is grocery delivery API integration. That's pretty cool. Health sync health app sync. So it could fit sync to your like Google Fitness or Apple Health, which is cool. And then the barcode scanner, I actually use that feature on my app a lot where I could just scan a barcode and it automatically uploads the all of the calories and carbohydrates, saturated fats per serving. So I love that. This is great. I mean, let's build this out so I can use it and not have to pay $15 a month. But um very cool, very very cool. It's all detailed. Okay, awesome. So that is done. The next step

6:08is we're going to take the landing page wireframe, and we're going to play around and spend time iterating on the landing page as far as design, motion elements, and different types of hero sections and calls to actions. And we need to figure out what is going to be our lead magnet, whether it's a 7-day free trial or whatever. So let's copy the prompt for the landing page, and let's feed that back in with the brand packaging with the coloring and styles, too. So let's go back in here. Boom, copy that in, and then go to brand package, copy that in, and then as well as this repo here, which is like a Google product. It's just a combination of markdown files called awesome design.md,

6:54and it's a GitHub repo completely free, and it comes with a lot of templates that are based on actual well-performing websites like Apple, Amazon. I mean, it goes in detail. Takes takes um, you know, just frameworks and architecture that are already proven. So Airbnb, IBM, Nvidia, different types of style aesthetics that we're going to give our Google AI Studio basically like a foundation to build out our landing page. We're also going to use Dribbble, which is a great for inspiration. It's a great website, it's free. So basically bookmark this, and you can look for inspiration. So I use it whenever I'm trying to come up

7:39with like, you know, just not saying we're going to copy the exact landing page, but we want to be able to LLMs do really well with screenshots and references photos, better than you can prompt it. So the more visual elements you can give it, you can kind of direct the design, right? So I just logged in. We'll look at some landing pages here, and then we'll we'll feed that back in. But let's let's let AI Studio cook. Let me just tell it, "I'm going to give you this GitHub repo, download it, unzip it, and use the architecture within it to build our landing page." Let's see also what it what it comes up with on the first shot. Well, that was a lot. So let's see what it does. And while it's doing that, we can look at different landing page designs. This is I just use for inspiration, nothing more than that. I

8:25mean, it's just cool to see kind of what other people have built and see if it would kind of fall in line with what we're trying to build, if there's any type of like fitness inspiration out there. We can obviously search this, too. So we can get landing page fitness. Let's see what it has. Okay, what about this one? Okay. And basically, I would just screenshot a lot of this. I I actually really like this one. Really like it. So you can screenshot this entire design, which I'll just do right now. Like I said, LLMs do the best when you can give them screenshots and photos of what you're trying to build. So this is great. This is really good. This might actually be even better. The more screenshots, the better. Highly recommend doing this. You you want your

9:10website to stand out. That's why we're doing this. We're We want to go past the vibe coded style aesthetic, the the vibe coded design that everyone else is taking. Not saying that Claude Code or something else with particular skills wouldn't be good. It's just It's just Google AI Studio is probably one of the best when it comes to design, but the more that we can give it more context, the better. So just finish up back there, but let's see if we can take some of these screenshots and give it back to it create the style we're looking for. We'll probably start out building this out as a web app, and then we can always wrap it in like a with like a product called Capacitor to be able to launch on the app store using the same type of frameworks. Okay, done. Let's see what

9:56it did. That took about a minute. Here's the complete brand identity package and landing page blueprint for protein pilot. The landing page structure is designed to map perfectly with modern component based front end architectures. Okay, I wonder if it used that GitHub repo. Developer note, when implementing this with the provided GitHub architecture, utilize the hero component for section one. Okay, did you use the GitHub repo I provided to build the landing page? Okay, it says it could not download it because I hit a context limit, but I just followed up and it says it downloaded it and explored the markdown file, which is the awesome design markdown file, and I found that it isn't actually a curated collection of markdown files containing design system breakdowns for top tech companies like Stripe, Vercel, Airbnb, like we

10:41explained earlier. So, since it's a collection of design guidelines rather than a code template, I can use the design principles from any of those companies to build your landing page right now. So, I'm going to have it build it out and see how it does, and then I'm going to feed it the screenshots we took earlier just to see how the two compare. So, it's asking like what I want for the design style. I'm going to just say I want it to resemble a fitness app. So, sleek design, minimalist, and clean. I want it to have a lot of motion elements using our brand packaging and our specific call to actions in the hero page. Make it modern. Make it as if a person who is into fitness visiting the website and they feel at home. There we go. Okay,

11:27I've completely rebuilt the landing page using React and Vite Tailwind architecture applying the brand identity in the sleek fitness app aesthetic you requested. So, it implemented dark mode fitness tech vibe, interactive app mockup, and motion elements. Used Framer Motion, customized typography, and brand packaging. So, let's pull it up and take a look at it and see if we can build something better. So, to share because you might want to share with someone, you're just going to click the gear icon on the top corner and you can click share and you can customize it here to default to full stream screen and to anyone with a link can share. Just going to hit copy link if you want to share with a business partner or whatever, family, friend. That is super helpful.

12:14Okay, hero section is a little weird. Good for the first shot. I mean, I don't expect to have it perfect on the first shot, but good for the first first iteration. And remember, this is going to be a web app converted into a mobile app, so you can launch it as a web app first and then eventually build it out as a mobile app using something like Capacitor, so you can wrap the entire web app and launch it on the App Store. So, this is definitely messed up, so like I said, don't expect it to be perfect on the first shot. So, what we're going to do is we're going to go back. We're going to upload all of those files to those screenshots that we took earlier to Google AI Studio and have it kind of use that as a design inspiration. Okay, so I've selected all

13:00these screenshots as references. Give that to Google AI Studio and then we will put I have attached screenshots of what I want our fitness landing page to look like. Use these as inspirations or mockups to guide you in the direction in the styling. Okay, cool. So, did much better job, much better job versus the original. I mean, can you agree? Now you know it's a looks like a fitness app. Um so, very good, very good. Hero text needs to be changed, but that's okay. Very cool. Do not prefer emojis, so I'm going to have it change that as well, but yeah, needs a little needs a little work. Needs a little work. So, let's let's go through it step by step. Okay, make sure the font does not blend in

13:46with the background. It is blending in the background in the hero section. As well as make sure every section is uniform because there seems to be a lot of messed up sections like tile cards are uneven, buttons are weird. Make sure all the text doesn't blend into the background. Also, I don't prefer emojis in the tile cards for the features. Can those be changed to vector style icons? And can you have it resemble more of the example that I showed you? And implement as much motion as possible. I want everything moving around. I want it captivating, scroll stopping. Send it off. Okay, much better. Much better. I'm happy. I'm happy. So, let's refresh so you can see the motion. It just looks

14:32better. I mean, go back and rewind the video. Watch the first iteration. Google AI Studio has great power when it power when it comes to design. You need to steer it along. So, here we go. We got some motion. Elevate your nutrition. Beautiful. Beautiful. Transform your body, elevate your mind, and unlock the strongest version of yourself. Man, I I might build this out for myself. I mean, like I said, I'll save $15 a month. We're not just a tracker. We're an AI assistant pushing limits, breaking barriers, and proving that consistency always pays off. From personalized meal plans to instant photo logging, everything we do is built to challenge you. Start your transformation. Cool, and it just has fake testimonials, which I'm not a huge fan of, but regardless, don't ever put fake testimonials on your page. Not good. Don't do that. Get real

15:18ones, but I understand the concept, right? Okay. So, next step is making sure all the buttons work and start connecting the database and getting some of these vision models hooked up so we can at least try it out as a web app, right? Okay, I love it. Great job. Remove the testimonials at the bottom of the header that are fake. Those are not necessary and the next step is getting this hooked up. I believe we are going to start it as a web app first and then see if we can wrap it as a mobile app. You tell me what the next step is. Okay, so it did that and now it's going to walk through the next steps to actually get this thing built. So, routing and structure, database after that, and then the core dashboard, and then the AI vision logging so people can actually

16:03track their food and the AI will automatically estimate protein, carbs, and fats. So, we're going to go ahead and do that and have it build it out. Okay, it says it has successfully set it up the routing and the structure. So, React router installed, configured, landing page moved. The beautiful landing page we built is now safely tucked into its own net route and the dashboard has been created. So, we're getting closer to a functional app. The next step is for database and the nice thing about Google AI Studio is it uses Firebase Firebase integration for free as a product to handle the back end basically for when people sign up, they're authenticated, and all that is free. So, that is the next step. So, I'm going to say execute the next step. Let's set up the database. Okay, so cool. The Firebase basically helps

16:49people with a Gmail, which everyone on the planet has Gmail account, to now be able to sign up and start their 7-day free trial and get going. So, we could try it out and test it out. The next thing it is going to implement is the actual part of the hero feature to get it working, which is the AI vision logging. So, to hook up through the Gemini API so we can make at make it so when we log a meal, it can we can upload our photos and it will analyze those photos and then we can save the macros directly to the database so it can start creating a meal plan for us. Let's do that. Okay, so it integrated the vision API and this is how our product's going to actually work. So, the AI vision logging modal, it says click clicking log meal or add another meal on the dashboard now opens a sleek

17:36modal overlay. Camera upload support, the modal allows you to upload a photo or take a picture directly using your device's camera. Gemini AI integration, once you select a photo, you click analyze with AI and then it securely sends the image to Gemini 2.5 flash model. Just does a macro estimation, it will analyze the food in the photo and returns the structured JSON estimate of the meal's name, calories, protein, carbs, and fats. And then it stores it in the database. The estimated macros are instantly saved to your personal database for the user and your dashboard including the calorie progress bar and daily macros upload updates in real time. Awesome. So, let's try this out. Apparently, it is fully working, so cool. Awesome. Cool, cool, cool. All

18:22right, so let's sign up. Let's started. Go to dashboard. Very cool. Let me get a photo of some food to verify this works. Okay, I have uploaded a photo of beautiful shrimp pad thai, one of my favorites. Who doesn't like Thai food? Let's see how it works. And there we go. Pad thai with shrimp. 850 calories, 45 grams of protein, 75 grams of carbs, and 42 grams of fat. That is 850 calories. That is awesome. That is great because I pay $15 a month for the same exact thing and we just built it in 24 minutes. So, very cool. Wow.