How To Build Your First App With Google Gemini In 21 Minutes

By Beau Johnson · · 22 min · 342 views

About this video

Steal my prompts and build with me for free: https://www.ideabrowser.com/b/mealflow-ai-enhanced-meal-planner-for-diverse-family-needs-351?utm_source=youtube&utm_medium=video&utm_content=youtube-description This app plans a week of family meals in seconds, and I build the whole thing here in about 22 minutes. It is called Family Feast. Most meal planners assume everyone at the table eats the same food, and real families rarely match. Mom is keto, dad is diabetic, and little Sarah is allergic to nuts. You tell it who eats what, and it generates one cohesive weekly plan with shopping lists and prep schedules for all of them. I have four kids, so this is a problem I actually have. I found the idea on Idea Browser and built it in Google AI Studio. TIMESTAMPS 00:35 – I went looking for a diet app 02:15 – Finding it: four kids and a meal planning problem 02:42 – How Family Feast works 04:47 – Making short-form content for it later 07:48 – The prompt library inside the Idea Builder 08:21 – Why I skip the logo and branding first 08:46 – Starting with the product requirements document 09:10 – Sending the PRD, feature spec, and landing page 10:23 – The Awesome Design repo 11:30 – Asking it to pick a design for inspiration 12:01 – Gluten-free pasta, keto cauliflower, allergy-safe portions 12:56 – Redesigning the page under 1,000 words 13:23 – The free lead magnet 14:26 – Which APIs the signup flow needs 15:10 – Prompting a 16 by 9 video of ingredients being chopped 15:28 – Running 3.1 Pro with extended thinking 15:48 – Enabling Firebase with one click 16:19 – Family rosters, diet profiles, and allergies 17:02 – Dropping the video into the components folder 17:30 – Overlaying text on top of the video 18:00 – Fixing the contrast and the pulsing text 18:41 – The live demo: the Johnson family 18:58 – Generating the cohesive plan 20:10 – Inside the dashboard after signing up 20:45 – 22 minutes, start to finish WHAT YOU WILL LEARN - How to search the idea database for a problem you personally have - Which prompts to send first, and which ones to skip at the start - How to generate a hero video and drop it into your project's components folder - How to enable Firebase for real-time authentication with one click - How to overlay readable text on a moving video background THE BUILD, STEP BY STEP 1. Finding the idea. I went in looking for a diet app to manage my own calories, searched "diet", and got 27 results. The one that landed handles multiple diets and allergies for busy families, which with four kids is my exact situation. Planning around a keto mom, a diabetic dad, and a nut allergy feels like solving a Rubik's cube every night. 2. Checking it is real. Idea Browser shows the keywords people search: meal prep services, diabetic meal plan, family meal ideas, budget dinner ideas, low-carb diet plan. Opportunity scores 9, problem scores 9, and the timing reads as strong. 3. What I skip. The Idea Builder holds prompts for ad creative, brand packaging, logos, and colors. It is a lot, and starting there is a trap. I start with the product requirements document instead, because it sets the vision everything else hangs on. 4. The three prompts. PRD, feature spec, and landing page, sent together with instructions to work through them one at a time until each is complete. 5. Making it look designed. I point it at the Awesome Design GitHub repo and ask it to choose a design there for inspiration, then rebuild the landing page under 1,000 words. 6. The hero video. I prompt a 16 by 9 video of ingredients being chopped and coming together, run it on 3.1 Pro with extended thinking, then drop the file into the components folder of the source and overlay the hero text on top. The first pass is too dark, so I have it improve the contrast and the pulsing text. 7. The database and login. Firebase enables with a single click, giving real-time authentication, an account model, and cloud sync so family rosters, diet profiles, and allergies persist. 8. Testing it live. I create the Johnson family, add a member who is gluten-free and allergic to peanuts and nuts, and generate a cohesive plan. It comes back fast with real dishes, including Mediterranean lemon herb chicken, plus gluten-free pasta and keto cauliflower prepared separately. TOOLS USED Idea Browser — https://www.ideabrowser.com Google AI Studio — https://aistudio.google.com #GoogleAIStudio #IdeaBrowser #VibeCoding #AIApps #MealPlanning #Firebase #Gemini #BuildInPublic We do 4 live bootcamps every week in Shipping Skool! Join Here ⬇️ https://www.shippingskool.com/ 🔗 GET CONTENT MACHINE: https://www.content-machine.dev/ 🤝1-1 OpenClaw Setup/Integration - https://calendly.com/beaujohnson1/ai-mastermind 🚨Idea Browser Lifetime Discount https://join.ideabrowser.com/beau Get the weekly AI builder newsletter 📕 https://substack.com/@buildnpublic Follow Me On X - https://x.com/BeauJohnson89

