Codex + Supabase + Vercel is the NEW Unstoppable Combo!

本站添加: 2026-06-03

[00:00:00]You can now build any full-stack app imaginable where users can create accounts and store all their personal information by using this brand new coding setup where we use Codex to write all the code of our app, Supabase to create a full and functioning and production-ready backend that no other tutorial shows you, and Vercel to deploy our app to the cloud. And I will show you all of that by building a full-stack clone of Expensify, which is a $70 expense tracking app. So by the end, you will have a full production-ready application without writing a single line of code. And now, close all of your other tabs and let's dive right into it.

[00:00:41]But before we start building our app, I want to first talk a little bit about why we're going to use this new coding combo of Codex, Supabase, and Vercel.

[00:00:50]And let's start with the front-end interface of our app, where we're going to use Codex to write all the code of our app for us since Codex is very good at generating code. And it's also one of the best coding agents at generating nice-looking UIs. Then, we have the backend of our app, which we're going to set up using Supabase. And specifically with Supabase, we're going to set up two things. First, we're going to set up our actual backend database, which is the part that most people think of when they're thinking of Supabase. And then, we will also set up user authentication section into our app, where users will be able to sign up for an account and then they will be able to access it.

[00:01:29]Plus, in this video, I will also show you how you can set up email verification, which basically means that every time somebody signs up for an account, a confirmation email gets sent over to that person, which he then has to click on, and only then his account will be activated, which is a practice that literally every single big application uses. And for some reason, no YouTube tutorial shows you how you need to set this up. Plus, I will also show you how to set up the change password section into your app, so it is actually linked with the same account the user used. And that is also feature that for some reason no YouTube tutorial goes into, but is a required feature for any fully deployed app. Since if you don't have this feature, a user might forget the password or maybe they want to change it and they will not be able to do so, frustrating the user and making him not want to use your app. And of course, I will also show you how you can use Superbase to set up your backend database tables, where you can basically store all the information that the user has input into your app, which can be things like text, numbers, usernames, and email addresses, along with different files, PDFs, images, and basically everything that you will need to store so your users can always access it. And once I show you how to set up this backend, then I will show you how you can connect it to the front end interface that we're going to create with Codex. And this is a very important step lot of builds fail, because this isn't just a one-way connection, it's actually a two-way connection. Meaning that when a user inputs some information in the front end, then that information should be sent over in the backend. But the backend should also be sending information over to the front end so the user can actually access the information that he inputted before. And then after we're done connecting these two, then we will simply deploy our app to the cloud, so everyone with a link can access it by using a service that is called Vercel.

[00:03:25]So now that you understand how this combo works, let's first hop into Codex and start building out the front end interface of our app. Now if you don't have Codex, simply go over to openai.com/codex, which I will also leave a link for in the description below, and then download it for your operating system. And once you do that, you're going to see an interface that looks like this. Now if you don't know what Codex is, it's basically an AI agent that is able to write code for you following any text instructions that you give it. And you can do that by simply typing them in this simple chat interface. And since in this video, we're going to try to build a better alternative to the popular expense tracking app that is called Expensify, that has a market cap of approximately 110 million dollars, we will simply need to come back over to Codex and describe exactly what we want to do. So, to clone this app, I typed this prompt over here, where I'm basically telling Codex that I want to clone the popular expense tracking app called Expensify, and that I want it to figure out what the main features of Expensify are, and I only want to recreate these core features because I don't want to clutter the app with unnecessary features that most users are not going to use every day.

[00:04:39]And then I just told it, "Do some research and reasoning and figure out exactly what these features would be."

[00:04:44]And let me also zoom into it a bit more so you guys can see even better. And then I just told it to also suggest me any new features that it might think would be useful for an app like this.

[00:04:54]Now, this is already a pretty good prompt, but I also want to give it some UI instructions. So, I'll come over here and say, "Hey, I want you to create me a nice-looking modern design similar to linear, and I want it to mainly be dark." And what I'm going to do is find a design that I like, which I did by using a website that's called Dribbble.

