Lesson 4 - How to Create Your App’s Backend

Create a Software with AI📅 2025-06-27

Watch on YouTube ↗

Transcript

[00:00] AI coding and backends. We are going to code out an entire software's backend just using artificial intelligence. And yes, you heard it correctly. If you have zero coding experience, I'm making this as simple as possible and we're going to have AI do everything. AI is our new developer. Does that sound good? Let's jump in. Welcome back to the very long series here where we are diving in building a software from complete scratch with no coding experience. Today's lesson is the big one. This is the back end. There's not a lot of content on this topic, so we're going to dive really in depth here. I'm going to try and make it as simple as possible as this can get very complex very fast.

[00:31] It's raining where I'm at right now, so I hope you don't hear the little pitter pattern in the background. There's like a little storm going on. But let's find out what we're going to learn in today's video. So, here is what we're going to do in today's video. First thing, we're going to learn together how we create cloud functions, how we deploy cloud functions, and understanding what this means logistically when it comes to pricing and calling this from the front end. Secondly, we're going to go over Firebase emulator. I want you to think of this like how we think of localhost 3000 where that renders the entire front end. This is going to give us a nice little sandbox of a backend that's going

[01:03] to be at localhost 4000. This will make more sense as we dive deeper. Following this, I'm going to go over when creating these functions whether you should use Python or JS. It actually does depend on the use case of what you're trying to achieve. And I'll explain further on why JS would be used in certain context comparative to why you'd use Python in certain context when it comes to coding out backends. Next here we're going to go over debugging and cloud logs. So this is going to be our version of setting up a console log that you see in the front end. Now we're setting up console logs or cloud logs for our

[01:34] functions. And finally together we're going to actually integrate a real API here of bumpups for that timestamp value that we provide our end consumer. But as you already know, the steps and processes you're going to learn when integrating a thirdparty provider, you can do the exact same for whether you want to do Chad GBT's API, maybe you want to do Mailchimp's API, maybe send Grid's API, whatever it may be. You're going to learn how to integrate thirdparty APIs into your application. So, let's go ahead and begin. So, coming back over our project here, we created the front-end branch. We merged the

[02:05] front-end branch in the previous episode. So, make sure to watch that. If you're in the longer version of this video, I have no clue how long it's going to be. That might be like 2 or 3 hours. Then you already saw that and you're like, "Let's get going here." What I like to do in the development process though is right off the bat, open up a new terminal. Let's just do npm start and see what our front end looks like so far. Don't do it there. Do it here. npm start. Hit enter. Based on the skills, you already know how this goes. We're going to open up our front end here, localhost 3000. The SEO looks amazing. We got our fave icons. We got our metadata. We got everything.

[02:36] Typically, when doing npm start, it will open up a new tab in your browser. If it doesn't, just go to the URL localhost 2000 and it should render here. So, here's what we have for our front end so far. Everything looks good. Now, we're going to add real functionality here. So, we actually call the bumpups API and then provide the end consumer with those timestamps. Therefore, if we're going to start leveraging functions within our app, we need to enable that in Firebase. What you'll notice is that Firebase has a bunch of cool tools over here. So, we can do a ton of stuff when it comes to our application. One very important one would be authentication. For example,

[03:06] whether we want to use the fire store database as well when we store different strings or if we want to store actual files that would be using the storage right here. In this video, we're going to set these functions. So, I'm going to click functions here and what you'll notice is that it's waiting for first deploy. We're going to hit instructions. Typically, you've already done these commands, but you know, it's always good practice to ensure that you are starting on the right foot. We're just redo these commands together. So, we're going to go ahead and copy the first one here of npm install Firebase tools. All right. So, they're coming over to terminal here. We're going to go and paste it. But it does give this weird dollar sign in the

[03:37] beginning we don't need. So I'm just going to delete that. Grab the line right here and paste it right here. Enter. Once we do that, we'll hit continue. And this is going to be initiating it in our project. So we're going to do Firebase init and Firebase deploy specifically for the functions. So we'll go ahead and let this install real quick. All right, looks good. Now I'll do Firebase init. And this workflow and process you're seeing right here is how you would initialize any of those different functionalities. So for example, maybe I don't want to do functions right here. I wanted to do storage. Same process boarding function.

[04:08] So, we're going to do spacebar here. We're going to hit enter. And look at that. We actually got an error here. And it's good that happened because let me show you one other thing that you should do every single time you log into your computer and you want to start working on your app again. This is just good practice is we're going to do Firebase logout and then Firebase login again. The reason we do this, and it's a little redundant because you're like, Corbin, I literally logged in yesterday. It's just how it works when connecting the CLI here with Firebase. You just got to reauthenticate yourself to confirm that you actually own this project. So I'll do Firebase login again. I hit no to this and then hit Y to the one allow

[04:41] Firebase to collect CLI. Make sure you chose your correct account here. Hit allow. And then if you did it successfully, you'll get this message right here. So now that we've done that, we can do Firebase in it again. So do Firebase in it. Come back to our functions. Here we go. Enter. We're using the correct project there. Tube stamp pro. That is the project we set. And now we're getting prompted here of what language we want these functions to be. So, why do we choose between JavaScript or Python? Now, typically when developing any application, you're going to lean towards Python. It's just a better framework, especially if you plan on integrating artificial

[05:11] intelligence within your application. A lot of the OpenAI API calls are native to Python. So, keep that in mind. You're going to typically opt for Python, but why would we ever use JavaScript? And there's actually a very specific reason why. So, what you'll notice is we have the ability to do authentication. Allow a user to sign in with email. allow the user to sign in with Google or GitHub or Facebook. There's a bunch of different options here. And the use case of when to use JavaScript is when the action itself actually requires the code to be written in Node.js. And a very real

[05:43] example of this is authentication. Now, I created another playlist here which you can check out on my channel. It's like let's build out an apps backend. In this playlist, I go over setting up things like the authentication with sign up. There's a 27minute video for that. I also go over the fire store, setting up a fire store database, in addition integrating OpenAI's API and uploading files like PDFs and videos in this entire series. This is a separate series that I have on this channel. I'm pointing this out because in the current lessons you find yourself in, we're not doing authentication, but I go over in

