# Claude Code + Supabase + Vercvel | Build & Deploy Real Web Apps (Full Guide)

Channel: Damian Malliaros
Video: https://www.youtube.com/watch?v=GXx2QB23rxU
Duration: 44 min
Language: English
Words: 9473
Transcript page: https://viewrankai.com/tools/youtube-transcript/GXx2QB23rxU

---

[0:00] You need to stop building simple websites and start building real web applications instead, where users can create accounts and securely manage and store the data in a functioning back-end. In this video, I will show you exactly how to do that step-by-step using Cloud Code for building the front-end, Supabase for creating the back-end, and Vercel for deploying your app to the cloud. So, by the end, you will know how to build a complete back-end powered web application with user authentication, email verification, Google sign-in, file storage, and deployment to the cloud. So, now, [music] let's get started. But, before we start building the web app, I want to

[0:45] first talk a little bit about why we're going to combine these three different tools to build this back-end powered web app. Well, for the front-end, we're going to use Cloud Code because it enables us to build very nice looking front-end interfaces similar to this. Now, for the back-end, we're going to use Supabase in order for us to build a user authentication section so that people can sign up into our app and have their login information safely stored in our back-end. Now, for the user authentication section, I will show you how to set up email verification, which is something that for some reason nobody shows you how to do, and it's definitely

[1:24] needed if you want to build any serious full-stack app. And if you're wondering, email verification is basically the message that you get to your email address in order for you to verify your account when you sign up into an application, and usually looks something similar to this. And then, I will also show you how to set up Google sign-in/sign-up, so the users of your app can sign up with Google, which is also a feature that is definitely needed for any serious application. And after the user authentication section, I will also show you how to set up a fully functioning back-end. But, this time we're going to

[2:01] use Supabase, and specifically the tables that Supabase gives us in order for us to store information that the users input into our app. So, we're going to be able to store different text, numbers, usernames, plus we're also going to be able to store different types of files, PDFs, and images, which is everything that's required for us to have a fully functioning back-end. And once we finish setting up our back-end, we're simply going to connect it over to a front-end interface that we have built with Cloud Code. And this is going to be a double connection, and what this means is that everything that we input in our

[2:38] front-end interface is going to get sent back over in our back-end database over here, but everything we have in our back-end database will also be displayed in our front-end interface that we have built with Cloud Code. And after we have made this connection, we will simply deploy our app to the web using the GitHub and Vercel MCP. So, now that you understand the full road map video, let's first start with step number one, which is to hop inside Cloud Code and start building the front-end UI of our app. Now, how I'm going to use Cloud Code is going to be from inside Under Gravity. Now, if you don't have Under

[3:13] Gravity installed in your machine, go over to undergravity.google and simply click on download for your operating system, and then once you download it, you're going to see the same interface that I'm seeing right now. Well, the first thing that we have to do is to simply come over here and click on open folder, and then what I'm going to do is I will come over here and going to create a brand new folder, which I'm going to call financial advisor, since I want to build a

[3:36] financial advisor app for this example. And then, I will come over here and click on create, and then I'm going to select this folder. And now that we select this folder, we are inside our Under Gravity instance, but we currently don't have access to Cloud Code. Now, to install Cloud Code, all we need to do is to come over here to the left of the page and click on extensions, and then we need to come over here and search for Cloud, where this is going to give us this extension, which is called Cloud Code for VS Code. And then, all you have to do is to simply come over here and

[4:03] click on install. What this is going to do is install Cloud Code in your Under Gravity instance, where all you have to do to access it is to come over here and click on the Cloud Code button over here, and this is going to open up Cloud Code inside your Under Gravity instance. And as you can see, now we can come over here and chat with it normally. For example, if I come over here and send over hello, you're going to see that we're going to get an answer from Cloud Code say, "Hello, how can I help you today?" Which means that we successfully managed to install Cloud Code. So, now,

[4:34] what we need to do is to actually start building the front-end interface of our app. And how we're going to be able to do that is by coming over here to Cloud Code and basically explaining to it exactly what features we want our app to have. That's why I will come over here and I'm going to say, "Hey, what I want

[4:49] to do is build a financial advisor app. This application should categorize all my expenses from section where I input them myself, and then I want this app to give me suggestions using an AI model for exactly how I can achieve my financial goals. Plus, I also want the option to be able to set specific budgets for different categories of expenses, for example, for food, for business expenses, etc., etc. So, what I want you to do is to go ahead and research the web and figure out what features do the most popular financial advisor apps have, and make sure you take those features, especially the good ones, and you implement them into our