[00:05:14]Now, I'll simply come over here. I'm going to take a screenshot of this design, and then I will come back over to Codex, and I'm going to paste it in over here so it also has a nice visual reference for exactly what kind of style I'm going for. And the only thing that I'm going to change is I will come over here and I'm going to change the effort to high because I want this to reason quite a lot so I can get a better response. And then I'll simply send over this prompt. And now Codex is going to start working. It's going to analyze my prompt and then based on my instructions, create me a detailed implementation plan for exactly what features our app should have, where we can see it actively doing by first doing some research and figuring out which are the most important features that Expensify has. And boom, Codex has finished generating the plan for us, and we can see the core features that it suggests us over here. It is telling us that we need a dashboard, an expense capture feature where we can add expenses by receipt or any of these other ways, a small receipt review, an expense inbox, a report section, approvals, reimbursements, cards, policy rules section, which is super important when we're building apps like this, and an accounting sync. Now, this is a bit more of an advanced feature, and I do think we can leave it out in our MVP.

[00:06:30]Plus, it gives us the suggested extra features over here, like the daily approval digest for managers, the smart mention rules, and the finance cleanup queue for missing receipts, which I also really like. So, what I'm going to do is I will come in here and say, "Hey, I really like this plan. I want you to remove the account sync feature since I think it's a bit too advanced. And for the suggested extras, I want to do the finance cleanup queue for missing receipts. And what if we also went over and did something with AI? For example, a feature where we use AI to analyze our expenses and then have it make suggestions for how we can reach our goals, either of our business or our personal goals, based on our expenses."

[00:07:12]And now that I also gave it one idea that I got just now, I will simply come over here and click on submit. And as you can see, that's exactly what it did.

[00:07:20]It basically went over and updated the plan, and over here it's telling us the AI features that we can have, which I honestly really like. So, now what I'm going to do is I will simply come over here and say, "Yes, implement this plan." And now that Codex knows exactly what it needs to go over and do, it is going to start running in the background and start writing all the code of our app for us. And this process is probably the most important part of the full video, since this is literally the most important part of our app. Because Codex, first of all, needs to go over and build a nice-looking and easy-to-use interface, so users don't get overwhelmed by it and they are actually able to use it, since that is going to be the main selling point of our app and our differentiating factor from Expensify. Now, if you want all the prompts and the finished code of the app that we're going to build in this video, you will be able to find it inside my school community and specifically inside the assets tab in my classroom. So, if you want to get immediate access to that and get access to all the prompts and the code of the app, click the top link in the description and join my school community. And now, let's go back to the build. And currently, Codex is telling us that the UI is wired and styled, but what it is now going over and doing is it is doing some code checks to see if the functionality of our app works as expected, which is a super useful feature that Codex has because this basically removes a lot of the manual testing that we would have to do otherwise. And once it is done, which it currently seems like it is, it is going to spin up a preview server, so we can actually take a look at the app. And boom, Codex just finished creating the app for us. And as you can see, we have it over here in the preview section, but just so you guys can see it better, I will actually come over here and I'm going to open it up in my browser, so we can see everything that Codex went over and generated for us. And from a first glance, I can say that this UI does look super clean and it's literally exactly what I had envisioned. Now, as you can see right now, we're in the overview section. Underneath that, we have the expenses section, where we can track our expenses by either coming over here and scanning a specific receipt. And we also should have a section where we can input the information manually, which we have over here when we click on new expense.

[00:09:34]Then, we can come over here. Let's say, for example, we bought a MacBook and it was for $2.5 for the category of office. Then we can also input the owner over here if we want and the specific team and then we can click on add expense and this is going to add this expense over here in our expense inbox. Then underneath the expense section, we have the cleanup section where we can literally see any missing receipts that we have in queue.

[00:10:00]Then we can also see the AI spend codes over here where we can select the specific goal that we have and we can click on analyze and underneath that we have an approval section where we can see all the expenses that were approved.