[06:15] this video right here why we're using JS, what version of JS we're using within that cloud function invocation, and all the implications of that. For now, in this series, we're just going to do it in Python for all of our functions because functionally, that's all we need to provide the end value point of time stamps for our consumer. This is great as well. This is a 2hour 30 minute series really covering up the entire ecosystem found here in Firebase and how to connect everything. So, in our context though, we can go ahead and opt for Python. So, I hit space here or enter. There we go. Do you want to

[06:46] install the dependencies now? Yes, definitely. You'll get errors if you don't. And boom, we've successfully created our functions folder with main.py. So what we want to do now is we can do firebase deploy. And this is going to launch this to our firebase project. So do firebase deploy as right now this is local on our machine. I also realized we needed to create a separate branch called backend here. So after I do that, we're going to merge this current code to main. There's already an issue. So we'll figure this out. But let me first off merge this current code to main. As you know in software

[07:17] development practice, that's what you're supposed to do. So, let me actually delete my previous branch here of front end. We don't need this anymore. And don't worry, if you delete front end here in your local code and you delete it in GitHub, when you say delete after merge, you can always still find the branch. It isn't completely deleted. So, let's just clean up this branch here real quick because we've deployed it or we haven't deployed it yet because there's a little bit of error that we'll fix together. But now, since our branch is clean, let's do get branch or get checkout dashb. And then we're going to name this one

[07:47] backend as we're doing the entire backend today. Boom. Get branch backend. So let's go and do it. I went ahead and did Firebase deploy again. And when we get that error, I'm going to leverage cursor AI because I'm going to approach this entire lesson together as if I don't know what I'm doing. I'm new to coding. So we can kind of walk through the airflow and troubleshooting together because that's going to be extremely useful for when you tackle your backend work. So we're getting air here and we're like, what's going on? So what I like to do is go to like your main pot pie. We're in that in the chat. Honestly, up to the point of maybe even

[08:17] referencing the entire folder. See if we can do that. We'll do functions here. We can do that. Cool. Now, we got full context for cursor AI here. So, what we're going to do here is I'm going to simply grab this, copy it, and then paste it into here when I try to do the command Firebase deploy. So what's key and what you just learned here is when doing chats like this give the information of where all this code is actually stored. So for us functions

[08:48] is stored in functions. I think that kind of makes sense with the naming and let's see what it says. So it wants us to go to the functions directory and run this command. So let's do that. Let's see if cursor is good enough where okay no it's not good enough to do that. So we're going to open up a new terminal window here and it wants us to go to this directory. So, I'm going to simply ask, can you give me the CD line for this directory so I can put in terminal? Now, you might be saying, Corbin, what the heck is a CD? CD is a command that

[09:20] allows you. So, you open up a terminal window. It's fresh. That's your entire Mac. And then once you see stuff like this in terminal where it says two stamp prod, we're in terminal, but in our folder, we're communicating and doing command lines and conversating. Oh, I'm going to say conversating. Some of y'all got really triggered with my cursor AI video when I said that. I'm gonna say it again. Conversating. But the point is we're communicating to some Some of y'all are like, "What is this guy talking about?" Don't worry about it. All right. It's one of my bigger videos like 500k views. People really like to nitpick random words. I don't know why.

[09:51] But we're communicating directly with tube stamp prod here. But what it wants us to do based off this cursor output here is it wants us to communicate directly with functions here and run this command. So we're going to do that. Therefore, when I get this new CD line here, this tube stamp prod should say functions. I'm going to grab this, paste it, and now that it says functions, here's what we're doing. Originally, we were communicating directly on the top level here in the top left here of the entire codebase with tube stamp prod. But now, when you see functions in the terminal line, that is where we're just

[10:23] communicating to the functions folder here found in our codebase. So coming back up here, we're going to run this command that it asks us to run. And we got another error. So I'm going to approach this as if I don't know what I'm doing. So okay, I got this error. This is kind of weird. Okay, I run Python D. I run this line and get this command not found. Enter. So first it's asking to see if Python even exists. So

[10:54] we'll do that. So we do have Python here and based off this output, what I like to do in these situations instead of jumping to the next step here is just give more context of what we saw. So we see this. I'm going to add that here and then see what it says is the next best steps for what we should do. Okay, supposedly we can run this line here and try. Looking pretty good so far. We're directly in the functions folder. We're running this relevant line here. And then it wants us to activate the virtual environment. This is standard practice when dealing with functions, especially Python. You don't really have to do this

[11:25] for Node.js, but Python's Python. We're going to activate the vend and then install the relevant dependencies here. And this is going to be the pit. And you might be asking yourself, Corby, what the heck is the pit? Essentially, this line right here where it says requirements.ext install. This is going to go to requirements.ext here. Install all of the relevant lines found here. So, right now, we're going to install Firebase Functions here. So, I'm going to do this line pip install and then let's install. So we're getting this error here. So we'll go and just paste this over here. And this makes sense because I mean honestly this functions

[11:56] version doesn't really make sense over here. So let's see what it says to do. So it wants us to replace this line right here with the GitHub URL to download directly the functions version there. And then wants us to rerun this command. Let's see if this works. Make sure you hit save as I didn't hit save before and it wasn't working. So make sure to hit save. You'll know whether it's saved or not when you see the little yellow file. That means that it's actually registering that and now we're installing the relevant dependencies here. Now, one thing to keep in mind is that during this kind of workflow, you

[12:27] can sometimes find yourself in rabbit holes of AI. There could be a situation here where it starts going a little crazy and at that point, that's when we do the checkpoint logic where it's like, okay, hold up. I've installed too much stuff. I've done too much craziness within the repo. Let me revert back to the checkpoint that I made where I knew this was still stable. Keep that in mind for this process, especially for the back end. This is going to be a little bit more complex than the front end, but use the checkpoint method. When you get to savable areas, eg for me, a savable

[12:57] area was when I first just initiated the functions, that's all good because that's like template vanilla. We're good to go. But anything past that, if this works now on deployment, I'm going to make another checkpoint. Checkpoint. Checkpoint. Checkpoint. All right. So, we're going to try Firebase deploy here. Even though I don't think it's going to work. We might do Firebase deploy only functions as well to see if that helps. But let's try this. I'm going start a new chat here and proceed. So, we get another error here. So, we're just going to hit command L, hit enter. And this is the process. This is the workflow,

