Master These Skills To Build Your First App In Minutes

By Beau Johnson · · 18 min · 649 views

Chapters

  1. 0:00Built in 17 minutes
  2. 0:23What gets built: hero, backend, database, dashboard
  3. 0:42The two tools I use
  4. 1:44How the app works: budget and location in
  5. 2:03Skipping the $50,000 wedding
  6. 2:15Validating the idea on Idea Browser
  7. 3:50Planning the hero section with Google Omni
  8. 4:06Build this idea, into the Idea Builder
  9. 4:38Prompt one: the landing page wireframe
  10. 5:18Prompt two: the product requirements document
  11. 5:50Prompt three: the feature spec
  12. 6:51Sending all three and working through them one by one
  13. 7:53Why most AI-built sites look the same
  14. 8:16The 10-second cinematic prompt
  15. 11:24Starting the core MVP
  16. 11:32Routing, sidebar, and dashboard layout
  17. 11:52The constraints quiz and onboarding flow
  18. 12:36Vendors, checklist, and budget views
  19. 13:01Firebase and its built-in integration
  20. 13:14Adding login so users return to their dashboard
  21. 14:59The 1,000-character rule for landing page copy
  22. 15:27Running it live on a $1,000 budget
  23. 15:4020 vendors and 42 checklist tasks
  24. 16:24Connecting it to real data by location
  25. 16:53Adding a Google Maps API key
  26. 17:11An MVP in 20 to 40 minutes

About this video

Steal my prompts and build with me for free: https://www.ideabrowser.com/b/micro-wedding-coordination-platform?utm_source=youtube&utm_medium=video&utm_content=youtube-description I build a SaaS app at light speed with AI in this video, and the whole thing takes about 17 minutes. It is called Tiny Knot, and it is for people who want to get married without spending $20,000. You enter your budget and your location, and it hands back a filtered vendor list, a checklist built for a small ceremony, and a structured budget. I get the landing page, dashboard, database, and user login all working. You will also see me generate a cinematic hero video in Google Omni, wire up Firebase for authentication, and connect a Google Maps key so the vendor directory pulls real businesses nearby. TIMESTAMPS 00:00 – Built in 17 minutes 00:23 – What gets built: hero, backend, database, dashboard 00:42 – The two tools I use 01:44 – How the app works: budget and location in 02:03 – Skipping the $50,000 wedding 02:15 – Validating the idea on Idea Browser 03:50 – Planning the hero section with Google Omni 04:06 – Build this idea, into the Idea Builder 04:38 – Prompt one: the landing page wireframe 05:18 – Prompt two: the product requirements document 05:50 – Prompt three: the feature spec 06:51 – Sending all three and working through them one by one 07:53 – Why most AI-built sites look the same 08:16 – The 10-second cinematic prompt 11:24 – Starting the core MVP 11:32 – Routing, sidebar, and dashboard layout 11:52 – The constraints quiz and onboarding flow 12:36 – Vendors, checklist, and budget views 13:01 – Firebase and its built-in integration 13:14 – Adding login so users return to their dashboard 14:59 – The 1,000-character rule for landing page copy 15:27 – Running it live on a $1,000 budget 15:40 – 20 vendors and 42 checklist tasks 16:24 – Connecting it to real data by location 16:53 – Adding a Google Maps API key 17:11 – An MVP in 20 to 40 minutes WHAT YOU WILL LEARN - The three prompts I send first: landing page, product requirements document, feature spec - How to use Firebase's built-in AI Studio integration for a free database and user login - How to swap placeholder data for real businesses with a Google Maps API key - How to generate a cinematic hero video in Google Omni so your app stops looking generic - Why landing page copy over 1,000 characters costs you readers THE BUILD, STEP BY STEP 1. The idea. Micro weddings. A couple enters budget and location, and the platform generates a checklist for an intimate ceremony plus vendor matching that pools florists and suppliers taking single-table bookings. Idea Browser supplies the trend validation and the why-now. 2. The three prompts. I start with the landing page prompt, which acts as the wireframe, then the product requirements document for what to build and why, then the feature spec so the model understands which features matter. I send all three and have it work through them one at a time until each is complete. 3. Making it look different. Most AI-built sites look identical because anyone can spin one up in a minute. I use Google Omni to animate a 10-second cinematic sequence, opening on an empty golden hour wedding courtyard, and overlay the hero text on top of it. 4. The core MVP. Routing, a clean minimalist sidebar and top nav for logged-in users, then the onboarding flow built as an interactive constraints quiz, and the micro wedding checklist. 5. The dashboard. A header that moves between vendors, checklist, and budget views, with a checklist tool, a budget tracker, and aesthetic pairings. 6. The database and login. Firebase has a built-in integration in AI Studio, so it installs with a button. That gives me a free database and authentication, which is what lets a user come back to their own dashboard instead of starting over. 7. Testing it live. I put in a $1,000 budget and pick a restaurant buyout. It returns 20 micro vendors in the area, 42 checklist tasks, and a structured budget, with 14 matches meeting the criteria. 8. Real data. The vendor directory starts as static placeholders, so I have it swap those for live results pulled from Google Maps once I supply an API key. TOOLS USED Idea Browser — https://www.ideabrowser.com Google AI Studio — https://aistudio.google.com #GoogleAIStudio #IdeaBrowser #VibeCoding #AIApps #Firebase #Gemini #BuildInPublic #SaaS 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:00Let's go. We just built this app out in like 17 minutes and it's going to allow people that are balling on a budget that want to get married and they don't need to spend $20,000 to get married. They could just come to our site, budget and plan accordingly, pick a venue that's super cheap, and get married. And that's the whole point. We built this app from scratch, from zero. And if you want to see how exactly we put it all together from the hero section, from the back end, to the database, the dashboard, you're going to want to watch the video all the way through. And we use two tools that you need to be using as a builder in today's age if you like building and creating apps in 2026. Let's get right into it. We're going to be using two tools that are going to allow us to build at light speed. The first tool is Google AI Studio. The second tool is Idea Browser. This is