[00:10:12]Then we have a card section over here where we can see all the transactions and if they are actually matching with our records. And then when I click on AI codes, it brings me over in this section over here which I don't like. This should be a completely separate section, but let's also take a look at our policy rules which are down here and then we have our investment section as well. So, there are some things that we need to change with this UI. Specifically, the fact that basically the full app is just in one page. So, what I want to do is basically break off these pages into having a separate overview section, a separate expenses section, a separate cleanup section, etc. etc. I also want to move the AI into a separate section and I also want to have a chat box over here where I can type exactly what I want my goals to be and not have to select from these pre-built options. And then I think our app will be in a very good state especially for an MVP which is exactly what they described over here to Codex. And I will simply come over here and send over this prompt so Codex can now start working and fix these issues for me. And as you can see, Codex just finished making the changes and over here it's telling us exactly what it changed, but to actually take a look at it, I'll simply come over here and I'm going to open this and then I will be able to take a look at the app. Well, as you can see, Codex successfully went over and broken this down into different categories. Since over here we just give the overview section, over here we just give the expenses section, over here we just give the clean up, approvals, cards, and also our AI codes where this time we can specifically tell it what our financial goals are so it can then give us correct suggestions. Let's say for example, I want to save $2,000 this month and I click on ask AI codes and then my AI codes is going to return me a response. Now obviously this is a mock response because we still haven't yet given an access to an API key which we're going to fix right now. Since all we have to do is to simply go over in platform.openai which I will also leave a link for in the description and then simply come over here, create a brand new key which we can then copy, come back over to Codex and say something like, "Hey, this is my OpenAI API key. I want you to wire it with a ask AI assistant." and then simply paste in your API key, click on enter so Codex can go over and make sure that every time you're asking your AI assistant something, it actually uses ChatGPT to give you a response which it just successfully went over and did. And now we go back over in our app and we come over here we input the same exact goal and click on ask AI codes, we're going to get an actual response from the AI which is the following. And that means that the AI codes section of our app works exactly as it should. And because I also went over and manually tested all these different sections, I found that they all work correctly as well. If when you're building the app, you find a section that doesn't work as it should, simply explain the issue to Codex and it is going to go over and fix it for you. And that means that we're basically done building the front end functionality of our app. But we currently have a way bigger problem because all the information that we have inside our app is mock data and that's because if somebody creates an expense or he requests a solve for a specific task and then he simply closes down or refreshes the page, then that expense that he added or the request that he did is going to be erased and that's because our app doesn't have a functioning back end where it can save this information.

[00:13:49]So that is the issue that we now need to address. And as we said before, to build this back end, we're going to use a third-party back end database that is called Superbase. Now there are two ways we can set it up. We will either have to manually come over here, create a new organization and set up all the database tables by ourselves or we can simply let Codex do all of that for us. And how we're going to be able to do that is by using the Superbase CLI. And if you're wondering what a CLI is, it's basically us connecting Superbase to our AI agent, which is Codex, and then since Codex has access to all the options in Superbase, we can basically tell Codex to go over and set up our back end for us. Now to make this connection, all you have to do is to simply come over here and say, "Hey, now I want to build a fully functioning back end database for my app and I want you to actually go over and set this up for me using the Superbase CLI." And then I will send over this prompt so Superbase can first of all give me the option to log in into my Superbase account and then you will see that it is also going to ask me to generate an API key. Now it is currently telling me that the Superbase CLI is already installed because I have installed it in my PC, but if it's not installed in your PC, it will just pop up a browser tab where it will ask you to log in with your Superbase account and then the CLI will be fully set up.

[00:15:10]And as you can see, Codex is now asking us for our Superbase access token, which we can create by going over to this link over here. And then all we have to do is to click on generate the token, then simply create this brand new token, copy it, come back over to Codex, paste it in over here, and say something like, "This is my access token." Now, go over and finish creating my Superbase backend.

[00:15:33]And then, simply send over this prompt so Codex can finish creating and pushing your backend over in Superbase. And if Codex ask you for the additional access, simply allow it to so you can actually go and use your terminal to set it up for you. And boom, Codex just finished setting up our Superbase backend for us.

[00:15:53]And if we actually come over here and we click on this link, this is going to take us over into our Superbase dashboard inside the project that Codex created for us. And if I actually navigate over here in the table editor section, then I will be able to see all the different tables that Codex created.

