How to Build a Budgeting App with Google AI Studio (No Coding)

0:00Oh my goodness, we just built this website out in just 20 minutes. It is a financial tracking app. Let's see if it actually works. You go to the dashboard and boom, you got all of your tracked bills, what you spent for the day, how much money you got left in your bank account. If you want to see how we actually put this app together, you're going to want to watch all the way through. We used two tools that you need to be using in your daily AI workflow. Let's get right into it. In this video, we're going to be building an app in under 20 minutes and I'm going to show you how easy it is to start it in 2026 even if you have no experience. We're going to be using Idea Browser to be able to find our actual idea. Then we're going to be using Google AI Studio to build out and within 20 minutes, you're going to have the same app built out if you just follow along. So, first thing

0:45we're going to do is jump into Idea Browser. If you don't have a free plan, go ahead and sign up because you'll get a free idea emailed every single day. And if you do end up signing up, they do have a database of over a thousand ideas on their paid plan and we can just go over here and search through things that kind of resonate with what we want to build. And maybe you have your own idea. Maybe there is an idea that you really like on here. Well, you can actually take your own idea and run it through their idea agent to build their your idea. So, you have an idea agent, you can research your idea with a team of AI agents. That's what you could do as well if you don't find an idea that you do like. But let's search through here and I'm just going to show you the raw and real of how I go about finding an idea, seeing if it's actually going to be

1:30validated within the niche and see if it's actually worth building. There is so much on here. Let me go through here and actually just figure out what I want to build and then we can go ahead and start the building process. All right, I love this idea. Lock screen spending tool with budget nudges. So, basically it's called Nudge It. And stay with me here. People check their phones over a hundred times a day and they get zero financial context from any of these glances. So, the banking apps that we use to show the raw balance, budgeting tools require you logging in and parsing dashboards. So, basically Nudge it is a home screen widget that surfaces three numbers. What was spent today, which bills will hit this week, and how much runway remains before your next paycheck. So, you basically connect your

2:15bank account through Plaid, and the widget pulls those transactions, flags reoccurring changes, and runs a predictive logic on upcoming obligations. So, when spending across When spending crosses a budget threshold, a behavioral nudge appears on the lock screen. I think this could be really huge and is an amazing idea. You don't have to open an app or anything, or go into your bank account. It's just basically giving you live financial awareness that lives right inside of your phone. So, you could build it as an iOS app. Cool thing with Google AI Studio, they just launched a feature with build an Android app. So, we can apply that same logic and actually get this thing going. So, we'll build it out like the landing page, the back end, the dashboard. So, if they wanted to log in through the web app, they can. But, then

3:01we can also build directly in Google AI Studio and get it actually on the Play Store. So, let's go through this and start iterating. You could see everyone is here. Um the keywords are a big uh sign and indicator, right? Like day-to-day expenses app, financial tracking app. You got spending tracker app, expense tracker app. So, there's obviously search volume around these keywords. And you can see opportunity, problem, feasibility, why now, all eight or nines. Gives you a quick trend analysis. The shutdown of Mint and the shift I mean, you remember Mint? I used to use Mint uh for a lot of my financial tracking, you know, pre-2020. But, yeah, it has been shut down. They were partnered with like Intuit TurboTax, if

3:46you didn't know. Uh widget-first solutions created a gap and opportunity in the personal finance space with increasing demand for quick actionable financial insights by open banking APIs. So, we could connect through the Plaid your bank account through Plaid, which is pretty easy. Most bank accounts, I'd say like 99% of bank accounts you can connect through Plaid. And yeah, so it said, "Why now?" And it gave you the proof signals like the demand for a spending snapshot widget with bill prediction is driven by emotional frustrations over unwelcome financial surprises. You know, especially in the era of sub scriptions and all of that. I mean, a lot of times people don't really know what they're paying for because they subscribe to something years ago and they just kept getting charged. So, the execution plan here is launch with a

4:31widget focused MVP offering instant financial snapshots. So, using Plaid for seamless bank integration and then engage the users on Reddit and TikTok for rapid traction, then leverage their feedback to refine the features. So, this is great. I mean, this is a great little snapshot of what the app is about. And if you'd go in to build this idea, you can go into the AI workspace and inject it right into your favorite LLM, or you could go and click on the idea builder and it will pull the prompt right into Google AI Studio. And I'll show you what prompts that it comes with and the ones that are important that you should focus on first before you start building at all. So, the first one that I would go with is your PRD, your feature spec, and your landing page.

5:16Comes with the wireframe blocks as well. And then the brain packaging. We're going to do one by one just so we don't overwhelm Google AI Studio. We want it to actually lay the foundation properly and not give it too much context so it gets confused. So, the first thing I am going to go with is the landing page and then we'll go with the PRD. So, we'll just go Google AI Studio. You just click it and it's going to pull in that prompt, which is great. Make sure it pulled in the entire prompt. Okay. So, just to make sure. There we go. And then also there's more to it than just hitting send as tempting as it is. We're going to actually just copy the summary of the ideas just to give it a bit more context. So, um just these first few paragraphs. You can export this entire