[5:29] app. Plus, if you have any new suggestions for features that are not yet widely out on the market, but you think they would be very good for our app, make sure you suggest them as well. And now that I'm done explaining to Cloud Code what features I want my app to have, I also need to come over here and tell it how I want my app to look like. Now, to make this easier, I will go over to a website like dribbble.com, which is basically a website that allows you to view a bunch of website designs, and then I'm going to come over here and I'm going to search for financial

[6:00] advisor apps to see what my competitors are doing. And as you can see, they mainly have some very nice looking light theme websites and applications. So, to differentiate myself, I'm thinking of going with more of a darker tone for my app, since I don't want to be the same as all my competitors. And I actually searched through Dribbble a bit, and I found this very nice looking interface that I really like and I think would really fit well in a financial advisor app. As you can see, it's pretty dark with some very nice green colors. So, what I'm going to do is I will come over

[6:32] here and I'm going to copy this by taking a screenshot of it, and then I will come back over to Cloud Code. I'm going to paste the screenshot that I just copied, and I'm going to say, "Hey, now for the design of the app, I want it to be dark with some nice green colors

[6:45] similar to the image that I uploaded." And now, what we could do is we could come over here and send over this prompt, but that is definitely not what we want because we first want Cloud Code to go ahead and create us a detailed plan for our application, so we can then review it and see, "Oh, do we actually like this plan? Do we want to make some changes to it?" And only once we're satisfied with the plan, then we need to go ahead and tell Cloud Code to go ahead and execute it. But, to make Cloud Code create us a plan and not actually start

[7:13] writing code, what we need to do is to come over here and change this from edit automatically to the plan mode. So, Cloud Code is only going to go ahead and create us that plan. And now that we made this change, we can finally come over here and send over this prompt. And as you can see, Cloud Code has started executing, and it's first going ahead

[7:31] and analyzing our request over here. Now, it's doing a research on the web to find the best features for our application, and now it is asking us whether it allows us to fetch this data. I will say yes and yes. And as you can see, Cloud Code went over and did a bunch of research, and now it is asking us what tech stack we want to use. Now, I will come over here and select the first option. Now, for the AI model, let's do Cloud API. And for the platform, since this is a web app, we need to come over here and select web

[7:59] browser, and we click on submit answers. So, now Cloud Code, based on all this extra information that we gave it, can go ahead and generate us this detailed plan for our app. And boom, as you can see, Cloud Code just finished, and it gave us this plan over here. So, let's actually increase its size a bit so we can take a look at it. As you can see, we have a financial advisor app. First, we have the context. It is telling us what features it is going to have. Then, we have phase one. It's telling us manual expense input and categorization, AI powered suggestions, which is what we

[8:32] asked for, category for specific budget setting, food, business, etc., dark theme, and the tech stack that we're going to use. Then, we have phase one. What it is going to go ahead and do in phase one. Phase two, it's going to build all the core features, the dashboard, the expense management, the category management, budget system, and the financial goals section. And then, it's going to go ahead and build all the AI powered features, which actually would differentiate that app from our competitors. And then, some innovative features over here, financial health structure, expense wide tracking, and goal celebration moments, which is a pretty nice feature. And then, phase

[9:12] three, it's going to polish the UI. Phase four, it's going to create the project structure. Phase five is the implementation order. Now, I would say this plan does look pretty good, and I don't really have any feedback for Cloud Code. Now, if I did have any feedback, what I would do is I would come over here and I would type in this tab exactly what I wanted Cloud Code to go ahead and change. But, since this plan does look very good to me, I will simply come over here and say yes and auto accept changes. And what this is going to do is start up Cloud Code and

[9:42] basically tell it, "Hey, the plan looks good. Now, go ahead and build out our application for us." And as you can see, that's exactly what Cloud Code is going ahead and doing. And right now, it is asking me for permission, so I'll give it permission. And and you can see, it created this to-do list over here, in which it outlines all the tasks that it has to go ahead and do. And you will see that it, once it starts finishing these tasks, it's going to come over here and mark them as done. As you can see over here, once Claude Code went over and finished these two tasks, it marked them

[10:12] as done, and now it is going ahead and performing the next ones. So, what I'm going to do is I will just simply let this run in the background and let it finish everything, and every time it asks me for permission, I will simply give it permission to run. And I will be back with you once all these tasks are fully done, or if we get stuck on any issues in the process. And boom, as you can see, Claude Code just finished executing all the tasks. And if we actually come down here, we can see exactly what it did. It went over and built the front end, it created the