[13:28] especially if you're new. Find the error, talk with the chat, see if it works, and keep going back and forth in this manner. So, now that I kind of showed you some troubleshooting steps and how to do it, let me get it actually working now. So, here we go. I'm going to make sure I leave all the terminal commands you're about to see right now to set this up correctly as a Google doc in the description down below. So, make sure you leave a like. More free value. Let's see how I do this. As an overarching theme, when it comes to coding, especially in the back end, you're going to notice this a lot. It's very much like math in the sense of 1 + 1 equals 2. It just does. 1 plus 1

[14:01] equals 2. Therefore, the logic that we set in the backend, it has to be crisp. It has to be right on point of exactly what you want the functions to do, the backend to do, and the cloud to do. And this will make more sense of why I'm even bringing this up as you'll see how picky it is when it comes to versions and everything of that nature. So, probably what's going to happen for you is you're going to get two different types of errors. First one's going to be like, did you forget to run this command line? It's like, no, I didn't forget to do it. I did it. Why is it not listening? And the second one's going to be a mismatch with the underlying

[14:32] version of Python. So, in order to run Firebase Functions, our Python needs to be 3.12. Therefore, the first line, and we'll do it together right now, is going to be brewin install Python at 3.12. This is from the homebrew. If you are on Windows, you want to switch up your command depending on what the Windows command is, and I'll make sure I put that in the Google doc as well. So, open up a new terminal here and just copy this line and paste it. What this is going to do and I've already done it when you hit enter here is this is going to install Python 3.12 on your computer so you can reference it everywhere. So

[15:04] now that we have the correct package we've hit enter there. This is when we do what we did earlier Firebase in it. Go down the logic of getting the function set up. For us it was Python. We got our functions folder. We've already done that. So then the next thing we need to do here is now we got to dive into that functions folder as we described earlier. So we can do cd functions right here. And there we go. Once we do that, we're going to do this next line here. Opt homebrew bin python 3.12. We're going to launch this virtual environment in Python using the correct version of Python. So, paste that.

[15:35] Enter. As a side note, when you're installing these dependencies or when you do a command like this and it kind of just freezes for a second, you got to wait until you can see this kind of line show up again. That means that whatever request that you requested into terminal has finished its process. So, I know it's finished its process because there's nothing going on here. And I simply see this kind of line again. So this would be whatever your name is, your computer, and then we're still in the functions folder. So now we've done that, we're going to activate our Vim activate. And you'll see Vim right here.

[16:06] This confirms it's currently being activated. The next thing we'll need inside our functions folder is going to be this Python version. You're going to rightclick new file. Name it exactly as you see here. Python version. As you see right there, just python- version. Do that. it already exists. So, it's going to give me that error there. And then once you do that, we want to make sure we reference the correct version of Python, which is going to be the 3.12.11. And then, as you saw earlier, requirements text, we're going to update

[16:36] it to this git repo that's going to allow us to install the most recent version of Firebase Functions here. And this will show up in the Google doc as well. Following this, we'll do the line of pip install requirements.ext. And all this line does is I'm going to hit enter here. I'm just reinstall it. Might as well. and it's going to take every single dependency that we put here and install it into our repo. Okay, looks good so far. This process is very similar to that lesson we did on the setup phase with the git repo, the Firebase, React app, installing Node.js. This is just like laying the bricks out.

[17:08] Once you've done this for this project, you won't have to go through this workflow again as I know it can be very annoying. But once we set it up and you have a function live, then we can dive into the fun stuff of coding. From here, we're going to go to our main.py. And what Firebase does for us or Google, I suppose, is it'll give us like a dummy function that we can test. So, right now, it's commented out. How do I know it's commented out? And when I say commented out, that means that when I run this, this code's not being read. This is purely for what you see. For example, welcome to Cloud Functions for

[17:38] Firebase for Python. That's only for you to read. And what you can do sometimes is you can actually comment out code. This is actually a very useful skill to have. For now though, we're going to uncomment it. It's going to be command slash uncommented. Now, this code is live. Now, if I deploy this, it's actually going to be able to read this code. So, make sure your code looks all pretty and colory, and we'll be good to go next. So, the next thing that's very important that is quite frustrating, especially if you're new to coding, and this is what I talked about, oneplus 1 equals 2, is you want to come down to

[18:09] your Firebase.json here, and you want to make sure you have the following code. Obviously, functions here. This is the functions we initiated. You'll see all this and then specifically what's very important here is the runtime. Now one error I was running into that I'm just like wait what's happening is earlier this was 311 which is the wrong version of Python based off this. Therefore for this to work this needs to be Python 312. So it matches this version right here. Quite literally I had set this up perfectly. Everything was correct except

[18:42] this one line right here and it kept breaking. So keep that in mind. Firebase.json. Make sure this is the correct version comparative to this using cursor AI. Open up a chat add this file or just the entire functions folder. Also add firebase.json ask these kind of questions. Use the kind of jargon I'm using right now and it will understand to give you the right code. Once that's all done, we can open up a new terminal window here. And then this is when we can do Firebase deploy. This is going to deploy our function. And then we're going to be able to see it in Firebase high level here. And I don't

[19:14] know why I didn't mention this before up to this point of this entire series. I think if you're watching the longer version of this series, you'll know within the first 30 seconds. But I forgot to mention this. All this code I'm doing right now, this repo is going to be open source. You're going to be able to grab all this code. I'm going to make sure I leave in the description down below once this entire series is done. The best part is that you quite literally are going to be able to grab this software I create, plug in your variables of maybe your bumpups API key, your Firebase project information, and

[19:44] then you'll be able to launch a software like within what 30 minutes essentially. So if you ever run into errors from here on out, just grab the repo and clone it, which I've shown in other videos, or just simply just look at GitHub and there'll be a public repo that has the entire codebase for you to essentially copy and take and use. So, don't worry. I'm not like, "Buy this software template, $500. Buy this software template. You get a full-blown software. Just pay me the one price at 500." No, no, no. The price is free. Completely free. So, once we've done all that

[20:15] though, we're going to hit Firebase deploy. And this is where the magic happens. Very important. When you uncomment this, save the file so it actually renders it. This first deployment is going to take some time. And that's because of the fact when you launch fresh functions like this for the first time of invocation, it needs to create the entire infrastructure and have it set up. Once you've already deployed it once, it deploys a lot faster after that. In addition, at a certain point during this deployment, it won't show it on this one because I've already answered the question. It's going to ask something along the lines of how often do you want to clean the