[00:16:09]And just as you guys can see how this works in practice, if I come back over in my app and I come over here and let's say I create a new expense that is called Damian for $2,000, and I click on add expense, this is going to create this expense for me. And if we go over in the expenses table in Superbase, you will see that the expense that we just created was indeed successfully saved over here. We have the name Damian, travel, Damian, and the exact amount that we filled in, which means that our backend database tables work exactly as they should. But we still need to set up one more thing in our backend, which is the sign up/login section. So, users first need to have signed up to the app, and then they will be able to use it.

[00:16:50]Now, to make this happen, all we have to do is to simply come back over to Codex and say something like, "Hey great, now what I want you to do is to create a sign up/login section so users have to first sign up and then they should be able to use the app. Go over and set this up again using the Superbase CLI."

[00:17:08]And now, all we have to do is to simply send over this prompt so Codex can go and set up the sign up section for us.

[00:17:14]And as you can see, my Codex usage also finished and I had to buy some credits.

[00:17:19]But, I do want to point one thing out, and that is that Codex gives you way more usage than an alternative like Cloud Code or Antigravity, since the models that they're using are actually way cheaper, but still just as powerful.

[00:17:32]A lot of people in this space really tend to default on using Cloud Code.

[00:17:36]Well, there are actually very good alternatives like Codex that do, in fact, give you significantly more usage, even if my usage currently finished, but that's all defined because I can still the run Codex with some extra credits.

[00:17:50]Plus, what I really like about Codex is that it's constantly testing out the app for us because, as you can see, I just told it to go over and set up the sign-up section, but it also performed a test, and it found an error in the existing code of the app, as you can see over here, and now it is actively going over and fixing it, and then it's going to set up the sign-up section for us.

[00:18:10]And, as you can see, Codex went over and successfully set this up for us. And, now what it's going to do is open up the browser agent that it has built in inside its platform, and it's going to test it out to see if it actually works, which it just finished doing the testing, and as you can see over here, it's basically telling us exactly what it went over and implemented, which is the sign-up feature for our app. And, if we actually come over here in our localhost, then we are first prompted to either log in or sign up with a completely free account. And, now if I click on create account, this is going to create my account and successfully log me in into the app. Plus, if I come back over in my Supabase dashboard and I navigate over in the authentication section, I will be able to see the exact email address that I signed up with along with my display name, when my account was created at, and some more information. And, that means that we also successfully managed to create the sign-up section of our app. But, we still have a problem, and that's why I brought you over here in the slides because a fully functioning user authentication section doesn't just have the sign up and sign in function, it also has the email verification section which is needed for any serious app, which is basically a message that you get in your email to first confirm your account and then only once you do that, you will be able to access that app. And basically every application does this because you obviously don't want a person to wrongfully type in their email address and by adding this step, it basically removes that possibility since if they typed in their email wrong, then they will not see a confirmation email and they will need to go over and input it again. So that is the first thing that we also need to add in, but we also need to add one more thing which is a feature like change password which is going to be specifically linked to each user's account because if currently someone was to change or forgot the password, they have no way to manage it and they're basically stuck with the initial password that they put in. Now this is also a required feature for every app since if it doesn't have that feature, then its users can get locked away from their account because they just forgot the password that they used before. So now it's time that we go and build both of these two features. And how we're going to set both of these two up is by using a third party service that is called Recent which will allow us to connect our own custom domain which is basically the email address which both the confirmation email and also the change password email are going to be sent from which we will also connect over to Superbase so it syncs in with information that we have in our back-end database. Now I know this might sound complicated, but don't worry because it's actually pretty simple. Now the first step that you need to follow is to go over to recent.com which I will also leave a link for in the description below and then simply come over here and sign up for a completely free account.