[10:42] design, it also created some back-end functions, along with all the features that our app is going to have. And to take a look at it, we simply need to install some dependencies and to run the server. So, what I went over and did was I basically told Claude Code, "Hey, go ahead and install these dependencies and run the server." And that's exactly what it did. It went over and installed these dependencies, and then it gave me this localhost URL, which if I actually click on, you can see that our app opens up in our browser, where we can see over here the initial dashboard section, where we

[11:15] can come over here, add in expenses. For example, we can say we want to add an expense for 1.5K. Let's say we bought a MacBook, and the category is going to be business, the date is going to be today, we can add in some notes, and why did we spend this? And let's say to make better videos, and click on add expense, and this is going to go ahead and add this expense in our app. Whereas you can see, we also have the option to edit it and also remove it if we don't actually wanted that. Then, we also have a budget section, where we can create our first budget, and let's

[11:48] say we want our business expenses to be less than 3K this month, and we can also select the period, weekly, monthly, or yearly. Now, I'll select monthly, and we can also select where we're going to get an alert, and let's say we want to get an alert at around 75%. Plus, we also have the option to roll over the budget in the next period. So, if some budget is left, we can move it over to the next period. I will select this and click on create budget, and this created a budget, as you can see over here, where we have already spent 1.5K out of 3K

[12:21] that we can for business expenses. Then, we also have our goals, where we can come over here and create our first goal, and let's say we want to do an emergency fund, and let's say the target amount is going to be 5K, and the current amount is 2K. So, let's make the target date all the way up till, let's say, May 21st, and let's set this as high priority, click on create goal, and

[12:45] we can see that this goal is created. And we also have an AI advisor section, in which we can chat with an AI that has access to all of our expenses, budgets, and goals, and ask it clarify questions, and basically tell it, "Hey, go ahead and optimize my expenses and tell me what I need to do to achieve my goals." Now, this section, you will see that it doesn't actually work because we need to give it access to an API key, because if I actually come over here and ask it, "Can you see my expenses?" it is able to do so, which is weird because it

[13:16] probably shouldn't be able. And as you can see, guys, I went back over to Claude Code and asked it whether it gave an API key to my AI advisor, and it's telling me no, it didn't, and the responses that it's now giving us are mock responses. And if we actually want it to be functioning, we need to give it access to a Claude API key. Now, to create this API key, we need to go over to platform.claude/settings/keys, which I will also leave a link for in the description below. And we simply

[13:43] come over here and click on create key. Then, for the workspace, I'm going to leave this on default, and I'm going to name my API key to advisor, and I'll click on add. And what this is going to do is generate me my brand new API key, which I can simply come over here and copy. And then, to add this in into my app, I can come over here, paste it in over here, and say, "Hey, what I now want you to do is to go ahead and add in my Claude API key over in the AI advisor section." And then, simply come over here and click on enter. And what this

[14:13] is going to do is go ahead and install the Anthropic SDK and integrate this API key into our app, which is exactly what we wanted. Now, you did see my API key, you obviously shouldn't share yours with anyone. I'm going to delete this before uploading this video. And boom, as you can see, Claude Code just finished integrating this API key. So, now we can actually access it by coming over here in our localhost. And if I go over in the AI advisor section and I say, "Help me create a budget," and send over this prompt, this is actually going to go, call the Anthropic API, and give us an

[14:48] actual response from the Claude model, which is exactly what we wanted. And now, we can basically fully chat with this. We can come over here for a say, "Say, oh, let's start with the essentials." And this is going to go and actually give us responses that are from an actual AI model, exactly as we wanted. Now, I think you guys can see that our app basically works perfectly fine function-wise. Like, all the buttons work when I click on everything, and everything is working as it should,

[15:15] but the UI isn't as clean as it should. And to change that, what I'm actually going to do is I will come back over to Claude Code, and I'm going to type {slash} plugins, and I'm going to select manage plugins, because what this is going to do is open up all the Claude plugins. What Claude plugins are are basically some already pre-built instructions that you can use and have Claude perform a very specific set of actions. And the plugin that I want you to specifically search for is this one, which is called front-end design. Now, this should be the first plugin that comes up, so once you see this, simply

[15:49] come over here and click on install, and I will click on install for this project, because what this plugin is going to do is basically give Claude Code instructions for how it can go ahead and build unique-looking websites that don't have this generic AI feel to them. So, now that we installed this plugin, what I'm going to do is I will come over here and I'm going to tell Claude, "Hey, great, the app works exactly as it should, but I want to improve the way it looks because I do think right now it looks a bit too AI-generated. So, what I want you to do is to go ahead and use the front-end UI

