How to Build Apps Better Than 99% of People

By Beau Johnson · · 17 min · 273 views

Chapters

  1. 0:00Testing the hair analysis
  2. 0:18A full report in 15 seconds
  3. 0:47The whole build in under 30 minutes
  4. 1:01A $50 billion market
  5. 1:23Why now, and the proof signals
  6. 2:43Longitudinal tracking with Reddit and YouTube signal
  7. 3:28Moving into Google AI Studio
  8. 3:38Trying the Google Omni model
  9. 3:58Planning a before and after hero
  10. 4:22Hero feature first, 80 to 90% of the MVP
  11. 4:37Copying the product requirements document over
  12. 4:50Exporting the prompts as a JSON file
  13. 5:06Building the feature spec before the landing page
  14. 6:59Uploading my own photo
  15. 7:22Hitting an error and pasting it back in to fix
  16. 8:21Prompting a video background hero
  17. 8:36Generating the before and after in Nano Banana
  18. 9:15Animating the transition with Gemini Omni
  19. 10:13The overhauled landing page
  20. 12:03Dropping the video into the hero
  21. 12:16Pricing at $12 a month
  22. 13:06Preview looks different from the real browser
  23. 13:20Catching the sidebar bug
  24. 14:09The finished flow, photo in, report out
  25. 14:25Capturing the email for a free trial
  26. 14:44Reading the market gap analysis
  27. 16:26Why distribution is the hard part

About this video

Steal my prompts and build with me for free: https://www.ideabrowser.com/b/hair-loss-progression-tracker-with-monthly-selfie-comparison?utm_source=youtube&utm_medium=video&utm_content=youtube-description I built an app that analyzes hair loss from a single photo and generates a full report in about 15 seconds. Upload a selfie, and it reads the image, returns an assessment, and tracks your progress month over month so you can see whether a treatment is actually working. It is a $50 billion market with real pain behind it. I found the idea on Idea Browser and built it in Google AI Studio. The part worth sticking around for is the hero section: I generate a before and after pair in Nano Banana, then use Gemini Omni to animate the transition into a video of hair growing back, and drop that straight into the landing page. TIMESTAMPS 00:00 – Testing the hair analysis 00:18 – A full report in 15 seconds 00:47 – The whole build in under 30 minutes 01:01 – A $50 billion market 01:23 – Why now, and the proof signals 02:43 – Longitudinal tracking with Reddit and YouTube signal 03:28 – Moving into Google AI Studio 03:38 – Trying the Google Omni model 03:58 – Planning a before and after hero 04:22 – Hero feature first, 80 to 90% of the MVP 04:37 – Copying the product requirements document over 04:50 – Exporting the prompts as a JSON file 05:06 – Building the feature spec before the landing page 06:59 – Uploading my own photo 07:22 – Hitting an error and pasting it back in to fix 08:21 – Prompting a video background hero 08:36 – Generating the before and after in Nano Banana 09:15 – Animating the transition with Gemini Omni 10:13 – The overhauled landing page 12:03 – Dropping the video into the hero 12:16 – Pricing at $12 a month 13:06 – Preview looks different from the real browser 13:20 – Catching the sidebar bug 14:09 – The finished flow, photo in, report out 14:25 – Capturing the email for a free trial 14:44 – Reading the market gap analysis 16:26 – Why distribution is the hard part WHAT YOU WILL LEARN - How to generate a before and after video for a hero section with Nano Banana and Gemini Omni - Why you build the PRD and feature spec before touching the landing page - How to export your prompts as a JSON file and hand the whole set over at once - How to fix a build error by pasting it straight back into AI Studio - Why you check the live site in a real browser instead of trusting the preview THE BUILD, STEP BY STEP 1. The opportunity. Hair loss is a $50 billion global market that keeps growing, with severe pain and strong proof signals. People want to know whether a treatment is working, and today they squint at old selfies to guess. 2. What it does. You photograph yourself with the camera already in your pocket, the app analyzes the image, and it returns a report plus month over month tracking so progress becomes visible. 3. Setting the order. I focus on the hero feature first and aim to get 80 to 90% of the MVP finished before anything else. The product requirements document goes over first, then the feature spec, then the landing page. 4. Handing over the prompts. Idea Browser lets you export the prompt set as a JSON file, so the whole context moves across in one attachment rather than piece by piece. 5. Hitting a real error. My first photo upload throws an unexpected token error. I copy the error, paste it back into AI Studio, describe what happened, and have it fix the analysis flow. 6. The hero video. I use Nano Banana to generate two photos, a man with balding hair and the same man with hair, then use Gemini Omni to animate a seamless transition where the hair grows back as the video plays. That becomes the video background behind the overlay text. 7. Checking it properly. The Preview pane and the real browser disagree, and opening the live site reveals sidebars that had been hidden. I fix the alignment so it scales at any width. 8. The business. Free analysis to start, with email capture for the trial, then $12 a month for unlimited AI analysis. The gap analysis covers geographic and integration opportunities and where engagement is available. TOOLS USED Idea Browser — https://www.ideabrowser.com Google AI Studio — https://aistudio.google.com #GoogleAIStudio #IdeaBrowser #VibeCoding #AIApps #Gemini #NanoBanana #BuildInPublic #AITools 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 see if this hair analysis works. Nice. Let's go. Identification. Potential signs of hair loss. Temporal recession. There appears to be mild to moderate recession in the temples. Frontal hairline elevation. Oh my goodness. Just the fact that we're able to generate a report and it just took 15 minutes to build this MVP out. Again, we used idea browser for the ideation. We used Google AI Studio to build it out. If you want to actually learn how do we build this out from A all the way to Z from designing the landing page and actually building the MVP out, watch to the end of the video. Let's get right into it. We're going to be using idea browser to find the idea and then we're going to be using Google AI Studio to