Transcript

Read the full transcript

0:00This is what it looks like building apps in 2026 and you're going to be blown away in this video. I'm going to show you able to build this beautiful app out in just 25 minutes using two tools idea browser and Google AI studio. You're going to want to watch all the way through this video because to put this thing together literally takes minutes using these two tools and let's get right into it. All right, so the two tools we're going to be using is Google AI studio to literally just build the entire app out and idea browser for the idea we're going to choose. I'm going to be looking for a diet app something where I can look to lock in a certain amount of calories and I want to eat for the day and be able to help me with my diet plan. So let's see what they have in their database as far as apps to

0:46build around dieting because they have over a thousand ideas that are in their database. There has to be one, right? So if you sign up for free you get an idea of the day which gets emailed to you a little bit before 8:00 a.m. Pacific time. So you might just get something that is down your alley that you want to build. And if you do end up signing up you get a ton more features. We'll get into those later like the idea builder, the idea agent, things like that being able to connect to the back end MCP that makes building that much easier and you can also take your idea that you have that might not be on idea browser and then run it to its market research and be able to validate that idea. So let's go to the database like I said I want to be able to build a dieting app and I'm

1:31just going to hit diet. See what pops up. There's 27 ideas based around a diet or building a diet plan. Let's go through these and I want to be able to see something that aligns with what I'm trying to build for myself and if it's going to work for myself and it's something that you know I want to build is obviously going to be something that other people want because everyone is focused on getting better at getting healthier, getting a right diet plan whether it's carnivore or keto or whatever, accounting calories, being able to just manage your calories and your diet in one app is going to be super nice. So, there is a ton on here. Let me go through these and pick out exactly what is going to align for me. All right, I found something. We got four kids, meal planning is crazy,

2:17keeping on track of your diet and what you eat is very hectic, especially if you have a family of four, six, 12, whatever. It's really hectic and crazy. So, you got a meal planner here that handles multiple diets and allergies for busy families. This is perfect. So, planning meals for a family where a mom is keto, dad is diabetic, and little Sarah's allergic to nuts is feeling like a Rubik's Cube. And it is so true. Family Feast uses smart algorithms to create weekly meal plans that actually work for everyone at your table. You basically tell it who eats what, and it generates shopping lists, prep schedules, and recipes that keep everyone happy and fed. Most meal planning apps assume everyone in your house eats the same thing. They don't. And that's so true, right? Family Feast

3:04handles the complexity that real families face every day. $10 a month for premium features, and then we're targeting 40 million families juggling multiple dietary needs. Oh my goodness, this is perfect. So, what I like is it just gives you quick validation right away that, "Hey, these are the key words that are being searched all across the internet, meal prep services, diabetic meal plan, meal planning in general, family meal ideas, healthy meal plans, budget dinner ideas, and then low-carb diet plan." So, kind of gives you some more confidence on, "Okay, is this even worth building?" Even if you're just building it for yourself, but I think we're all building apps with the intending of making money. So, this is just great. You can see opportunity is nine, problem is nine, feasibility is

3:50six, and a why now is this perfect timing? So, goes over the business fit, execution difficulty, go-to-market. See if we click all that comes with little go-to-market summary. Exceptional market potential with strong traction across Reddit, Facebook, and YouTube. I mean, if you don't have a family, you know that this is a pain point. If you do have a family, you know that this is, you know, kind of annoying to solve, right? You got to know who's eating what, where, why, if it had nuts, if it was cross-contaminated. I mean, it's just crazy. So, this could be a great, um, easily monetizable app, you know, as far as like making content around it. So, goes over the overview. High engagement across social media platforms