[16:20] plugin that you have access to and improve the UI of the app. Again, make it as similar to the image that I sent as possible, similar colors, similar theme, a similar super clean and modern-looking interface. And what I'm going to do now is I will come back over to Dribbble, to where we had the previous website that we really liked, and I'm going to take a screenshot of this again, and then I will come back over to Claude. I'm going to paste in that screenshot, and I'm going to send over this prompt. So, now Claude Code can go, use the front-end design plugin that we gave it access to, and improve

[16:55] the UI of our app. And as you can see, that's exactly what it did. It went over and called the front-end design skill, which is included in the plugin that we just installed, and now it is going to go ahead and make these improvements for us. As you can see, it created this to-do list. So, now what I'm going to do is I will simply just let this run in the background, let it improve the UI, and I will be back with you once it is fully done. And boom, as you can see, Claude Code just finished making the UI changes, and now we can access the new

[17:23] UI by simply coming over here and clicking on the localhost URL. And as you can see, this is the brand new UI that Claude Code managed to generate for us. And I do got to say, this does look way cleaner. For example, if I come over here and add in an expense, we can see that this section also looks better, the budget section also is cleaner, the goal section, and the AI advisor section, along with our initial dashboard over here, since it used more clean colors, and right now it doesn't look as AI-generated as it did before, which is exactly what we wanted. Now, we can

[17:57] obviously sit there and improve the UI even further. We can possibly add in some interactive graphs that show our data, and a bunch of other more things. But, before I will go ahead and we make any improvement into the app, we actually need to set up the back-end of our app, since I know we have no user authentication section, which means that anyone can access the app without them having to create an account. And we also have no way to store the data that the user inputs in our app, so then when the user logs again inside the app, they can access the same data. Since if I

[18:29] actually come over here and add in an expense, and I click on add, if I actually come over here and refresh this page, you will see that the expense basically gets lost because it isn't stored in a functioning back-end. So, these are the two things that we need to go ahead and create right now. Now, to create this back-end, we need to come back over to Claude Code and type something like, "Hey, what I now want to do is go ahead and create a fully functioning back-end for my app using Supabase, and specifically using the Supabase MCP." Now, the first thing that I want to do is create the user

[19:01] authentication section of my app, so the people can log in or sign up into the app either via their email address and password, or by signing in with Google. So, what I want you to do is to connect to the Supabase MCP and set up this full back-end for me." And now, I will simply come over here and send over this prompt. So, Claude Code can first research the web and find exactly how it can connect to the Supabase MCP, which if you're wondering, MCP stands for model context protocol, and it's basically a way that Claude Code, or any other AI agent, can communicate with the

[19:37] actual Supabase interface and go ahead and create different functions over there. So, think of MCP as an easy way for Claude Code to connect over in a Supabase account and go and set up our back-end database for us. And as you can see, it is telling us that it doesn't see the Superbase MCP tool available in its current tools, but it's going to go ahead and install it, which is exactly what it's going ahead and doing right now. And all we have to do is to just simply let this run in the background till it is fully done. And as you can see, Cloud Code is now asking us whether

[20:10] we want to create a brand new Superbase project or whether we have an already existing one. Now, I will simply come over here and click on create new project since that's what we want to do. And I'll click on submit. And now it's telling us that to create the Superbase project, it needs access to a personal access token, which we can find by coming over here in this URL. And once we go over in this URL, all we have to do is to simply come over here and click on generate new token and simply come

[20:36] over here and give a name to our token. I'm going to call it Financial. And then we can select when we want our token to expire. I will select 7 days. And then I will come over here and click on generate token. And what this is going to do is generate this brand new token for me over here. So now all I have to do is to come over here and copy it. And then I can come back over to Cloud Code, paste it in and say, "This is my Superbase token. Go ahead and configure everything that you need in order for you to connect to the MCP server." And

[21:05] now I'll simply come over here and send over this prompt so Cloud Code can take the token that we just gave it and set up the full project in Superbase for us. And as you can see, it's asking us whether we want to allow this to edit our MCP JSON file. So click on yes. And now that we gave it access to this token, and as you can see over here, Cloud Code is going ahead using the Superbase MCP that it just got access to and it's creating this brand new Superbase project for us along with