0:45build the idea. This is going to take no more than 30 minutes and I'm going to show you the step-by-step process. And you know what? The idea of the day just hit home. I think that this is going to be an amazing app to build. It is a treatment outcome platform for the $50 billion hair loss market. You can see this is obviously in demand from basically the keyword research that idea to browser does. You can see hair loss treatment is growing in volume and in searches. You can see the opportunity here is exceptional. So you could see severe pain and this is going to be something that's going to be fairly easy to build. You know it says why now? It's a $50 billion global market and is growing. And then the proof signals, a hair loss tracker in general with AI

1:31enhanced meets several validation criteria suggestions. A strong potential market opportunity. And how I kind of think through these ideas before I even build them is I'm just making sure that this is something worth building. So obviously it is in demand. People are worried about hair loss. Not just men and women, but every day people are like, you know, losing their hair. And this is something that can actually be helpful as a tool to help people with treatment plans. my whole idea of using like your camera on your phone or on your laptop to just snap a photo, you know, whether it's like a front photo, a side photo, and it gives you an analysis on, you know, if you're losing hair, maybe some treatments, some red light therapy, some, you know, medications that you can take or what you can do, hair transplants to be able to catch it

2:17early to be able to solve this hair loss crisis. So, that's kind of how I'm thinking through this idea and I'm going to show you what tools we're going to be putting together to actually build the MVP out. Okay. So, this is exactly what I was referring to as far as the exe execution plan. You could see here launch hair loss tracker with AIdriven selfie analysis. So, this offers users accurate longitudinal hair loss tracking, integrates Reddit and YouTube strategies for rapid user acquisition, and then refine these with dermatologist insights. I love it. All right, so the cool part here is once you find an idea that you like, and by the way, there's over a thousand ideas in the database here on idea browser. So, if you just

3:03click on find ideas, it has a idea database. If you just wanted to do some market research and maybe come across an idea when you're out jogging or whatever and you're like, I wonder if this is even worth building, you might need to search for it and look it up because validation before you start building is the main thing you need. You don't want to be building apps that nobody wants. I'm sorry. Okay. So, you can build with AI Studio right here. Just you click the button. It's going to pull over a lot of the prompts and the context from Idea Builder into Google AI Studio. This is going to be amazing. We're also going to be trying something a little bit different with the Google Omni model. This is their create anything from anything when it comes to video generation. And it's it's similar to like the nano banana model with photos,

3:50but now they have it for video. And I have tested it out. It is really cool. Specifically wanting to use it for the hero section. So, I'm wanting to maybe visualize something like a before and after where, you know, the before photo is a person that's balding and then the after photo is a person with hair regrowth and making it some type of like cool transition in the hero section I thought would be sweet. Um, just to be able to stop the scroll. Our whole goal here is not to just create another vibecoded website that features don't work. We want it to be solid. We want to work on the hero feature only. make sure we can get 80 to 90% of the MVP finished in this video and then, you know, add some bells and whistles down the road. So, like I said, we build with AI Studio. We copy a lot of the prompts

4:35over. The first prompt that we're going to copy over is the product requirements document. So, let's copy that over and I'll explain why that's important. Okay, so I'm in Google AI Studio and I'm just going to attach a lot of the prompts here that I exported as a JSON file. You can do that within idea browser. That way it has full context when we kick off this initial prompt. Why we're starting to focus on the product requirements document is because this is kind of the road map and the vision for your idea. Really important to start there and then also building out the feature spec before we even start with the landing page and building out the features. It needs to know this detail before we even start. So I'm going to kick it off with this initial prompt. I have attached an idea for hair loss and I want to build

