I Built a Period Tracker App Making $8M a Month with AI

0:00 Yes, this period tracker app is making 0:04 $8 million every single month. And I 0:07 built the entire app without having to 0:10 write one single line of code. Now, in 0:12 this video, I'll show you exactly how I 0:16 did it step by step. So, by the end, you 0:19 too will have a fully functional app 0:21 that's live and ready to generate 0:24 serious revenue. No kidding. But here's 0:27 the problem, though. Most no code tools 0:30 only let you design the app. They don't 0:33 set up the backend, the user accounts, 0:35 or payment processing. So, you're kind 0:38 of left with something that looks good, 0:41 but doesn't actually work. Now, I tested 0:44 many AI coding tools the last couple of 0:46 months, as you've seen in the last 0:48 handful of videos, and I found the best 0:50 tool at this moment that is easy to use 0:53 for anyone with zero coding experience. 0:56 So, here's exactly how you and I are 0:58 going to build this app step by step. 1:01 Step one, we'll let AI generate the app 1:03 idea and create a complete plan. Step 1:06 two, we'll build all the core features 1:09 by cloning flow period and cycles 1:12 tracker, one of the most successful 1:14 health apps on the app store. Step three 1:16 will generate Stripe for payments, so 1:19 you can start earning money right away. 1:21 And don't worry, you don't need to be a 1:24 coding expert. I wouldn't say I'm one 1:27 myself, but I made this tutorial super 1:29 simple to follow, even if you've never 1:31 built an app before. And what makes this 1:34 method different from all the others, is 1:37 that we're using only one AI tool, the 1:39 most powerful AI coding assistant 1:42 available for right now. Now, this isn't 1:44 just some basic prototype. We're 1:46 building a complete clone with all of 1:49 the premium features that made the 1:52 original Period Tracker app worth 1:54 millions of dollars. And by the end of 1:56 this video, I promise you, you're going 1:58 to see how easy it is to turn an idea 2:01 into a real working app that can 2:03 generate serious revenue using AI. So, 2:06 let's go ahead and get started. The AI 2:08 tool that will take care of everything 2:09 that we do today will be called Lovable. 2:12 I linked it down below, so you can go 2:14 ahead and check it out. And with a 2:15 special link in the description box 2:17 below, if you click on it, you will get 2:20 double the credits so you can actually 2:22 have enough credits to build the app 2:24 we're building today. Now, all right, so 2:26 the first step is telling Lovable 2:28 exactly what we want. So, we start out 2:30 by typing out our prompt. Create a 2:33 fullfeatured period tracking app with a 2:36 modern UI design. The app should include 2:38 period and fertility tracking, symptom 2:41 tracking, a pregnancy mode, and health 2:44 insights and education. And just like 2:47 that, with a few simple words and a 2:49 click, Lovable gets to work. And within 2:51 seconds, it generates a fully designed 2:54 app called Harmony. And honestly, folks, 2:57 it already looks like something you'd 2:59 find in the app store today. Pretty 3:01 impressive, right? But we're more than 3:03 just about looks. So, we're not going to 3:04 stop here. We're going to dig deeper and 3:06 refine it and add the features that will 3:09 make this app truly seamless. Now, the 3:11 first thing that needs fixing is, of 3:13 course, the navigation. And right now, 3:15 we got to be honest, it is a little 3:17 clunky. And because nobody likes an app 3:20 that's hard to use, let's go ahead and 3:21 fix it up and make it more intuitive. We 3:24 will tell Lovable users should be able 3:26 to navigate between different sections. 3:29 period and fertility tracking, symptom 3:32 tracking, pregnancy mode, and health 3:34 insights and education. And we just wait 3:37 a few seconds. And as you can see here, 3:39 Lovable reorganizes everything. And now, 3:42 instead of scattered options, we have 3:45 four clear sections: period tracking, 3:48 symptoms, pregnancy, and insight. Now, 3:51 that honestly already makes things a lot 3:53 easier to navigate, but I don't know 3:54 about you, there's still something that 3:56 just doesn't feel quite right. like 3:58 there's an extra navigation bar at the 4:00 top with tabs labeled calendar, 4:03 insights, learn, and profile, which I 4:06 don't feel like we need anymore. So, 4:07 instead of just leaving it there to 4:09 confuse our users, let's go ahead and 4:11 clean house a little bit and type in 4:14 remove the first navigation, calendar, 4:16 insights, learn, and profile. And just 4:19 like that, the UI looks a lot sleeker, a 4:22 lot simpler, and it is more 4:24 userfriendly. Exactly what we want. And 4:26 now that the structure is solid, we need 4:29 to tackle something super important 4:31 here, user authentication, because 4:34 nobody wants to lose months of personal 4:37 health information just because there's 4:40 no way to save it. And that's why we 4:42 need to make sure users can sign up, log 4:45 in, and then securely store their data, 4:47 too. So, we will tell Lovable here, this 4:50 app supports account creation, data 4:52 storage, and secure authentication. 4:55 Start by building a functional UI and a 4:59 database setup before adding individual 5:01 features. We wait a little while and now 5:03 our app is ready to connect to 5:05 Superbase, which is going to handle all 5:07 of the backend storage and 5:08 authentication. Now, setting up 5:10 Superbase might sound a little bit 5:13 technical, but honestly, it's actually 5:14 super simple. First, we click on 5:16 Superbase at the top right here, and 5:19 we'll sign in. Now once we're in, we 5:21 need to grant Lovable the necessary 5:23 permissions so it can integrate smoothly 5:26 with our current project. And after 5:28 that, we create a new project. We'll go 5:30 ahead and name it, enter a secure 5:32 database password, and click create. And 5:35 that's it. That back end is now set up 5:38 and we just need to link it to our app. 5:40 And to do this, we asked Lovable to 5:42 connect the sign up and login page with 5:45 Superbase simply by typing connect the 5:48 sign up login page with the back end of 5:51 Superbase. Provide me with the site and 5:54 redirect URLs. And with this, Lovable 5:57 immediately responds with a unique URL 6:00 that we need to copy into Superbase to 6:02 finalize the connection. And to complete 6:04 the step, we navigate to the Sup 6:06 dashboard and then we'll click on the 6:09 authentication section under URL 6:12 configuration. We'll find the field 6:14 where we need to paste the URL lovable 6:17 already gave us beforehand. And once we 6:18 paste it in, we'll click save. And just 6:21 like that, our app and Superbase are now 6:23 connected. Now it's time to test if 6:25 everything actually works. We'll create 6:27 a new account, enter an email, and of 6:29 course, input our password and attempt 6:32 to log in. Now, at first, everything 6:34 seems fine until we hit an annoying 6:37 issue. Superbase requires email 6:40 confirmation before letting us actually 6:42 log into our project. Now, in some 6:44 cases, email verification is a great 6:47 security feature, but for an app like 6:49 this one, it's kind of unnecessary. We 6:51 want users to get in quickly without 6:53 having to check their inbox every single 6:56 time. Thankfully, fixing this is pretty 6:58 easy. All we have to do is go back to 7:00 our Superbase dashboard and then click 7:03 on authentication and scroll down to the 7:05 sign-in signup settings area. Now under 7:08 O providers, we'll find the email 7:11 section and then we'll also see that the 7:13 confirm email option is enabled by 7:16 default. Now we simply want to toggle it 7:18 off and then click on save. And again, 7:20 just like that, email confirmation is no 7:22 longer required. Now when we do log in 7:24 the next time, we can access the app 7:26 instantly. All right, so far so good 7:29 with authentication fully set up. Now, 7:31 it's time to bring this app to life. 7:34 Right now, it looks great, but a period 7:36 tracker that doesn't actually track 7:38 cycles, yeah, not very useful. So, now 7:41 we need to make sure users can log their 7:44 period start and end dates with a lot of 7:47 ease. Let's not make it difficult for 7:48 them. So to do this, we simply tell 7:50 Lovable in the period section, create a 7:53 userfriendly period tracking interface 7:56 where users can log their period start 7:58 and period end dates. And as with any 8:00 automated process, we might run into a 8:02 few hiccups along the way. And if we do 8:03 spot an error, there's no need to panic. 8:05 Lovable has a built-in fix. At the top 8:08 right corner, there's a try to fix it 8:11 button that we can click. And what will 8:13 happen is that Lovable will 8:15 automatically debug the issue itself. 8:17 And once everything looks good, we can 8:19 move on to the more exciting part, 8:21 previewing the section to see what's 8:23 actually working. Now, clicking preview 8:25 gives us a realtime look at our progress 8:29 in our project. Now, in the period 8:30 section, you can see we see a log period 8:33 button. If we click on log your first 8:35 period, it opens up a selection menu 8:37 where users can choose their start date 8:41 and end date. Now, once those details 8:43 are entered in, the information is 8:46 instantly reflected in the insights tab, 8:49 giving users a clear history of their 8:51 cycles. But what if users don't want to 8:54 manually track everything every time, 8:57 every month? Well, that's where AI 8:59 powered predictions can come in. If the 9:02 next period cycle isn't showing, we can 9:04 ask Lovable to predict future cycles and 9:08 ovulation based on past data. And there 9:12 you go. Now the app includes a future 9:15 prediction section and it's showing 9:17 upcoming periods and fertile windows. So 9:20 every time one of our users logs into 9:23 our app and logs a new period, the 9:25 calendar view will update automatically, 9:28 making tracking pretty effortless. Now 9:30 we have a fully functional period 9:32 tracker that not only logs past cycles, 9:35 but it can also predict future ones. No 9:38 extra manual calculations needed. And 9:41 with this in place, our app is becoming 9:43 a lot more powerful, but as always, 9:45 there's always a little bit more we can 9:47 add. Now, tracking periods is great and 9:50 all, but understanding how your body 9:52 changes throughout a cycle is even 9:54 better. And that's why we're going to go 9:56 ahead and add a symptom tracking section 10:00 or feature, making it easy for users to 10:02 log their daily mood, um any physical 10:05 symptoms they might be feeling like 10:06 cramps or headaches, and even their 10:08 sleep patterns. And to set this up, we 10:10 ask Lovable to for the symptom tracking 10:13 feature allow users to log their daily 10:15 mood, uh any physical symptoms like 10:18 cramps, headaches, bloating, etc., and 10:20 of course, their sleep patterns. And 10:22 once that's in place and we press enter, 10:24 we'll head on over to the symptoms 10:26 tracking section. Now, when users enter 10:28 their symptoms, like their mood or their 10:30 sleep patterns, and then hit save, their 10:33 data is stored. But plain text isn't the 10:36 most engaging way to track trends over 10:39 time. It's not very visually appealing. 10:40 But to make this more visually 10:42 appealing, we'll go ahead and tell 10:44 Lovable, "Display the symptom tracking 10:46 in an interactive chart or graph to 10:49 visualize changes over time." And with 10:51 those few creative words just like that, 10:54 symptom patterns become easy to see at a 10:56 glance, helping our users to spot trends 10:59 like pre-period headaches or sleep 11:01 changes throughout their cycles. And if 11:03 there are any errors, well, again, no 11:06 problem. All we have to do, like we did 11:07 last time, was just click again the try 11:10 to fix it button at the top right, and 11:11 Lovable will troubleshoot automatically 11:14 on its own. And now, with everything 11:16 working smoothly, it's time to go ahead 11:18 and polish up our interface. The 11:20 navigation page still includes home, 11:23 period, insights, and learn, but in this 11:26 section, we don't really need it here. 11:28 So, to keep the layouts a lot more 11:30 focused and clutter-free, we'll ask 11:32 Lovable to just remove the navigation 11:35 page. Now, our symptom tracking section 11:37 is fully functional and much more 11:40 organized. Users can log their symptoms. 11:43 They can log in their mood and their 11:45 sleep patterns. And then after doing all 11:47 that logging, we can view them in a 11:49 detailed interactive chart that makes 11:52 tracking effortless. Now, next up, we're 11:54 going to go ahead and add pregnancy mode 11:56 to make this app even more fully 11:58 featured and a lot more powerful for our 12:00 users. Now, planning for pregnancy or 12:02 trying to conceive can feel 12:04 overwhelming. So, why not let our app do 12:06 the tracking for our users? So in 12:08 pregnancy mode, our users can access 12:11 everything from fertility predictions to 12:14 fetal development insights without the 12:16 stress of manual calculations and a 12:19 whole bunch of manual input. So to get 12:21 started, we ask Lovable for the 12:23 pregnancy mode section. Implement a 12:26 fertility tracking mode that predicts 12:28 ovulation and the most fertile days. And 12:31 with that done, we head over to the 12:33 pregnancy section. And now there's a 12:36 fertility tracker. users can check their 12:39 upcoming fertility windows and ovulation 12:42 dates. So, it'll make it easier to plan 12:45 for conception. There will be no more 12:47 guessing, no more endless cycle 12:50 calculations, and instead, because of 12:52 our app, just clear AI powered 12:54 predictions right at their fingertips. 12:57 But you might ask, what if someone is 12:58 already pregnant and they want to track 13:00 their baby's growth? Well, that's where 13:02 the next feature comes in. And to add 13:05 even more value out of already what 13:08 we've created, we'll ask Lovable to 13:10 create a feature in pregnancy mode that 13:12 tracks fetal development by weeks and 13:15 provides educational content based on 13:18 trimester progress. Now, when our users 13:20 open pregnancy mode, they'll see a fetal 13:23 development tracker with weekly progress 13:26 updates, um, trimester highlights, and 13:29 here even helpful tips at the bottom. So 13:31 whether someone wants to know when their 13:34 baby's heartbeat starts or when to 13:36 expect the first kicks or how their body 13:40 is changing each trimester throughout 13:43 their pregnancy, it's all right here in 13:45 this section with both fertility 13:46 predictions and fetal development 13:48 insights. This section now supports 13:50 users at every single stage, whether 13:53 they're trying to conceive or already 13:56 expecting. Congratulations. And just 13:57 like that, another major feature is 13:59 complete. Now, understanding your cycle 14:01 is one thing, but knowing what it means 14:04 for your overall health, well, that's 14:06 next level stuff. So, let's go ahead and 14:08 tackle that. Let's add a health insights 14:10 and education section that helps users 14:12 make sense of their menstrual patterns. 14:15 Now, to get started, we'll go back to 14:16 Lovable and type in for the health 14:18 insight section, add a health insight 14:21 system that analyzes the user's 14:24 menstrual cycle data and then offers 14:27 health recommendations. if irregular 14:29 patterns are detected. Now, what this 14:32 means is that our app can now scan for 14:34 things like unusual long cycles, missed 14:38 periods, or irregular ovulation and then 14:41 provide personalized health insights for 14:44 all of those scenarios. And if something 14:46 seems off, users will get 14:48 recommendations or alerts that might 14:50 help them decide if they should consult 14:52 a doctor. Of course, things don't always 14:54 run perfectly on the first try, as we've 14:56 seen before. And as we did before, 14:58 again, if we hit an error, no need to 15:00 stress out when we see a build 15:02 unsuccessful message, we simply click 15:05 the try to fix it button at the top 15:07 right, and Lovable will attempt to 15:09 resolve the issue itself. And once 15:11 everything is working smoothly and we're 15:13 back on track, we'll head back up to the 15:15 health insight section. Now, this space 15:18 provides detailed information about 15:20 menstrual health and personalized 15:22 insights based on the users's logged in 15:26 data. But we're not done yet. Of course, 15:27 we like to do more here on this channel. 15:29 Health insights are great, but you might 15:31 ask, what if users want to learn more 15:33 about reproductive health? Instead of 15:35 making them search the internet and 15:37 Googling or chat gpting for reliable 15:40 sources, let's just bring the knowledge 15:42 straight to them within our app because 15:44 they're already there. So we'll tell 15:45 lovable in this section generate 15:48 educational articles and videos on 15:50 reproductive health displayed based on 15:53 the user cycle phase. And with that 15:55 update a new additional resources 15:57 section appears filled with educational 16:00 articles and videos. Now whether a user 16:03 is in their follicular phase, ovulation 16:06 or ludial phase, they'll get relevant 16:08 content tailored to wherever they are 16:10 specifically in their cycle. Now, the 16:12 app doesn't just track periods either. 16:15 Obviously, from what we've done so far, 16:16 it helps users do more. Understand their 16:18 health in a way that's easy, accessible, 16:21 and personalized. But, you know, let's 16:23 go ahead and do one more thing. One last 16:25 step to wrap things up. Let's finalize 16:27 everything and then see the full 16:28 picture. Now, monetizing an app isn't 16:30 just about making money. It's about 16:33 sustainability and keeping it going. 16:35 Now, if we want this period tracking app 16:37 to stay useful and grow over time, we 16:41 need a way to offer premium features 16:43 while keeping things still smooth for 16:45 our users. And that's where Stripe 16:47 integration comes in. So, here's the 16:50 plan. We set up a subscription model, 16:52 and you're familiar with that, where 16:54 users can unlock premium tools for 16:57 $9.99 a year. Pretty simple, right? Now 17:00 to make that happen, we just go back to 17:01 Lovable and say, "Set up Stripe 17:03 integration and subscription where users 17:06 need to subscribe for a premium plan in 17:09 order to use the premium features." Now, 17:12 Lovable will jump into action, setting 17:14 up all the basics for us, but now it's 17:16 also our turn to approve the backend 17:19 changes. And a quick click on apply 17:21 changes, and we're in business. Now 17:24 comes the fun part, getting the app to 17:26 actually process payments. because 17:29 Stripe needs a secret key to handle 17:32 transactions. But before grabbing that, 17:34 we will switch to test mode on so we 17:37 don't accidentally charge real money 17:39 while setting this up because well, 17:42 let's be real, nobody wants that 17:45 surprise. Over in Stripe's developer 17:47 tab, we'll go ahead and grab the secret 17:50 key. We'll paste that into lovable and 17:52 then do the same thing for the 17:53 publishable key, which makes everything 17:55 work on the front end. But wait, we're 17:58 not done just yet. Almost there. Users 18:00 need an actual product to subscribe to. 18:03 So, let's go ahead and go back to 18:04 Lovable and say I added the Stripe API 18:06 key. Here is the product ID. Before 18:08 heading over to Stripe's product catalog 18:11 to create the subscription. Inside 18:13 Stripe, we click create a product. Enter 18:16 the name, enter the description, the 18:18 price, and the billing period. Then hit 18:20 add product. And once the product is 18:22 created, we'll open it up. Click the 18:25 three dots menu here. and then copy the 18:27 price ID. We'll return to Lovable and 18:30 paste it all in, officially linking the 18:32 subscription plan to the app itself. 18:34 Now, one last piece, web hooks. These 18:37 tell the app what's happening in Stripe. 18:40 So like when a user subscribes, cancels 18:42 or renews and we tell lovable I want to 18:45 add a Stripe web hook secret key. A link 18:48 should pop up sending us directly to 18:50 Stripe's web hook dashboard where here 18:53 we grab the signing secret, paste it 18:56 back into Lovable, and then hit submit. 18:58 Just like that, Stripe is fully wired 19:00 into our app. Now, time for the real 19:02 test. Let's publish the app, create an 19:05 account, and see that users are required 19:07 to subscribe to unlock premium features. 19:10 Clicking subscribe now takes us to 19:12 Stripe's checkout page. And here's the 19:14 cool part. Stripe will let us run test 19:18 transactions using a fake temporary 19:21 card. So, we'll enter a fake card 19:23 number, any future expiration date, any 19:26 three-digit CVC, and any postal code. 19:28 Then, we'll complete the payment. And 19:31 just like that, the app unlocks our 19:33 premium features, meaning the whole 19:36 thing actually works. Success. Oh, wait, 19:39 hold up. We're not stopping at just 19:41 functionality. We'll like to do a little 19:42 bit more on this channel. A great app 19:44 doesn't just work well. It looks good, 19:47 too. So, let's go ahead and tell 19:49 Lovable, change the design and layout 19:51 into a modern UI design. And in just 19:54 seconds, everything gets a sleeker, more 19:57 polished update. We do a quick mobile 19:59 view check and looks like everything 20:00 adapts perfectly to different screen 20:03 sizes. And that's it. We've officially 20:05 built a fully functional AI powered 20:09 period tracking app with cycle tracking, 20:12 symptom logging, pregnancy insights, 20:15 even and of course a health and 20:17 education and premium subscriptions 20:19 options. All without writing one single 20:21 line of code. It's kind of crazy, right? 20:24 The only question now is well, what's 20:26 next? maybe adding AI powered health 20:29 predictions or expanding into fitness 20:32 tracking. The possibilities are 20:34 completely endless and now at least you 20:36 and I have a better idea about the tools 20:39 to build them. Thank you for watching. 20:41 Hit me up in the comments section below 20:42 about what you want to see next and I'll 20:44 see you with that next one.