[21:33] basically the full back end for our app. Now, I do want to point one thing out and that is that I didn't need it to actually restart Cloud Code in order for it to see the new MCP that it got access to. So what I did was I came over here. I basically told it, "Give me a prompt that gives you context when you restart Cloud Code." And then what I did was simply come over here and click on Cloud Code, opened up a brand new tab, and then I took the context that it gave me over here, I copied it, and then I

[22:00] pasted it over here in the new tab. That's why you can see that we right now have a new tab and we're not in the previous one. But now Cloud Code is able to go ahead and use the Superbase MCP. And as you can see, it's setting up everything in the back end for us, which means that all we have to do is to wait a little bit till it is done. And as you can see, it's telling us that our Superbase setup is complete. And here's a summary of it. It went over and created this brand new project over here. It also gives us all the database

[22:28] schema that it created along with some security and performance things applied, which means that if I now come over here and tell it, "Give me the localhost URL to test it." it's going to give me the localhost URL of our web app, which means that if we now go over in the localhost URL, we first see this section over here, which prompts us to sign up with an account, and then we will be able to access the app. So if I come over here and I click on sign up, for example, and I come over here and I fill in my email address along with a

[22:59] password, then I am able to come over here and click on create account, and this is going to send a confirmation mail over in my email address, which if I navigate to, I can see this option over here that tells me confirm your mail, which if I actually click on, I will now be able to access the app. So now if I come over here and add an expense, for example, let's say we bought another MacBook. We have been buying a lot of MacBooks lately. And

[23:25] this is a business expense, of course. We bought it this day. We click on add. This is going to add this expense over in our app. And if we actually go over in our Superbase account and we click on our organization, we can see that we do have this brand new project set up for

[23:41] us, which is the Financial Advisor app. If we actually click on it and we navigate over here in the table editor section, we are able to see all the different tables that Cloud Code created for us along with the expense that we just created over in the front end interface being safely stored over here in the back end. As you can see, this is for the amount of $2,000, for the category this business, description MacBook, the date it was created, when it was created, and a bunch of other more information. Plus if we navigate over in the profile section, we can see the account that we just created along

[24:13] with the email address, when it was created at, and when it was updated at, exactly as we wanted. But we do have one problem that most people skip when they show you how to set up a fully functioning back end, which is that this confirmation email works right now to confirm our email address, but it's not going to work when we set our application live. And that's because we're using a Superbase domain to send this email verification. And Superbase only allows you to send this email confirmations when you're testing out this app and not when you have it live, which means if we turn this live,

[24:47] Superbase will only allow us to send only the two email verification mails per hour, and then it's not going to be able to send these confirmation emails, which means that we're going to need to use a third-party service to actually set up this email verification mail. And the third-party service that we're going to use is called Resend. And I will leave a link for it in the description below. Now, all you have to do is simply come over here and sign up for an account. And once you do that, you will be brought over in this interface over here. Now, don't worry. We're going to go everything step by step. Now, the

[25:20] first thing that you need to do is to come over here in the domains tab and click on domains. And what you need to do over here is come and click on add domain, and you need to input a domain name that you own. Now, if you don't own a domain, you will need to go ahead and purchase one. It can either be from Namecheap, from Google, from GoDaddy, or from any other domain provider, but make sure you go ahead and you purchase a domain because this is a requirement in

[25:44] order for us to be able to set this up. And once you have purchased your domain, all you will have to do is to simply come over here and fill it in. And once you fill in your domain, then you will need to come over here and select the region you want to choose. Make sure you select the region that is closest to your target avatar. So for me, it's North America. And then you will need to

[26:03] come over here and click on add domain. And what this is going to do is open up these settings over here. Now, I know this might seem intimidating at first, but don't worry because I'm going to explain it right now. Now, what you're seeing over here are the DNS settings of Resend, which you need to go over in the platform that you purchased your domain name and input these Resend DNS settings in that platform. So then that domain points over here to your Resend account since that is how Resend is going to be able to access your domain and send these confirmation emails on your behalf. Now, I know this process sounds

[26:39] intimidating, but Resend actually has a detailed video over here, which you can access by clicking on tutorial, that explains to you the entire process step by step. So all you have to do is to just watch this video, and then you will be able to set this up very easily since they explain it as they're talking to a complete beginner. And once you have set everything up, you will be able to come over here and click on I've added the records. And what this is going to do is verify that your records have been successfully added. Now, this will probably will take a few minutes till

[27:10] the status goes from pending to active, but just wait a little bit till it is done. And then once the status is on active, then what you will have to do is to simply come down here to the where it says settings and click on this button. And then you need to navigate over here in the integrations menu. And as you can