5:20this into a web app. I want to use AI to help people learn when they're losing hair and how they can fix it by simple suggestions and details and medications and treatments that people can use to get their hair regrowing. So, I've attached the JSON file. Let's specifically start with the product requirements document and then move to the feature spec and then move to building out the landing page. Let's build out a plan step by step so we can start integrating it. All right. So just a few minutes later it says I have successfully implemented your request building out the foundational plan in the initial web application for follicare. So I do like I will say and this was what I was envisioning is having a free demo where people can just

6:05use the product right away you know not have to find out to do a free trial or paid right away you know having them just use it and test it to be able to give them like a sneak peek on how it works. So, it built out the PRD. It drafted a clear overview of the app's target audience and core objectives and users journeys focusing on accessibility and educational guidelines. And then it did the feature spec. It outlined the core feature, the modules including the landing page UI and the image upload mechanics. I love that. And it designed and built the single stream screen application with a high clean contrast modern uh architecture. So the upload component, the AI analysis, uses the Gemini AI model to gather the data, and then the medical disclaimer. Very cool. So the app is fully compiled and

6:51running. We could test it right now and see if it works. So let's do that. All right. So let's take a screenshot of myself and let's upload a picture just to see how I'm doing. I don't know. All right. Upload the photo. There I am. If this works on the first try, I'll be impressed. Analyzing image patterns. It didn't work on the first shot, but that's okay. This is part of the building process. Let's go back and tell the agent in Google AI Studio to fix this so we can at least get this MVP working and then we can start working on the actual landing page. So, I copied the error and then I pasted it in here and it said I got an error when trying to upload a photo and get the analysis. Please look into it and fix it. Okay, so it says the unexpected token error was happening because modern phone cameras

7:36often generate structural images larger than 10 megabytes. Okay, interesting. So we will rerun this again. Okay, so now that we have confirmation um that it actually worked, if you go back in here, I ran the analysis and uh depressingly it said that I am, you know, losing hair, but I am, you know, turning 37. So um I guess I don't know. I I guess I need to start, you know, using some uh treatment to not lose my hair. But nonetheless, anyway, but it gives you some good feedback here on what to do. So, it works. The the initial analysis works, which is really cool. So, I gave it this prompt here to kind of take the next step as to completing this app. And, you know, I told the LLM it worked, but I said that I want to completely

8:21redesign the hero section. And I said, please create a new hero section with a video background and add an overlay text on top. The video should be the before and after transition. So, someone with really bad balding hair and then followed by the same person with the hair regrowing. So, I'm going to use Nano Banana to just generate a default photo of a person that has balding hair. And then I'll create a after photo of a p that same person with hair. And then I'm going to use Gemini uh Gemini Omni to actually pull that transition together in a seamless way. And then I'll give it back to AI Studio to kind of use that as the background video. I hope that all makes sense. But that's what I'm going to be doing while Google AI Studio is working in the background. Okay, so it basically worked in the background and built out the complete

9:07landing page. I now have the two photos that I'm going to use as the before and after to create that video inside of Gemini Omni, which I've been playing around with. And it's pretty nice. I mean, to be able to just take two photos and turn it into a video, it's also very fast. So basically the prompt is going to be take the before photo and turn it into the after photo using some type of transition that is seamless. So I want a beautifully made video that takes the before photo of the man with no hair and transforms it into the after photo with the same man with hair. So as the video plays, the hair slowly grows into the end after photo. And now I'm going to

9:53attach those photos. The photos are labeled before and after. Make sure you use the right ones. So, here's the photos I generated in Nano Banana. Um, basically just a man with balding hair with a man with hair, keeping the likeness the same. So, let's send that off. Well, that works in the background. We can check on what it did. So, I have completely overhauled the landing page. Uh, left a spot for the video, which is going to be awesome. I think that's going to look great. Try your free analysis. This is going to be amazing. This is really, really gonna be nice. I mean, like I said, 15 minutes from idea to MVP is pretty cool with these tools. And nowadays, I don't know what you're doing if you're not building apps. To be able to at least build that shipping muscle, that is a skill that is in demand right now. And there's no reason

10:39why not to use idea browser to at least give you the templates and the prompts to be able to pull into Google AI Studio to build this out. I mean, it's an amazing time to be alive, to be building. So, yeah, that's going to keep going uh in the background. The omni video, it shouldn't take more than a few minutes to generate. And I'll check right back when it's done. Okay, it did a pretty decent job. I wanted it pretty simple. So, check this out. It's just a 10-second video. Little bit on the slow side, but you can see it growing, which is cool. Awesome. I'm going to see if it can add some effects. Okay, that's great. Can you make the hair grow a little bit faster in the beginning? and can you add some sparkly fancy effects and just see what it gives us after that. But that is a pretty good first uh