4:35and growing interest in AI solutions for meal planning. Go to market tactics include create interactive meal planning content on YouTube. He can also make quick shorts with like something like a VO3.1, very simple, um, image-to-video model. Engage with Reddit communities offering AI meal tips. Collaborate with Facebook groups on meal planning workshops, and develop partnerships with grocery delivery apps. Target audiences are busy parents seeking convenience, and then health-conscious households, and then families with very specific dietary needs. I love that. Here's the signals. Like if you're wondering where they're getting this data from. So, Reddit. 5.7 million members in the Meal Prep Sunday, um,

5:21subreddit, and then Facebook groups, and then YouTube as well. Two 2 million views on AI meal planning content. Early positioning angles, AI-powered meal plans tailored for your family, healthy budget-friendly meals with AI convenience, and then simply simplify meal planning with AI technology. So, strong traction, you love to see that. You need to know, you know, your target audience. Who's your avatar? Especially as you start building this because you want to know who you're building it for. So, the offer here is to like how you get customers. So, the free offer is going to just be a family meal planning quiz. Interactive AI-driven quiz to determine a personalized meal plans for and also

6:06front-end meal flow starter plan $4.99 a month basic subscription offering weekly meal plan, shopping list, and a simple dietary integration. The core offer is Mealflow Plus subscription, which is a comprehensive plan with advanced meal customization, multi-user support, and device integration. So, you get a ton of data here and this applies to all the ideas as well. You're going to get a ton of like tactical advice to be able to steer your project in the right idea. Are you going to use all of it? No, but there are pieces you could pick out here that you can apply to your project. And it can be almost overwhelming at some point, which is why in this video, I'm going to go over the basic foundational

6:52parts that you've mean to be able to build your app within minutes. I mean, this isn't 2025 anymore. This time in 2026, you can literally build your app out 80% of the way working in under an hour. So, let's get this going. I'm going to show you where in Idea Browser you need to head first because there's a ton of ideas to go through. Once you find your idea, I would just go right to build this idea in the top right-hand corner here. And then there's Idea Builder and there's AI Workspace. So, AI Workspace, you can inject all of the information right into your favorite LLM. With Idea Builder, you can connect right to Google AI Studio and just start building right away. So, like I said, you can also

7:37connect via MCP, which helps pull all all context over. What context you say? It is all of the prompts that come pre-loaded with the idea. So, there's a lot in here. There's ad creative prompt, there's a brand packaging prompt, a landing page prompt, and like if you just look at kind of what it looks like specifically. So, your ad creative's prompt, create a comprehensive ad campaign package with multiple ad variations, targeting angles, and detailed creative briefs. And it goes on, you could just give this to Google AI studio and you will get multiple ad creatives or brand packaging as well as like, you know, what you want your typography to be, what you want your logo, your coloring, all of this. And And it's overwhelming. I wouldn't start

8:23there though because you don't want to start with something that's not going to make your product work. I always try to focus on making my product work first and then going back and tweaking the little things like the logo and the name and all that stuff. That's not important. Just getting the hero feature of your product working first is the most important part of the building process. So, that's why I start with the product requirements document as the first thing. We're going to copy that. We're going to go back into Google AI studio. This is their playground. We're just going to dump a ton of information in with this first prompt. And this is how I do it. I use a voice dictation software called WhisperFlow. 100% you need to be using it if you're building apps in 2026. It's this simple. I really like this app idea. I want to

9:09build it. I want to start with the product requirements document, the feature spec, and the landing page. Start with the landing page first. Let's work on one by one until completion. Here is the prompts. Here is the app idea. Let's go to work. So, that is the first initial prompt that's going to kick this off. I actually always like going back to the actual idea and just taking the front paragraph. Gives it a bit more context and know what it's working with. So, I'm just going to quote that and then we're going to go back into the PRD and pull that over and make it simple. You don't need to overcomplicate it. If you do, you're going to have tons of bugs, it's going to be a pain in the butt, and it's not going to make the building process fun at all. So, then we're going to go down again. I'm going to get the feature

9:55spec. Look at the feature spec prompt here. It says, "Generate comprehensive feature specifications that provide clear direction for development teams. This should include detailed user stories, acceptance criteria, technical requirements, and implementation guide guidelines." So, it's going to be super helpful for building this app out to actually work. And then we're going to do one more, which is the landing page. And I'm actually going to take it one more step further, and I'll show you what we're doing here. There is a GitHub repo called Vault Agent Awesome Design. This really helps give your LLM, specifically Google AI Studio, a little more direction when it comes to building the landing page. It's a collection of 55 websites that are super popular, Airbnb, SpaceX, uh Twitter. You got 55