[27:26] see over here, we have two integrations. We have Superbase and we have Vercel. Now, what I want you to do is to come over here to the Superbase and click on connect to Superbase. And what this is going to do is open up this tab where Resend is asking permission to access your Superbase. So simply come over here and click on authorize Resend. And then this interface is going to pop up where all you have to do is to come over here and select the project that you just created, which in our case is the Financial Advisor. Then click on select project. Then over here, you will need

[27:57] to come and add in an API key. Now, you can simply select your domain and click on add API key, and Resend is going to add this automatically for you. And then you will see these configure SMTP parameters, which has all this information over here. Now, all you have to do is to simply come over here and add in a sender name. Let's say, for example, Damian. And then all you have to do is to come over here and click on configure SMTP integration. And as you can see, this is currently loading a bit, and now it just finished. And you can actually take a look at this by

[28:28] going over to your Superbase dashboard from this link, and you will see that inside your project, the SMTP settings have been already pre-filled in to the ones that we had before Resend. And as you can see over here, we have the sender name that we just inputed and all this further information along with these settings being completely turned on, which means that if a user now comes over here and signs up for a completely free account, this confirmation email is going to get sent from your own domain address. And this is obviously infinitely scalable because you're not limited by the two email verifications per hour that Superbase gives you. Now,

[29:06] if you thought this section was a bit hard to understand, just play it back. I have time stamped it below, and I'm sure you will understand it the second time. So from now on, you should be done with the email verification part. But we're not done yet with the full authentication section of our app because we still have one more option to configure, which is the continue with Google. Because when I click on continue with Google right now, you will see that I get an error. And that's because we also need to configure the Google sign up in our app. Now, to do this, we have

[29:36] to come back over to Cloud Code and say something like, "Great. Now I also want to configure the Google sign up into my app so users can sign up with Google. Give me the exact steps that I need to follow to go ahead and do that, and if you can, go ahead and do them by yourself. And if I send over this prompt, you will see that Cloud Code is going to start working, and it's going to give me all the steps I need to follow to go ahead and perform that function. And as you can see, it is asking me this question. I will simply

[30:02] allow it. And as you can see, it gave us this road map with the exact steps that we need to take. And what's not great about this is that there doesn't exist an MCP in order for it to go ahead and perform the steps. So, we're going to have to go and perform them manually by ourselves. But don't worry because I

[30:19] will show you exactly how, step by step. And as you can see, the first thing that we have to do is to come over here to console.cloud.google, which will mess up this tab over here. And then what we need to do is to come all the way over here to the top and click on the open project manager, and then I come over here and click on new project. So, then what you have to do is to simply come over here and give a name to your new project. I will call it Financial Advisor, and then simply click on create. And what this is going to do

[30:44] is start the creation of this brand new project. And as you can see, it was successfully created. So, now what I want you to do is to come over here again to the top and simply select it from over here. So, now what you need to do after you have selected this is come all the way over here to the left of the page and click on the navigation menu, and then you need to come over here to APIs & Services, and then come over here to where it says Credentials and click on this option. And then, what you need to do is to come over here to the top

[31:11] and click on create credentials, and then come over here and select OAuth Client ID. Then simply come over here and click on Configure Consent Screen, which is going to bring you over here in the Branding section. Then click on Get Started, and then what you need to do is to come over here and give a name to

[31:27] your application, Advisor, for example. Then simply come over here, select your email as a support email, and click on next. Then for the audience, you can either select internal or external. Now, most of you are not going to be able to select internal because you're not in a Google Workspace account. So, simply select external and click on next. Then over here, simply type in your email address and click on next. Then simply over here, click on I agree and click on create. And what this is going to do is create you a brand new OAuth Overview section, where then all you have to do is to simply come over here and click on

[32:00] Create OAuth Client. Now, over here, what you need to do is to come over here and select Web Application since we're building a web application. Then you can give this a name, or you can leave this on the default name. And then over here in the Authorized JavaScript Origins, you need to make sure you come over here and you copy the localhost URL that we now have, and then you come over here, you click on Add URL, and you paste it in. And ideally, you also come over here and you input the URL that you're going

[32:28] to be using once the app is fully live. So, if your domain name is this, then simply come over here and put in this HTTP in front of it, so it also redirects to the URL once your app is live. But since I'm doing this just for demo purposes, I will simply come over here and I'm going to delete this for now. And then, in the Authorized Redirect URLs, you will need to come back over to Cloud Code, where you will be able to see this telling you to put this URL over here. So, simply copy it, and then you come back over here, click on Add URL, paste it in, and you also