0:47where we're going to get our idea. This is where we're going to pull a lot of the prompts and the context to build this idea out. Let's get started. So, the idea that I came across today is a pretty recent one. This was the idea of the day the other day. And it's a wedding planning software app that we're going to be able to put together to be able to have people come into this app and organize their wedding, have everything filled out, ready to go, who's coming in, who's cooking the food, who's booking, who's not. This going to allow people to just not have as much stress when it comes to planning and building out a wedding. So, this is something we could build out pretty easily and charge a pretty hefty fee because if you've ever had a wedding, they cost thousands of dollars. So, basically it's called Tiny Knot. And

1:32Tiny Knot builds planning tools around a single constraint. So, basically under 30 guests, that's the niche we're targeting. We're not looking at 5,000 people at a wedding, looking for smaller weddings, smaller wedding venues. So, a couple enters their budget and location, and then basically the platform generates a checklist for intimate ceremonies only. And vendor matching pools florists and who takes single regiment orders, photographers by price by the hour instead of by the package. So, it's basically a way to be a budget-friendly wedding. You don't need to spend $50,000 on a wedding. This is going like this is the niche within the niche of what we're targeting. That's why it makes sense building. So, when you see here the trends, and this is what I like about Idea Browsers, you get a lot of validation of like should I

2:18even build this idea out? Well, you can see here micro wedding venues right here. You can see that it's in the uptrend since 2023. And also, you have a lot of confirmation that the opportunity and the problem, why now, and the feasibility are all signaling that it is a good idea to go ahead and build this. The lead magnet will be a wedding style quiz. So, basically an interactive quiz that helps couples identify their ideal wedding style for micro weddings. The front end is going to look a little like this. Starter planning tools at just $9 a month. They get access to basic planning tools including checklists, budget trackers, and tailored to micro weddings. And the premium hero feature here is the planning suite. So, this is the comprehensive suite of planning