10:43different other sites that are basically going to pull in their typography, their styling, and be able to kind of guide how you want your landing page to look. So, it says it's a collection of design markdown files, analysis by popular brand design systems. Drop in one to your project and let the coding agents generate a matching front end. So, it's it's awesome. It's just really helpful. It's really helpful. 91,000 stars in just a couple months. You can see here's a lot of the popular websites. It just pulls in their styling, their visual theme and atmosphere, color palette and rules, typography rules, the principles, a lot a lot of helpful stuff. The more the better, I think to to an extent. And I'm basically just going to copy the URL. I want you guys to use this awesome

11:30design GitHub repository for the inspiration of building the landing page. Choose a random design on there to inspire our landing page to make it fit with the idea. And I know that's a really long prompt to get started here, but I think the more context the better. So, this is going to help at least lay the foundation for us. All right, this is the one shot it came up with. One cohesive recipe base, endless custom modifications. Stop boiling standard gluten-free pasta, stir-frying keto cauliflower, and preparing allergy-safe pork portions separately. Cook one unified base, let us orchestrate the swaps so everyone eats safely in harmony. So, my general rule for for just landing pages in general is like if there's too much text, no one's going to

12:17read it. And that's just me. I think living in this era of attention deficit, um people just don't want to read. People want to know what your product is and what it does and how much it costs. And that's it. So, I'm going to go back in to Google AI Studio and just ask to simplify it. Okay, that's great. Can we add more motion and change the color scheme? And then another thing is we need to build out the product so it actually works. I don't know why you put the product PRD and a technical spec and landing page buttons in the header, but we want this app to actually work and function for meal planning for families. Also, I want you to redesign the landing page so it's less than 1,000 words and just I want to know what the product is

13:03and what it does in the hero section and how much it costs. All right, this is looking much better. Let me refresh it and I'll just show you just the simple subtle motion does make a big difference. So, one cohesive recipe based on endless plates in harmony. I love that flashing, too. Just little little simple stuff. Here's our free lead magnet, launch core meal planner. What it is is it's automated multi-diet cohesiveness. What it does, dual portion substitution matrix. Awesome. I think the words are too big. Like, we just need to simplify the wording. Click a family and watch ingredients automatically morph. Family feast eliminates separate cooking pipelines. Toggle the profiles below to watch how a single base recipe responds dynamically

13:50to strict dietary limitations and allergen thresholds. Stone, all right. All right. How cool. It has a little Okay. How much money you can save and how many hours you can save by using the app. You can just start a free trial. Okay, cool. So, I think I'm going to use a Google Omni to create some kind of background video with movement just to give it spice up the hero section a bit. And let's go back into What did it say? Okay, so it changed and redesigned the landing page. Okay, what is the next step to actually make the app work? What APIs do we need to connect? We want to be able to have the user that signs up be able to basically put in how many family members they have, what is their diet restrictions or what diet they're

14:36going for, and then basically plan their meal plan for the day or for the week for them. Ingredients to buy, shopping lists, things like that. Google Omni is Google's new video model, I would say. It's kind of like their nano banana for video. You can basically say, "Make Creating videos as easy as having a conversation. So, it's like the nano banana for video. So, let's try it out. It's been fun using this the last few days, and you can get really creative with it. So, let's just give it a simple prompt. I want you to make a 16 by 9 video of food ingredients being chopped together in an organized way, coming together, being prepared in a recipe in a seamless, beautiful

15:23fashion with lots of motion in an artistic design style. So, that's my prompt. I'm going to go with 3.1 Pro and thinking level extended. It's going to be landscape. And well, let's just let it cook and see what happens. And then Google AI Studio came back. I have initiated the Firebase setup. The Firebase setup is going to allow us to authenticate users. It basically integrates right into Google AI Studio, making your database so easy to set up. So, you just click enable Firebase. All right, cool. I have successfully completed the next development milestone. It's fully integrated real-time Firebase authentication. What was implemented uh specifically was the Firebase core service setup, polished authentication bar and account model, some modern sunkissed amber organic forest theme. I do like the theme.