11:25iteration. I'll download that and [clears throat] then I'm going to pull it into Google AI Studio to apply it to the hero section. Okay, after that prompt, let's see what it says. I have not seen this video before. I think that's better. I think I'm going to go with that. Just more action, less boring. Remember, we're trying to sc stop the scroll here. So, these videos are usually like two to three megabytes long. You can always, you know, upgrade them to have a higher output, but this is going to work for at least the first version, right? So, let's add this video to the prompt that we're going to send in Google AI Studio to implement that to our hero section. I have attached the video I want to use in my hero section. Can you add this video that is attached to the hero section? Keep it underneath the text. All right. Well, here it is.

12:10Look at that. Beautiful. Stops the scroll. They can upload and test the app. If they want more uh unlimited AI analysis, they could pay $12 a month free. One free analysis basic. We can at least capture the email, which is awesome. So, very cool. Um, let's see. I want to do one last prompt cuz on the website, it actually is cut off on top. So, when I open the website in another page, the top part of the hair is cut off in the hero section. But when I'm in Google AI Studio, I could see the full video. Can you help me fix this or see what's going on? All right, now we're cooking. So, it looks better. I'm little small adjustment. I would make it so you can actually see the full video. Let's

12:55go into Google AI Studio and tell the LLM to do that. So, I just in the website, I don't see the full video. I see the full video in Google AI Studio Preview, but when I open it up in another tab and open up the website, half of the guy's mouth is cut off. I could see the hair. Is there any way we could see the whole full video? Okay, let's see if it actually listened to me and did what I had asked better, but now we see the sidebars. Okay, trick. Because we see it beautifully in Google AI Studio, but now we see the black bars on each side. We need to make this fit. So it looks good but not the top cut off or the bottom cut off. So make it so it aligns perfectly and scales no matter

13:40the screen size. Okay, this is way better. Jeez, those black bars were killing me. So let's refresh this. Make sure it looks good. So just pretty incredible on the tools that you could use to build something that actually serves a purpose and brings value and you don't really need to overthink it. Obviously, we can go in and do some touch-up details, redesign the landing page, but we have this little video here of the guy's hair growing, the MVP works. You could drop in a a photo, get one free analysis. You know, I like this. I was obviously go in here, maybe provide some more detail down below. Um, contact, also provide, um, you know, have people log in and be able to at least capture the email for, you know,

14:25the free trial so we can upsell this paid plan for $12 a month. And this is something you could possibly go B2B with with partnering with um, salons or hair stylists. Um if you go back into idea browser and just check out the actual idea as far as um like the market gap is the biggest opportunity lies in providing a doctor ready AI enhanced tracking tool for hair loss treatments addressing a critical need for object uh efficacy proof. So if you click on understanding the market uh gap analysis it goes into greater detail which is pretty cool. um underserved cons uh customer segments, women with diffuse thinning communities show high interest in tracking but lack targeted tools.

15:11Tapping into this unmet demand can unlock significant engagement. And again, this app isn't just made for men. It can serve women as well. So postgp1 users with no dedicated monitoring tool for GLP-1 related hair loss, this segment remains untapped. So also geographic opportunities, integration opportunities, uh direct consumer platform partnerships, clinic partnerships for post-transplant cl uh care. So pretty cool. Um a lot more detail here that we could get into on why this just works, but yeah, I mean it's really simple as far as like you don't need to overthink it. You really do need to make sure that the demand is validated. Like you could see rogue gain for women. You could see saw palmetto for hair loss. That's a popular treatment. balding treatment. All of

15:58these are proof signals that this app is in demand. Also too, I always try to think about how does the marketing strategy look. Marketing this would be fairly easy because you could use Omni, you know, Gemini Omni to create a lot of the short form content. Maybe you overlay a voice over and you create, you know, some value on like how you can actually sell this app with organic content because that's the next thing is like we could build apps all day, but if we don't have distribution, that's the hard part. So that's where my mind goes when building this out. So obviously using these tools by Google are very powerful. Also using a tool like idea browser to validate your idea. Again, you don't have to do hair loss. There's over a thousand uh ideas in their database and they have an idea of the

16:44day that comes out into your email. Um but if you do sign up, you could check out the other thousand ideas. Um they also have a builder too where you can store ideas. Maybe you have an idea of yourself, but you just don't know whether it's worth building. You could create a new project in here and start it from scratch. So that's pretty cool. Um, so yeah, that's kind of my thoughts on building an app, thinking about building an app, and how fast we can build an app. And you just saw it right here. So if you're interested in using Idea Browser or Google AI Studio, the links are down in the description below, and you need to check it out. You need to start building and you need to start developing those skills if you want to be relevant in this AI space. We'll see you in the next one. Have a blessed day.

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