[00:21:03]And once you do that, you will be brought over in this interface over here. Now, what you need to do is to navigate over in the domain section and simply click over there. Because this is the section in which you will need to add your own unique custom domain, so then Resend can send these emails on your behalf. Now, this does mean that you will need to buy a domain, which costs around $10 per year, but this is honestly a step that you can't really skip if you want to build and ship a full production-ready app. So, make sure you buy one domain. For me, it is this domain over here. And let me show you how you can add it from scratch. Now, the first thing that you have to do is to simply come over here and click on add domain, which is going to pop up this section over here, where you simply need to type in the domain that you have just purchased. Now, if you're wondering, you can purchase this domain from within Resend, and if you want, you can purchase it from a third-party platform like Namecheap, Google, GoDaddy, or any other domain provider.

[00:22:01]Now, I have personally purchased this domain from Namecheap, but that doesn't really matter. And then, for the region, what I suggest you to do is to simply come over here and select the region that is closest to your target avatar, which I will assume that most of you is going to be North America. And then, simply come over here and click on add domain. And now, this is going to bring you over in this page over here, where what you will need to do is fill in your DNS records in your domain provider, so the domain can actually transfer over to Resend. Now, I know this looks very technical and complicated, but Resend actually has a video over here that shows you exactly how you can do that.

[00:22:35]And if you bought the domain from a service like Namecheap, as I have done, the Resend just gives you this button, which says simply go to Namecheap, where you can then come over here, log in with your account, and easily transfer it.

[00:22:48]And then, this is going to bring you over in your DNS records, where all you need to do is to simply take the information that Resend gives you and change it with the information that you currently have over here, which is exactly what I just did. Again, Resend shows you how to do this step-by-step in this video. So, just make sure you follow it and you will be able to do it in no time. And then, all you will need to do is simply come over here and click on I've already added the records. And what this is going to do is start the checking DNS records process, which takes around 1 or 2 minutes. And once it is fully finished, you will be able to see your domain being available over here. And boom, the domain verification task has finished, and we can see over here that our domain has been successfully verified. And now, the only other thing that we need to do is to simply navigate over here in the settings tab, and then navigate over here to integrations, because over here we will be able to see two integrations.

[00:23:44]First, we have Superbase, and then we have Resend. But since we want to connect Resend to our backend in Superbase, all we have to do is simply come over here and click on connect to Superbase, which is going to pop up this tab over here, where all we need to do is simply authorize Resend to access our Superbase API. And then, we will be brought over in this interface, where we simply need to come over here and select the specific Superbase project that we want. Our project CodeX created for us is this one. So, I'll simply create it, click on select project, simply select the domain that we just connected, and click on link domain. Then, this also verified the DNS records. And now, all we need to do is to add in an API. So, simply click on add API, and Resend will automatically add this for you. And then, to configure SMTP parameters, you can simply type in the name of your app.

[00:24:33]Now, since our app is called Spendline, I'm going to come over here. I'm going to type in Spendline, because that is basically the name that people going to see that this email got sent from. And then, simply click on configure SMTP parameters, and boom, right now we are ready to send. But still, we haven't yet set up neither the confirmation email and neither the forgot last change password function. And if we were to manually do this, this would take us a lot of time, since we would need to manually write the copy, set everything up in Resend, which is a time-consuming process. But, thankfully, Resend also has their own MCP server. And if you're wondering what an MCP is, it's basically a way for a service like Resend to be able to easily communicate with an AI agent like Codex, so then the agent can go and set up different things in that service. And that's exactly what we're going to do with Resend. Now, to set up this MCP server, we need to come back over to Codex and tell it something like, "Hey, what I now want to do is to connect to the Resend MCP server, which I'm going to use to send email confirmations for when the user signs up into my app. And I'm also going to use it for the function of my app, so users can create a new password if they actually forgot it." Now, just to give you some context, I have already connected my domain over in Resend and have set up the Supabase integration. So, what I want you to do is to simply connect over to the Resend MCP server with the end goal of setting up both of these two functions for me. And just to make Codex's life a bit easier, I'm also going to give it access to the Resend MCP docs, which I will also leave a link for in the description below, which basically have full detailed instructions for exactly how you can use the Resend MCP. And now, all I'm going to do is simply send over this prompt.

[00:26:20]And as you can see, Codex read the docs and it is telling us what we need to do, which is to simply create a Resend API key. Let's simply click on this link.