[33:00] need to input your localhost over here. So, simply copy this, come over here, and paste it in. And now, you're basically fully done configuring this, and now all you have to do is come over here and click on create. And now, this is going to give you your client ID and your client secret key. So, what I want you to do is to come over here and make sure you actually copy all of them, and then paste them in a Google Doc because

[33:22] we're going to need them in a bit. Because now, we have to do part two of this process, which is to go over to Supabase dashboard from this link over here. Then we need to come over here, select our project. Then we need to come over here and select Authentication, and come down here to where it says Sign-in {slash} Providers, and click on this section. And over here, you will be able to see all the providers that we have enabled. And as you can see, we currently only have email enabled, but there are a lot more, including Google, which as you can see over here is

[33:56] disabled. So, to enable Google, simply click on this, and then you come over here and click on Enable Sign-in. And what you will need to do is come over here and input your client ID and your client secret key, which if you remember, we have over here in our Google Doc. So, I'll come over here, copy my client ID, paste it over here, and then I will come over here again, copy my client secret key, and I'm going to paste it over here. And then, we need to come back over to Cloud Code, in which we need to copy this URL that gives us over here. And we need to come

[34:24] over here in the Callback URL, make sure this URL matches the one Cloud Code gave us, which it does right now. So, now all we have to do is simply come over here and click on save. And boom, we just successfully enabled Google Sign-up as well in our application. But before we're able to log in, we need to do one more step, which is to come over here where it says URL Configuration. And then we need to come down here and click on Add URL, and simply add our localhost URL, and click on save. And now, the only other thing that we need to do is

[34:54] to come back over to Google Cloud Console, and come over here where it says Test Users, click on Add Users. And what you need to do over here is input your email address and click on save. And now, you will be able to come over here and click on Continue with Google and sign in to your Google account, but you will only be able to do this if you have deployed your app in a live URL and you're not in your localhost. So, if you try this in the localhost and it doesn't work, don't worry, it's because you haven't deployed your app yet, which I

[35:22] will show you how to do in just a bit. But for now, let's recap. We managed to build a successful user authentication section, in which we can sign up and sign in into our account. We have basically managed to build a fully functioning app, plus all the information that gets stored in this app gets successfully saved over in our backend in Supabase. So, now the only thing that I haven't shown you how to do is how you can successfully save different types of files in your backend Supabase. Because right now, we only have tables that save text and numbers, and they are not able to save PDF files

[35:57] and things like that. Now, to set this up, let's say we wanted to create a brand new section in our app, in which we would be able to upload PDFs with our expenses. Well, to create this section, we would have to go back over to Cloud Code and say something like, "Hey, so now what I want to do is create a brand new section in my app, in which I will be able to upload in PDF [clears throat] format my expenses. So, I want you to go ahead and build that in the front end UI, and I also want you to go ahead and set up a functioning backend for me, so

[36:25] I can save the PDF in my Supabase backend." Now that we explained that, all we have to do is simply come over here and send over this prompt. So, now Cloud Code can go ahead and set up that brand new feature for us in the front end interface of our app, and also set up our backend over in Supabase. And as you can see, it created these tasks that it needs to go ahead and complete. So, I will simply allow it permission every time it asks me to, and I will be back with you once it is fully done. And as you can see, Cloud Code just finished

[36:53] setting everything up for us, and it created our front end and also our backend Supabase, which means that we can now go ahead and test it out. So, if I actually come back over in my app and I refresh this, I will be able to see this brand new section that is called Receipts, which I can click on, and then you come over here and click on Upload a Receipt. Then I can simply come over here and select any invoice, for example, and boom, as you can see, this invoice successfully uploaded over here, and we do have the option to take a look

[37:19] at it, download it, and also delete it. And if we go back over in our Supabase project, we can see this brand new table that is called Receipts. If we actually click on this, we can see the invoice that we just uploaded along with all this other extra information. And over here in the storage path, we can see a link that basically includes the invoice that we just uploaded. And that means that we now have a fully functioning backend that can store basically that we need. And now that we have everything ready, it's time that I show you how you can deploy this app over to

[37:53] the cloud. And how we can do this is by coming back over here to Cloud Code and telling it that we want it to connect to the GitHub MCP and also to the Vercel MCP. And if you're wondering, GitHub is basically the place in which we're going to store all the code of our app, and Vercel is the place that is going to take that code and actually push it live to the web. That's why we need both GitHub and Vercel. Now, to set up this connection, what you need to do is to simply come over here and say something like, "Hey, what I want you to do is to

