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

Transcript

00:00

Yes, this period tracker app is making $8 million every single month. And I built the entire app without having to write one single line of code.

Now, in this video, I'll show you exactly how I

00:16

did it step by step. So, by the end, you too will have a fully functional app that's live and ready to generate serious revenue.

No kidding. But here's the problem, though.

Most no code tools only let you design the app. They don't

00:33

set up the backend, the user accounts, or payment processing. So, you're kind of left with something that looks good, but doesn't actually work.

Now, I tested many AI coding tools the last couple of months, as you've seen in the last

00:48

handful of videos, and I found the best tool at this moment that is easy to use for anyone with zero coding experience. So, here's exactly how you and I are going to build this app step by step.

Step one, we'll let AI generate the app

01:03

idea and create a complete plan. Step two, we'll build all the core features by cloning flow period and cycles tracker, one of the most successful health apps on the app store.

Step three will generate Stripe for payments, so

01:19

you can start earning money right away. And don't worry, you don't need to be a coding expert.

I wouldn't say I'm one myself, but I made this tutorial super simple to follow, even if you've never built an app before. And what makes this

01:34

method different from all the others, is that we're using only one AI tool, the most powerful AI coding assistant available for right now. Now, this isn't just some basic prototype.

We're building a complete clone with all of the premium features that made the

01:52

original Period Tracker app worth millions of dollars. And by the end of this video, I promise you, you're going to see how easy it is to turn an idea into a real working app that can generate serious revenue using AI.

So, let's go ahead and get started. The AI

02:08

tool that will take care of everything that we do today will be called Lovable. I linked it down below, so you can go ahead and check it out.

And with a special link in the description box below, if you click on it, you will get double the credits so you can actually have enough credits to build the app

02:24

we're building today. Now, all right, so the first step is telling Lovable exactly what we want.

So, we start out by typing out our prompt. Create a fullfeatured period tracking app with a modern UI design.

The app should include period and fertility tracking, symptom

02:41

tracking, a pregnancy mode, and health insights and education. And just like that, with a few simple words and a click, Lovable gets to work.

And within seconds, it generates a fully designed app called Harmony. And honestly, folks,

02:57

it already looks like something you'd find in the app store today. Pretty impressive, right?

But we're more than just about looks. So, we're not going to stop here.

We're going to dig deeper and refine it and add the features that will make this app truly seamless. Now, the first thing that needs fixing is, of

03:13

course, the navigation. And right now, we got to be honest, it is a little clunky.

And because nobody likes an app that's hard to use, let's go ahead and fix it up and make it more intuitive. We will tell Lovable users should be able to navigate between different sections.

03:29

period and fertility tracking, symptom tracking, pregnancy mode, and health insights and education. And we just wait a few seconds.

And as you can see here, Lovable reorganizes everything. And now, instead of scattered options, we have

03:45

four clear sections: period tracking, symptoms, pregnancy, and insight. Now, that honestly already makes things a lot easier to navigate, but I don't know about you, there's still something that just doesn't feel quite right.

like there's an extra navigation bar at the

04:00

top with tabs labeled calendar, insights, learn, and profile, which I don't feel like we need anymore. So, instead of just leaving it there to confuse our users, let's go ahead and clean house a little bit and type in remove the first navigation, calendar,

04:16

insights, learn, and profile. And just like that, the UI looks a lot sleeker, a lot simpler, and it is more userfriendly.

Exactly what we want. And now that the structure is solid, we need to tackle something super important here, user authentication, because

04:34

nobody wants to lose months of personal health information just because there's no way to save it. And that's why we need to make sure users can sign up, log in, and then securely store their data, too.

So, we will tell Lovable here, this

04:50

app supports account creation, data storage, and secure authentication. Start by building a functional UI and a database setup before adding individual features.

We wait a little while and now our app is ready to connect to Superbase, which is going to handle all

05:07

of the backend storage and authentication. Now, setting up Superbase might sound a little bit technical, but honestly, it's actually super simple.