[00:26:28]Then, let's come over here and create a brand new API key, which I'm going to call Codex, and I will give it full permission. And then I'll simply click on add, and boom, this is a brand new API key. So, make sure you copy this, come back over to Codex, paste it in, and say something like, "This is my Resend API key. Go over and wire it everything up for me." And now I will simply send this over, so Codex can now take this API key, successfully connect to recent using the MCP connection, and then it will be able to set up the email confirmation and also the forgot password section as well. Now, this is asking us to install OpenAI developers, which I'm going to do by clicking on install because this is a tool that is optimized to connect to MCP servers, and then I will click on continue. And boom, Codex just finished setting everything up for us. And as you can see, it is telling us that now Recent can send the confirmation email, and we also have the forgot password section. So, let's actually go over in our app and test it out to see if it actually works. So, as you can see, I have filled in my information, and I will simply come over here and click create account. And this is telling me that a confirmation email was sent to my email address, which is this email over here, where I can now come over here, click on confirm email, and this is going to confirm my email, and I will be able to log in into my account. But now, let's say maybe we actually forgot the password and we want to change it. Well, all we have to do is simply come over here and click on forgot password, and then simply click on send a reset email. And this is going to send a brand new email, which is this email over here, where we can come over here, click on a reset password, and actually reset the password of our app.

[00:28:08]And the only other thing that you will have to do once you actually push this up to live production is to go over here in the URL configuration section and simply add in redirect URLs for auth confirmation and also password reset, similar to this, that is going to have your original domain in the start and not this fake localhost domain over here. And just so you can see this in practice, you will basically take the other direct URL, come over here, paste it in. Again, this is going to have your actual domain, so whatever your domain is, and then you will simply click on save URL. Obviously, this is not a valid URL, that's why it doesn't get saved, but you get the point. You will save the first URL for your old confirm, and then you will add one more for the reset password by simply pasting it over here.

[00:28:56]Again, you change the initial part of the URL. You click on save URL, and then once your app is in live production and Superbase has these direct URLs, everything in the back end of your app will be working correctly. And now is the time for the final thing that we need to do, which is to actually deploy this app to the cloud so everyone with a URL can actually use it. Now, to do this, we're going to use a service that is called Vercel, which basically allows you to very easily deploy the app that you have built over in a live website URL, so then everyone with a URL can access it. But again, we can use the Vercel CLI this time to actually deploy our app through Codex and not by us going over in Vercel and manually doing it. So, to make this happen, you simply have to come over here and say something like, "Hey, now what I want to do is to deploy this app using the Vercel CLI.

[00:29:46]So, go over and do that for me." And then simply click on enter. And as you can see, Codex has already started working on this task, but it is first seeing if our code is 100% compatible with Vercel, and if something is not, it will simply go over and fix it for us.

[00:30:01]And as you can see, it made some very small changes, and Codex just finished doing that check, and now it is going to go, take all the code of our app, and use the Vercel CLI, which again, if you haven't yet connected to, will just pop up an interface your browser where all you would have to do is to log in into the account, and then Codex will be fully ready to deploy this app for you.

[00:30:21]And now Vercel popped up this tab over here, where it is asking me to allow it access to my account. So, I'll simply do that, and boom, as you can see, authorization was successful, which means that now Codex can fully deploy this app using Vercel for us. And boom, Codex just finished deploying our app to Vercel, and as you can see, I have already opened it up over here, and I can access it from a live website URL, which means that we successfully managed to build and deploy this full-stack app with a full and functioning backend.

[00:30:50]But, that is just the first step when it comes to making money with apps, because the second and hardest step is bringing users into your app and turning them into a paid customer. And that's exactly what I show you how to do inside my school community, the link to which you can find in the description below, where I have helped multiple different people like Kostas build and launch their own AI apps in less than 30 days, and even hit $1,000 in monthly recurring revenue 23 days after their launch. So, if you want to get similar results, plus get one-to-one guidance from me, make sure you click the top link in my description and you come and join my school community, and I will be waiting to personally help you immediately when you join. But, I also get you things you're going to enjoy this video, in which I build a full-stack app, but this time using Cloud Code and Supabase. So, make sure you go and watch that next, and I will see you over there.