6:02file. Like you could download the data right here. It says export all research and analysis. You could do that, but then you're getting your LLM with so much context. It's good to just start little by little in phases. Like I said, it's many times. It's like building a house and you need to lay the foundation correctly and I think the front-end UI design, landing page, and everything. Like getting the features actually built out one by one. Like what is the hero feature? Needs to be like a slow refined process, not all in one. Like there's no such thing as one shotting an app with one prompt. I'm sorry to say. As fun as it sounds. So, I'm going to use these Whisper flow to be able to brainstorm my idea with Google AI Studio. I really like this idea. It is a budgeting app and we're going to build out the landing

6:48page as well as the dashboard, but it's specifically going to be aimed towards launching as an Android app that we could put on the Play Store. So, let's build out the front-end landing page. Let's build out the dashboard where people could log in on the web app if they wanted to, but let's have the focus of building this out as a mobile app. So, here is what the app is about and I'm giving you a prompt for the landing page. Come up with a minimalist, simplistic, modern design with lots of motion, less than a thousand characters on the landing page that just conveys what the app is and what it does and who's it for and a demo section and how much does it cost? That's it. So, that is my first prompt going in plus the

7:34summary and then let's let it build. All right, here's what we got after the first one shot, which looks pretty good. Pretty good for the first one shot. So, it understand that it's not wanting to be too wordy here. So, it basically says what it does, financial awareness lives where your eyes go naturally. People check their phones 100 times a day. I think it's still a little bit too wordy. Like, we could do without this. We could do without this. Too wordy. That's actually the first thing that I'm going to tell it. It's just go back, too wordy. Make Make it have less words. Less words in the hero section, specifically. And where it says, "Who's it for?" Remove that completely. And the little ambient finance widget pill,

8:20remove that completely. Also, come up with a better logo. Use Nano Banana Pro if you have to. That logo is terrible. Also, Android Play Store MVP pill, uh that's not needed. And otherwise, good job. Okay. Then, we're going to go back into Idea Browser. And where we're going to click on Build this idea, Idea Builder. Remember when I talked about product requirements document. This is a very important part of your project. Don't skip it when building. Whether you add it as the first thing you do or the third thing you do, just don't skip this. So, here's the prompt that comes with Idea Browser. And you could refine it as needed, but it says, "When you're summing this off to an LLM, you say you are a senior product manager and

9:06technical specification expert. Create a PRD that clearly defines what to build, why to build it, and how success will be measured." So, uh this is huge. This is really big. We're not going to give it right now. I'm just going to copy it and see how it does with those changes on landing page. Um but that'll be the next thing. And then then after that, we'll do the feature spec. Okay, it did a much better job. I love it. Nugget Banana Pro. I don't know what I was thinking there, but um it does have a better little logo. So, um financial awareness lives where your eyes go naturally. Um it did cut this down. Oh, cool. It shows like the It shows, you know, how it works. Notifications on your lock screen. Um

9:52but this looks kind of janky, so we'll fix that as well. Okay, well, for the logo, I just meant use Nano Banana image generation to create the logo. But, uh Nugit Banana Pro, I mean, that sounds cool. But, yeah, remove Banana Pro. I think he just misunderstood what I was saying. And um also, when they're clicking buy an $8 latte or ride share $42, um the scroll looks really weird in the UI of the phone in the hero section, so that will need to be optimized better. And other than that, what is the next step to get this app working? Like I said, I'd like to get it working as an Android app, but maybe we could test it out as a web app first. Well, send that one. Okay. So, it removed that, and

10:39let's see what it said. It says, "I have successfully refined the landing page layout, streamlined the copywriting, and redesigned the branding, streamlined the hero section." So, it did this already. The road map, how to get it working. To transi- To transition Nugit from a sandbox simulation into a production application, we can process through these specific phases, testing the web app today. So, that'll be good. Just getting like just making sure it works. Like, I can actually track things and expenses and incoming paychecks. Click launch web portal and authorize the demo session, configure custom recurring bills, adjust daily limit thresholds. Okay, cool. Connect real data and accounts, your full stack web app, durable persistence, integrate Firebase

11:25Firestore to secure user configurated limits, bills, and notification histories, and then real Plaid sync, integrate the Plaid Link SDK. This connects the app directly to Chase, Wells Fargo, Bank of America, instead of using mock buttons, and then packing as a native Android app. Since the UI is built to replicate the native Android home screen experience, packing it from mobile is highly straightforward. So, Capacitor, JavaScript wrapper, just wraps the React application. Awesome, awesome. Home screen widget, Android home screen widgets are written in native Kotlin, Jetpack Compose. Okay, okay. And then lock screen push notifications, hook up Firebase cloud messaging. When a transaction is logged by Plaid, the backend calculates the

12:11budget nudge and fires an actual OS level push notification that lights up the user's real lock screen. That's cool. That's great. That's great. Okay. So, this is what it looks like now. Very simple. I do want to change the colors. So, while we're getting the next prompt, we're going to change the color scheme a bit. Please change the colors. Leave the website exactly the same, but I just don't like the green. And then here's the PRD. I'm also giving you the product requirements document. Make sure that this is added just for our road map. We'll send that off. Okay, came back with the color purple. And if you are building any website, that is a color personally I would avoid. It just has the vibe coded look that people could

12:56see from a mile away. So, let's choose any color other than purple. Any other color. Okay. So, while that's doing its thing, I like the overall website. Simple. Needs to be simple. Let's see if they had fixed this. Okay, cool. Awesome. All right, so now we're going to actually test this out. All right, so I completely redid the landing page. I just wasn't happy with it. I wanted something a little bit more minimalistic, and I wanted to actually create some type of moving video that we can overlay this text. So, I'm pulling up Google Omni. This is their create anything from any input. So, it's kind of like the Nano Banana for video. This is going to help us stop the scroll when people come to our landing page. So, I'm going to go ahead

13:42and build a video to be able to really stop the scroll and get people to actually read what's going on with our app. So, Google Omni, really good. I'm just going to try it out in Gemini. And we're going to Here's the initial prompt. So, just give it off something So, I'm going to go 3.1 Pro, and then we're going to go to videos. I want you to create me a finance-related video that has to do with saving money. So, someone checking their phone after making a lot of big spending, and they get an app vibrating on their phone where it shows how much money they've spent, and they're in shock. Iterate on that. That's going to be the prompt. We'll come back. I don't know. That was just what I could think. So, that is

14:28what it's going to do is create a video, and we're going to overlay this text underneath it. And I'm going to go back into Idea Browser, and I'm going to go into the Idea Builder, and we're going to actually give it the feature specs. So, the feature specs is another important one why you need to integrate it. It says, "Generate comprehensive feature specifications that provide clear direction for development teams. This should include detailed user stories, acceptance criteria, and technical requirements." So, we're going to go ahead and copy that, and then give that to Google AI Studio. Here is the feature spec prompt. I want you to start integrating some of the features so we can get this app working. Boom. And like I said, we could always wrap this and launch on the Android Play Store to be

15:15able to actually build this into a mobile app. If you're wanting it to launch on the App Store, you would need to do something similar. Except you would need an Apple developer account. So, that's something another video for another day. But, obviously this is more towards a mobile app rather than a web app. But, getting getting it working as a web app just as important. So, that is going to be working. Okay, let's see what it generated. I have no idea what this is going to be like. >> I spent that much already? >> There we go. Wow, that was great. Okay, so we can download it and we'll integrate it into the back of that hero section. I think that will be better

16:00than what we have, let's just say. So, we'll probably have to put this off to the left-hand side. So, let's see here. I'm going to go into the code and then I'm going to put it under components. You could just drag and drop, put it into the component section, and what was it named? I want you to create me. It will rename it. Where did they go? I put a hero vid mp4 in this code base. Can you apply that to our hero section and then overlay the text onto the left-hand side? Make it go the full width of the hero section. No cutting it off. Okay, that's a prompt. It's going to apply that video. I have generated the comprehensive feature specifications. Here's what was completed. So, it created the feature spec based on the

16:45detailed prompt. So, in the business context, it captures the video or the product vision and then the use cases and then the functional and non-functional requirements, the ambient financial awareness widget, and transactions and bills integration. In the dashboard, I implemented real-time fees for recent transaction upcoming bills list. This is great. So, let's do this last piece to the puzzle and then we're going to walk through the app just to give it a quick run down to see how it works. All right, this is looking really good. Um, I'm going to add a little bit more opacity, but I like it. I like it. I think it looks good. You just can't really see it. It's hard to see. That looks great. Can you add a little bit more opacity so we can

17:30see the actual video? And then let's do one quick run through just to make sure the app works. So I could be signing up through Google OAuth for a free trial and I want to see if I can connect my bank account. Okay, this looks great. This looks great. I thought I did a great job. So now let's sign up and see if this actually goes through the OAuth process. Sign in. I can connect with Plaid. That's awesome. This would allow me to connect my bank account through Plaid and be able to actually use the app. So let's see what it said about the Plaid. So I've increased the opacity of the hero section so it's more visible. And then connect your bank via Plaid, flow to the dashboard and onboarding experience.

18:15Start free trial. Awesome. Okay, I tried clicking the sign up or connect with Plaid and nothing happened. Can you look into this? All right, cool. So I investigated the issue and pushed the important fix. It Firestore permissions fix. The main reason nothing happened when clicking connect to Plaid is that your Firebase security rules were blocking the application. Okay, and then the iframe pop up restrictions. Okay, so let's give it a run through real quick. Wow. Cool. This gives us a great idea of how it's going to look. And then we would go ahead and wrap this on the Android Play Store or on the App Store. And you can see spend today, upcoming bills, safe runway. That's amazing. So if you want to learn how to actually build these apps, check them out down below. I put

19:00Idea Browser and Google AR Studio to actually put these things together. You can learn for yourself just by following along these simple videos that we make on the channel. And just take an idea, run it through Google AI Studio, and you'll be surprised on what you get. I mean, 30 minutes later, we have a working landing page. Yes, we do need to connect some last few APIs to get connected with Plaid, and then wrap this thing to launch onto the App Store. But, that's insane.