First, we click on Superbase at the top right here, and we'll sign in. Now once we're in, we need to grant Lovable the necessary

05:23

permissions so it can integrate smoothly with our current project. And after that, we create a new project.

We'll go ahead and name it, enter a secure database password, and click create. And that's it.

That back end is now set up and we just need to link it to our app.

05:40

And to do this, we asked Lovable to connect the sign up and login page with Superbase simply by typing connect the sign up login page with the back end of Superbase. Provide me with the site and redirect URLs.

And with this, Lovable

05:57

immediately responds with a unique URL that we need to copy into Superbase to finalize the connection. And to complete the step, we navigate to the Sup dashboard and then we'll click on the authentication section under URL configuration.

We'll find the field

06:14

where we need to paste the URL lovable already gave us beforehand. And once we paste it in, we'll click save.

And just like that, our app and Superbase are now connected. Now it's time to test if everything actually works.

We'll create a new account, enter an email, and of

06:29

course, input our password and attempt to log in. Now, at first, everything seems fine until we hit an annoying issue.

Superbase requires email confirmation before letting us actually log into our project. Now, in some cases, email verification is a great

06:47

security feature, but for an app like this one, it's kind of unnecessary. We want users to get in quickly without having to check their inbox every single time.

Thankfully, fixing this is pretty easy. All we have to do is go back to our Superbase dashboard and then click

07:03

on authentication and scroll down to the sign-in signup settings area. Now under O providers, we'll find the email section and then we'll also see that the confirm email option is enabled by default.

Now we simply want to toggle it off and then click on save. And again,

07:20

just like that, email confirmation is no longer required. Now when we do log in the next time, we can access the app instantly.

All right, so far so good with authentication fully set up. Now, it's time to bring this app to life.

Right now, it looks great, but a period

07:36

tracker that doesn't actually track cycles, yeah, not very useful. So, now we need to make sure users can log their period start and end dates with a lot of ease.

Let's not make it difficult for them. So to do this, we simply tell Lovable in the period section, create a

07:53

userfriendly period tracking interface where users can log their period start and period end dates. And as with any automated process, we might run into a few hiccups along the way.

And if we do spot an error, there's no need to panic. Lovable has a built-in fix.

At the top

08:08

right corner, there's a try to fix it button that we can click. And what will happen is that Lovable will automatically debug the issue itself.

And once everything looks good, we can move on to the more exciting part, previewing the section to see what's actually working. Now, clicking preview

08:25

gives us a realtime look at our progress in our project. Now, in the period section, you can see we see a log period button.

If we click on log your first period, it opens up a selection menu where users can choose their start date

08:41

and end date. Now, once those details are entered in, the information is instantly reflected in the insights tab, giving users a clear history of their cycles.

But what if users don't want to manually track everything every time,

08:57

every month? Well, that's where AI powered predictions can come in.

If the next period cycle isn't showing, we can ask Lovable to predict future cycles and ovulation based on past data. And there you go.

Now the app includes a future

09:15

prediction section and it's showing upcoming periods and fertile windows. So every time one of our users logs into our app and logs a new period, the calendar view will update automatically, making tracking pretty effortless.

Now

09:30

we have a fully functional period tracker that not only logs past cycles, but it can also predict future ones. No extra manual calculations needed.

And with this in place, our app is becoming a lot more powerful, but as always,

09:45

there's always a little bit more we can add. Now, tracking periods is great and all, but understanding how your body changes throughout a cycle is even better.

And that's why we're going to go ahead and add a symptom tracking section or feature, making it easy for users to

10:02

log their daily mood, um any physical symptoms they might be feeling like cramps or headaches, and even their sleep patterns. And to set this up, we ask Lovable to for the symptom tracking feature allow users to log their daily mood, uh any physical symptoms like

10:18

cramps, headaches, bloating, etc., and of course, their sleep patterns. And once that's in place and we press enter, we'll head on over to the symptoms tracking section.

Now, when users enter their symptoms, like their mood or their sleep patterns, and then hit save, their data is stored. But plain text isn't the

10:36

most engaging way to track trends over time. It's not very visually appealing.

But to make this more visually appealing, we'll go ahead and tell Lovable, "Display the symptom tracking in an interactive chart or graph to visualize changes over time." And with

10:51

those few creative words just like that, symptom patterns become easy to see at a glance, helping our users to spot trends like pre-period headaches or sleep changes throughout their cycles. And if there are any errors, well, again, no problem.

All we have to do, like we did

11:07

last time, was just click again the try to fix it button at the top right, and Lovable will troubleshoot automatically on its own. And now, with everything working smoothly, it's time to go ahead and polish up our interface.

The navigation page still includes home,

11:23

period, insights, and learn, but in this section, we don't really need it here. So, to keep the layouts a lot more focused and clutter-free, we'll ask Lovable to just remove the navigation page.

Now, our symptom tracking section is fully functional and much more

11:40

organized. Users can log their symptoms.

They can log in their mood and their sleep patterns. And then after doing all that logging, we can view them in a detailed interactive chart that makes tracking effortless.

Now, next up, we're going to go ahead and add pregnancy mode

11:56

to make this app even more fully featured and a lot more powerful for our users. Now, planning for pregnancy or trying to conceive can feel overwhelming.

So, why not let our app do the tracking for our users? So in pregnancy mode, our users can access

12:11

everything from fertility predictions to fetal development insights without the stress of manual calculations and a whole bunch of manual input. So to get started, we ask Lovable for the pregnancy mode section.

Implement a fertility tracking mode that predicts

12:28

ovulation and the most fertile days. And with that done, we head over to the pregnancy section.

And now there's a fertility tracker. users can check their upcoming fertility windows and ovulation dates.

So, it'll make it easier to plan

12:45

for conception. There will be no more guessing, no more endless cycle calculations, and instead, because of our app, just clear AI powered predictions right at their fingertips.

But you might ask, what if someone is already pregnant and they want to track

13:00

their baby's growth? Well, that's where the next feature comes in.

And to add even more value out of already what we've created, we'll ask Lovable to create a feature in pregnancy mode that tracks fetal development by weeks and provides educational content based on

13:18

trimester progress. Now, when our users open pregnancy mode, they'll see a fetal development tracker with weekly progress updates, um, trimester highlights, and here even helpful tips at the bottom.

So whether someone wants to know when their

13:34

baby's heartbeat starts or when to expect the first kicks or how their body is changing each trimester throughout their pregnancy, it's all right here in this section with both fertility predictions and fetal development insights. This section now supports

13:50

users at every single stage, whether they're trying to conceive or already expecting. Congratulations.

And just like that, another major feature is complete. Now, understanding your cycle is one thing, but knowing what it means for your overall health, well, that's

14:06

next level stuff. So, let's go ahead and tackle that.

Let's add a health insights and education section that helps users make sense of their menstrual patterns. Now, to get started, we'll go back to Lovable and type in for the health insight section, add a health insight

14:21

system that analyzes the user's menstrual cycle data and then offers health recommendations. if irregular patterns are detected.

Now, what this means is that our app can now scan for things like unusual long cycles, missed

14:38

periods, or irregular ovulation and then provide personalized health insights for all of those scenarios. And if something seems off, users will get recommendations or alerts that might help them decide if they should consult a doctor.

Of course, things don't always

14:54

run perfectly on the first try, as we've seen before. And as we did before, again, if we hit an error, no need to stress out when we see a build unsuccessful message, we simply click the try to fix it button at the top right, and Lovable will attempt to

15:09

resolve the issue itself. And once everything is working smoothly and we're back on track, we'll head back up to the health insight section.

Now, this space provides detailed information about menstrual health and personalized insights based on the users's logged in

15:26

data. But we're not done yet.

Of course, we like to do more here on this channel. Health insights are great, but you might ask, what if users want to learn more about reproductive health?

Instead of making them search the internet and Googling or chat gpting for reliable sources, let's just bring the knowledge

15:42