[20:47] cloud or something along the lines of like cleaning the code. And it's like defaults to one day. Typically, you can set that to like 30 days. This is a way for optimization of cost associated with deploying a function. Long story short, put 30 days for it. If it shows up, you'll be good to go. Also, just ask cursor AI if you get to that point and you're just like, whoa, whoa, what's happening? So, using the command line of Firebase deploy, we're going to be deploying hosting and functions. If I wanted to just deploy hosting, I would do Firebase deploy hosting or Firebase deploy functions. But for now, this should all work. So, you'll see it right

[21:19] there to my bottom right. It's currently accessing the specific function of on request example. And the reason it's named that is because we named it right here. On request example. So we can name that anything. I can name it apples and cheese. Cheese and apples. This can take some time especially for larger applications. So that's why in larger applications we do a poly repo where we would create multiple git repositories depending on the functions folder themselves. Typically what we could do here is that we have the functions folder but then maybe we have the

[21:50] monetization functions folder which just handles all the functions relevant to purchasing processing of payments etc. This is where we can start granularizing our backend as well kind of like how we did our front end here with multiple folders. This is obviously a little bit more advanced code work but as you already know on this channel I make it super simple. So let's do it. So once you see that that means it's deployed and we can see it in Firebase. Coming over to Firebase. If you don't see it, reload the page and you'll see right there. It's pretty nice. We have our first function, which means that you

[22:21] have successfully launched your first function. Some of you are like, Corbin, I've already launched like 30. My bad. I'm giving a shout out to those people that have done some pretty complex workflow with just AI. It's pretty cool. Now, one thing you need to know since the entire Firebase project is associated with GCP, when looking at logs and kind of understanding more what's happening here, you go to these three ellipses over here. Click it. view logs. What this is going to do is this is going to allow us to add console logs within backend functions. And this is kind of the UI for logs in this context.

[22:53] So, this is going to open up. It looks a little crazy at first, like what the heck's going on. For the most part, you don't really have to care about any of this information. You're just going to be looking for the logs when we actually send requests, which we'll do later on. And then these little bars right here is anytime that anything's hit it before. So these got hit because every time you do a deployment, it's freshening up the code in the back end. Essentially, it's kind of like how we do our local code for the front end. When I push it to main, it's freshening it up. When I mpm

[23:24] run build and I'm pushing that to hosting for the new front end of the website, that's freshening up the code on the live actual website. Freshening up I'm using in a way of essentially just updating the code. Not bad though. This is actually really solid. Remember Google Docs is going to have all these terminal commands here. Let's move on to the next step here which is going to be creating our HTTP callable. Well, actually before we do that, let's set up our Firebase emulator. So all the logic for setting up our Firebase emulator, which you'll understand more of what the heck the emulator is once we set it up.

[23:56] We'll be done in our Firebase.js. So the situation is this. When we want to leverage different tools within Firebase, functions, authentication, databases, we're going to initialize them here and export them from here so we can use them throughout our entire code repository. So, I'm going to go and just paste over the code that is the correct code when handling this kind of information for functions, get functions here and connect functions emulator. The reason I'm pasting this code over, and you can just grab this from my GitHub that I put in the description down below, is because cursor AI is very hit

[24:26] or miss when it comes to this code. I don't know if the model is just not up todate, but this is the correct way to do it. So, right off the bat, I've left some comments in here for like if you wanted to import off, fire store, everything like that. But what we need to do is simply do get functions connect functions emulator. Git functions is what we're going to be able to use in our live website when we actually make a real call to the HTTP callable. Callable is just another way of saying like, hey, I can just I can call it. I'm calling it hello. And this right here is that if

[24:57] the window says localhost and the EMV is local, which honestly we don't have this logic set up here personally, we'll just leave it there for good practice. Then we're going to connect to the functions emulator. So what this means is, as you see up here, it says localhost 3000. That means when we're rendering the application and it reads this Firebase.js, it recognizes that, hey, we're in localhost 3000. So what we need to do is make sure we're connect to functions emulator and localhost. at this port 501. So that's pretty solid.

[25:28] And what we can do now is we're going to launch our emulator so we can see what this actually looks like. Now to launch the emulator, you're going to want to save this line here because you'll use it a lot. Is going to be Firebase emulator start. Come over here and I'm going to put in Firebase emulator start. Enter. Or emulators. There's an S. It will identify what emulators aren't currently connected. So for example, we don't have author right now. Fire Store reference that 2our 30 minute series if you want to see those be done. But for now, as you can see, we are running currently functions and hosting because

[25:59] that's all we've set up in this application. So, what this does for us is this creates a nice little UI that we can start leveraging uh by GCP here. This is really nice. This allows us and this is by the URL up here of localhost 4000. And what we can do here is this is a sandbox. So if we ever had authentication, fire restore, storage, we could quite literally just create a bunch of dummy accounts and then when we're done with the account, we can delete it here or just end the terminal command or end the simulation

[26:30] essentially. Fire is stored. If there's a bunch of data found in here, we can clear the docs as well. This is all for testing here. For the most part, because of the fact that we're using functions, this isn't as relevant because we'll be calling the other endpoint anyways. But as you can see right here, functions emulator is on, extensions emulator is on, and then our hosting emulator is on. Not bad. Not bad. For now, I'm going to go ahead and add a new terminal here. Let's save our checkpoint. Let's make a checkpoint because we've done a lot up to this point. So, we're going to get add get commit dash m. I'm going to say

[27:03] python works and emulator set. So now we can roll back to this for the next step here when we're creating our Python function if it absolutely is horrible. We have a checkpoint. All right, here we go. This is where we proceed. So now let's go ahead and connect our third party provider here that's going to provide the value bump ups. First thing we're going to do here is we're going to do something similar that we did to the front end is we're going to create an

[27:33] EMV file. So we're do EMV. This is where we store high-risk variables. This isn't pushed to the cloud. So when you clone my repo and download all this code for free, you won't see these secret variables. You'll need to set them yourself and then just reference the code to see how I name them essentially. We're going to do bumpups API_key and then equals. And then let's go ahead and get that. To get your key, simply go to bumpups.com. It's completely free.