[38:21] go ahead and connect to the GitHub MCP and also to the Vercel MCP, so you can deploy my app over to the cloud. Now, what I want you to do is to go ahead, put the code snippet of both MCP servers in your config, and then just give me both link URLs for where I can create my access token that I will then take and give over to you to make this connection possible." And then simply come over here and send over this prompt. And if you're wondering what we basically told Cloud Code is that we wanted to go ahead and basically do all the configuration

[38:53] for us, and then just give us the link URLs, which we will be able to click on, create a token, and then give it over to it so it can fully make the connection. And as you can see, that's exactly what it did. It gave us this link for GitHub and this link for Vercel. So, the first thing that I will do is I will do this for GitHub. So, I'll simply click on this, then I will come over here and click on Generate Token, and I will generate a classic token. And once you do that, we will be brought over in this page. Now, what we need to do is to come

[39:19] over here and name this. Now, I'm going to call this Fin Advisor, and then we need to set an expiration date. Now, I will do custom, and I will do just one day because I want this to be deleted from the time I upload this video. And then what you need to do is simply come over here and select everything that you want this token to be able to do. Now, I will personally give it access to everything. And once you have done that, all you have to do is simply come here to click on generate token. What what is going to do is generate you your brand

[39:46] new token, which you will then be able to come over here and copy. And then you can come back to Cloud Code, say something like GitHub, and then paste in your access token. And then let's say Vercel, and then what we need to do is to open up the link for Vercel, which is going to bring us over in this page over here, where we need to come over here, give a name to our token. Let's call it Damian for this example. Then we need to select the scope. I'm going to select this project over here. And then for the expiration date I will do one day. And

[40:14] after we have filled everything in, all we have to do is to come over here and click on create. And this is going to generate us our Vercel token, which we can now come over here and copy. And then we can come back over to Cloud Code and paste it in over here. So now that we have given an access to both the GitHub and the Vercel access token, we can tell it something like, "Great, now I've given you access to both tokens. Go ahead and set up the MCP servers for me, and then push all the code over to GitHub, and then publish this app using

[40:40] Vercel in a live URL." And now all we have to do is simply come over here and send over this prompt. And as you can see, that's exactly what it is going to go ahead and do. It's going to set up the GitHub and Vercel MCP servers for us, and it is asking us permission to do this. So we'll simply give it permission. And as you can see, they successfully set this up. But in order for it to actually be able to publish this, we first need to restart our Cloud Code instance. So what I'm going to do is I'll simply open up a brand new Cloud

[41:07] Code over here. I'm going to say, "You have access to the code of my app. What I want you to do is push it over to GitHub using the GitHub MCP, and then creating a new repository over there, and then take that repository and publish it over to the web using the Vercel MCP that you have access to." And now I can simply come over here and send over this prompt. And now Cloud Code should be able to recognize both of the new MCP servers that we just added. And

[41:31] as you can see, it is able to do that. And now it is creating a GitHub repository, and it is pushing the code over there. And as you can see, the code was pushed successfully. And now it's time for Vercel, which is going to take the GitHub repo that we just created, and it's going to publish it over to the web. And while Cloud Code is deploying this project over to Vercel, I want to talk a little bit about my school community, which you can find as the top link in the description. Because if you join this community, you get dedicated one-to-one access to me. So you can ask

[42:01] me any question when it comes to AI, and I guarantee to solve your problem or give you all of your money back. Plus, if you join, you will get access to a lot more content, like my 30-day SaaS roadmap. It will show you how to build and deploy your own AI SaaS in just 30 days. Plus my how to build an AI and automation agency series. It will show you how to build your own AI and automation agency with access to a lot more content, like exclusive builds, the best strategies for acquiring customers for your SaaS, and a lot more things. So if you would be interested in that, make

[42:33] sure you click the top link in the description, and you come and check out my school community. And if we come back over to Cloud Code, we can see that it is fully finished. And over here we have the GitHub repo that it just created, which if we click on, we can see all the code of our app has gotten uploaded over here. And over here we have our live website URL, which if we actually click on, we can see that we can access our website from a live URL. And if I actually come over here and I sign in into my account, I will be able to

[43:01] normally access the app from a live website URL that anyone can access. So that was how you can build a full-stack web application with a functional backend. All the relevant links will be in the description below, along with a link to my school community. So if you would be interested, make sure you go ahead and you check it out. But also you need to think you're going to enjoy this video, in which I build a full-stack app using this Under Gravity and Gemini 3. So make sure you go and watch that next, and

[43:29] I'll see you over there.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt