Lesson 6 - How to Launch Your App

Create a Software with AI📅 2025-07-02

Watch on YouTube ↗

Transcript

[00:00] We are going to be launching the app today that we've built step by step. All code was done by AI. In this video, I want to go over very fundamental stuff. Security for your app, how to market your app, and everything you should know when launching a real software in a production environment where people around the entire world can start using. Does that sound good? Let's jump in. Welcome back, or hello again if you're watching this on the hourlong version of this series. We are near the end of this entire series, y'all. This is the last episode of all these different episodes

[00:31] we've been doing together. We are tackling today launch. Here's what we're going to do in today's video. First thing, we are going to secure this app. This securing of the app, I'm going to show you step by step how to do this. There's essentially no content on YouTube around this topic. A lot of times YouTubers are like, "Oh, here's a cool app." and then they let you have it without giving you the proper way of securing it to mitigate risk when it comes to bots, headless scripts, abusing your functions, and everything that we need to know about when launching real software. So, this is fundamentally very important for you to watch. Following

[01:02] this, I'm going to give you tools and marketing strategies for when you want to get users for your application. Then I'm going to go over the importance of search engine optimization for your application, when setting up metadata, when setting up your helmets, as I discussed in previous lessons, everything about your application when it comes to actually showing up in search and getting free traffic. Following this, I'm going to go over how you take that nice little repo in the description down below, that GitHub repo where you click the link, you see all this code, what happens when you download it, the implications of it, because when you download it, you're

[01:32] going to get errors, and I'll tell you why you get those errors and how to solve them very easily. And finally, I'm going to go over personal mistakes I made when creating software that's going to save you months, if not years of your time when developing real software. Let's go ahead and secure this app. As a high level, when securing an app, what we're doing is any functions that we have in the backend can't be called through external sources, eg a random script that hits the exact endpoint or an alternative app. The goal here is that the only way that this function

[02:03] gets called to generate timestamps even occurs is if the user is actually at two stamp.com and it's a real person. So there's two ways we can do this. And we're going to add these two different checks. So here is your application that we have here. And here are the two security checks we're going to have. We have one, two. The first security check we're going to do with Firebase O. So I'm going to put O here. And what's nice about this security check is we're going to be able to set this up through an anonymous user, but we're going to be able to generate a unique identifier for when that user comes to our website to

[02:33] confirm that, hey, this person's actually at our website and is using our Firebase app. The second one is going to be a capture. So, I'm going to go ahead and just shorten it by saying cap. But capture here is going to be a V3 version of this capture. This will make more sense as we get into this, but what this does is this works in the background of your application. It runs some logic to ensure that the thing that's on your website is a real person and not a bot. Only once the user has gone through O and our capta can they start leveraging

[03:04] the value we provide on our application. So let's go and set this up. First thing you need to do go to your Firebase app and go to build. And there's going to be an option here of authentication. Once you're in authentication, simply hit like get started for the initial screen. Then you're going to go to the provider. I'm hit add new provider here. And the one we're going to add here is going to be anonymous. So select that, turn it on, and then you will see it enabled here. Some things to know. If you're like Corbin, I want to know how to set up email and password in Google. Check out the description down below. I did a whole 30-minute video dedicated to how to set up authentication in this way.

[03:36] And you can take the steps and processes there and apply it to all these other different native integrations. For now though, select anonymous, turn it on. The next thing we're going to add is something called app check. To do this, we're going to go to build and it's the first option here, app check. What you'll notice is that I've already created an app. So, you're going to say get started here. And in your apps, you're going to notice a option for your web app here. Click it. And then you're going to also notice an option for recapture here. So, we're going to add that right now. So, once you click recapture here, you're going to want to go ahead and create one. So, to do this,

[04:06] let's go to Google recapture. I also have no clue if I'm pronouncing this correctly, so let me know in the comments if I am, but simply type in Google Recapture on Google and click it. Make sure the email that you're using here is the same one as your Firebase. You should see Google Recapture in the top left. You're going to hit add new site. Create. Right here is where you're going to set up everything relevant. So for this, I would give the label what you call your software. So for me, I'm just going to do example because I've already created one. So you do example, you're going to do a V3. This is pretty cool stuff you're about to see here. And

[04:37] then the domains, add two. The first one's going to be local host. This is going to allow you to test this in a local environment, npm start. And then the second one is going to be your actual domain. So whatever your domain is, domain.com. Mine's tubestamp.com. So I'm g add it there. What's really cool is that if you've set this up correctly and you're using the exact same email that you've used in your Firebase project along with what you see in Google recapture here, make sure that the Google Cloud platform it's associated with is your Firebase project. So as we named in this series

[05:07] here, mine is tube stamp prod. Once you do that, hit submit. Once you do that and hit submit, you're going to get two keys. Your site key and your secret key. With that secret key, copy it. Come back over here and then place it right here for token time to live. Do one day. This is default by Google. And then hit save. Looking good so far. So, what this is going to do, and we're going to set this logic in the code, is this is going to be able to check whether or not the thing that's on our website, I keep saying thing because maybe I should just say the bot or the person. Basically,

[05:38] are you a human or are you a bot? That's the purpose of this recapture. The purpose of us setting up anonymous sign-in method is this is are you a human and actually on our website. So those are our two security checks there. So with that done, we need to set this up in our code. Make sure to have that site key on hand from the Google capture because we're going to be using it pretty soon here. We're going to go to our Firebase.js. And in our Firebase.js, we're going to have to export two things now that we're using them. This is going to be the authentication and the capture. So the prompt we're going to use here is as follows. Update the

[06:08] source firebase.js JS to include Firebase authentication with anonymous signin and on off state change and Firebase app check with recapture v3 using process. We identify that secret key we're going to use here or sorry the site key we're going to use here because the secret key is set in Firebase app recapture site key and is token autoer enabled true ensure these services are initialized and exported while retaining the existing Firebase app initialization analytics and functions with emulator connection. Now remember, you can always click that repo down below and see the

[06:40] source code here. So you can just see what the Firebase.js looks like up to this point. So you can kind of copy that Firebase.js as well. In addition, I think I'm going to have a Google doc in the description down below that shows you step by step how to set up app security. This is a very underserved topic on content. So I might as well create a Google doc. So this is very simple for your specific use case. For now, I'm going to hit enter. So with that entered, we get our new code here. Here's a couple things you need to notate. First thing, this is our app check. So right now I left some console logs in here so you can see whether or not this is being initialized or not.

[07:10] For now what you'll notice is that the app check is what's initializing our recapture v3 provider which is recognizing whether or not the user is real or not. On top of that notice that we are referencing the relevant site key right here. And as you've seen in previous tutorials right above me in the env file simply put this exact text here equal your site key. I've already done that. Proceed coming down here. Everything else is standard. You'll notice that now we're exporting O as well as we're going to be leveraging this in our application now. So this is our Firebase.js. We are purposely now

[07:43] using O for the anonymous user. And now we are also using the recapture v3 provider for the two security checks. When it comes to the front end and the timestamp.js, we actually don't have to put really any logic here that's different as we're already leveraging within our function here an HTTP callable. Now, what's cool and what you should know right now when it comes to HTT callables in Firebase Functions is sometimes you'll get a very annoying air of cores. And typically, if you're already leveraging Firebase correctly

[08:13] within your Reactbased application, the cores should be handled within the passing of the data itself of Firebase. Long story short of me saying this, if you ever receive a corores error, don't go down the rabbit hole with an AI model about how to solve the corors error when it tries to import cores. Weird import this fix URL. Don't go down that rabbit hole. Pivot. There's another way of doing it to circumn your corors error. Corors cos. Now, if you haven't faced that yet, that sounded like complete gibberish, but if you have faced that,

[08:44] then you're like, okay, Corbin said not to do this, so don't do it. What we actually need to change here is going to be in our functions folder in our main.py as this is going to be the logic that will handle the request. So, first thing we're going to want to do here is go to our requirements.ext here and add a new requirement to install. Because now we're leveraging authentication, we need to install Firebase-admin. So, once we've added this line here, come down to a new terminal window and simply put in cd functions. This is going to bring us to our functions folder up here. remember cuz we want to

[09:14] run this command directly into our functions folder. And then because it's a new line in the requirements.ext, we need to actually install this package. This is going to be a line you use a lot, but it's pimp install-r requirements.ext. Hit enter. And now we're installing Firebase admin, which then allows us to use this kind of logic here in actual Python code. So functionally, what you just learned right now is if you're ever using an AI model and you see an update in your functions requirements.ext text file, that means you need to run that line because if you don't, it's not going to

[09:45] work because it functionally can't even access what you're trying to reference here. So, as you'll notice, import request and then request are here. Now, with all that done, this is where the magic happens in the main.py, and we're not talking about apple pie. I like apple pie, although peon pie can be really good with some coffee, you know, like a really good peon pie that hits. So, this is where we're going to put our security functions of O and the recapture. what we drew before. We're going to put in the code for this and this. So, in order to do that, we're going to simply put we need to update generate timestamps. I'm referencing the

[10:15] specific function right there. So, it knows not to mess with on request example. I'm going to say we need to enforce app check is true and offguard and app check guard. And then based on the logic we set in Firebase.js, cursor AI should have enough context here to understand what I mean by this. So, let's go to generate. So far so good. It added the enforce app check is true. So, I went ahead and accepted some of the changes from cursor AI. It wasn't perfect, so I had it updated a little bit. Check out the repo down below to get this code exactly how you like it. But here's what we got. First thing we're doing is that we're first off checking to make sure this is the correct app and it has the valid app

[10:46] tokens that we set in Firebase.js. Next thing here is I put in a bunch of prints here so you can check in the back end when we run a function. And we're going to do that together so you can see it live what happens when you are correctly authenticated. When I say UID here, this is a unique identifier. And all it is is a unique string. And all a unique string is is just a bunch of letters, just a bunch of numbers. And what this allows us to do is identify a user by their browser and by their location. So you logging in from Singapore, I have just

[11:17] associated a UID with you and I know you're anonymously signed in. When creating workflows, that's Google signin or email and password signin. We create a specific UID that's typically associated with the email as well so we can connect the two and persist data. That's a separate tutorial. Check out the backend series. For now though, offguard has been set. App checkguard has been set. This has to do with the recapture. Make sure that they're not a bot. And then we have our existing logic here that we've already set. Now, one important thing that you should note here, and I'm going to increase this

[11:47] right now as well, is that the time out is how long we let the backend process a request. This is set to default at 30 seconds, but I suggest you give this a minute, maybe two minutes. This is typical standard practice. 30 seconds for a request is very fast for API. It works sometimes, but if you're doing like a chat GBT completion request that requires the AI model to really think on something, you're going to want to increase that to at least 120, which is 120 seconds. This is how long we allow the backend to run the request. If we

[12:19] get over 120 seconds, the function will stop itself, cut out early, and air out. So, with all this done, let's go and test this in a real environment, actually at tubsam.com. See if the checks are incurring and see if everything works. So, what I've gone ahead and done is I've real quickly set up this in a security branch, took that code, and moved it over to a separate branch. I realized I was working in main the entire time, but as you know, standard practice, always work in a separate branch. Keep Maine untouched unless you want to merge. So to see all these changes effectively remember

[12:50] Firebase log out Firebase log in correct account and then run this command. npm run build firebase deploy enter. What we're going to show right now is it working in a secure way. I'm also going to show you the logs associated with this so you know how to read the logs. And no, we're not talking about ants on the log. You know the celery sticks, the peanut butter in the middle, the little raisins, those were a really good snack as a kid. If you don't know what I'm talking about, look up Ants on a log. I think it was called that. I hope it was called that. Shout out Anton Log. Is it actually called Anton Log? Okay. Yeah, I'm right. Wow, that just unlocked the

[13:22] memory now with deployment fully set up here. Deploy complete. Let's check it out. Coming in over to our website here. We're going to hit inspect. Grab our console logs here. See if anything shows up. And let's enter a YouTube video here. So, I'm going to put in a YouTube video right here. Got a nice little YouTube video with that API token from YouTube. If you remember, generate timestamps. Boom. So, what this is doing is that I'm a user. I'm on the website. It's first checking my Firebase anonymous ID. Okay, cool. He has an ID. The next thing it does is going to do

[13:52] the recapture in the background. What you'll notice is that since it's a V3, also cool little time stamps over there. What you'll notice is that since it's a V3 capture here, this isn't like the traditional one where you have to hit the check box and then, you know, do a little puzzle. Google's getting more advanced and it's gotten to the point now where that can all work in the background to ensure that the requests are not coming from a bot. Don't act like a bot, okay? Don't be a bot. With that done, let's check the logs. Coming over to our functions here, you'll notice our fully deployed function. I went ahead and deleted the example one. You can go and add that back. That's very easy of cursor AI. For now, we're

[14:24] going to hit view logs. So, coming over the logs, you're going to notice two major things. First thing, these little bars up here. That's an actual request coming in. That's someone actually clicking that button in the function saying, "Hey, there's something going on." Also, what you notice is that these are like our version of console logs down here. Generate timestamps, receive data. The data received was a YouTube link. Nice. It passed the O here of the UID and this is a unique identifier number that is of the anonymous user. And then app check is passed. App token info is good. This is blacked out because some of this is high risk. But

[14:55] the idea is that it is identifying that it's correct coming from the app. We're good to process this request. And as we know, we got our timestamps shown in the front end. That little UI of Google Cloud, think of it like when you're developing in the front end and you hit the console log up here. That's your version of a console log for the back end. In Python, to get a console log, it's not console.log. It's just print because you're printing like printing paper. Pretty nice, y'all. You set up security for your application. Now, there's some nuance here. If you're setting up a software where there is a

[15:26] login method, the authentication process and securing HTTP callables is a little bit different. On top of that, every single different tool that's available in Firebase such as fire store or storage, they have their own rules you can set within those as well. Eg for fire store for a data path. Only certain types of users can access this data path. This comes useful in the context of maybe you're creating a software with an admin panel or alternatively a free user panel. whatever it may be. There's

[15:57] more nuance to security, but in creating this type of software, this is what we can do to set it up so that we're not getting absolutely spammed by bots. I don't like bots, okay? I hate bots. No more bots. Let's see the next part here where I go over marketing strategy. So, funny enough, coming over to my school community here, I actually got asked this direct question of how to acquire your first 100 users from Aryan here. And I hope I'm pronouncing your name correctly. I'm really bad of names, okay? I'm really good of faces. Like if I'm in public, I'll recognize a face, but man, am I horrible of names. So, if you ever meet me in real life and I

[16:28] don't remember your name, it's not out of disrespect. It's purely just because I'm better at faces. But beyond that, how do we acquire our first 100 customers? And here's a great use case. So, you want to use like fundamental tools like Loom, for example, to record demos and very short demos to get to the point of your value you're trying to provide your end consumer. and then you can reach out to your potential customer or what you'd think at the time is your potential customer that's primed for your application. So the application we were looking at here is copywithift.io,

[16:59] a software that allows you to create Facebook ads in a more frictionless way. And through conversation that we had at our school community, we've came to the consensus here that really the best way to show the value of this software would be running a Facebook ad campaign of the software itself using the software's value and showing it works successfully. Since the use case and the value of this software is to make Facebook ad campaigns perform better, what better demo than a two to three minute demo? Keep them short. A lot of people don't

[17:30] like wasting time for 10 minutes to see a potential new software they use in their business. They want a short and spiffy two, three minutes show a demo of a Facebook ad campaign working successfully with a software which purpose is to run Facebook ads campaign successfully. Quick two-minute demo lead to high conversions. And the best part here is you get an evergreen asset. When I say evergreen, that means that the video will be still relevant a year from now, two years from now, three years from now. And we can use this video asset not only on the landing page of

[18:00] the website but also when we are sending it to potential customers. In the beginning, acquiring your first 100 customers comes down to the exact value you provide. Which means that comes into parlay with creating an application that's very specific at solving one very big painoint in an industry. So for us, the application we created today is for YouTubers that want AI timestamps. So my target market here is simply providing a free AI YouTube timestamp tool that any YouTuber could use to get timestamps to add to their video. That's a very

[18:32] specific market that can cater to this kind of value. I think a big thing though when it comes to marketing strategy is really understanding who your consumer is. Understanding who your potential customer is is going to lead to better conversions long term for the different strategies you use. And it's better for you to use copy in your ads and the way you communicate your software not in general terms but very specific terms. So to give an example of that this would be like tube stamp is made for YouTubers that need timestamps on long videos laser in on a direct

[19:03] market. This topic though really grants a further in-depth series on how to properly advertise software which is another underserved market on YouTube. So, I'll have to make another series on that if I see enough demand in the comments and just from the community in general on how to really push out software, advertise it correctly, and get your consumers. The next topic I wanted to go over is SEO importance. And this is specifically on how you structure your application. This goes back to what we described in an earlier tutorial with the helmet variable that we can leverage throughout our application. So, coming over to index.html, this is going to be your

[19:34] fallback. If you don't use the helmet within the actual page itself, it will always reference the top tab as tube stamp AI powered YouTube timestamps, which is fine for my use case. But if you have multiple pages, especially in an unauthenticated version of your website, what do I mean? So coming over to bumpups here, for example, enterprise, you'll notice that up here it changes. That's because I'm changing the helmet code. This says bumpups for enterprise teams. If I go to pricing, it changes up here as well. Compare plans, features, and cost. Bumpups.com. Every

[20:04] single one of these pages when the user is not logged in has a very specific header element added on top of that the H1 these big bold text and the smaller text here is a very quick description of what is on the page as when Google crawls this when I say crawl that's Google's way of looking at your website being like what the heck is your website and how do I show this as a searchable link when someone just searches something on Google therefore be very specific video management workspaces,

[20:35] upload, organize, and interact with your video content, whether it's from YouTube or local files that shows up on search that could have a good click-through rate. So, what I suggest you to do is obviously your title here in your index.html got to be on the money. This has got to describe your product very effectively so people know exactly what they're clicking. But everything else when it comes to creating your actual application, having multiple pages, go the extra mile here of adding this helmet element with a description and a title. Using this, then you can leverage

[21:05] better SEO and showing up in search better. So when it structures it, you have like nice little click offs where it's like tube stamp and then like under that is like a subclick off pricing to whatever it may be. Leverage this. This is actually pretty important. Tube stamp itself as a URL. That used to be a live URL. That was actually where I began my software journey at least for web apps was a tube stamp. I got the thing up to like fourth in search for AI YouTube timestamps and it was pushing. Keep in mind for search this actually has tremendous relevancy for free organic traffic. So let's get to the last part

[21:36] here which might get a lot of viewership just randomly just because this part is going to go over how do you actually take the software we've created in this entire series and use it. So what you're going to do is you're going to simply click that link down there. You're going to see a public version of this repo. I'm probably going to rename it, restructure some of this stuff, add a lot of cool stuff in the readme just for more resources. But for now, all you really need to do is simply go up to the public repo, and you're going to clone it. You can simply go to https here, hit get clone, and then this URL, whatever URL that is. I've shown how to do this

[22:08] in another video, which I'll reference down in the description down below. But here are two major things you're going to get when you download this repo and try to run it. You're going to get errors. And let me tell you why. So, the first error you're going to get when you download this fresh repo, like all this code that I've done, so make sure you leave a like. It's completely free. All free code. You can actually launch this software within a day. Basically, the first error you're going to get is going to have to do with like project ID doesn't exist. You know, different variables don't exist. Specifically, this kind of stuff or anytime we've used React app ID, even when we used it up

[22:38] here in main.py bumpups API key, these don't exist. And the reason they don't exist, if you remember, is that these are found in the EMV file. EMV here and EMV here. And remember in the git ignore, we set it so that the EMV is never pushed to the cloud, which keep that logic. So what that means for you is that you can use this exact code, but you need to go the extra mile here of right-clicking right here, hitting new file, and creating that. Once you create that, that's when you're going to load

[23:08] in these variables here. So you're going to do like react app API key equals and then your actual API key that you get from Firebase when we created that Firebase project together. So that's the first situation. Create your EMV files, associate them with your variables that you get in the creation process. All the variables y'all all the way down here to React app recapture site key anything. Now to make your life easy, all you need to do is this. Copy this react_app go to search. Put in react app same string here. And then you'll see

[23:39] everywhere that it's referenced in the application and make sure you've associated a variable with each one. So the second error you're going to get is going to have to do with certain things not being installed. It's going to say something along the lines of this doesn't exist. For example, I believe we used font awesome here. Yeah, right here. So, as you notice, we used font awesome. So, it's going to be like font awesome doesn't exist. All this requires you to do is simply copy all those errors, put them in a cursor AI chat, and simply put, give me the install commands for all these. Once it gives you the install commands, put that in terminal. Hit enter and you'll install

[24:12] everything needed. Same process, same method you got to do for the main.py here and the requirements.ext. You just got to install everything. Everything I've shown you up to this point, just need to install. And then once you do that, it should work. Which brings us to this lesson. Don't do this. Here's what we'll learn in this lesson. What we're going to learn in this lesson, oh, how to do a tool. You can find out what we learned in that lesson. Check out the builder console logs community in the description down below. Click the link. It's only 20 bucks. It'll always be 20 bucks for life. Just hard set price. I want to make this as accessible as

[24:42] possible. And I can tell you right now, that's going to be the cheapest 20 bucks you ever spend in your entire life because the situations, mistakes I made in software quite literally costed me months of development. I've been running bumpups.com for the last two years. If I didn't make these mistakes, we would have been already 6 months to a year ahead of where we're at now. So, you can go ahead and check out the community in the description down below. In addition, there's also exclusive content where I only do it in this community as shown here or very specific episodes to series that I have here. So, you'll find that

[25:12] don't make this mistake episode here. And as you saw earlier in this video, you can ask me questions and I'll answer them directly. And on top of that, if I think the question is a good suggestion or like really cool, I'll make a whole video on it and possibly even a whole series on it if it seems relevant. That's it though. We've successfully created software from scratch. absolutely zero lines of code all the way to full-on deployment, full on value, full on everything. In that readme, in that git repo, you're going to click down there. I'm going to include links to the tech stack. I'm going to include links to all the Google

[25:43] Docs I discussed in this entire series. And of course, the repo itself, you're going to be able to download, start right away. I hope you enjoyed this series. This took me days to make, hours of content. I mean, we're talking about there was one the front end one that was like four hours of unedited content compressed into an hour and 15 minutes. Crazy stuff, y'all. Without further ado, make sure to follow me on X, Instagram, and subscribe. If you watch this entire series and four-fifths of you are not subscribing, I guess it is what it is.

[26:13] I'll see you in the next