[28:03] You go to your settings here and then we're jumping over to API. Anyone that starts an API account with bumpups here, we're going to give you $5 of free credit. See if you like the value we provide and then you can use it in your applications. We also are partnered with Zapier. So, if you are familiar with Zapier automations, you can integrate bump-ups into that flow as well. As we already did in an earlier video, our key is right here. So, I'm going to go and copy that. And then I'm going to paste it here. Obviously, I can't show the key, but we'll paste it here and we'll be good to go. So if that key pasted,

[28:35] you'll notice each key starts with bump up stash. We're good to go. Now let's go ahead and see if cursor AI is good enough to code this out or we might have to lean towards using chat GBT or clawed in a separate chat. So we're in our main.py. We've set that context up here. And here we go. So first thing I like to do, especially when dealing with thirdparty providers, is copy the relevant code in the documentation that we're going to use. So, coming over to bumpups here, we go to our API docs, API reference, and I'm going to scroll down here to the timestamps endpoint. And

[29:05] there we go. Now, in theory, I could copy, paste over, copy, paste over, but let's just be lazy here and just quite literally just copy everything on the screen. Copy. And then I paste it here. I'm just going to first say understand this. I like starting these bronze with, okay, first I just want you to understand this, nothing else. Don't start rambling. Don't start going down a little rabbit hole. And then I pasted all that information. Hit enter. It will give you like a brief summary of the situation, but now it has context of what bumpups is and the relevant API endpoint of timestamps. So knowing this,

[29:38] we're going to first tell it where we stored our secret variable. I'm actually going to add that to the chat as well. So I go over here and we'll just add the whole folder. This is make our lives easy. So we'll do functions here and we're going to say this. So this is how we'll phrase it. Okay. My API key is bumpups API key. the exact naming that I use in the EMV in the EMV in our functions folder. What API provider are you using? How are you named the API key? That's your first sentence. So the second line will be can we make an HTTP callable function that will do the timestamp endpoint. Taking a step back,

[30:09] if you're familiar with web hooks, this is very similar to that postput, get request. So for this example, we're doing a post, which means we're sending data to bumpups API and expecting data back. If this was a git, we're trying to receive data from bumpups. This wasn't a post up here and this was a git. This would be a kind of an endpoint where maybe we're dealing with a weathers API and the API is simply we're just calling what is the weather and SF and the endpoint's SF. That would be a get and then the SF weather would be returned in the statement. For now though, all you need to understand is for a post this is

[30:40] when we're sending data over. And from this documentation we can clearly see that the only thing that is actually required in the payload there's a bunch of cool little preference stuff we can do such as making the timestamp style long or short. the underlying language. But all we care about for now, and I might add this functionality in future videos, but all we care about for now is passing the URL of a YouTube video. So therefore, I say the expected data from the front end will be the YouTube URL, and that is specifically for this part of the post request. Let's hit enter here. I'm going to be extremely

[31:12] impressed if this gets this spoton on the first try. I highly doubt it will, but who knows? Maybe AI is it now. Maybe AI is all about it. So, what's cool here and what I'm noticing is that it was actually smart enough to know for me to one read an env variable in a backend function, we need this in our requirements.ext and also knows in order to do request, we need a request in our requirements.ext. So, for now, I'm going to hit accept all and let's check it out. So, we'll come over here. It added the two new relevant things in requirements.ext supposedly added our

[31:44] function here. Be very impressed if this works. So keep in mind just like how we saw in the front end when installing font awesome with all the different icons we needed to do npm install and then the line for font awesome when we do new lines in a requirements we need to install these as well. I went ahead and just asked for the relevant lines here. So we're going to our functions folder again. So I'll start a new chat or a new terminal. Go to our functions folder. When you see functions that's good. Anytime we want to do install commands within a Python folder the next line will be activating the vin. So do

[32:15] source vin bin activate. You'll notice vin is here now. And then finally we just do the simple line of of pip install and then the requirements text enter. So now this is going to install the logic of and the ability to do request within a backend function. I'll walk through deeper on this Python code and how to read it. But I want to add a couple things here. First thing I want to add here is just going to be some console logs so I can kind of show you how to read console logs in the back end when you do your logic. So let's do that. that I'm going to paste this over and say add console logs. And then the

[32:46] second thing we're going to do together here is let's go ahead and just set this up in the front end and try to make a call in a live website link. So I'm going to go ahead and accept all these prints or just say accept here. There we go. I'm going save and then coming down to our unoff going to our landing page here. Let's do some magic. I'm going to go to the timestamp.js. This is where all this information is being handled. And now you're going to learn how to set up a callable function within the front end. So in this chat, because it's already lasered in and it has context of

[33:17] the function itself, we're going to add timestamp.js. Let me see the naming that I gave the function real quick. I'm going to go to main.py and they named it on brand generate timestamp. So that looks good. So we're going to copy that. Come back over here timestamp.js and say, okay, I want to now call this function generate timestamps. Then we're going to go ahead and say from timestamps.js. So it knows where to call this function. Do it. So the first button we show the image and the title of the video. We already set up this logic with the YouTube API key in our front-end video. And then I'm going to say and then once this second button shows up saying generate

[33:49] timestamps. It's a little broken English, but basically first we're going to confirm is this the correct video. Click the button. Nice thumbnail. And then once we confirm that, then we're going to click generate timestamps, which is going to call this function. And then I'm going to have it. So for now, we're not going to reflect it in the front end. I'm just going to print it as a console log because we first just want to get these dots connected to see if it even works. Enter. All right, this is actually looking really good, y'all. Wow, cursor AI, you've improved so much since the last time I've used you. So, I'm going to go and save that. And then coming over to our local host, it's not going to work because you're

[34:20] going to get like a corors error of like you can't invoke from localhost 2000. So, what I'm going to do is let's go and do npm run build firebase deploy and go to the actual live website link that this exists at. So, I'm g save this real quick. And just to show you what I'm talking about, let's go ahead and just add a YouTube link. So, I'm going add this YouTube link here. And then it should just show the image here. Okay. So, it's a little broken. It shows up over here. Uh, we're going to have to add some CSS, honestly. So, let's do that. So, what I like to do is then I'm going to say timestamp.css

