How I Vibe Coded a Full App using Claude Code (with Database, Payment, Login)

Cloud code is one of the most powerful AI tools out right now, but a lot of people are avoiding it for one reason. It has the word code in it, especially when you're seeing terms like MCP, scales, repos. It can feel quite intimidating. So, in this video, I'm going to give you a non-technical beginner's guide to cloud code. But this won't be a boring checklist video where I just go through a bunch of terms, but instead, we're going to actually build something together, and I'm going to explain each concept as it comes up in plain English. So, by the end of the video, you'll understand what cloud code is, what all of these confusing terms mean, and how you can start using it to build real applications, even if you've never written code before. And I'm going to be including timestamps down below. So, if you already understand a particular section, you can skip ahead. Now, before we start, I want to explain what cloud code is and how it's different from cloud chat. So, if you've been using chat GPT or cloud chat, you're basically asking questions to the AI and it comes back with an answer. But with cloud code, not only that, you can ask questions, but you're able to build things like websites, applications, and tools. And despite the word code here, you're not actually writing any code, but you're talking to it the same way that you would in Cloud Chat, right? So, you think of Claude Chat as a tool that gives you information and cloud code as a tool that helps you build things. And what makes Cloud Code even more powerful is that it can connect to apps that you already use through something called connectors. So this means that you can connect to apps like Gmail, Slack, Canva, and a bunch of other tools. And these are the apps that you probably already use on a daily basis. And once you enable that connection, you can start to create very interesting automations like replying to your emails, designing banners through Canva, and some other things that you probably never thought was possible. Now, there are three main ways that you can access Cloud Code. The first way is through the official desktop app here, right? Claude has its own desktop app. And inside you will see chat, co-work, and code. And this is probably the easiest way to start because everything is more visual here. Now the second way is through a terminal right and terminal looks like this. And I know for most beginners this is probably going to look very intimidating but this is how actually a lot of developers use cloud code because it gives you the most amount of control. Now the third way is through an IDE which stands for integrated development environment. So this could be something like VS code, anti-gravity or cursor. These are the tools where you can open your project. You can see all your files and folders and you can use cloud code inside of that environment. Now VS Code is probably the most popular one and big reason why a lot of people like using cloud code inside of VS Code is because you can spin up a cloud code section in the middle and you can immediately see the files that is created on the left side here and you can watch everything happen as it builds the apps for you. So I think what it comes down to is control, right? So the terminal gives you the most amount of control, but it's also the most intimidating if you're just starting out. The desktop app gives you less raw control, but it's a lot easier to understand visually. But honestly, Cloud has been making a lot of updates to the desktop app compared to even a couple months ago. It feels a lot more integrated now. You can preview what you're building on the right side. You can use the browser. You can look at your files and you can do a lot more directly inside of the app. So, if you've been watching other tutorials where people are using terminal or VS Code, now you know what you're looking at. Now, I think for most people, the desktop app is more than enough. So, in this video, I'm going to show you how everything works inside of the Cloud desktop app. Now, the next thing that you need is a Cloud subscription. And if you are doing this for the first time, I'd recommend starting with the cheapest plan here, $17 a month. And I think this is good enough for most people when they're getting started. And once you start building more things, you can upgrade to the $100 plan that gives you five times more usage or even the $200 plan with 20 times usage. Now, speaking of usage, this is something that you want to pay attention to as well as you're building your app. If you go to settings and usage, you're going to be able to see your usage here. So, even though you're on a monthly plan, the limit resets weekly and it also resets every 5 hours. And I know that's confusing at first, but you can monitor the progress here. So, if you're working on something and you hit your limit, just be aware that it won't be long until you can use it again. And also, there's a couple ways that you can conserve your usage. So, I'll be sharing some of those tips throughout the video. All right, so I'm going to start building something so you can see all these features being put to use. So, rather than giving you a boring checklist of tools that Claude Code has, I'm actually going to build something so you can see all these features being used live. I think that's a better way to learn. And today, we're going to build a simple web application. So maybe like a stock investment app where you can put in a ticker symbol and it gives you live pricing stocks just like what you'll see on Yahoo Finance or Google Finance. And I'm also going to show you how to add an API to get the live pricing of the stocks and how to even connect to Stripe for taking payments. So if you're charging people a monthly subscription, I'm going to show you how to add that into your web application. And I'm also going to show you how to set up a database and how to connect everything together. And finally, how to deploy that to the web. How to connect to a hosting provider and make it live so everybody can access your website. All right. So, I am on the desktop app now. If you don't have this already, please download it. And before I start a project, I like to connect to a folder. So, if you look to the bottom left here, you'll see that I'm connected to this folder. So, you can click on this and open folder. So, as you can see here, I have connected this folder that I just created. Basically, a blank folder with just one image here. And you want to do this for every project that you create because this is the place where Claude is going to create all the files related to this app. And when it comes to publishing or deploying your app, it's going to be a lot easier because it's all going to be in one place. So, so if you want to create a new folder, you can just click on new folder. But in this case, I already have this one here. So, I'm going to click open. And then you can see the folder name populate here. Now, in the bottom right, you will see that you can select models here. So, Opus 4.8 just released today. Actually, when I was recording this video, I don't think that you need to use the best model for every task because again, if you're not on the max plan, you're going to burn through your tokens very, very quickly. So for me, I only use the Opus models when I'm orchestrating the app, when I'm building the structure of it or when I'm asking it to think of complex problems or maybe if there's an error that Sonic cannot fix, then I will switch to Opus to help fix the issue. For so for 80 90% of my projects, I always use SA 4.6. Now, before I start any project, I like to plan and structure the application. You don't want to just give it one prompt and ask it to build it immediately. So here on the bottom left, you can actually click on plan mode. And this allows Claude to ask you clarifying questions before it builds anything. So essentially, you're having a chat with Claude to determine the features that you want in the app and how to actually structure the whole app before actually building anything. And this is called metarmpting. So metaring basically means that you're asking the AI to help you create the best prompt. And this is a good exercise, especially if you don't have domain expertise on the app that you're building. And even if you're confident on the subject matter, I think this is a good exercise just to brainstorm with Claude and you'll start to uncover a lot of new things that you might want to implement on the apps. So I have this prompt ready here. I'm going to paste it here. I want to build a stock investment app similar to this app here, Google Finance basically, right? So Google Finance just looks like this. And it's just a simple page where I can put in my ticker symbol here and it will give you the pricing and also you can see some news here and you can add these stocks to your portfolio and save it. and let's call the app market cap as life pricing news and the ability to save stocks in my portfolio. List out the features I should have and map out the plan and how we're going to build the app and ask me clarifying questions and then I'll just go and hit send. So, as you notice for every project, I like to give it some kind of reference, right? Whatever app that you're trying to create or build, there's probably already something out there that already exists. So by doing this, you're telling the AI to actually look at this reference website, study the features they have and maybe try to suggest new unique features that maybe you can add to your make it unique. Now because you're on plan mode, cloud is actually going to give you a lot of these questions before actually building anything. Right? So first question is asking is what should market cap actually do with stocks track only? Is it going to just watch live prices, read news or you want to do paper trading or real trading? No, I just want this one. And what platform should we build for first? So are we building a web application, mobile app or desktop app? So obviously we're going to do this one which is also recommended here. So click on this and where do we get live pricing news data? So free API FinHub Alpha Vantage paid API. Okay, we're going to go with free one obviously. So just me single user or multi-user accounts. So obviously we want other people to be able to sign up. So we're going to connect to superbase authentication and role level security. So we do want this one. So it's more complex but that's what this tutorial is for. All right. So click on this and then it's going to do a bit more thinking and now it's giving me a full plan. Right? So on the right side here it's pulled up a new window inside the app. So market cap build plan, right? Jason wants to build market cap stock investment app modeled after Google Finance. So down here you'll see that we've got four bullet points here. Uh what we going to do? We're going to track the prices only. There's no buying or selling. what kind of platform we're going to build and then where we get the API from to get the live pricing and also the ability to add users, right? And if you scroll down, you're gonna see more detail on what the features that we're going to have on the app, which I think looks really good. This is everything that I was thinking about actually. So yeah, it's going to be responsive as well. Got live pricing, got the news feed, and the ability to add stocks to your own portfolio. Nice. So these are the text stack as well, and they look correct to me. And if I go down here, you'll see that there are two things that I need to provide, which is the API key and confirm the Superbase project, which is what we're going to get to later on. All right. So, I'm going to approve the project. But before asking it to build everything, I want to see the visual, right? I want to see what the app will look like cuz for me, I like to build out the front end first, approve the design, and then have it build the back end to connect all the functionality. Now, in order for it to come up with a good design, you need to have references, right? Now, I like to go to dribble here to find design inspirations. So I can search for investment app here and you'll see tons of examples here of beautiful looking designs that you can just grab and bring it to cloud for reference or if you can find anything you like also go to Pinterest there. So if I type in investment web app you'll also see a bunch of designs that you can choose from and I was just doing this earlier and I found this one that I quite like. So, so I'm going to click on this, make it bigger, and then I just save as image and then save it here in the folder that we created, market cap app, right? And this is actually the reference image that you probably saw I have in that folder. So, I'm going to go back to claude and then give it this prompt. Right? Before you build the app, build the front-end dashboard. There's a reference image in that folder. I want the app to follow this design. And then hit send. Now, while this is working, I think this is a good time to talk about the context window. So you'll hear this term a lot and that just means that there's a limit on how much memory Claude can retain in a single chat like this. So you'll see this icon here and if you click on it you'll see that this particular session has 1 million context window and we've used about 56,000 here. So that's about 6%. Right now the way this works is that whenever you ask a question or whenever you prompt something new is Claude is actually going to read every single thing in this chat session all the way from the very beginning. So the longer your chat is, the bloated it becomes and the slower it gets, right? So there is a max of 1 million tokens here, which is quite a lot actually. And and that's because we're using Opus 4.7, but if you are using SA 4.6, you only get about 200,000 context window, which is a lot smaller. But when it gets to that point, what you want to do is you actually going to compact the conversation, right? Compacting means it will only retain all the important things in this conversation. Now, for me, what I find is that even after you compact the conversation, the quality dips, it forgets a lot of different things. I'll just ask it to summarize all the information that is important and crucial. And then I'll start a brand new chat and I'll just copy that information. And because we're working in this particular folder, it has all the files that it needs to get more context. And don't worry, it will actually make sense the more that you use Claude. But that's basically how context window works. All right. So now after a few minutes, it's starting to finish up the visuals here. And if you look here, it's actually using cloud preview here, which is basically an internal tool that Claude has, which will test the app that is building by itself before handing it to me, right? Which is good. And this one in particular is checking whether the dark mode works. So here it does an error. Dark mode is not applying. Let me inspect the DOM state to debug. So it's actually fixing its own problems here before handing it over back to me to inspect. So this is mind-blowing, right? It's actually fixing its own errors and it's doing a lot of the work here. All right, so it looks like this is done. So you'll see that the front-end dashboard is built and matches the reference design. It's running at localhost 3000. Now you'll see this a lot, right? Local host simply means that it's only running on your computer. No, nobody else has access to this because you're just doing a demo. You're testing things out right now. There are two ways that you can inspect the app. One is through the inapp browser here. So let me close this out so I can make this thing bigger. So Claude has an inapp browser here. So this is actually a browser that you can scroll down. And this is actually a web application, not a mobile app. It's just looks this way because it's squished together, right? So, um, the other way is actually opening this up on your Chrome browser. So, if I click on this, I can see the full application here, which is a lot easier to see. So, let me zoom out here. And this follows exactly the reference image that I gave it. So, that's a good thing. And all of this obviously is dummy data. We haven't connected the API for pricing. And if I scroll down here, let me check. Dark mode, light mode. Yeah, that works, right? So I think this is just visuals which is already looking very good. Now the reason why I like having the inapp browser here is because if I want to make changes to any of these elements here I can just click on either this the pencil icon here and I can just circle and then I can click add to chat and I can make changes. I can say change this to green, change this to red or whatever I want. Right? Or you can also click on the second icon here which is the annotate icon. So if you click here, you'll see that it's going to select each UI element, the exact one actually. And this is actually more accurate than just scribbling on the screen. So let's say I want to change this portfolio value to say total value instead. So I can just click here and change text to total value, right? And you can do this to change the text or change the colors, change the font size, anything you want basically. And there you go. Now it's changed the text to total value. Now you're going to see that all these prices are still dummy data. So the next step would be to get a free API to connect it to this app here and get live pricing, right? So that's very easy to do as well. So it's actually recommending me to go to Finnhub live data here to get the free API key so we can connect it to the clot, right? So I'm going to go to this website here and just sign up for a free account. And once you sign up, you'll have this API key here that you can give to claude. So think of API key as like a password, right? So this is a secret key that you actually don't want to give to other people because this one is free. But if you are giving an API key out for let's say an app that you're paying for and it gets exposed you're going to be paying for everything basically right so anybody can steal this. So you want to copy here and you want to keep it in a safe place and I'm going to go back to claude and I'm going to say I'm ready to connect to FinHub to get live pricing. I have the API key ready set up the environment file and get ignore so I can paste in the API key. So you don't want to copy the API key here on the chat cuz if your chat get exposed then like I said everybody can access your API keys right. So what you want to ask claw to do is actually to set up env file which is basically just a text file that lives on your local machine and you also want to set up git ignore so it doesn't get pushed to github when you actually deploy the app and env is basically an environment file. It's basically just like a text file that you keep all your passwords in and again it lives on your local machine and it doesn't get uploaded to GitHub. So hit enter here. All right. So it's created thev file inside of the git ignore. So I can just simply click on this and then it will open up like a text file here. And you can simply paste in the API key right here. And once you do that you can just click done and it's going to try to connect to the API and actually wire up the functionality of the app. So, I'm going to let it work for a few minutes and I think this is a good time to talk about connectors. Right? So, if you click down here plus icon, go to connectors, you'll see that I've connected to Stripe and Superbase and also Cloud and Chrome. Right? So, if I go manage connectors, you'll see that Cloud can actually connect to all these popular apps here. So, for example, if you're connecting to Gmail, Claude can actually draft replies. You can actually respond to your emails. If you connected to Canva, Claude can actually create designs for you without you having to manually go to Canva and actually perform those jobs yourself. Right now, in our case, I've connected to Stripe and Superbase because we're going to use Stripe to accept payments, to create payment links, and we're going to use Superbase to connect a database and store all the users information, right? All right. So, it looks like it's done. So, I'm going to test it out. Instead of testing it here, I'm going to open my Chrome browser again, and I'm just going to hit refresh here. Okay. Okay. And I'm going to test the API if that works. Right. If I click here and let's say I want to search for Microsoft MSFT. Yep, there you go. So, it pulls all this information from FinHub. So, click on Microsoft and there you go. So, it's got the pricing. It even has the chart here. Uh, this is not available for some reason. 1 month, 3 months, and one year. And you can hover around here for the pricing. And then if you look down here, it's actually pulling all the news as well. So, that is awesome. And just to make sure that this is actually the correct price. If I go to Google and I search on MSFT, yeah, 426. So that is the correct pricing, which is good. All right. So next, we're going to add a functionality where the user can actually save the stocks to their portfolio, right? And in order to do that, you're going to need to set up a database. So a database is simply a place where you can store users information like the stocks that they have saved to the portfolio. So, think of it like an Excel spreadsheet where if you were to do this manually, let's say you have 10 customers, right? Each customer has different stocks in their portfolio. These 10 different customers have different stocks that they've added to their portfolio. So, you want a way to be able to store that information. And we're going to use Superbase to manage the database for us. Now, at the same time, we're also going to add a pricing plan here cuz most likely than not, if you are building an app like this, you're going to charge a subscription, right? You want to charge a monthly fee to be able to to access premium features. So for this example here, we're going to use stripe to accept payments and I'm going to show you how to do that in cloud code. So here's the prompt that I'm going to give to claude, right? So I'm going to do two things at once, which is to set up the database and also payments, right? So for database, set up a database with superbase. I have the SCP connected. I just want to have the ability for users to log in and save stocks to a watch list, right? Users can only see their own stocks. And for payments, I also want to build a pricing page with two plans. The free plan and also a paid plan. Let's say you want to charge 20 bucks a month. You want to allow users on this plan to save stocks to their watch list. Right? Set up Stripe recurring payment. I have Stripe MCP connected. Create a dummy pricing page so I can test the payment in sandbox mode. Sandbox mode means that it's uh just testing mode. It's not live payment. So you can, you know, put in a random credit card number and just want to test if the payment goes through, right? And I've authenticated myself to both Stripe and Superbase. And if you're wondering, the word MCP just simply means that is a connector. And of course, if you're doing this for the first time, you do want to create a free account in Superbase. So I have my own account here. It's free to sign up. So as you can see, I have this project that I have already. And of course, you also want to have a Stripe account, right? So set up Stripe. And right now I'm on test mode here. So if you already signed up for Stripe and you want it to be on the sandbox mode for testing, you want to click here and just click switch on sandbox mode. So I'm going to hit go here and going to let it work. Now it's going to check Superbase and Stripe simultaneously and it's probably going to ask you for API keys to be able to connect to those tools. So you can just follow instructions. And one tip I can give you when you're v coding, you want to make sure that you actually understand the things that it's doing and not just blindly following the instructions and just hitting go because it's really easy to do that, right? But I think it's really important to understand every concept and why it's doing certain things, right? Why you want to use a database, why you're in sandbox mode. And if you don't understand what a database is, you can just ask it, hey, what is a database? Why do we need this? Or why do we use superbase and not other tools? So these are the things that you can actually ask cla to explain to you. And you can ask it to explain it to you in plain English. So you can actually understand this concept. So the moment it comes up again next time, you already know what to do. And it gets a lot easier then. And most importantly, you understand what you're building because if something breaks in the future, you already understand the structure of the app and how things work together and it's going to be a lot easier to fix. And I think that's a better mindset to have when you're vibe coding. All right. So it looks like everything is done. Now let me check this out. I go to my browser again. Let me refresh the page. And now if I go to pricing on the left here, it's created this new page here with two plans, free and pro. And if I click on upgrade to pro, it's actually created the payment link in Stripe as well. So if you're wondering how this was set up, actually, if I go to my Stripe account, and again, I'm on sandbox mode here. So all of this is dummy data. So if you were to create that payment link manually, you would go to payment links here, and you would create a test payment link, right? But as you can see, Claude actually created this payment link for us because we had the MCP connected and it was able to go into our Stripe account without me having to do this manually. Now, if you're doing this for the first time, when you connect your Stripe MCP to Claude, it's going to ask you to authenticate your account and also it's going to ask for your API key so that Claude can talk to this particular account, right? And to get the API key, you can go to settings and you can go to developers and click on manage API keys. And it's going to be these ones at the bottom here. And again, you want to save this in the env file so that it doesn't get leaked to the public. Now, before I test this, I want to go back to the homepage and I want to try logging in because Superbase is connected now and I can start to create my own account, right? So, if I go back to this pricing page, even if I click on get started free, it's going to prompt me to create an account. And let's see if I can create an account here. Click enter. No thanks. All right. I'm going to confirm my account real quick. And then I'm going to log in again. Sign in. And I'm in. So, that login works. And if I want to check whether the database is connected, I can go to Superbase now. And I already have this project here. But if you're doing this for the first time, obviously you want to click on new project and then you will just create new project. But this is a particular project that we're working on. So I'm going to click on this one and I'm going to click on the table editor here and I want to click on profiles here. And you can see that this is the account that I just created. Right? So it shows up here. So which means that it's connected. Right? Now if I go back to our website here and I click on this stock Apple. Now I want to click on add to portfolio. Now, since this is a pro feature, right, it just triggered me to upgrade. So, if I click on this, so it gives you this pricing page, and it's going to ask me to upgrade to pro. So, if I click on this, it's going to go back to the Stripe page that we created earlier. And since this one is just a test link, I also want to make sure that this works, right? So, I'm going to put in my email and then I'm going to check if this works. And I'm going to paste in this random number here. And this is something that you can use to test out your payment links for your Stripe account. And then fill out the name as well. and the country zip code and hit subscribe. And if I go back to scribe, I'll see that that transaction actually went through here. Succeeded. Now, if you go back to the website, you can see that I am now upgraded to pro and with this badge right here. And now I want to check if I can start adding stocks to my portfolio. And then I actually want to see it displayed on database as well to just verify that everything is connected properly. So, if I just click on this stock here, Google, and let's say I want to add this to my portfolio. Click on add to portfolio. Yep, there you go. So, I can add more shares here. 100 shares, maybe uh $1,000. And then hit add to portfolio. Yep. Add it to the portfolio. Uh let me add a couple more just to make sure that this works. Netflix, add to portfolio. 20 shares, $500. Add to portfolio. Yep, there you go. And on the left here I have a page called portfolio. So I can click on this and I should be able to see the two stocks that I just added which are all here. Perfect. Now I also want to make sure that this is not just displayed on the website but also save in the database that we just created. So if I go back to superbase again I go to table editor and it actually created a new table here called holdings. So here you'll see the two stocks that I just added Google and Netflix here and including the shares the cost basis and this is connected to this user which is the user that I just created. And if I want to check who this is I can go to profiles here and I'll see the user ID here as well and the email address. So that works. Now of course you can continue to build this out. You know you can change all these pages and make it really really nice. But I think for the purpose of this demo I think this is pretty good enough. And now the next step is how do you actually get this live on your internet, right? Because all of this is still sitting in your local machine and nobody can has and and nobody can see it except for you. And you want to take all the files that Claude has created for you for this app and you want to upload that into something called GitHub, right? So you'll hear this a lot. GitHub, what is GitHub? For those of you who are not familiar, GitHub is basically a place where you can store all your codebase for your app on the cloud. So you can deploy this on internet and GitHub is also a place where you can do version control. So when you're building an app, you got to make more changes, you got to make updates and when something breaks, you can revert back to the time that everything was working correctly. And you can do that with GitHub here. So you can think of GitHub like a Google Drive, right? So if you want to share files with another person, if it's sitting on your computer, nobody can see it. But if you save it on a Google Drive, it's now going to be saved on the cloud and you can just share it with a simple link. And this works kind of the same way but for codes. Right now you want to create a free account on GitHub and then you want to create a new repo. Right? So you can click on new and you want to just name it here. Um so I can call it market cap app. And then you can choose whether to make it public or you want to keep it private for now. You can do that as well. So I'm going to keep it private for now. And then I'm just going to hit create repository. And once that's done, you want to grab this link here. And basically this is the link to this repo here that you want to give to Claude. So Claude can upload all the files directly here. So I'm going to go back to Claude. I can simply say I'm ready to publish. Connect to my GitHub account and push to this repo. And then I'm going to just paste the link that I got from GitHub. Now if you're doing this for the first time, you want to authenticate yourself. It's going to ask you for some keys and just follow the instructions. But that is just one time. And since I've already connected before, I can just simply do this. And then I'm going to hit go. All right. So, looks like it's done. 41 files pushed to the GitHub repo and API keys are not included. So, perfect. So, if I go back to GitHub here, I can see that all the files are actually here. Now, the next thing to do, which is the last piece of the puzzle here, is actually to get this live on internet, right? And we're going to need web hosting for that. And for this, you can use any web hosting you want. But today, I'm going to use Hostinger, which is kindly sponsoring today's video. And I've actually been using Hostinger for years for a lot of the websites that I build. It is up to nine times cheaper than traditional hosting and you get a free domain for one year. You get a business email and the nice thing about this particular hosting is that it automatically connects to GitHub. So any changes that you make to your code or to your app, it automatically updates on Hostinger without you having to do anything manually. So I'm going to provide the link for you guys to access this page here. So once you land on this page, you want to click on view plans. So you'll see two different plans here, business and cloud startup. Uh you can choose business. It gives you five manage web applications. If you want to build more apps, you can definitely go for the cloud startup which gives you 10 web applications and up to 100 websites. And by the way, these plans are not usage based. It's a fixed monthly cost. So you know exactly how much you'll be paying every single month for this. So today I'm going to choose the business plan here. And I click on choose plan. And you're going to land on this page where you can pick the period here. Obviously if you sign up for a longer plan, it's going to be the cheapest. So I'm going to pick 48 months here for $3.99 a month. And then you also get a free domain here for one year. So you can choose any of these domains here. And also if you use my code Lee JSON, you're going to get additional 10% off the entire plan. So it's even cheaper. Now you want to hit continue. And once you're here, you can go to websites and you're going to go to Node.js and click on deploy your Node.js website in minutes. So click on get started. And then make sure that you have business web hosting selected. Hit continue. And here's the step where you want to connect to GitHub, right? So it's going to be able to pull all the files from this GitHub account to Hostinger, right? So I'm going to click on continue to GitHub. And then you want to authorize this connection as well. And here you can select all repos or you just want to select the particular repo that you want to connect. So in this case I'm going to click this one. And I'm going to find the one that we just created which is Mark Cap app, right? And I'm going to hit install and authorize. And then I'm going to verify. And there you go. My repo is now here. I can just click on this and hit continue. Now, once you're on this page, you want to pay attention to this thing called environment variables down here. So, this is basically the API keys that allows you to pull up live pricing, make payments through Stripe, and also connect to Superbase, right? So, you want to add this, and you want to just add the API keys here to each of those services. Or if you don't want to do this individually, you can just hit import file. You click here, and you want to just go to that folder, and it should be in that folder. Now, file is a hidden file. So if you're on a Mac, there's one way to make that visible, which is to hit command, shift, and period. And you'll see that ENV file here. So just click on this file and then hit open. And then it's going to automatically populate all the API keys inside of here. And then you want to hit finish and then hit deploy. And in just a couple minutes, it's done, right? So you can just click on this temporary domain here and your website is published, right? So this is a temporary domain obviously if you look at the URL here and you can change this domain to anything you want with Hostinger and if you share this link anybody can access this website and if you even check whether this thing works yeah so the live pricing works as well I can pull up different stocks here and it's working properly and one thing to note here because it's connected to GitHub automatically and you have auto deployment on here and what's going to happen is that when you make changes to your app and when cloud pushes all the new files into GitHub and Hostinger will actually detect that there are changes made to that repo. So, it's going to pick it up and it's going to autodeploy the website to reflect the latest changes. And I think that's a nice feature to have so you don't have to keep manually deploying your website. So, I hope you guys can see what the basic workflow looks like when you're building an app with cloud code. The next time you see someone build an app, you know exactly what all the terms mean and it's going to be a lot easier to follow. Now, of course, what you see today is just a demo app, but if you guys want to watch me build a real app, I recently made a video on how I built a calendar booking app called Calendarly completely from scratch. So, if you want to watch that, you want to click here.