3:04tools, vendor matching, and timeline management for micro weddings. And why now? It basically says micro wedding planning SaaS is poised for success with laser focus on an intimate weddings, a little bit smaller, right? 30 people or less. Addressing the growing trends of personalization, budget-conscious planning despite economic challenges, the platform can capitalize on market desires by offering specialized features and efficient workflows. You got proof signals here. There is a demand for micro wedding planner platform as evidenced by multiple signals including frustrations with existing large-scale platforms. There is a market gap here and the execution plan it comes with. I love this. This is going to be a really easy build and I want to be able to use

3:50Google Omni as well to build out a beautiful hero section. And the app's going to be rather simplistic, but it also provides a lot of value for people who want to save money. So, knowing who your customer is for is also a key before you start building. What I like about Idea Browser is we can just basically click a button called build this idea. And you can go into the AI workspace or you could go into the Idea Builder, which will connect right into AI Studio and pull in all of your information your contact and then we can start building. All right, so after you choose your idea inside of Idea Browser, you're in the Idea Builder. And basically there is some specific prompts that you want to pull into Google AI Studio to really kick this thing off.

4:36The first prompt that I highly recommend is the landing page prompt. This is essentially the wireframe that's going to help you create the structure according to the idea. I'll just read the first sentence here so you get the idea of what this prompt is about. So, it's telling the LLM to create a complete high-converting landing page for this business idea. This should include all copy, layout instructions, wireframe details that could be handed to any developer or any AI builder to create the actual page. So, we're going to copy that one. We're going to go into Google AI Studio. We're just going to paste that in. Very simple. We're not going to hit anything yet. We're going to do a few more. So, we're going to allow that one to marinate. The next one is the product requirements document. If you're not familiar with the PRD, it's

5:21also very important that you send this off with your initial prompt to give the LLM some idea of what you're even building. So, let's see here. You are a 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. So, we'll copy that one in. We'll go back into AI Studio. We'll paste that as well. We'll also go in here and create the feature spec. So, that is also under products feature spec. This is going to allow the LLM to understand what features is our app going to have because without it it's not going to know. So, this is going to allow us to build out the dashboard. So, it says generate a comprehensive feature spec that provides

6:06clear direction for development teams. This should include detailed user stories, acceptance criteria, technical requirements, and implementation guidelines. to copy that as well. We're going to paste that in. One more thing that's super helpful is to actually just copy the first part of the idea. Just this little paragraph. That's all it needs. Just give it a little more context. The more context the better. So, I'm using Whisper Flow which is a voice dictation software. You really need to be using it if you're building in 2026. Being able to brain dump ideas to the LLM is much easier than just typing them out. I'm going to give you this description of this app. It is a wedding planning app that's focused on niche markets in small weddings. Let's build this out. I have given you the landing page requirements, the PRD, and

6:51the feature spec. Work on one one by one until completion. Here is more information about the product I want to build. It is a web app. We're going to go, paste that in, and we're going to send that off. That's going to be basically what kicks this whole idea off so it starts laying that foundation so we can get an actual working app. So, build. It's going to do its thing. Okay, so I'm in Google Omni and this is a great way to animate just any part of your landing page honestly, but if you're looking to stop the scroll and get people to actually be interested in your site, creating some type of movement inside of your hero section is a must. And I am tired of seeing so many vibe coded websites out there. Anyone

7:36can spin up a website. I mean, literally, my dad, he's 70, came on to Google AI studio and spun up a website. He doesn't even have a computer. So, it's like anyone can spin up a website. So, we need to be able to take it the next step to be able to stand out and I believe using Google Omni is a great way to do that. So, they have a section here. It's called just videos. Um basically, this is going to allow you to create anything from everything or so they say, right? So, we're just going to use the landscape pro model and I have a prompt here that and is going to take this photo that I generated in Nano Banana and it's going to say animate this 10-second cinematic sequence. The shot begins with an empty golden hour wedding courtyard quiet and still for

8:22the first second, then guests gently begin to arrive and appear. And it basically is the theme of our app, right? Tiny Knot. And it's basically it's encompassing the theme of the app in a video form. So, that was the whole point. So, I have this prompt that I'm going to attach with a photo and I'll show you that photo here. So, you can see the photo here is, you know, kind of I mean, it's an empty wedding. There's no one there. So, basically the whole vision for it is to have this as the hero section, but it's an animated video where people start arriving and I thought that would be pretty cool. So, um that is what we're going with and I have attached it to this prompt and we're just going to let that cook while we go back and check in Google AI studio and see what it's doing. So, I want to

9:08um you know, just see what it did real quick. Let's just see. So, I have completed the complete high-converting landing page for Tiny Knot tailored for the micro wedding niche. Elegant visual identity implemented a sophisticated clean aesthetic. I I like that. Very simple. It shows bright colors rather than dark colors. Um we're going to redo this whole hero section, but let's just see how it did. Plan your perfect intimate wedding without the ballroom budget. I mean, have you looked at how much it costs to do a wedding? I mean, I'm married, but some someone in Rochelle, my wife's family, got married and they spent $20,000 and there was only 200 people there. So, traditional wedding planners assume a bigger party and a bigger bill. Tiny Knot is the first platform designed

9:53entirely for restaurant buyouts, backyard ceremonies, and beautifully small celebrations. I love it. So, I always like to see some like movement or some motion in the hero section, but it did a good job just with the one shot, right? So, irrelevant vendor catalogs, broken budget calculators, cluttered checklist. We really want to double down on the pain points of what it takes and what it is to plan and run a wedding. It's very stressful. Obviously, this is going to allow you to get more clarity during that process. So, we have two tiers, $9 a month and $15 a month and the FAQ and they can start a free trial. Okay, so let's see, we wanted it to do one by one. So, I'm going to go back into Google AI Studio and just say what is the next step

10:39because I'm pretty sure it's the feature spec. All right, that looks great. What is the next step? Well, let that go and do its thing and we will check out Oh, the video's ready. I haven't seen this video yet, so let's check it out. Wow, that's awesome. Okay, so I'm going to download that. Usually, the videos are like 2 to 3 megabytes, very small file. That was awesome. That's great. We're going to use that as our It's going to The text is going to be overlaid on top of that in the hero section. Let's see what said the next step was. Landing page looks fantastic, serves a strong foundation for acquiring first users. Now that the marketing entry point is built, the next logical step is to begin develop the actual core MVP, minimum viable product. Based on the business context and product

11:24requirements, we should start building the platform incrementally. The first step would be the app shell and navigation, set up routing, build a clean minimalist sidebar and top nav dashboard layout for logged-in users, and then the onboarding flow, the micro wedding checklist. Perfect. So, let's start with step one and step two. Okay, just a few minutes went by and been finished the first step at least, the interactive constraints quiz, built a clean multi-step onboarding flow where couples define their micro wedding parameters, it captures the guest counts, and then budget sliders, and then venue vibes as well. Curated vendor directory, awesome. So, it created a robust marketplace dashboard tailored for exclusivity and then also intimate

12:12events. Um, that's going to be cool. Um, so, you could test the flow, call to actions, awesome. So, let's get working on the next steps. Cool, the next thing it completed was the checklist and budget features, bringing the core micro wedding planning tools to life. So, the dashboard layout, it refactored the core workspace to use a shared sticky dashboard header, allowing seamless navigation between the vendors, checklist, and budget views. It created a checklist tool, a budget tracker, and aesthetic pairings. That is awesome. And I'm just going to ask, what is the next step because we want to get this thing working in within 30 minutes. What is the next step that we need to complete? Do we need to set up a database to start capturing emails? What is the next step? Okay, what I like to

12:58um usually go through is just setting up Firebase, and they have that built-in integration. Firebase is basically a free database that you could use to start. So, setting up the database is the next step, so we're able to capture emails effectively, save each user's personalized guest count, and then authenticate users so they can actually return to their dashboard. Without this, your your app's not going to work. You need a database. It's crucial. So, you could just enable it and and sets it up for you. It's so easy. You literally just click the button. Cool. So, Firebase has been installed and ready to go. So, the next step is you are absolutely correct. We need to start capturing emails. Now that the database is active, we're just going to implement a simple login sign-up flow. And I'll

13:43just say, "Yes, do it." And then we're going to implement that video on the hero section to give it that final polish and then we'll run through the app to see just how the some of the features work. And yeah. Cool. So, we have a fully working onboarding flow. The application is now successfully singling personalized data directly to the database and ready to go. So, we'll sign up for it in a bit. I do want to drop in that video and have it apply the hero section and then we'll give a full walk-through. I have attached this video. I want you to overlay the text to be centered and to be actually readable, so you may need to change the text color over top this video. I want this video to be the entire hero section. And I want a ton of movement in the hero

14:28section as far as the text and the buttons. So, I will attach the video. And we will hit send. All right. Now, we're just cooking with gas right here, baby. Look at how good that looks. Like compared to where it was to where it is, I mean, this is amazing. I mean, just look how it came together like in just 17 minutes from working on this project. It just looks really good. Like clean, not too wordy. You don't want to be too wordy. If your landing page has more than a thousand characters on it, no one wants to read that. You need to be straight to the point. Almost this hero section is a little too wordy. But traditional wedding planners assume a bigger party and a bigger bill. Tinyknot is the first platform designed entirely

15:13for restaurant buyouts, backyard ceremonies, and beautifully small celebrations. I love it. So, let's start our free trial and just check out what the back-end looks like. So, how many guests are we expecting? 20. Let's continue. What is our total budget? Let's say it's a thousand dollars. How do you visualize your day? Restaurant buyout, backyard ceremony, urban elopement. Let's do backyard ceremony. Your workspace is ready. We filtered 20 micro vendors in your area, stripped away 42 relevant checklist tasks, and structured your thousand-dollar budget. That's awesome. So, 14 matches meet our vendors. So, it's going to sign me up. Awesome. Captured the email, which is me. All right, cool. So, here's my vendors in the vendor directory. So, it has

15:59restaurant buyouts, hourly pricing, historic space. Cool. Awesome. 800 flat fee. I can view their profile. This is awesome. All right. Okay, I think these are just placeholders. It'd be nice to actually pull real data. So, let's go back into Google AI Studio. I believe after I log into the dashboard, the vendors and the photographers, I think are just placeholders. Is there any way to actually connect this to real data depending on my location? Okay. So, now instead of using placeholder data, it has successfully connected the dashboard to actual real data using the Google Maps platform, which is super helpful. So, the Google Maps integration, and it replaced the static placeholder vendor list, dynamic categorization. So, the integrated search logic that queries for small wedding venues. That's awesome.

16:46Dynamic photos and ratings, and fallback screens. So, the next step, it says to see the live vendors, you need to provide your Google Maps API key into the environment variables. We can just plug that in. And once we do that, the app is ready to go. See, so now building apps today does not take weeks, even days anymore. You can literally spin up an MVP in just 20, 30, 40 minutes by using these two tools by Idea Browser to validate the idea, which is needed because you don't want to be building an idea that nobody wants. So that way, using Idea Browser, you get a little bit more clarity on what you want to build. And then using Google AI Studio with their newest models and Nano Banana and Google Omni, all tied together to build out one cohesive page, it's like what

17:32are you waiting for? I have the links to these tools down in the description down below. Try them out and start building because if you don't start building now, then you're going to be playing catch-up for the rest of the year. We'll see you guys in the next one. Have a blessed day. Bye-bye.

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