[34:51] down here. This is the correct naming with And then we'll just grab the exact line here when the title and thumbnail shows. I don't even think we're going to need CSS here, but it might do something cool. I'm going to inspect this while we wait for that. I'm going to go to console, and we're about to find out a really annoying error. If you're asking yourself, Corbin, what the heck is a Coors air? Coors error is security that your browser has. So what a corors error means is that typically especially when working with software when you try to do

[35:22] invocations from unknown URLs you're going to get thrown errors because it's like we don't recognize this. So this is just for safety reasons. There's ways to get around this uh using different extensions just for development reasons. But for now let's just first get the CSS looking good. So I'm going to say accept here. Save. And then I don't think it added CSS. Okay cool. So just a JS. So let's add our YouTube link again. anytime as well that I say something that you don't know what I'm referring to or it's a little confusing, just use the exact words that I use, put it into

[35:52] a chat and you'll be able to get more context that way. Cuz to be honest with you all, sometimes I do gloss over technical terms without even realizing that they're technical and kind of confusing because the fact that I've been doing this for so long now. So I'm going to generate here. Didn't work, but let's just see if we get our error here. Or maybe not. Maybe it actually will go through. Let's see. One thing that I like doing in this context as well is I like giving a console log of the payload, which didn't happen here. So, I have to make sure I do that. So, let me do that real quick. I'm gonna come over here and I'm going to grab this and be

[36:23] like, give me a console log of the payload. And when I say payload, this is the data we're sending. We just, this is like a fancy term, just like all the data we're sending in like a little text block to the back end. Loading. Obviously, I'm going to have to fix this. generate timestamps as this is way over here, but we should see a payload. Nice. So, this is the data that's being sent to that HTTP callable. Would you look at that, y'all? You can't tell me that's not cool. That is That's so cool. What the heck? Okay, this is awesome. We got the payload. The timestamps are

[36:54] here. Introduction to Codeex workflow. I mean, you can clearly see this is a Codeex video. Yeah, all the different timestamps are here that we can go ahead and then leverage and show that to the front-end user. Wow, that's awesome. That's really cool. Eureka moments like that happen in software development and it's one of the best feelings. I feel like when I was first creating my first app, there were so many situations where it would take me 3 days to solve a problem and then I would finally solve it and you' be like, "Hold up, new toolkit in the arsenal." That's awesome. Walk through this series, get to that

[37:25] point, and that's going to unlock so much in your brain cuz now you're like, "Hold up. I really can use AI to code software. This wasn't a joke. This was not clickbait. Make sure to subscribe. I already know I have statistics. Four-fifths of you haven't hit that subscribe button. 80% of y'all. That's too many. Let's go back. So, let me go ahead and show you how we can actually read that from the back end now. So, we got all this information. How do we read the logs of everything that happened while that front end was just saying generating timestamps? So, we're going to come over to our Firebase here. I'm

[37:57] going to reload so we see our generate timestamps flow. And I need to actually deploy the Firebase functions. My bad. The reason that worked, by the way, is because we're currently running localhost 4000, which we set up earlier in the tutorial for development purposes. So, here we'll see the logs, but I don't want to show you the logs here. Let me show you the logs in like the real production environment. Production QA, what do they mean? QA is an absolute replica of production.

[38:30] Production is developer jargon for what the user uses. Eg, you launch your software, 100 people are using it in England. They're using the production version of your software. QA is a duplication of this version for us to do testing before we push stuff to production. And then local is the baseline that we've been working with up to this point. See, I'm catching myself now, y'all. I've been doing this for a while now. So I I get used to all those comments like this guy didn't explain this, this guy didn't explain this. I'm catching myself. I'm I'm explaining it

[39:01] now. Okay. So let's go and deploy this function as this is good to go. And then we're going to do a another test here where we're going to deploy actually let's deploy everything so that we can see this as a Google function log. So as we stated before, this is the lines of npm run build, firebase deploy. npm run builds your front end. Firebase deploy deploys that to hosting and every relevant tool that you're using in Firebase, whether that's functions, authentication, etc. Another tip for the front end, it is good practice that when you're done developing and using these

[39:33] console logs for debugging, just remove them so they don't show up in the production environment. Now, to remove them, you don't have to completely burn the code. What I typically like doing is simply selecting the code here, command slash, and just commenting it out so it doesn't show up in the next request. For now though, I'm going to leave it because we're still in the debug phase here. And to be honest with you all, by the time you see this code in the repo, you'll be able to access all these console logs as well to help you out. Kind of cool though because you're getting an out of package software that you could straight up run and deploy and

[40:03] start marketing towards and making money. That's actually kind of cool. So here we go. You'll see that it's creating the generate timestamps function. When it's creating it, this will take time. When it's updating, should be faster. creating will only happen on the initial first deployment of that function with the new code. So, it's been fully deployed and you'll know that when you see that over here. I'm going to go ahead and just follow this link to the live hosting URL. I went ahead and entered the video again in our live website link, which you'll see right up there. This is live. Although, by the time you click it, it's going to go to tubam.com. Hit generate

[40:33] timestamps. It sent the payload and we got the results. Now, we're in a situation of how do I see what the heck even happened in the back end? Coming over to your Firebase, you're going to reload. You're going to notice your new function here, ellipses, view logs. A really useful thing for you to understand though is always make sure that you're at the most recent logs. You'll see them all the way to the far right. You can adjust timing up here, like last hour. But look at that. Right to my left here, we have our console logs. So, coming over to the code real quick, we see receive data. We see the payload API response status. And this is

[41:05] all the relevant code that we requested in our console logs. So, coming over to our main.py, PI, you'll notice that it's going to print this. Well, actually, it won't print that because it's not missing the URL, but coming over here, it will print the API response status, API response body, and then do response.ext response status code. And that's what you see here. API response status 200 payload headers, everything we requested to show up in our Google console log. So, what I'm going to do on my own time is I'm obviously going to fix this little button situation here,

[41:36] make the UI look a little bit better. I saved that all for the front end series. So, the methods and practices and the ways I'm going to go about fixing this will be the exact same that you saw in the front end tutorial. But to be honest with y'all, we've really gotten to the point here where you successfully now know how to connect in a secure manner third party APIs into your software application and provide value. So, here's what I'm going to do. Let me go ahead and just code out this front end a little bit so we get it to the point of reflecting this data. Let me show you how we reflect this data. Eg. When we get that little console log, obviously

[42:08] we don't want the user to come to the site, generate timestamps, and then the only way they see timestamps is that they'll have to inspect and go to console log over here. Let me actually just make a real quick UI that will reflect the timestamps and allow the user to copy the timestamps. So, as you already know with editing magic, big magic here, I'll see you pretty soon. And we're back. And yes, it's a lot darker. I work day and night. You know that Kick Cuty song? I work day and night. So, we're going to finish up this video here. I'm going to show you what I did and the different steps I took to make this nice cool little front end you're about to see. So, I did a couple

[42:38] of things here and we're going to walk through everything. First thing I did was I added this history thing. I added a nice loading UI. Also, I made it so that if they put in invalid URL or just random text, they can't obviously submit. This is going to mitigate bad calls to our HTTP callable which at scale will mitigate cast. So, just to see how this workflow looks now, paste the URL in. Nice loading UI. We get our thumbnail to show up here. I hit generate timestamps. Look at that. We got a little hammer moving. Pretty cool

[43:09] stuff. So, I'm going to show you how to do that as well. What you'll notice is that these free open source icons, we can do a bunch of cool animations like that. So, we're going to let this generate here. And then once it generates, it's going to boom pop up with the timestamps. There we go. I'm going to make this UI look a lot better. More of like a time stamp UI to be honest with you. And I'm also going to show you how we can link every single one of these timestamps to the actual original video itself. and it'll open up as a new tab. That'll be in the future. For now, I can copy all and just to show you that it works. I can paste it over. And there we go. We got our timestamps.

[43:40] So, what I also did here is I exited here. So, it allows a user to put in another video. When they're ready to go, they can hit the reload button right here and they'll have an entire history of their past timestamps that they generated with us. Now, what's key here is I'm actually not using our backend to store this data. I'm using the user's browser, which is cool. And that's called local storage. This also gives the user the ability to hit view timestamps here and copy again which long-term mitigates multiple calls done here with the generate timestamps because the user can just simply you know click this and they don't have to

[44:11] do the call again. Now what's really cool here and got me thinking a little. It would be kind of cool if I did store this in the back end and then I had like a global timestamps thing where every single user of the platform would be able to look at a list of all past generations. That's possible. Honestly, that's something y'all could build out once you get this free code. But let's see how I did this. So the first thing we're going to do is I'm going to move over here and I'm going to reorganize this folder real quick. So because of the fact that now we're dealing with a more complex component of timestamps.js, I went ahead and made a whole separate folder here called timestamp comp.

[44:41] Basically stands for time stamp component in this workflow that you just saw here. This is a component. This history I've made as a separate JS file. So it's a separate component as well. And then the popup itself is a component. So we got three major components all working handinand. And we're using the same kind of flow here of the parent child. So the parent is going to be the overall timestamp component and then the child's are the stamp pop which is the popup that we saw and the video list which is the list of videos of past videos generated. This is what's cool. What you'll notice here is

[45:11] that when we get this information of the user's timestamps using this callable right here, we're going to pass all this data. So coming down here, what you'll notice is that in stamp pop, we are passing the data of the time stamp history, which is what we're storing in local storage now. So taking a step back, what do I mean by storing in local storage? So what you'll notice here is that local storage is being set. And what we're setting local storage as is timestamp history. This is just a variable that we're sitting in the actual user's browser, which means that

[45:43] every single time they'll generate a video with us, we're going to store to this specific variable. This also means though since we're storing in the user's browser and for you to translate this logic for your own use case, when you're talking to cursor AI or windsurf or whatever you're talking with, you can leverage this local storage variable for really anything. When it comes to front end, typically, you know, we're going to be leaning towards the back end with very important data. But you can use this local storage to render stuff faster as we're grabbing the data

[46:13] directly from the user's browser rather than grabbing it from our Firebase Fire Store. The drawback though using local storage is that since it's stored in the user's browser, if the user were to use a different browser or alternatively hard refresh the page and clear their cache completely, they'll lose all their history. But that's not too relevant for us because end of the day, this is going to be a freeto use AI YouTube timestamp platform. This is just a nice little thing that we give the user to get their information fast. So for example, I load this up in Safari here. And what you'll notice is that we don't have the history

[46:45] of that video we just generated because it's a whole separate browser with its own local storage here. So that's the first thing you understand local storage. When doing application development, typically if the user's logged in, we'll typically lean on local storage, some type of hybrid approach where we'll do local storage and Firebase reads, but we use local storage to mitigate reads, which will mitigate cost. But I want to organize this folder real quick. So, I want to do it live because of the fact that timestamp comp is going to encompass everything that has to do with time stamp logic. I'm going to move this inside here and see

[47:16] if any errors show up. So, say move. I say yes. And then we got to make sure that all the paths are correct. And what you'll notice is that cursor AI is nice and sometimes it'll just update the path automatically for you. But sometimes when you're moving files around in this manner, you might get random errors like module not found. But remember from the frontend tutorial how to solve that when dealing with those kind of paths. For now though, coming back to local 3000, it loads. It's good to go. So we got our time stamp comp. We got our regular components. Let's keep going. So I'm going to go ahead and show you the exact dictation I used to make the time stamp

[47:48] pop up and make it easy for me. Eg this situation here. So what I know is that in our parent component timestamp, I know that I'm grabbing the data for the timestamps here, right? Because we're doing handle generate timestamps. This is our callable. And on top of that, I know when I receive the payload, the timestamps, the data that comes to me, I know how it's going to be structured. Now, there's two ways you can find out how it's being structured and sent to you. either you put a console log and you just copy it directly from the console log or alternatively you can come back to the documentation and you'll notice for a successful request

[48:19] it'll give me how the payload structured I simply can copy this in the documentation and then we're going to use this in the code so here is how I made the popup very easy and even passing data with it I said okay see this code I grabbed the entire timestamp.js JS. I copied all the code in JS. I copied all the code in CSS. Pasted it in the beginning of the chat. And then scrolling down here, this is what I said. Let's make a new file.js.css. This will be a popup. Call it stamp pop.js and CSS to make your life easy, especially when copying and pasting over code. Give the exact name that you want

[48:50] to use in your repository. I'm going say use same color and UI style. And its purpose is to show the data from console log timestamps results result.data. In addition to that console log that we set up earlier for that generate function, I also just gave how the payload should look when we receive the data and allow users to copy it. Mind you, make it look like the timestamps and how the data is received here. And I pasted this, which if you remember came from our original documentation here. So now the AI model knows how to map the data correctly when it receives it. So once I did that, I

[49:20] was able to get the entire stamp popup and the entire stamp pop-up CSS right here. copy paste over making these two files right here. So then next what it did is like okay so you got your nice little popup and here's how you import it to timestamp.js but as you can see here it gave it to me in like fragmented code we don't like that. So in order to ensure that I can simply just copy and paste over very fast to timestamp.js I simply said give entire code with it imported here I repasted the timestamp.js js the entire code in that file and requested it. And then what

[49:52] you'll notice for the output here is that it went ahead and added it correctly. And then all the relevant variables that are associated with this, it added it up here on the top of the file. With that simple back and forth, I was able to easily not only create a popup, but also reflect real data in the popup. So that was pretty cool. And it honestly knew how to do the copy function as well, which is pretty simple. So the next part was, okay, so now that I know how to do that, I was able to refresh the URL. So when I close the popup, this exits as well. How do we give a history catalog? Well, up to this

[50:23] point, I'm in the same chat. It has a ton of context of what we're doing. So adding the video list js and the video list CSS was a very simple add-on. Same situation. I identified the parent file of timestamp because this is where we're getting all the original data. I asked specifically, hey, I want to store this in local storage and reflect it to the user. If you're a new coder, the terminology of local storage and saying it in this manner that just comes with time and experience. But over time, what you'll realize when especially when coding of AI is that you can get really

[50:55] good code. You just got to know what to say. With video list.js, I say pass that original data that we have in the popup, but also I want to reflect the video title and thumbnail grabbed from the YouTube API. Just clearly set it. Then I said pass this data to video list. Now, what's cool here is that the way it did this is it's not actually passing it within the video list. Eg how it's passing it here. The video list can just leverage local storage by just grabbing that specific variable found in the user's browser. Eg this line local

[51:25] storage get item time stamp history. Remember time stamp history we set on that original call up here which is right here. So this is local storage get item and then we got local storage set item. This is when we're setting the data. This is going to be a record of every single time stamp that was generated by that user that we can then leverage here and grab and reflect this data. When leveraging local storage, what is super cool is that once you have the data stored in the user's browser, this doesn't cost me every single time I

[51:56] reload the page. This doesn't cost me YouTube API calls anymore. This doesn't cost me BumpUps API calls anymore because all the data is stored in the user's browser. So, if I hit reload here, boom. This is good to go. Now, the last thing I want to go over is going to be the loading UI here. Click generate. It does a nice little hammer thing. Another thing that's cool is that little thing where it does the spinning wheel. So, let me see if I can show you that real quick. Actually, let me just show you a cool little trick. So, if you're working with loading UIs, which can be

[52:26] frustrating where it's like, okay, it only shows up when a YouTube link is put there and it's grabbing data from YouTube API. But what you'll notice is that once it kind of caches that data, it's very fast. So it's like right there. Boom. But what happen if you really want to work on that loading UI to make it look better, you just go to your logic. So for me, it's in time stamp.js. And then you scroll down and you find where this is happening. Now you can use context like placeholders, loading states, and sooner or later you'll find where it's at. I know that when this loading UI shows up, it does that little spinner thing. And what you'll notice is that each one of these

[52:58] are based on conditional stuff, right? Okay. So if there's no video has valid ID loading, this is when we're going to show this. But what we can do here is that we can change the logic. So for example, if it's not loading, hit save. Exclamation mark means not loading. You can ask cursor AI as well for help with that. And then we can also say, you know, has no valid ID, we just put exclamation mark there. Essentially, you want to just keep messing with these different booleans here. Booleans true, false, till you can see it rendered in your UI. So based off those changes here, you can see it's always persistent and it's always showing. Therefore, now

[53:30] when I'm coding with artificial intelligence, I can really just mess with this CSS here until I get what I like. This is really helpful because the alternative way would have been like to keep putting in a YouTube link until you get it right, but you only see it for like 10 seconds and it's gone. This is nice. Now, if you're confused about which booleans to change and everything of this nature, what I would do is simply go to cursor AI and be like, can you make it so that the loading UI is always showing? And then just work from there. The other animations that you saw there was the gradient UI where the

[54:02] gradient was moving back and forth here. You also saw the little hammer moving. Now to do these animations, it's actually extremely simple and things to notate in the code is going to be stuff like shimmer here, animation key frames. This is the gradient animation. You'll notice this kind of structuring here. The idea being though that for you to do the same thing you want to see stuff like that for you to understand that like hey this is the animation's happening for me to actually do those animations all I simply did in the AI

[54:33] model was two things for the gradient loading UI quite literally said when there is a video that's pulling YouTube API data use a gradient loading UI and then have a spinning wheel from font awesome notice I'm using very specific dictation here and I'm asking for a very specific thing for the little hammer emoji effect that we saw up there. That was really cool and that was really simple for that. You just go to your code, go to where it says generating or whatever functionality you're trying to switch up. Generating here and I'm like, okay, where is the generating dot? There

[55:04] it is. And then what I did was I simply grabbed the relevant code here and then came down here for the actual button itself. Grab this code, put that into chat. I said to the left of this button, add a hammer icon and make it look like it's doing the hammering motion. And with that simple verbiage, I was able to get a cool little hammer animation. It's getting late here. Let's wrap up this video. Let's go ahead and get ad, get commit, and merge the back end. We're going to say done. There is more work to be done, of course, when it comes to the back end, but this completes today's video. The next video, we're going to be

[55:36] going over monetization, which should be fun, specifically with creating ads and overflow ads as well. You already know the workflow here with GitHub merge, pull origin main, and you'll be able to push that code from main. So there you go. That was an in-depth video on backend connecting third-party APIs. But I think the bigger thing here that you learned is how do we set up functions within Google Cloud and basically deploy our first function and it actually works. That's probably the most frustrating thing in this tutorial that a lot of y'all are going to get stuck on

[56:06] is the part of like Corbin, I can't even get the first function to deploy. Don't worry. Once you get it done one time, everything else is free ball. Everything else is fun. I mean, you literally saw how fast we created that bumpups API endpoint and provided value to the consumer. I think that literally only took me like 10 minutes. So, without further ado, those are two random videos. That is my face. I see you in the next