straight to them within our app because they're already there. So we'll tell lovable in this section generate educational articles and videos on reproductive health displayed based on the user cycle phase.

And with that update a new additional resources

15:57

section appears filled with educational articles and videos. Now whether a user is in their follicular phase, ovulation or ludial phase, they'll get relevant content tailored to wherever they are specifically in their cycle.

Now, the app doesn't just track periods either.

16:15

Obviously, from what we've done so far, it helps users do more. Understand their health in a way that's easy, accessible, and personalized.

But, you know, let's go ahead and do one more thing. One last step to wrap things up.

Let's finalize everything and then see the full picture. Now, monetizing an app isn't

16:30

just about making money. It's about sustainability and keeping it going.

Now, if we want this period tracking app to stay useful and grow over time, we need a way to offer premium features while keeping things still smooth for our users. And that's where Stripe

16:47

integration comes in. So, here's the plan.

We set up a subscription model, and you're familiar with that, where users can unlock premium tools for $9.99 a year. Pretty simple, right?

Now to make that happen, we just go back to Lovable and say, "Set up Stripe

17:03

integration and subscription where users need to subscribe for a premium plan in order to use the premium features." Now, Lovable will jump into action, setting up all the basics for us, but now it's also our turn to approve the backend

17:19

changes. And a quick click on apply changes, and we're in business.

Now comes the fun part, getting the app to actually process payments. because Stripe needs a secret key to handle transactions.

But before grabbing that,

17:34

we will switch to test mode on so we don't accidentally charge real money while setting this up because well, let's be real, nobody wants that surprise. Over in Stripe's developer tab, we'll go ahead and grab the secret

17:50

key. We'll paste that into lovable and then do the same thing for the publishable key, which makes everything work on the front end.

But wait, we're not done just yet. Almost there.

Users need an actual product to subscribe to. So, let's go ahead and go back to Lovable and say I added the Stripe API

18:06

key. Here is the product ID.

Before heading over to Stripe's product catalog to create the subscription. Inside Stripe, we click create a product.

Enter the name, enter the description, the price, and the billing period. Then hit add product.

And once the product is

18:22

created, we'll open it up. Click the three dots menu here.

and then copy the price ID. We'll return to Lovable and paste it all in, officially linking the subscription plan to the app itself.

Now, one last piece, web hooks. These tell the app what's happening in Stripe.

18:40

So like when a user subscribes, cancels or renews and we tell lovable I want to add a Stripe web hook secret key. A link should pop up sending us directly to Stripe's web hook dashboard where here we grab the signing secret, paste it

18:56

back into Lovable, and then hit submit. Just like that, Stripe is fully wired into our app.

Now, time for the real test. Let's publish the app, create an account, and see that users are required to subscribe to unlock premium features.

Clicking subscribe now takes us to

19:12

Stripe's checkout page. And here's the cool part.

Stripe will let us run test transactions using a fake temporary card. So, we'll enter a fake card number, any future expiration date, any three-digit CVC, and any postal code.

19:28

Then, we'll complete the payment. And just like that, the app unlocks our premium features, meaning the whole thing actually works.

Success. Oh, wait, hold up.

We're not stopping at just functionality. We'll like to do a little bit more on this channel.

A great app

19:44

doesn't just work well. It looks good, too.

So, let's go ahead and tell Lovable, change the design and layout into a modern UI design. And in just seconds, everything gets a sleeker, more polished update.

We do a quick mobile view check and looks like everything

20:00

adapts perfectly to different screen sizes. And that's it.

We've officially built a fully functional AI powered period tracking app with cycle tracking, symptom logging, pregnancy insights, even and of course a health and

20:17

education and premium subscriptions options. All without writing one single line of code.

It's kind of crazy, right? The only question now is well, what's next?

maybe adding AI powered health predictions or expanding into fitness

20:32

tracking. The possibilities are completely endless and now at least you and I have a better idea about the tools to build them.

Thank you for watching. Hit me up in the comments section below about what you want to see next and I'll see you with that next one.

Summary

Transcript