16:09Synchronized workspace persistence, customize the planner view, workspace to recognize user identities, and then real-time at client cloud sync. So, roster modifications, customize family members, diet profiles, allergy. So, cool. You'd be able to like plug in your entire family and just have a constant recurring meal plan generated every week or month. So, that's cool. Awesome. Okay. And let's go check our matte video. This was Martin Pikki. Th- This is so good. This is just so good. Super impressed. Uh this is just so good. I love this. So, I'm going to download the video. The

16:54videos are only a couple megabytes, so 2 megabytes. I'm going to go into where it says code right here, and then I'm going to basically just drop it into the components section of the source file. That was so fun. That was awesome. That was awesome. So good. I put a video that I want you to underlay the hero section to have it playing in the background. Make it look good and I don't want any sound, but I just want it as a visual element and an overlay the entire text over top. The text needs to stick out and stand out over top the video and I put it in the components folder in the database. Okay, we're going from this plain mining page with spicing it up a

17:39bit with that background video. It's going to look good. I just have a feeling. Oh, yeah. Look at that. Boom. Look at that. We do need to the opacity needs to be picked up a little bit, but uh I think it's going to look great. So, I could barely see the video. You might have to change the opacity so we could see the video a little bit more clearly and then also the text that's pulsing needs to be better visualized because it's kind of getting cut off. All right, so it says I have successfully updated the hero section, enhanced the video opacity so we could see it and then improve the contrast overlays with the text and the pulsing text. So, let's take a look cuz it was kind of dark before. Ha ha ha yeah, it's looking good. I love it. I

18:24love it. Look how good that looks. Oh, man. Oh, my. That is amazing. So cool. I love it. I love it. This just adds more flavor. Adds more engagement to the site. I think it's great. Wait. Okay, here's the demo. Here's how it all works. Roster family name Johnson family will go. You can add a family member. You could just say we're gluten-free and then we're allergic to peanuts and nuts. Generate cohesive plan. Wow, that was fast. Johnson family custom feast cohesive plan Mediterranean lemon herb chicken. Gives you a shopping list. It syncs with checkout. Interesting. Wow, it even

19:09gives you instructions. It's awesome. Let's go. This is sweet. Right in Tuesday, Wednesday. Awesome. I think we need to make it so it's like a weekly plan. Just making sure everything works. And when a person signs up, they get a weekly plan day by day for each person specifically. If they are allergic to something or whatever. Well, that works in the background. That I just love the the hero section. It's awesome. So let's go back to the landing page and let's sign up at I just have to use Google OAuth. I'm in the next thing. Integrate Google OAuth for sign up, too. Make it easier. All right, cool. So it integrated Google OAuth. It just makes sign up so much easier. If you're building any app, you need to have Google OAuth. It's just

19:55necessary now now this this time of year in 2026. If you don't have Google OAuth, come on. What are you thinking? Okay, so let's get this refresh. Google sign in. Sign in with OAuth. Let's go. All right, awesome. So I am here in the dashboard after signing up. So let's generate the the plan again. And awesome. So it only gave me Monday, Tuesday, Wednesday. Three core dinners aligned. Sync error. Sync with checkout. Oh, you can Wow, that's awesome. You can connect securely with Instacart and Amazon Fresh. I mean, that is that's insane right there. I mean, who's going to want to do that manually? So that automatically syncs to Amazon Fresh or Instacart. Wow, that's awesome. Returning to planner. Sweet. So this is

20:40what it looks like building apps in 2026. Like crazy that you even get this far in just what? 22 minutes? So yes, we need a little bit of refinement as far as like adding more days to the week, but it's just really crazy between Idea Browser and Google AI Studio to build that fast. I mean, there's more and more features built into these two tools, but this is just how I start building. You just need to jump into it and get going. Stop procrastinating. Start Stop over-engineering things. Focus on the one hero feature that's actually going to help people. This is just helping people plan meals better. It's that simple. There's nothing to it. And that's what it is. That's the hero feature. We don't want to over-engineer

21:26things. So, basically getting it like that, all set, there you go. And if you want to actually use these tools in your workflow, you can click the link down below to be able to actually test them out. So, Google S Studio is free to get going. Idea browser is free to get going. You can start working on the idea of the day. And then just see how you like it. Comment down below. What are your thoughts? Are you building in 2026? We'll see you in the next one.

Build this with us, live

Shipping Skool is a free community with 4 live build sessions a week. Bring your idea.

Join Shipping Skool — Free