WEBVTT 00:00:00.000 --> 00:00:03.567 In this video, we're going to do a comprehensive Codex tutorial. 00:00:03.567 --> 00:00:10.693 I want to show you not just what Codex is, but how to actually use it as a serious app building agent. 00:00:10.693 --> 00:00:28.277 We'll start with the foundations, how Codex works, how the Mac app and the CLI fit together, how to choose models and thinking modes, how threads and contexts work, and how to use tools like the browser, terminal, files, and external systems. 00:00:28.277 --> 00:00:31.885 Then, we'll turn that foundation into a real workflow. 00:00:31.885 --> 00:00:42.020 We'll use Codex to plan, architect, design, implement, debug, and ultimately deploy a production-ready app from scratch. 00:00:42.020 --> 00:00:53.676 By the end, you should understand the full Codex workflow well enough to take your app idea, break it into manageable steps, and use Codex to build it with much more confidence. 00:00:53.676 --> 00:00:59.407 Now, when you Google for Codex, you're going to land on this website here. 00:00:59.407 --> 00:01:04.331 And here, you can learn more about Codex, and you can also download the app. 00:01:04.331 --> 00:01:07.205 Now, as you can see, it says here download for macOS. 00:01:07.205 --> 00:01:09.548 That is because I have macOS. 00:01:09.548 --> 00:01:14.920 If you're running Windows, you're going to have a button that says download for Windows. 00:01:14.920 --> 00:01:17.442 So, it does support macOS and Windows. 00:01:17.442 --> 00:01:29.190 And when you scroll down, you can see the main screenshot that kind of gives you a general overview, general idea of what this app looks like, okay? 00:01:29.200 --> 00:01:32.393 And you can kind of scroll down, you can learn more about it. 00:01:32.393 --> 00:01:37.127 Or we can jump into my Codex instance here, and I can give you a quick overview. 00:01:37.127 --> 00:01:44.114 So, on the left-hand side, we have things like starting a new chat, search, various plugins, automations. 00:01:44.114 --> 00:01:49.310 Just below that, we have our main organization, right? 00:01:49.320 --> 00:01:52.384 And this is where you can organize your projects, okay? 00:01:52.384 --> 00:02:06.368 And the idea here is that anytime you have a project, you want to click here, and you want to either start it from scratch or you use an existing folder because these are not organized just logically. 00:02:06.368 --> 00:02:11.264 They're actually linked to folders on your disk, okay? 00:02:11.264 --> 00:02:16.340 And so, everything that you see here represents actual folders. 00:02:16.340 --> 00:02:19.993 Now, inside of these folders, we have some items here. 00:02:19.993 --> 00:02:24.010 Now, these are not files, and they do not represent anything on the disk. 00:02:24.010 --> 00:02:26.398 These are actually conversations, right? 00:02:26.398 --> 00:02:32.579 And you can think of them as, you know, similar to what you might have in Chat GPT, okay? 00:02:32.579 --> 00:02:42.878 So, if you're working on this project, you can create a new conversation simply by, you know, clicking here or pressing command and and telling it what you want to happen. 00:02:42.878 --> 00:02:48.101 Now, in the center pane over here, this is where you're going to be communicating, right? 00:02:48.101 --> 00:02:52.583 So, if we scroll back up, this was my initial prompt here. 00:02:52.583 --> 00:02:59.251 I want to build a very, very simple web app that arranges items as a Trello Kanban board style, etc. 00:02:59.251 --> 00:03:01.951 And then I have this interaction here, right? 00:03:01.951 --> 00:03:06.628 It does something, I ask it to do something else, etc., etc. 00:03:06.628 --> 00:03:11.419 Now, just below that is where you're going to be entering your prompt, okay? 00:03:11.419 --> 00:03:20.061 So, you're going to be selecting the model, uh the different reasoning, and we're going to be covering all that, but this is the main text box for the model. 00:03:20.061 --> 00:03:27.252 Now, on the right-hand side, there's a lot of interesting things happening here that a lot of people are not really aware of, okay? 00:03:27.252 --> 00:03:30.313 And a lot of people are not really like using it. 00:03:30.313 --> 00:03:35.115 And And you need to understand to leverage this whole app experience, right? 00:03:35.115 --> 00:03:43.909 So, right here, we have this little card that displays a little bit of information about this specific conversation, right? 00:03:43.909 --> 00:03:47.885 So, we have branch details, we have some artifacts, right? 00:03:47.885 --> 00:03:52.916 And these are the data that happened as a result of this convo, right? 00:03:52.916 --> 00:03:56.914 And so, if I go to another conversation, we might have different artifacts, right? 00:03:56.914 --> 00:04:03.524 And you can think of an artifact as a side effect of, you know, of your conversation, okay? 00:04:03.524 --> 00:04:06.817 So, if you've created a readme file, you're going to see it here. 00:04:06.817 --> 00:04:09.310 If you did a web search, you're going to see it here. 00:04:09.320 --> 00:04:15.293 Now, one of the more interesting things happens when you click this button and open the right-hand pane. 00:04:15.293 --> 00:04:18.177 And here, you can see all kinds of interesting things, right? 00:04:18.177 --> 00:04:23.922 So, for instance, if I click this button, I can have a side chat, or I can have a browser. 00:04:23.922 --> 00:04:41.430 Now, the browser feature is actually very, very powerful, because I can simply open this up here, and as I'm developing this app, it's going to give me a URL that I can open here in this browser, and that will allow me quick iteration, because I'll be able to 00:04:41.440 --> 00:04:45.796 see exactly how the app looks as I'm developing it. 00:04:45.796 --> 00:04:53.870 And we're going to be doing all of that in more detail a little bit later in this tutorial. 00:04:53.880 --> 00:04:56.235 First, let's talk about Codex. 00:04:56.235 --> 00:05:06.799 The easiest way to understand Codex is that it starts from the same basic idea as ChatGPT, but it is connected to your actual working environment. 00:05:06.799 --> 00:05:19.454 So, instead of only answering questions, it can inspect files, edit code, run commands, use the browser, test the app, and help move a project forward. 00:05:19.454 --> 00:05:21.741 The difference matters a lot. 00:05:21.741 --> 00:05:28.477 ChatGPT is great when I want an explanation, a rewrite, a brainstorm, or a quick answer. 00:05:28.477 --> 00:05:33.968 Codex is what I use when I want work to happen inside a real project. 00:05:33.968 --> 00:05:41.832 It can do many of the same reasoning tasks as ChatGPT, but it can also act on the project directly. 00:05:41.832 --> 00:05:50.441 That is why I keep ChatGPT mostly for pure informational questions, and I keep Coda for work threads. 00:05:50.441 --> 00:05:54.830 So, my project context stays focused and clean. 00:05:54.840 --> 00:05:57.157 There are two main ways to use Coda. 00:05:57.157 --> 00:06:10.529 The first is through the CLI, which is best when you already live in the terminal and want to run quick repo tasks, scripts, lightweight edits, or developer style iterations. 00:06:10.529 --> 00:06:16.098 The second is the Mac app, which is usually better for visual app building work. 00:06:16.098 --> 00:06:32.478 If I want to see the browser preview, inspect file changes, manage a longer project, approve permissions, review artifacts, or teach the workflow on screen, the Mac app gives me a much clearer workspace. 00:06:32.478 --> 00:06:38.305 And that is why I highly prefer to use the Mac app, and that is what I recommend you use as well. 00:06:38.305 --> 00:06:59.018 Inside the Mac app, the main pieces to understand are the project or the workspace, the thread area, the model selector, the thinking mode selector, file changes, terminal output, browser preview, artifacts, permissions, and the review flow. 00:06:59.018 --> 00:07:08.881 Once those pieces make sense, Coda stops feeling like a chat box and starts feeling like an app building environment. 00:07:08.881 --> 00:07:13.550 The project pane is where you open or switch between projects. 00:07:13.560 --> 00:07:18.750 The thread area is where the conversation and task history lives. 00:07:18.760 --> 00:07:25.123 The file change view shows what Coda wants to edit before those changes are accepted. 00:07:25.123 --> 00:07:31.175 The terminal output shows commands, builds, errors, and verification steps. 00:07:31.175 --> 00:07:36.310 The browser preview is where you can inspect the running app is where you can inspect the running app visually. 00:07:36.320 --> 00:07:44.710 Together, these pieces make Coda feel less like a chat bot and more like a working development environment. 00:07:44.720 --> 00:07:47.150 Permission flow is also important. 00:07:47.160 --> 00:07:52.854 Cortex should never feel like a black box that silently changes everything. 00:07:52.854 --> 00:08:08.990 As soon as it finishes running commands, editing files, or taking an action that matters, you can always inspect what it's doing, approve the right actions, and keep control over the project. 00:08:09.000 --> 00:08:13.710 The next thing to understand is that Cortex is not just one fixed experience. 00:08:13.720 --> 00:08:20.006 There are a few workflow decisions you make each time you use it, and the first one is which model to use. 00:08:20.006 --> 00:08:27.790 In practice, I usually default to the latest strongest model unless I have a clear reason not to. 00:08:27.800 --> 00:08:32.477 Because most app building tasks benefit from better reasoning. 00:08:32.477 --> 00:08:38.270 Here's a rough guide to picking the correct model for your specific task. 00:08:38.270 --> 00:08:51.590 So, for architecture, back-end design, multi-step implementation, difficult debugging, or final review passes, I want a stronger model, such as GPT-5.5. 00:08:51.600 --> 00:09:03.288 For small copy tweaks, simple UI polish, short refactors, or low-risk tasks, a faster, a lighter model can be a better tool. 00:09:03.288 --> 00:09:11.692 And here's where you can use an older model, or a mini, or a nano version of the current latest model. 00:09:11.692 --> 00:09:24.110 For example, if I'm asking Cortex to rename a button, tighten some copy, or adjust spacing on one component, I do not need to overthink the model choice. 00:09:24.120 --> 00:09:42.070 But if I'm asking Cortex to design the Convex schema, think through permissions, restructure several files, or debug a problem that spans front-end and back-end code, That is where I want the strongest model That is where I want the strongest model available. 00:09:42.080 --> 00:09:53.710 The more expensive the mistake, the more I want to slow down and use the better reasoning setup. 00:09:53.720 --> 00:09:56.812 The next important decision is the reasoning mode. 00:09:56.812 --> 00:10:05.404 This controls how much time and effort Cortex spends thinking through the task before and during the work. 00:10:05.404 --> 00:10:12.842 This decision is a little more nuanced than model choice because every reasoning mode has a place. 00:10:12.842 --> 00:10:19.435 Low thinking is useful for quick, obvious tasks where the risk is small. 00:10:19.435 --> 00:10:31.172 Medium is good for normal app building work, first pass UI normal app building work, first pass UI implementation, straightforward debugging, and routine feature work. 00:10:31.172 --> 00:10:35.150 High is what I use when the decision is more expensive. 00:10:35.160 --> 00:10:47.482 Architecture, convex data model design, authentication, permissions, hard bugs, multi-file changes, and the final review. 00:10:47.482 --> 00:11:01.190 My default for serious app building work is usually a strong model with high thinking because that gives me the best balance between speed and the best balance between speed and quality. 00:11:01.200 --> 00:11:03.750 But, the practical lesson is simple. 00:11:03.760 --> 00:11:08.578 Match the model and thinking mode to the risk of the decision. 00:11:08.578 --> 00:11:13.045 If the task is small and reversible, keep it fast. 00:11:13.045 --> 00:11:19.165 If the task affects the structure of the app, slow the model down and let it reason. 00:11:19.165 --> 00:11:30.429 Now, as you're working on your project and you're in this conversation project and you're in this conversation view, you can enter your prompts here, and just below, you can select various things. 00:11:30.429 --> 00:11:34.134 Now, first of all, you have your contacts window here, right? 00:11:34.134 --> 00:11:37.341 Here you can see how much of the context you have used. 00:11:37.341 --> 00:11:43.191 Now, Korax says that it automatically compacts its contacts. 00:11:43.191 --> 00:11:48.416 And yeah, you can do that, but over time, it's not going to be as effective. 00:11:48.416 --> 00:11:57.620 And so, you always want to be starting new conversations anytime you're working on something new that requires a context switch, okay? 00:11:57.620 --> 00:12:01.835 Next, we have here the all-important model selector, okay? 00:12:01.835 --> 00:12:11.423 So, if I click over here, I have it automatically set to GPT-5.5, which is the newest model as of the time of recording this video, okay? 00:12:11.423 --> 00:12:19.895 You can also switch it to some of the older models as well, but I see no reason to do that because this model has been very, very capable. 00:12:19.895 --> 00:12:24.981 We also have things like speed, standard versus fast. 00:12:24.981 --> 00:12:31.402 Fast is 1 and 1/2 times faster, but it also uses more of your usage, okay? 00:12:31.402 --> 00:12:35.828 So, depending on which plan you're at, you may want to stay on standard. 00:12:35.828 --> 00:12:40.440 I mostly keep it on standard unless, you know, I'm in a hurry and I want to switch it on fast. 00:12:40.440 --> 00:12:42.751 Next, we have intelligence, right? 00:12:42.751 --> 00:12:44.697 Now, this is very, very important. 00:12:44.697 --> 00:12:47.576 By default, I keep this on high. 00:12:47.576 --> 00:13:02.050 I found that to be a good balance between speed and quality because as you go towards lower intelligence, the model is going to be faster, but you're going to be giving up quality, right? 00:13:02.050 --> 00:13:04.400 You're going to be giving up intelligence. 00:13:04.400 --> 00:13:12.011 On the other hand, as you go into higher and higher intelligence, the model is going to be slower, but it's going to be thinking more, right? 00:13:12.011 --> 00:13:13.947 It's kind of like a person, right? 00:13:13.947 --> 00:13:21.811 You can ask a person a question, and that person may think more, think through something longer, right? 00:13:21.811 --> 00:13:27.834 You know how people say, "Let me sleep or let me sleep on it." Or let me think it over, right? 00:13:27.834 --> 00:13:39.110 The longer you think, the more the more you figure something out, and the the the the the higher chance you're going to arrive at the correct answer, at least for you. 00:13:39.120 --> 00:13:48.670 You're going to think through all the possibilities, whereas the first answer might be wrong, and usually is because you haven't thought everything through. 00:13:48.680 --> 00:13:51.097 And it's the exact same thing here, right? 00:13:51.097 --> 00:13:58.389 If you set something too low, and you're working through something fairly complex, well, the model is not going to think it through. 00:13:58.389 --> 00:14:06.750 It's going to give you an answer that well, it's an answer, but it might not be the ideal answer, okay? 00:14:06.760 --> 00:14:16.703 On the other hand, with extra high, you know, the model is going to think longer, but it may not be necessary in a lot of situations. 00:14:16.703 --> 00:14:29.698 And so, I typically keep it on high, sometimes medium, very rarely low, and also very rarely extra high, unless I'm working through something that the model has trouble with high. 00:14:29.698 --> 00:14:35.474 You know, the situations where extra high really proven itself over high, it hasn't been that many. 00:14:35.474 --> 00:14:40.279 And so, for the most part, I keep it on high, sometimes I also switch it back to medium. 00:14:40.279 --> 00:14:54.230 And as you start to use Codex more and more, and as you begin building more and more apps with it, and you'll be able to better judge which thinking mode to better judge which thinking mode to select. 00:14:54.240 --> 00:15:03.041 Now, before we go deeper into the workflow, I want to quickly talk about pricing and plans because this is one of the first practical questions people have with Codex. 00:15:03.041 --> 00:15:07.950 For most people learning Codex, the important question is not what is the most expensive plan. 00:15:07.960 --> 00:15:12.119 The question is, what do I actually need for the kind of work I'm doing? 00:15:12.119 --> 00:15:20.638 If you're learning, testing prompts, and building smaller projects, you can usually start with the normal Chat GPT plan access available to you. 00:15:20.638 --> 00:15:32.251 If you're doing heavier app builds, longer agent runs, team workflows, or professional coding work, then plan limits, credits, and business options start to matter more. 00:15:32.251 --> 00:15:36.205 Now, here I am on OpenAI's Codex pricing page. 00:15:36.205 --> 00:15:43.223 And if you scroll down, you can see the prices that are available at the time of filming this video, right? 00:15:43.223 --> 00:15:49.359 So, we have the free plan, and this allows you to explore Codex capabilities on quick coding tasks. 00:15:49.359 --> 00:15:55.288 We have the gold plan, which is $8 a month, and you can use Codex for lightweight coding tasks. 00:15:55.288 --> 00:16:05.590 We have the plus plan, which is fairly popular, 20 bucks a month, and here you can finally start to actually do something meaningful, right? 00:16:05.600 --> 00:16:09.537 Something like, you know, building a part of an app, or building some scripts. 00:16:09.537 --> 00:16:14.670 And they say this can power a few focused coding sessions each week. 00:16:14.680 --> 00:16:16.545 Next, we have the pro plan, right? 00:16:16.545 --> 00:16:24.889 And so, here you can choose whether you want the 5x or the 20x higher rate limits than plus, and this is $100 a month. 00:16:24.889 --> 00:16:28.190 I'm actually using the pro plan 20x. 00:16:28.190 --> 00:16:37.443 Okay, so I'm paying 200 bucks a month, and at this level, I am at a point where I pretty much never reach any limits. 00:16:37.443 --> 00:16:46.492 And that means I can build, you know, multiple projects at once, and use Codex for all kinds of tasks, and still not reach limits. 00:16:46.492 --> 00:16:54.145 And so, during the time where I'm when I'm, you know, building heavy apps and and doing some serious work, I might get close, right? 00:16:54.145 --> 00:16:56.312 But I never really get to the limit. 00:16:56.312 --> 00:16:59.470 You need to decide which plan is right for you. 00:16:59.480 --> 00:17:03.280 Now, from what I understand, plus plan is very, very popular. 00:17:03.280 --> 00:17:15.790 And so, what I would do is I would obviously, you know, try the free plan, try to see how that goes, and, you know, obviously, you know, if you do anything serious or remotely serious, you're probably, you know, you're going to run out run out of 00:17:15.800 --> 00:17:16.331 this plan. 00:17:16.331 --> 00:17:19.521 And so, the next logical step is to try out the plus plan. 00:17:19.521 --> 00:17:31.390 The plus plan is where a lot of people start and it gives you a reference point as to, you know, the amount of work that you're doing, how much can this plan actually cover the amount of work you're doing. 00:17:31.400 --> 00:17:39.201 Because the fact of the matter is there people that work on very heavy projects and, you know, there they work on big repos, right? 00:17:39.201 --> 00:17:40.779 Lots and lots of code base. 00:17:40.779 --> 00:17:43.717 They run out of their plan very, very quickly. 00:17:43.717 --> 00:17:48.025 But if you're working on a smaller projects, you're not using the fast mode. 00:17:48.025 --> 00:17:57.830 So for instance, you're not coming here and you're changing you're not changing speed because I'm using the fast mode from time to time and that, you know, increases the usage as well. 00:17:57.840 --> 00:18:01.619 So if you're on standard and you're using maybe medium often, right? 00:18:01.619 --> 00:18:09.788 You're not really using high that much and you're almost never using extra high, you can get a lot of mileage out of this plus plan. 00:18:09.788 --> 00:18:18.848 And when this plus plan starts to run out, you know, you're you're starting to notice some tight limits, you may want to switch to a higher plan, okay? 00:18:18.848 --> 00:18:20.921 Such as the pro 5x or 20x. 00:18:20.921 --> 00:18:26.642 Now you can also ask Codex to help you choose the right Codex plan for your specific use case. 00:18:26.642 --> 00:18:32.990 For instance, you can use this prompt here, help me choose the right Codex plan for my use case, okay? 00:18:33.000 --> 00:18:37.176 Use only current official OpenAI pricing and help center information. 00:18:37.176 --> 00:18:40.065 And I'm going to go ahead and run this and see what it says. 00:18:40.065 --> 00:18:42.395 All right, then this is what we got back. 00:18:42.395 --> 00:18:46.639 As of this day, ChatGPT plan is that include Codex, okay? 00:18:46.639 --> 00:18:48.310 So this is the practical read. 00:18:48.320 --> 00:18:51.279 Free, try Codex on quick tasks. 00:18:51.279 --> 00:18:53.387 Go lightweight coding tasks. 00:18:53.387 --> 00:18:56.670 Plus a few focus coding sessions each week, okay? 00:18:56.680 --> 00:19:00.283 And this is exactly what I just told you from that official page. 00:19:00.283 --> 00:19:04.107 And so if you scroll down, you can see how Codex usage and credits work. 00:19:04.107 --> 00:19:05.826 You can learn you can read this. 00:19:05.826 --> 00:19:08.209 Best fit for your use case, okay? 00:19:08.209 --> 00:19:13.971 For learning Codex and building small to medium apps, ChatGPT plus is the sensible default. 00:19:13.971 --> 00:19:20.760 If your current plan is Plus, I would not upgrade until you actually hit Codex limits often enough that the friction matters. 00:19:20.760 --> 00:19:26.299 Okay, when heavier or business plans make sense, what to verify live before deciding? 00:19:26.299 --> 00:19:33.149 And so, a sensible thing to do would be to try Codex Plus and see if that's enough for your specific use case. 00:19:33.149 --> 00:19:38.242 If you're not a heavy Codex user, if you just want to experiment, it should be more than enough. 00:19:38.242 --> 00:19:45.470 And then you can decide whether you want to upgrade to the higher tier plans. 00:19:45.480 --> 00:19:53.557 Now, before we move into the app building workflow, I want to take a moment to talk about some of the things Codex does that can greatly increase your productivity. 00:19:53.557 --> 00:19:57.786 These are features I use all the time across different projects. 00:19:57.786 --> 00:20:05.079 Skills, plugins, automations, and MCP along with its tools and connectors. 00:20:05.079 --> 00:20:24.270 The best way to think about all that is skills tell Codex how to do a workflow, plugins package capabilities, automations let work happen later, and MCP tools and connectors give Codex controlled access to outside systems. 00:20:24.280 --> 00:20:31.296 Once those pieces make sense, Codex feels less like a code editor and more like a project agent. 00:20:31.296 --> 00:20:36.819 First, let's talk about one of my favorite features that I use pretty much all the time, skills. 00:20:36.819 --> 00:20:42.950 Skills are reusable instructions for how Codex should do a workflow. 00:20:42.960 --> 00:20:45.465 They're not external tools by themselves. 00:20:45.465 --> 00:20:56.714 They're more like local playbooks that tell Codex the style, process, output format, and validation steps for a specific kind of work. 00:20:56.714 --> 00:21:06.790 For example, this course uses skills for explainers, Notion editing, video timelines, and other repeatable production tasks. 00:21:06.800 --> 00:21:18.550 Instead of explaining the same rules every time, I can point Codex to the skill and it knows the house style, the workflow, and the mistakes to avoid. 00:21:18.560 --> 00:21:19.808 The rule is simple. 00:21:19.808 --> 00:21:24.330 Anything that gets used over and over again becomes a skill. 00:21:24.330 --> 00:21:28.986 That matters because a lot of real work is not just about getting an answer. 00:21:28.986 --> 00:21:39.150 It's about getting an answer in the right format, following the right process, and producing something consistent with the rest of the project. 00:21:39.160 --> 00:21:45.390 All right, so here I am in my Codex instance here, and I want to show you some things that you can do with skills. 00:21:45.400 --> 00:21:49.190 So, I have here a conversation for an app that I was building. 00:21:49.200 --> 00:21:54.923 And if I press the the forward slash, you can see that I have many options here, right? 00:21:54.923 --> 00:21:56.550 I can do many, many things. 00:21:56.560 --> 00:22:00.049 And as you can see for skills, I have lots and lots of skills. 00:22:00.049 --> 00:22:02.997 I have tons and tons of skills over there. 00:22:02.997 --> 00:22:07.578 And skills allow me to package a repeatable process. 00:22:07.578 --> 00:22:11.075 You can think of it as a function that does something. 00:22:11.075 --> 00:22:14.150 It gets some input and it produces an output. 00:22:14.160 --> 00:22:18.343 And the goal is to produce consistent output as you've done before. 00:22:18.343 --> 00:22:23.242 And so, as an example, let's say if I'm working in this convo here, right? 00:22:23.242 --> 00:22:25.960 And I asked the model to do something for me. 00:22:25.960 --> 00:22:32.078 So, here I have I want to build a very simple web app that arranges items as a Trello Kanban board style, okay? 00:22:32.078 --> 00:22:33.707 And it comes up with this. 00:22:33.707 --> 00:22:36.493 Now, right here can package that as a skill. 00:22:36.493 --> 00:22:38.990 Now, what do I want to package as a skill? 00:22:38.990 --> 00:22:42.876 Well, I want to package, for instance, maybe creating the architecture. 00:22:42.876 --> 00:22:52.932 So, I can say something like package the architecture step as a skill, and then I just give it a name of the skill. 00:22:52.932 --> 00:22:54.670 Sample arch stack. 00:22:54.680 --> 00:22:55.133 Okay? 00:22:55.133 --> 00:23:06.478 And that's going to create a repeatable skill that will allow me to generate an architecture for any kind of project that I may be working in the future. 00:23:06.478 --> 00:23:13.487 So, I'm going to go ahead and jump into the plan mode in case the model wants to confirm something or clarify something. 00:23:13.487 --> 00:23:15.780 And I'm going to go ahead and execute this. 00:23:15.780 --> 00:23:17.343 And let's see what happens. 00:23:17.343 --> 00:23:22.310 Now, it came back to me and it wants me to answer a question. 00:23:22.320 --> 00:23:32.437 Should the sample arch stack package this as a general architecture planning skill or specifically as the Kanban Trello app architecture, right? 00:23:32.437 --> 00:23:35.063 So, we want it to be a general app architecture. 00:23:35.063 --> 00:23:36.869 So, I'm going to go ahead and save this. 00:23:36.869 --> 00:23:39.301 And now it came back with a plan, okay? 00:23:39.301 --> 00:23:47.131 Create the reusable Codex skill named sample arch stack under wherever it's storing those skills. 00:23:47.131 --> 00:23:51.550 The skill will guide Codex through the architecture step for simple app ideas. 00:23:51.560 --> 00:23:54.994 And it's going to package that step into a reusable process. 00:23:54.994 --> 00:23:55.580 All right. 00:23:55.580 --> 00:23:58.110 And now it tells me that created the skill app. 00:23:58.120 --> 00:24:04.270 It contains skill.md and then It contains skill.md and then agents.for.openai.yaml. 00:24:04.280 --> 00:24:06.480 Validation passed, etc. etc. 00:24:06.480 --> 00:24:21.516 And now what I can do is I can enter a prompt and I can say use this skill for a brand new project management app and it should use this skill to create an architecture stack for this kind of app. 00:24:21.516 --> 00:24:27.152 So, it wants to know for the brand new project management app, what should the version one data model support? 00:24:27.152 --> 00:24:28.806 We're just going to do local only. 00:24:28.806 --> 00:24:30.676 And here it came back with a plan. 00:24:30.676 --> 00:24:34.775 Brand new local only project management app architecture, right? 00:24:34.775 --> 00:24:36.701 That's the purpose of the skill, okay? 00:24:36.701 --> 00:24:41.090 We're going to expand this and it's coming up with this architecture, right? 00:24:41.090 --> 00:24:46.710 App shape, data state model, component architecture, test plan, etc. 00:24:46.720 --> 00:24:46.970 etc. 00:24:46.970 --> 00:24:50.615 And we can say yes and it's going to go ahead and implement all that. 00:24:50.615 --> 00:25:02.104 And so, this is actually a fairly valuable skill because that is exactly what you want to be doing in those initial stages when you're building an app, as you're going to see a little bit later. 00:25:02.104 --> 00:25:08.510 But, by having the skill, we do not need to explain all of that over and over again. 00:25:08.520 --> 00:25:14.280 So, as you're building more and more apps, you can simply reuse this skill from now on. 00:25:14.280 --> 00:25:23.830 Now, before moving further, I also want to explain a few terms that can sound similar at first, plugins, automations, and MCP. 00:25:23.840 --> 00:25:28.774 They all expand what Codex can do, but they are not the same thing. 00:25:28.774 --> 00:25:36.710 Plugins are packaged capabilities or workflows that make Codex better at a specific kind of make Codex better at a specific kind of work. 00:25:36.720 --> 00:25:42.818 For example, a Notion plugin can help Codex read and update Notion pages. 00:25:42.818 --> 00:25:47.270 A Vercel plugin can help with deploys and project settings. 00:25:47.280 --> 00:25:58.030 A Hyperframes plugin can help create explainers, and browser or document tools can help Codex inspect apps or work with files. 00:25:58.040 --> 00:26:00.850 The simple way to think about plugins is this. 00:26:00.850 --> 00:26:07.430 They give Codex a more specialized tool set for a specific job. 00:26:07.440 --> 00:26:18.358 Codex still needs the right context and the right instruction, but the plugin gives it a cleaner way to operate inside that workflow. 00:26:18.358 --> 00:26:20.252 Automations are different. 00:26:20.252 --> 00:26:22.330 A plugin gives Codex a different. 00:26:22.330 --> 00:26:30.190 A plugin gives Codex a capability, but an automation gives Codex a time-based job or follow-up behavior. 00:26:30.200 --> 00:26:42.430 That might be a reminder, a recurring check, a scheduled review, or a request to come back to a thread later and continue the work. 00:26:42.440 --> 00:26:47.228 This is useful because not every task needs to happen immediately. 00:26:47.228 --> 00:27:02.990 Sometimes, you might want Codex to check something again tomorrow, remind you to review an outline, monitor whether a deployment is still working, or wake this thread back up when you need it to continue. 00:27:03.000 --> 00:27:11.171 Automations turn Codex from a one-time assistant into something that can help manage longer-running work. 00:27:11.171 --> 00:27:13.861 The important distinction is simple. 00:27:13.861 --> 00:27:21.188 Plugins are about what Codex can do, and automations are about when Codex should do it. 00:27:21.188 --> 00:27:25.922 All right, so here I am back in Codex, and I want to show you how plugins work, right? 00:27:25.922 --> 00:27:30.752 So, if you click over here on plugins, you can see all the plugins that you have here, okay? 00:27:30.752 --> 00:27:37.372 And so, it it tells you that make Codex work your way, and if you scroll down, you can see all the different plugins, right? 00:27:37.372 --> 00:27:40.861 So, you can click on the plugin, and you can learn more about it, right? 00:27:40.861 --> 00:27:46.425 So, for instance, this spreadsheets allows you to create and edit spreadsheet files, right? 00:27:46.425 --> 00:27:52.730 You can use this plugin to create a spreadsheet to analyze this company's financial, etc., etc., right? 00:27:52.730 --> 00:27:59.961 Create, edit, inspect, render, verify, and export Excel SX, CSV, and TSV spreadsheets locally. 00:27:59.961 --> 00:28:05.845 Use spreadsheets when the durable output or target is a spreadsheet workbook, etc., etc. 00:28:05.845 --> 00:28:08.095 So, this includes the skill, right? 00:28:08.095 --> 00:28:20.561 So, you can think of package as kind of an umbrella that includes a skill, but it also gives Codex an ability to to connect to external systems, right? 00:28:20.561 --> 00:28:23.764 It's kind of this higher-level structure, okay? 00:28:23.764 --> 00:28:27.415 Whereas a skill is a very, very specific thing. 00:28:27.415 --> 00:28:29.854 It's a specific piece of instruction. 00:28:29.854 --> 00:28:31.644 Essentially, a specific prompt. 00:28:31.644 --> 00:28:35.440 A plugin is this umbrella that contains a skill, right? 00:28:35.440 --> 00:28:36.603 So, you can have that. 00:28:36.603 --> 00:28:39.213 One plugin that I use all the time is Notion. 00:28:39.213 --> 00:28:45.162 So, if we click over here, you can see that this actually includes a lot more interesting things, right? 00:28:45.162 --> 00:28:51.072 Notion workflows for specs, research, meetings, and knowledge capture, right? 00:28:51.072 --> 00:28:54.510 So, you can specify this, and then you can give it a prompt. 00:28:54.520 --> 00:29:00.047 And if you scroll down, you can see that it includes the Notion app, the knowledge capture. 00:29:00.047 --> 00:29:01.150 These are skills. 00:29:01.160 --> 00:29:02.514 This is an app. 00:29:02.514 --> 00:29:06.630 Okay, so this allows it to connect to an external system, right? 00:29:06.640 --> 00:29:11.917 So, if I click over here, I can manage this in ChatGPT as well, because it's an external app. 00:29:11.917 --> 00:29:14.774 And this right here, these are skills, right? 00:29:14.774 --> 00:29:18.097 I can open that, and that's going to open the skill right here, right? 00:29:18.097 --> 00:29:21.514 This is This is how the skill is actually stored. 00:29:21.514 --> 00:29:26.510 And I can also turn it off or turn it on, depending on if I want that skill enabled or not. 00:29:26.520 --> 00:29:29.734 Now, this is a plugin that I use all the time, right? 00:29:29.734 --> 00:29:36.935 I use Notion for my planning, for, you know, writing stuff, scheduling stuff like that. 00:29:36.935 --> 00:29:40.552 It's the brain of my workflow, essentially. 00:29:40.552 --> 00:29:51.287 And then I installed this pre-built Notion plugin, and the first time I ran it, it authenticated against my Notion workspace, right? 00:29:51.287 --> 00:29:53.112 Connected to my Notion account. 00:29:53.112 --> 00:30:10.910 And from then on, I can simply say, "Hey, you know, use this Notion spec to do this, or to do that, or, you know, edit this document, edit that document." And it's able to go out and edit the right documents, and essentially make Notion an extension of 00:30:10.920 --> 00:30:11.243 Codex. 00:30:11.243 --> 00:30:16.058 That's kind of the purpose of a skill, to make something an extension of Codex. 00:30:16.058 --> 00:30:16.557 Right? 00:30:16.557 --> 00:30:19.691 And that's the main idea with all of this, right? 00:30:19.691 --> 00:30:23.707 Another really cool one is, like, for instance, Google Calendar is another one, right? 00:30:23.707 --> 00:30:29.787 Instead of connecting to Notion, or in addition to connecting to Notion, you can also connect to Google Calendar. 00:30:29.787 --> 00:30:34.833 I personally do not use Google Calendar, I use Notion, so I do not have this skill set up. 00:30:34.833 --> 00:30:41.430 Another really useful skill that you're definitely going to be using if you're building apps is Vercel, right? 00:30:41.440 --> 00:30:47.700 Vercel, or maybe something like Netlify for deploying your apps, right? 00:30:47.700 --> 00:30:50.692 I use Vercel when demoing apps. 00:30:50.692 --> 00:31:06.310 And by having this package installed, it can figure out how to deploy, how to check deployment, how to do everything without me needing to actually understand how all of that works, without me needing to go to to Vercel and read their docs and 00:31:06.320 --> 00:31:08.201 understand how to deploy and all of that. 00:31:08.201 --> 00:31:17.748 I simply install this skill and then I you know, I click here and now I can say, you know, Vercel, order this repo for Vercel deployment risk. 00:31:17.748 --> 00:31:22.099 Or Vercel, which Vercel tools fit fit this app app best. 00:31:22.099 --> 00:31:24.886 Or Vercel, deploy this app, right? 00:31:24.886 --> 00:31:30.153 And if you scroll down, you can see that this has this app and then it has all of these skills. 00:31:30.153 --> 00:31:31.743 All of these different skills. 00:31:31.743 --> 00:31:32.342 Look at this. 00:31:32.342 --> 00:31:34.399 It has a ton a ton of skills. 00:31:34.399 --> 00:31:37.091 Vercel CLI, Vercel agent, all of these. 00:31:37.091 --> 00:31:41.786 And obviously, these skills are not just for deploying, right? 00:31:41.786 --> 00:31:43.515 Because we also have payments. 00:31:43.515 --> 00:31:45.399 We have best practices. 00:31:45.399 --> 00:31:47.995 We have all of these other ones. 00:31:47.995 --> 00:31:55.230 So, these skills essentially map to different parts of Vercel, to different features of Vercel. 00:31:55.240 --> 00:32:01.537 We're not just talking about, you know, deploying your app, because this could be just a skill, deployment, right? 00:32:01.537 --> 00:32:03.854 This could be one skill that I may need. 00:32:03.854 --> 00:32:06.550 I I may not need all of these other skills. 00:32:06.560 --> 00:32:07.332 But why not? 00:32:07.332 --> 00:32:14.621 You know, Codex will figure out which skill it needs to consult, you know, according to the prompt that I give it. 00:32:14.621 --> 00:32:19.199 So, it doesn't you know, it's not a big deal to have all of these enabled if I'm using Vercel. 00:32:19.199 --> 00:32:25.072 And like I said, this allows me to basically bring Vercel into my Codex workflow. 00:32:25.072 --> 00:32:27.719 That's the beauty of these plugins, okay? 00:32:27.719 --> 00:32:30.048 And that's the same idea with all of these plugins. 00:32:30.048 --> 00:32:35.654 You're essentially bringing an external system and letting Codex manage it for you. 00:32:35.654 --> 00:32:38.775 Now, automations work very, very differently. 00:32:38.775 --> 00:32:47.784 So, if you click on automations here, you can see that automations, they allow you to automate work by setting up scheduled chats, okay? 00:32:47.784 --> 00:32:49.259 And you can learn more here. 00:32:49.259 --> 00:32:54.174 Now, if you click on any of these automations, you can see exactly how they're going to be working. 00:32:54.174 --> 00:33:02.963 So, if I click on something like summarize yesterday's Git activity for standup, you can see that it wants to create an automation for me, okay? 00:33:02.963 --> 00:33:05.147 And what exactly is it trying to do? 00:33:05.147 --> 00:33:11.392 Well, it's essentially trying to create a essentially trying to create a conversation that will be repeatable, okay? 00:33:11.392 --> 00:33:12.903 So, it creates this automation. 00:33:12.903 --> 00:33:15.370 This is the name of the automation, right? 00:33:15.370 --> 00:33:16.463 This is the prompt. 00:33:16.463 --> 00:33:18.294 This right here is the prompt. 00:33:18.294 --> 00:33:24.614 And the prompt is summarize yesterday's Git activity for standup, grounding rules, etc., etc. 00:33:24.614 --> 00:33:26.358 We can select a work tree. 00:33:26.358 --> 00:33:28.597 We can select a project here. 00:33:28.597 --> 00:33:35.109 And then we can select the time where it's going to run over and over again, right? 00:33:35.109 --> 00:33:39.907 So, with this kind of automation, you may want to run it on weekdays at 9:00 a.m. 00:33:39.907 --> 00:33:45.508 But, you can also select it, make it hourly, daily, weekly, etc., etc. 00:33:45.508 --> 00:33:48.642 And you can also change the time, obviously. 00:33:48.642 --> 00:33:53.780 Now, here you can change the model, and here you can change the reasoning level. 00:33:53.780 --> 00:33:57.264 Now, with this kind of automation, you don't really need a high reasoning. 00:33:57.264 --> 00:33:59.177 Medium is going to be just fine. 00:33:59.177 --> 00:34:08.149 And after you're done, you can simply click create, and now you're going to have an automation that will run every weekday at 9:00 a.m. 00:34:08.159 --> 00:34:09.214 running this prompt. 00:34:09.214 --> 00:34:11.627 And And remember, this is a special prompt. 00:34:11.627 --> 00:34:14.666 Here, you're asking it to consult Git activity. 00:34:14.666 --> 00:34:26.742 And so, the idea is you may have, you know, Git connected via a plugin or something else, and it's going to connect to your Git environment, and then figure something out for you. 00:34:26.742 --> 00:34:30.225 And that's going to run every weekday at 9:00 a.m., right? 00:34:30.225 --> 00:34:41.864 So, instead of you needing to, you know, jump into Codox first thing weekday morning and execute this prompt manually, you can create an automation to do just that. 00:34:41.864 --> 00:34:44.762 If you scroll down, you can see some other automations here. 00:34:44.762 --> 00:34:47.923 You have incidents, you have code quality, right? 00:34:47.923 --> 00:34:51.813 Maybe you want to run a code quality check every 24 hours. 00:34:51.813 --> 00:34:55.884 Well, you can click here daily at 9:00 a.m., right? 00:34:55.884 --> 00:35:04.273 Scan recent commits since the last run or last 24 hours for likely bugs and propose minimal fixes. 00:35:04.273 --> 00:35:09.071 Okay, that's another very, very useful automation, right? 00:35:09.071 --> 00:35:10.498 Repo maintenance. 00:35:10.498 --> 00:35:14.030 You have here growth and exploration, right? 00:35:14.040 --> 00:35:19.780 Click here from recent PRs and reviews, suggest next skills to deepen. 00:35:19.780 --> 00:35:21.331 This is great, right? 00:35:21.331 --> 00:35:24.988 So, automations, they could be used for pretty much anything, right? 00:35:24.988 --> 00:35:28.225 And they are, you know, it doesn't really matter what kind of niche you're in. 00:35:28.225 --> 00:35:33.201 You don't need to be in software development or project management or anything like that. 00:35:33.201 --> 00:35:34.747 You can be a writer, right? 00:35:34.747 --> 00:35:35.753 You want a status. 00:35:35.753 --> 00:35:38.026 You're writing maybe 1,000 words every day. 00:35:38.026 --> 00:35:51.120 You know, you can have an automation that checks for spelling, grammar errors that you may have done, and then it may suggest some fixes and also another automation that gives you more ideas, you know, to break through writer's block. 00:35:51.120 --> 00:35:55.609 And that can run every morning at 9:00 or 10:00 a.m., okay? 00:35:55.609 --> 00:36:03.993 And so, automations are very, very useful if you need some kind of a repeatable structure in your workflows. 00:36:03.993 --> 00:36:07.533 And I want to talk a little bit about MCP. 00:36:07.533 --> 00:36:12.675 So, MCP or model context protocol is very, very important, okay? 00:36:12.675 --> 00:36:18.435 So, if you press command comma or you go into settings over here, you're going to be on this screen. 00:36:18.435 --> 00:36:28.035 And if you choose MCP servers, you're going to see all your MCP servers that you have here configured, and you can also see whether they're enabled or not. 00:36:28.035 --> 00:36:31.274 Now, an MCP server is basically a server. 00:36:31.274 --> 00:36:36.025 It's a remote system that your Codex instance can connect to. 00:36:36.025 --> 00:36:40.673 So, as you can see, I have a bunch of MCP servers here that do all kinds of interesting things. 00:36:40.673 --> 00:36:45.014 For instance, I have here a Stitch MCP server configured. 00:36:45.014 --> 00:36:48.022 I have here a Superbase MCP server. 00:36:48.022 --> 00:36:54.177 I also have, you know, Flow Upload Designer, Flow Base, a bunch of apps that support MCP. 00:36:54.177 --> 00:36:59.572 And when you connect to them, Codex is acting like an MCP client. 00:36:59.572 --> 00:37:03.056 So, you have that same client-server paradigm. 00:37:03.056 --> 00:37:09.103 Now, why would you want to use an MCP server to connect to something like Superbase or something else? 00:37:09.103 --> 00:37:11.705 Well, the reason is very simple. 00:37:11.705 --> 00:37:16.935 You want Codex to do all the administration, all the work for you, right? 00:37:16.935 --> 00:37:27.384 So, if you're building an app using something like Superbase, and we're going to touch upon that a little bit later in the video, you can set up Superbase yourself. 00:37:27.384 --> 00:37:28.846 You can configure all of that. 00:37:28.846 --> 00:37:31.436 That takes time, but it's, you know, it's very, very doable. 00:37:31.436 --> 00:37:38.633 Or, you can simply configure a Superbase MCP server in your Codex instance. 00:37:38.633 --> 00:37:49.879 And that will allow Codex to use that MCP server to essentially manage this remote server, this tool, this app for you. 00:37:49.879 --> 00:38:05.470 And as you're going to see a little bit later in this tutorial, this is very, very helpful to us because it saves a lot of time and it enables things that we couldn't really do before because now Codex understands One Piece and via MCP 00:38:05.480 --> 00:38:21.390 it can get more contacts and create a much more robust app for you or a tool for you or anything else, a system, if you will, because now it can connect to other remote systems and essentially consult that data with the data we 00:38:21.400 --> 00:38:27.968 already have, such as the code or things it has been working on, and figure out a unified solution. 00:38:27.968 --> 00:38:30.812 And this is extremely helpful to us, okay? 00:38:30.812 --> 00:38:33.882 And so, there's a couple of ways that you can add a server. 00:38:33.882 --> 00:38:37.140 You can click here, and you can fill all of this manually. 00:38:37.140 --> 00:38:43.993 Or, you can simply tell Codex, "Set up and activate a Supabase MCP server." It's going to figure out how to do that. 00:38:43.993 --> 00:38:45.047 It's going to search for it. 00:38:45.047 --> 00:38:48.566 It's going to figure out the specs, and it's going to set it up for you. 00:38:48.566 --> 00:38:50.632 And the same thing for all of these other ones. 00:38:50.632 --> 00:38:54.624 Now, after setting up the MCP server, you can simply tell Codex to use it. 00:38:54.624 --> 00:39:15.990 So, I can say something like, "Use the Supabase MCP server to query data, or check how many tables we have, or pretty much anything else." And it's going to go ahead and connect to your Supabase instance in this example via the configured MCP server. 00:39:16.000 --> 00:39:23.730 Now that we have laid the foundation, and before we start building the real app, let's talk about the ideal Codex workflow. 00:39:23.730 --> 00:39:26.143 What is the best way to approach it? 00:39:26.143 --> 00:39:32.868 Before we begin building our app, you want to establish the workflow that you're going to use again and again. 00:39:32.868 --> 00:39:34.896 The loop is simple. 00:39:34.896 --> 00:39:39.081 Inspect, plan, edit, verify, and report. 00:39:39.081 --> 00:39:49.033 That sounds basic, but it is the difference between using Codex as a random code generator and using Codex as a controlled build partner. 00:39:49.033 --> 00:40:00.470 The mistake a lot of people make is that they jump straight to "Build this app." or "Fix this problem." without giving the agent a clean process. 00:40:00.480 --> 00:40:06.390 That can work for small tasks, but it breaks down quickly on real projects. 00:40:06.400 --> 00:40:19.997 For a serious build, you want Codex to understand the repo first, explain the plan, make a focused change, verify the result, and then report back in a way that you can re-review. 00:40:19.997 --> 00:40:22.830 A good Codex prompt is not just a request. 00:40:22.830 --> 00:40:24.820 It is a small project brief. 00:40:24.820 --> 00:40:34.663 The better the prompt is, the easier it is for Codex to understand the current state, choose the right amount of work, and verify the result. 00:40:34.663 --> 00:40:36.990 The basic structure is simple. 00:40:37.000 --> 00:40:48.087 Explain the goal, give the relevant context, define what should change, define what should not change, and tell Codex how to verify the work. 00:40:48.087 --> 00:40:56.051 If the task is risky or unclear, ask Codex to inspect first and make a plan before editing. 00:40:56.051 --> 00:41:13.030 For instance, instead of saying "Build the app," I would say, "Inspect the project first, do not edit yet, identify the existing structure, propose the smallest first version, list the files you expect to touch, and explain 00:41:13.040 --> 00:41:17.867 how you will verify." That gives Codex a much cleaner job. 00:41:17.867 --> 00:41:30.750 For implementation prompts, I want the request to be specific enough that Codex can act, but not so over-specified that I accidentally force the wrong solution. 00:41:30.760 --> 00:41:37.779 I usually describe the outcome I want, the constraints I care about, and the checks that need to pass. 00:41:37.779 --> 00:41:43.187 Then Codex can use the actual project context to choose the cleanest path. 00:41:43.187 --> 00:41:50.151 As part of this workflow, I want to introduce you to one of the most important Codex features, plan mode. 00:41:50.151 --> 00:41:56.630 Plan mode is a superpower that I use for 80 to 90% of my prompts. 00:41:56.640 --> 00:42:00.190 There are two main benefits to using the plan mode. 00:42:00.200 --> 00:42:07.277 First, it's a form of brainstorming where the model cannot change or alter your files. 00:42:07.277 --> 00:42:14.285 Second, it's a way for the model to clarify your requests by asking follow-up questions. 00:42:14.285 --> 00:42:18.122 This is especially useful when the request is under specified. 00:42:18.122 --> 00:42:24.342 If I say, "Build the booking flow." there are a lot of hidden decisions inside that request. 00:42:24.342 --> 00:42:26.809 What fields does the form need? 00:42:26.809 --> 00:42:29.734 What status should the booking start with? 00:42:29.734 --> 00:42:32.457 Where should the booking appear for the helper? 00:42:32.457 --> 00:42:35.519 What should happen after submission? 00:42:35.519 --> 00:42:42.384 Plan mode gives Codex a chance to surface those questions before it edits the app. 00:42:42.384 --> 00:42:45.451 I also use plan mode as a quality filter. 00:42:45.451 --> 00:42:53.656 If the plan is vague, too large, or misses something important, I know the implementation will probably be messy. 00:42:53.656 --> 00:43:02.036 If the plan is specific, scoped, and easy to verify, then the actual coding step becomes much safer. 00:43:02.036 --> 00:43:15.224 So, you want to use plan mode initially while brainstorming and also as you enhance your app because it gives the model a chance to ask follow-up questions to ensure there's no misunderstanding. 00:43:15.224 --> 00:43:21.561 Now, if you're working with an existing repo, the first step should always be to inspect. 00:43:21.561 --> 00:43:30.150 Codex should understand the files, the app structure, the current state, and the goal before changing anything. 00:43:30.160 --> 00:43:34.996 Then it should plan the work in a way that is small enough to review. 00:43:34.996 --> 00:43:42.081 Only then, once Codex is fully in sync with your goals, should it make the actual edits and write code. 00:43:42.081 --> 00:43:49.992 Once the code is written, it should verify the code with the browser, terminal, using tests, or the build output. 00:43:49.992 --> 00:43:55.515 And finally, it should report what changed and what still needs attention. 00:43:55.515 --> 00:43:58.668 Verification is the part I want to emphasize. 00:43:58.668 --> 00:44:03.310 A task is not finished just because Codex wrote code. 00:44:03.320 --> 00:44:06.070 For UI work, I want to see the browser. 00:44:06.080 --> 00:44:12.204 For back-end work, I want to see the function call, the dashboard row, or the test results. 00:44:12.204 --> 00:44:17.990 For deployment work, I want the live URL and a real smoke test. 00:44:18.000 --> 00:44:25.159 That habit keeps the workflow grounded in evidence instead of trusting that the code is probably fine. 00:44:25.159 --> 00:44:30.186 Additionally, you always want to break big tasks into smaller one. 00:44:30.186 --> 00:44:46.510 Instead of asking Codex to build the whole marketplace as one prompt, you want to ask it to plan the app, build the first UI shell, wire one initial database backed version, add the booking flow, add the helper dashboard, 00:44:46.520 --> 00:44:47.870 and so on. 00:44:47.880 --> 00:44:53.584 Each step has a clear target and a clear way to check whether it worked. 00:44:53.584 --> 00:44:58.264 A good Codex task should usually fit into one reviewable outcome. 00:44:58.264 --> 00:45:02.745 Create the first static marketplace homepage is reviewable. 00:45:02.745 --> 00:45:07.182 Wire service listings from Convex is reviewable. 00:45:07.182 --> 00:45:12.473 Add booking creation and verify the booking row appears is reviewable. 00:45:12.473 --> 00:45:19.950 Build the whole app is not reviewable because there are too many decisions happening at once. 00:45:19.960 --> 00:45:23.178 So, the workflow is not just a technical process. 00:45:23.178 --> 00:45:26.374 It is also a way to stay in control. 00:45:26.374 --> 00:45:39.688 We let Codex do meaningful work, but we keep the work divided into chunks where we can understand the change, approve the direction, and catch problems before they spread. 00:45:39.688 --> 00:45:46.520 And so, here I am back in Codex, and you can enable plan mode by pressing shift tab, and here you have plan mode. 00:45:46.520 --> 00:45:49.062 Or, you can click here and toggle this. 00:45:49.062 --> 00:45:53.830 I typically just use shift tab cuz it's a lot easier and it's a lot faster. 00:45:53.840 --> 00:45:57.300 And then, whenever I'm in plan mode, I can start brainstorming. 00:45:57.300 --> 00:46:14.750 And not only that, it's useful because Codex will not make changes whenever it's in plan mode, and it also gives Codex to come back to you with follow-up clarifying questions, and I find that super super helpful because we always want to make sure that 00:46:14.760 --> 00:46:17.214 Codex knows exactly what it's doing. 00:46:17.214 --> 00:46:18.465 We Codex knows exactly what it's doing. 00:46:18.465 --> 00:46:23.031 We never the last thing that we want is for Codex to assume something. 00:46:23.031 --> 00:46:25.305 We never want it to assume anything. 00:46:25.305 --> 00:46:28.683 We always want to make sure that we are on the same page. 00:46:28.683 --> 00:46:33.466 And so, let's say I have a command over here going, and I want to build an architecture. 00:46:33.466 --> 00:46:37.350 I want to build some kind of a an intricate architecture. 00:46:37.360 --> 00:46:41.641 And, you know, I I want to make sure that we built out an architecture. 00:46:41.641 --> 00:46:49.603 I may not know exactly how far I want to go, exactly all the details, but I want to make sure that Codex is on the same page. 00:46:49.603 --> 00:47:02.470 So, I can say something like, "Come up with an architecture that will allow me to create both web and mobile and desktop versions of the app. 00:47:02.480 --> 00:47:06.109 Ensure it is fast and robust. 00:47:06.109 --> 00:47:06.735 Okay? 00:47:06.735 --> 00:47:13.054 I'm here in plan mode, and typically with this kind of prompt, it's not clear what I want. 00:47:13.054 --> 00:47:14.657 I don't even know what I want. 00:47:14.657 --> 00:47:19.567 I want Codex to figure it out, but I want Codex to come back to me and confirm with me. 00:47:19.567 --> 00:47:24.292 And so, if we execute this prompt, hopefully it's going to ask me some follow-up questions. 00:47:24.292 --> 00:47:24.921 Let's see. 00:47:24.921 --> 00:47:35.006 And so, as expected, Codex came back with a question, "Which cross-platform strategy should the architecture optimize for?" And there are two questions, okay? 00:47:35.006 --> 00:47:40.866 Do we want shared core native shells, and you can click here, and you can get a little detail. 00:47:40.866 --> 00:47:45.976 You share TypeScript domain logic with separate Expo mobile, etc. 00:47:45.976 --> 00:47:51.849 Do we want a one universal app, or do we want web first wrappers, right? 00:47:51.849 --> 00:48:00.698 Because I asked for a cross-platform product, but there's many ways of doing it, and there's many trade-offs with each approach. 00:48:00.698 --> 00:48:06.341 And so, it came back to me, and it wants to clarify one universal app, this or that. 00:48:06.341 --> 00:48:07.807 So, I'm going to say this one. 00:48:07.807 --> 00:48:09.801 I'm going to I'm going to go with recommended. 00:48:09.801 --> 00:48:14.517 And now, it wants to know what should the app support for data and reliability. 00:48:14.517 --> 00:48:19.389 Offline first cloud sync, cloud only real-time, or local only. 00:48:19.389 --> 00:48:24.141 And you can click and you can hover over the little I to get more details. 00:48:24.141 --> 00:48:28.634 Users can can work offline and sync across devices. 00:48:28.634 --> 00:48:33.657 Cloud only, simpler shared back and live updates, but weaker offline behavior. 00:48:33.657 --> 00:48:36.023 Now, here you can also tell Codex something else. 00:48:36.023 --> 00:48:38.910 You can say, "Well, I want this, this, this, this." 00:48:38.920 --> 00:48:39.380 Right? 00:48:39.380 --> 00:48:44.716 Or, you can press escape, and you can ask Codex to explain the question. 00:48:44.716 --> 00:48:50.270 I can say something like this, "Explain the last question in simple terms." 00:48:50.280 --> 00:48:50.573 Okay? 00:48:50.573 --> 00:48:52.742 I don't need to answer it right away. 00:48:52.742 --> 00:48:55.858 I can get Codex to kind of walk me through it, right? 00:48:55.858 --> 00:48:56.995 Explain the last question. 00:48:56.995 --> 00:48:58.108 Let's see what it says. 00:48:58.108 --> 00:49:00.430 I was asking two choices. 00:49:00.440 --> 00:49:02.050 How should data work? 00:49:02.050 --> 00:49:07.062 My recommendation, shared code and native shells plus offline first cloud sync. 00:49:07.062 --> 00:49:09.229 If you want this to become a serious app. 00:49:09.229 --> 00:49:10.690 So, it tells you these things. 00:49:10.690 --> 00:49:14.937 And so, you don't need to pick a pick a choice or tell it something else. 00:49:14.937 --> 00:49:19.950 You can close that, and you can ask Codex to clarify. 00:49:19.960 --> 00:49:23.874 And now, what we can do is ask me those questions again. 00:49:23.874 --> 00:49:26.604 You can do that, or you can simply answer it here. 00:49:26.604 --> 00:49:27.248 It doesn't matter. 00:49:27.248 --> 00:49:29.918 So, if you do that, it's going to come back with that question here again. 00:49:29.918 --> 00:49:31.171 And here are the questions. 00:49:31.171 --> 00:49:37.225 I'm going to say this, and now I want to say this because I I I understood what it was asking me. 00:49:37.225 --> 00:49:37.738 Got it. 00:49:37.738 --> 00:49:45.870 Your choices are that means the architecture should prioritize a shared TypeScript app a brand used by this, this, this, this. 00:49:45.880 --> 00:49:46.614 And that's good. 00:49:46.614 --> 00:49:49.906 And now, I can exit the plan mode, and I can say, "Go ahead and do it. 00:49:49.906 --> 00:49:53.830 Go and implement this." Something like this or something more specific. 00:49:53.840 --> 00:50:05.310 And so, plan mode is something that I use all the time, and you should definitely make it an integral part of your workflow as well. 00:50:05.320 --> 00:50:08.910 Now, I want to talk to you about some advanced Codex workflow techniques. 00:50:08.920 --> 00:50:16.149 These are the little tips and tricks that I use all the time and will greatly help you when using Codex to to build apps and solve problems. 00:50:16.149 --> 00:50:21.550 One thing I do all the time is asking Codex to create a handoff before I start a new thread. 00:50:21.560 --> 00:50:31.208 This is useful when a thread has gotten long, when the context has been compacted, or when I want to move from planning to implementation with a cleaner workspace. 00:50:31.208 --> 00:50:33.694 A good handoff is not a vague summary. 00:50:33.694 --> 00:50:42.976 I want the current state, the files that changed, the commands that were run, what still needs to happen, and any risks or open decisions. 00:50:42.976 --> 00:50:50.135 That way, the next Codex thread can pick up the work without rereading the entire conversation or repeating mistakes. 00:50:50.135 --> 00:50:53.630 And there are two main reasons that you may want to do that. 00:50:53.630 --> 00:50:59.975 The first reason is that after a while, this conversation here, this it starts to degrade. 00:50:59.975 --> 00:51:06.096 As you keep typing new prompts, and as the model answers, the convo starts to degrade. 00:51:06.096 --> 00:51:12.178 Now, Codex tells you that it automatically compacts its context, and that is true. 00:51:12.178 --> 00:51:16.230 You do not need to start a new convo every time. 00:51:16.230 --> 00:51:18.726 It it does automatically compact it. 00:51:18.726 --> 00:51:29.190 But, you're going to notice that as your conversations get long and you keep asking questions and it keeps answering, quality of the responses will degrade. 00:51:29.200 --> 00:51:43.270 And moreover, you know, your conversation is going to get fairly long, and that might, you know, degrade the performance of the app itself. right there is a good use case to create a brand new convo using the handoff as the 00:51:43.280 --> 00:51:44.216 starting point. 00:51:44.216 --> 00:51:55.073 Another really, really good reason to create a new convo with a handoff is when you're trying to solve a problem but the model is not getting you the solution that you want. 00:51:55.073 --> 00:52:03.882 And so if you're trying to solve a particular problem and you've prompted the model a couple of ways and it's trying it's giving you answers but those answers are not ideal. 00:52:03.882 --> 00:52:05.989 It doesn't give you the right algorithm. 00:52:05.989 --> 00:52:07.861 It doesn't give you the right solution. 00:52:07.861 --> 00:52:12.907 There's a high chance that each additional prompt is not going to get you closer to a solution. 00:52:12.907 --> 00:52:25.870 So when you experience something like that the best thing that you can do would be starting over by creating a new conversation and giving the model a handoff with the things that it has done and the things that that are not working 00:52:25.880 --> 00:52:32.226 and where you are right now and telling the model as part of that handoff prompt to work on a different solution. 00:52:32.226 --> 00:52:40.270 And because AI is is can be fairly random in some ways, creating a new conversation usually give you a different solution. 00:52:40.280 --> 00:52:41.925 That solution might actually work. 00:52:41.925 --> 00:52:49.164 Now there are various ways to create this handoff prompt that's going to give you a handoff for a new conversation. 00:52:49.164 --> 00:52:53.394 One of the simplest ways would be by typing something like this. 00:52:53.394 --> 00:52:59.870 Okay, this is a very very simple prompt that still delivers a fairly high quality handoff. 00:52:59.880 --> 00:53:06.412 Okay, so you can type create a detailed handoff prompt that I can use for a new Codex convo. 00:53:06.412 --> 00:53:06.800 Okay. 00:53:06.800 --> 00:53:11.674 So let's go ahead and send this and see what what answer we get. 00:53:11.674 --> 00:53:11.964 Right. 00:53:11.964 --> 00:53:13.585 And this is the response we got. 00:53:13.585 --> 00:53:18.030 I want to design a fast robust cross platform project management app. 00:53:18.040 --> 00:53:22.120 So it's essentially summarizing everything that has happened in the convo, right? 00:53:22.120 --> 00:53:23.412 This is the context. 00:53:23.412 --> 00:53:24.812 This is the product direction. 00:53:24.812 --> 00:53:26.728 This is the architecture preference. 00:53:26.728 --> 00:53:31.708 Please produce a detailed architecture plan covering all this important, right? 00:53:31.708 --> 00:53:32.769 Also some constraints. 00:53:32.769 --> 00:53:38.687 And so what you can do is you can copy that and then you can go ahead and create a brand new convo. 00:53:38.687 --> 00:53:41.901 For instance, you can click here and you can simply paste it. 00:53:41.901 --> 00:53:44.217 Okay, well you you don't want to delete that. 00:53:44.217 --> 00:53:45.961 You want to delete like the top. 00:53:45.961 --> 00:53:47.459 You want to delete that. 00:53:47.459 --> 00:53:55.104 And when you paste it, that's going to create a conversation and the model can simply continue where the other conversation. 00:53:55.104 --> 00:53:56.626 That is one way to do it. 00:53:56.626 --> 00:54:01.911 Another way to do it is by giving it a more detailed handoff prompt. 00:54:01.911 --> 00:54:06.390 So, let's go back here and let's go ahead and give it a slightly different prompt. 00:54:06.400 --> 00:54:09.593 Create a clean handoff for a new Codex thread. 00:54:09.593 --> 00:54:10.830 Include all of this. 00:54:10.830 --> 00:54:12.477 Do not make any changes. 00:54:12.477 --> 00:54:18.522 So, this prompt is slightly more detailed and you can bet that it's going to give you a higher quality handoff. 00:54:18.522 --> 00:54:26.223 Okay, so let's go ahead and run this and then we can compare the two handoffs and see which one is more detailed. 00:54:26.223 --> 00:54:28.782 Now, take a look at this handoff right here. 00:54:28.782 --> 00:54:34.234 Look at how much more detailed this handoff versus this handoff right here. 00:54:34.234 --> 00:54:39.126 Now, this handoff would definitely work, but this handoff would work even better. 00:54:39.126 --> 00:54:42.041 Going to result in a higher quality conversation. 00:54:42.041 --> 00:54:56.990 Okay, so given an option, you can certainly use a prompt such as this, but it's a lot better to use something like this that's more detailed and it's going to save you a lot of time in the long run. 00:54:57.000 --> 00:55:01.605 The next practical habit is using Git as a checkpoint system. 00:55:01.605 --> 00:55:06.550 Before I let Codex do meaningful work, I want to know whether the current state is clean. 00:55:06.560 --> 00:55:11.950 After each milestone, I want a diff that is small enough to review and explain. 00:55:11.960 --> 00:55:17.746 That is what keeps an agentic workflow from turning into one giant mystery edit. 00:55:17.746 --> 00:55:22.326 The useful trick is to make Codex summarize the diff in plain English. 00:55:22.326 --> 00:55:33.939 I do not only want to know what files change, I want to know why they changed, whether each change belongs to the task, and whether anything looks unrelated before I accept it or move on. 00:55:33.939 --> 00:55:42.990 So, when you are working in Codex, you do not want to be just creating edits without recording what the edit is all about. 00:55:43.000 --> 00:55:48.782 And in software development, you want to be using a source control system, such as Git. 00:55:48.782 --> 00:55:56.190 We have here a convo where we were building an app, and in this particular instance, we did not use Git. 00:55:56.200 --> 00:56:01.752 And so, I do not know, I have no way to check which changes were made where. 00:56:01.752 --> 00:56:04.317 I have no way to revert the changes. 00:56:04.317 --> 00:56:08.115 I have no way to see what the actual change represents. 00:56:08.115 --> 00:56:14.232 And if working in, you know, bigger teams, I do not know who was the person responsible for the change. 00:56:14.232 --> 00:56:16.980 Now, in this convo, we have another problem, okay? 00:56:16.980 --> 00:56:19.368 The current working directory is missing. 00:56:19.368 --> 00:56:32.477 And so, in this case, what we can do is we can take a handoff prompt, and we can create a brand new project, insert that handoff prompt, start a new convo, and then enabled Git, and set up so that we have Git control. 00:56:32.477 --> 00:56:33.799 So, I'm going to go over here. 00:56:33.799 --> 00:56:35.506 I'm just going to do start from scratch. 00:56:35.506 --> 00:56:39.810 I'm going to paste this handoff prompt to start a brand new convo. 00:56:39.810 --> 00:56:45.473 And I'm going to preface it by telling it to create a Git repository. 00:56:45.473 --> 00:56:51.934 Create a Git repo if it doesn't exist, and do an initial commit with the code. 00:56:51.934 --> 00:56:53.775 So, I'm going to run that. 00:56:53.775 --> 00:57:00.070 And the idea is we are going to initialize Git if needed, and then commit the current code as is. 00:57:00.080 --> 00:57:00.552 All right. 00:57:00.552 --> 00:57:06.750 So, what it did was it initialized a Git repo in this directory, and made an initial commit. 00:57:06.760 --> 00:57:08.990 Initial architecture plan here, okay? 00:57:09.000 --> 00:57:10.784 The workspace was empty when I inspected. 00:57:10.784 --> 00:57:11.897 There was nothing there. 00:57:11.897 --> 00:57:16.160 We just created a brand new project, and it essentially created an architecture. 00:57:16.160 --> 00:57:23.430 And so, at this point, we have here a Git repo, which means that each additional change will be automatically tracked. 00:57:23.440 --> 00:57:32.832 So, for instance, I can say something like, "Make the smallest possible change, a route that displays 'Hello, world.'" Okay? 00:57:32.832 --> 00:57:34.258 Let's go ahead and run that. 00:57:34.258 --> 00:57:36.343 So, it now created this index.html. 00:57:36.343 --> 00:57:39.203 We're going to open it, and it says hello world. 00:57:39.203 --> 00:57:44.852 And so, now what we can do is we can say check the Git status. 00:57:44.852 --> 00:57:49.270 And obviously, this file is not going to be in our Git, right? 00:57:49.270 --> 00:57:52.310 You see this is not tracked, an untracked file. 00:57:52.320 --> 00:57:57.349 So, what we want is we want to commit index.html as initial commit. 00:57:57.349 --> 00:58:02.402 Because in Git, you can have files that are tracked, and also files that are not tracked. 00:58:02.402 --> 00:58:05.690 The files that are not tracked are the files you don't really care about, right? 00:58:05.690 --> 00:58:08.139 You don't You don't really need to store them in Git. 00:58:08.139 --> 00:58:15.321 These could be like media files, or generated files, code generated files that that can always be regenerated. 00:58:15.321 --> 00:58:19.218 But for your actual code, you always want to be tracking them, right? 00:58:19.218 --> 00:58:25.437 So, we we have this commit, and now this files is going to be tracked, and it's going to be committed as well. 00:58:25.437 --> 00:58:25.726 Okay? 00:58:25.726 --> 00:58:28.899 So, now it says committed as initial commit, right? 00:58:28.899 --> 00:58:32.108 We have this It's now on main, which is the a type of branch. 00:58:32.108 --> 00:58:36.881 And so, now if we go into changes, you can see that we can select a branch here. 00:58:36.881 --> 00:58:39.528 And as you can see here, it says no file changes yet. 00:58:39.528 --> 00:58:44.301 And that is because we have not made any changes since tracking that file. 00:58:44.301 --> 00:58:50.013 So, what I'm going to do now is that make index.html output hello James. 00:58:50.013 --> 00:58:52.950 That has updated, and now it says hello James. 00:58:52.960 --> 00:58:54.944 And now what we can do is we can commit it. 00:58:54.944 --> 00:58:56.527 Commit index.html. 00:58:56.527 --> 00:59:03.089 And now if we type give me Git status, it's going to tell you that it's not It hasn't been committed, right? 00:59:03.089 --> 00:59:06.214 It's modified, and it's tracked, but it hasn't been committed. 00:59:06.214 --> 00:59:06.481 Okay? 00:59:06.481 --> 00:59:09.103 It has been modified and uncommitted, right? 00:59:09.103 --> 00:59:11.621 You see this M, which means this has been modified. 00:59:11.621 --> 00:59:15.270 So, we're going to do commit index.html. 00:59:15.280 --> 00:59:18.753 And it will also generate a default message. 00:59:18.753 --> 00:59:20.232 Here it has committed it. 00:59:20.232 --> 00:59:26.558 We can click here, and we can click select review, and you can select the the of change you want to see. 00:59:26.558 --> 00:59:30.580 You can see on stage, stage, branch, or last turn. 00:59:30.580 --> 00:59:34.949 And when you click on last turn, you can see what was changed, okay? 00:59:34.949 --> 00:59:37.732 Because we are we are using source control. 00:59:37.732 --> 00:59:39.404 We can see the stuff that was changed. 00:59:39.404 --> 00:59:42.434 As you can see, this is the one line that was changed. 00:59:42.434 --> 00:59:46.143 Red means it was deleted, and green means it was inserted. 00:59:46.143 --> 00:59:48.792 So, this was deleted, and this was inserted. 00:59:48.792 --> 00:59:52.710 We basically changed the message that it says from Hello World to Hello James. 00:59:52.720 --> 00:59:55.965 And so, Git is very very important. 00:59:55.965 --> 00:59:58.923 If you're working on any kind of project, right? 00:59:58.923 --> 01:00:10.350 Anything beyond something super simple, you want to create a repo, and you want to implement source control into your workflow. 01:00:10.360 --> 01:00:16.390 One advanced trick that becomes more useful as projects get bigger is working with Git work trees. 01:00:16.390 --> 01:00:22.599 A work tree is a separate working copy of the same repo connected to a different branch. 01:00:22.599 --> 01:00:31.870 The practical benefit is that you can keep one version of the app stable while trying a risky feature, new eye direction, or refactor somewhere else. 01:00:31.880 --> 01:00:34.073 This matters a lot with the genetic coding. 01:00:34.073 --> 01:00:45.270 If you want to try two approaches in parallel, or or keep a clean version ready for recording while another code expert keeps building, a work tree gives you that separation. 01:00:45.280 --> 01:00:50.034 Now, what's nice about work trees is that they give you parallelism. 01:00:50.034 --> 01:01:04.489 So, if you are working on multiple features in your app, maybe you're using sub agents or something else, it's important that no two processes work on the same file at the same time, because that's going to create corruption. 01:01:04.489 --> 01:01:12.107 And so, what you typically end up doing is you create a work tree for a specific feature, and you work on that work tree. 01:01:12.107 --> 01:01:16.864 And when you're done, you merge the changes back onto your main tree. 01:01:16.864 --> 01:01:19.790 Now, that doesn't mean you can only create one work tree. 01:01:19.800 --> 01:01:34.310 You can create multiple work trees, as many as you want, and you can also work on the same feature because after one worktree is done, it's going to merge to main, and if there's a conflict, it's going to resolve that conflict, and then 01:01:34.320 --> 01:01:47.390 another worktree, when it is done, it's going to also merge into your main branch where your development is happening, and if there's a conflict because they ended up working on the same feature, it will also resolve that 01:01:47.400 --> 01:01:49.350 conflict so that there's no corruption. 01:01:49.360 --> 01:01:52.367 Now, this is a feature I use all the time in big projects. 01:01:52.367 --> 01:01:55.029 Now, let's say I'm working on this app over here. 01:01:55.029 --> 01:02:04.691 You can ask Codox to work in main without creating any worktrees, or I can ask it to create a new worktree while it makes changes. 01:02:04.691 --> 01:02:07.052 So, let's continue what we were doing. 01:02:07.052 --> 01:02:11.674 So, let's say I want to change this index.html, and I wanted to say something else. 01:02:11.674 --> 01:02:21.397 So, I'm going to go ahead and tell it, "Make index.html output hello, plan." But this time, we want to make sure that it works in a different worktree. 01:02:21.397 --> 01:02:35.276 So, what I'm going to do is I'm going to say, "Work in a new worktree, and then merge, clean up after you're done, okay?" So, we're going to go ahead and run this, and now it's not going to modify the file on our main branch. 01:02:35.276 --> 01:02:40.968 It's going to branch out, do the work, and then come back and merge the changes back in. 01:02:40.968 --> 01:02:44.094 And so, as you can see here, there's more stuff happening. 01:02:44.094 --> 01:02:52.724 I'll make this in a separate Git worktree, commit there, fast forward merge changes to main, and then remove the worktree and delete the branch. 01:02:52.724 --> 01:03:06.710 And that's exactly what it did, except it did it very, very quickly because this was a, you know, a very small change, but you saw it doing all that, and before you know it, it did all that, made the change, merged everything back, 01:03:06.720 --> 01:03:08.038 and deleted the worktree. 01:03:08.038 --> 01:03:10.754 And so, that was a very, very small change. 01:03:10.754 --> 01:03:18.114 Now, another thing that you can do is you can click here, and you can fork this whole convo in a separate worktree, right? 01:03:18.114 --> 01:03:22.962 So, if I click over here, that will fork it into a separate work tree. 01:03:22.962 --> 01:03:27.097 And here you can see we're working in a separate work tree here, okay? 01:03:27.097 --> 01:03:39.078 So, now as we're doing work, we don't need to constantly tell Cortex, "Hey, you know, create a new work tree, clean up, and do all this when you're done." We can continue working and then merge our changes. 01:03:39.078 --> 01:03:44.494 So, for instance, I can say something like to say, "Hello, USA." I can simply do that. 01:03:44.494 --> 01:03:49.204 I don't need to tell it to work in a separate work tree because we are isolated here, okay? 01:03:49.204 --> 01:03:51.470 So, here's the file, we can open it. 01:03:51.470 --> 01:03:52.590 Hello, USA here. 01:03:52.600 --> 01:03:58.412 And so, at this point, we have merged the work tree change into main and cleaned up the temporary work tree, right? 01:03:58.412 --> 01:04:02.787 Index now displays Hello, USA, and we no longer have this temporary work tree. 01:04:02.787 --> 01:04:07.243 We've done everything that we needed to do separate from the main branch and then we merge. 01:04:07.243 --> 01:04:15.332 And as far as we are concerned, this convo is now finished because it's tied to the old work tree, but we've did everything we needed to do. 01:04:15.332 --> 01:04:22.769 We've updated the files, we merged back into main, and so now we can start a brand new convo to work on a different feature. 01:04:22.769 --> 01:04:26.150 And so, this is really nice for feature isolation. 01:04:26.160 --> 01:04:36.510 Create a new work tree, work there, merge back into main, and then simply click here to archive this conversation. 01:04:36.520 --> 01:04:40.744 Another advanced trick is using sub-agents for parallel work. 01:04:40.744 --> 01:04:45.499 The idea is not to throw a whole project at a bunch of agents and hope it works. 01:04:45.499 --> 01:04:47.950 The useful version is much more controlled. 01:04:47.960 --> 01:04:56.458 An agent explores the code base, another works on a clearly bounded part of the UI, another checks tests, or reviews the result. 01:04:56.458 --> 01:04:57.713 The key is ownership. 01:04:57.713 --> 01:05:04.281 If you use sub-agents, you want each one to have a specific job, clear file area, and a clear output. 01:05:04.281 --> 01:05:08.999 That keeps the work parallel without turning it into a merge mess. 01:05:08.999 --> 01:05:17.868 Sub-agents are best when the tasks are independent enough to run side by side, but still simple enough to integrate at the end. 01:05:17.868 --> 01:05:23.399 Now, sub-agents is another really cool feature that will help speed up your workflows. 01:05:23.399 --> 01:05:32.288 And this is something that I use all the time, especially in big repos, in big codebases, to do multiple tasks in parallel. 01:05:32.288 --> 01:05:35.923 All right, so here I have a very, very simple Kanban app. 01:05:35.923 --> 01:05:38.231 If I click over here, I have this. 01:05:38.231 --> 01:05:42.018 I can drag and drop. create new tasks, etc., etc. 01:05:42.018 --> 01:05:56.350 And so, what I want to know is if I'm going to be building more and more features, complex stuff, new functionality, I want to use sub-agents to help me kind of make sense of it, you know, and help me build it in the most efficient way 01:05:56.360 --> 01:05:56.779 possible. 01:05:56.779 --> 01:05:59.024 And so, I'm going to paste this prompt here. 01:05:59.024 --> 01:06:02.281 Plan how to split this feature across sub-agents, right? 01:06:02.281 --> 01:06:03.469 Do not edit files yet. 01:06:03.469 --> 01:06:04.022 Recommend. 01:06:04.022 --> 01:06:06.263 We're going to jump into plan mode. 01:06:06.263 --> 01:06:08.553 Preface this with the feature. 01:06:08.553 --> 01:06:13.315 Add to party apps, such as make.com, Zapier, etc. 01:06:13.315 --> 01:06:15.420 And so, I'm going to I'm going to leave it at this. 01:06:15.420 --> 01:06:17.124 And I'm going to go ahead and run this. 01:06:17.124 --> 01:06:18.893 And so, let's go ahead and run this. 01:06:18.893 --> 01:06:20.414 And here we have the plan. 01:06:20.414 --> 01:06:25.390 The safest split is for the main thread to own architecture, shared data contracts. 01:06:25.400 --> 01:06:34.286 Sub-agents can work on isolated feature areas inside index.html, but they must not all edit the same broad sections at once. 01:06:34.286 --> 01:06:37.083 Okay, so we have main thread responsibilities. 01:06:37.083 --> 01:06:39.568 And then we have sub-agent delegation. 01:06:39.568 --> 01:06:44.304 Integration settings, integration data model, web hook event dispatcher. 01:06:44.304 --> 01:06:53.342 So, I'm going to copy this plan, and then I'm going to preface it by telling it spawn sub-agents right away to help design the third-party API functionality. 01:06:53.342 --> 01:06:54.721 Let's go ahead and run this. 01:06:54.721 --> 01:07:03.214 Right away, it's telling me, "I'll spawn the four-focused sub-agents and keep the main thread responsible for the final." So, as you can see, it's spawning them. 01:07:03.214 --> 01:07:05.200 And each sub-agent gets a prompt. 01:07:05.200 --> 01:07:08.270 It's basically like me creating a new conversation. 01:07:08.280 --> 01:07:15.663 Your sub agent one integration, your sub agent two integration data model, your sub agent three, and they're working independently. 01:07:15.663 --> 01:07:18.555 And here it tells you all four sub agents are running. 01:07:18.555 --> 01:07:23.770 While they work, I'll inspect the current partial edit, and you can see these background agents here. 01:07:23.770 --> 01:07:24.074 Okay? 01:07:24.074 --> 01:07:25.797 So, they're working in parallel. 01:07:25.797 --> 01:07:27.507 They're working on their own thing. 01:07:27.507 --> 01:07:30.950 They own different pieces of the app, and they're kind of working. 01:07:30.960 --> 01:07:34.554 And when they're done, they come back to this main agent, right? 01:07:34.554 --> 01:07:37.365 This combo here, and tell it what happened, right? 01:07:37.365 --> 01:07:38.874 They come back with the result. 01:07:38.874 --> 01:07:42.641 And so, now it says the persistent sub agent returned a cleaner data shape. 01:07:42.641 --> 01:07:46.529 And here you can actually click on any one of these and see what's happening. 01:07:46.529 --> 01:07:51.161 You can click here, you can come back, you can click on this one, and see what it's doing. 01:07:51.161 --> 01:07:52.496 So, this one is finished. 01:07:52.496 --> 01:07:53.496 Some are finished. 01:07:53.496 --> 01:07:54.631 How about this one? 01:07:54.631 --> 01:07:55.995 This one is also finished. 01:07:55.995 --> 01:07:57.338 And so, that's how it works. 01:07:57.338 --> 01:08:01.093 And when they finish, they come back, and then it decides what to do later. 01:08:01.093 --> 01:08:04.333 Maybe it's going to respond, and maybe it's going to spawn something else. 01:08:04.333 --> 01:08:05.269 Maybe it's done. 01:08:05.269 --> 01:08:07.008 They did what they needed to do. 01:08:07.008 --> 01:08:11.569 They finished their isolated task, and their services are no longer needed. 01:08:11.569 --> 01:08:14.949 And again, sub agent is something that I use all the time. 01:08:14.949 --> 01:08:26.135 I use it all the time, especially in big repos, because they help speed up the work by isolating different areas, different responsibility clusters, to different agents. 01:08:26.135 --> 01:08:31.309 And that's a huge productivity boost. 01:08:31.319 --> 01:08:40.621 Now, in this section, we're going to bring all of the previous sections together by giving Codex project instructions in an agents.md file. 01:08:40.621 --> 01:08:47.057 This is where you can write down the rules you want Codex to follow every time it works in a specific repo. 01:08:47.057 --> 01:08:56.502 Which commands to run, which folders matter, which patterns to preserve, how to verify changes, and when to use work trees or sub agents. 01:08:56.502 --> 01:09:01.822 This is useful because you do not want to repeat the same project rules in every prompt. 01:09:01.822 --> 01:09:17.100 If this project should always run a specific check, use a specific design system, avoid certain files, create work trees for risky experiments, or split large tasks into sub-agents, those instructions belong in agents.md. 01:09:17.100 --> 01:09:22.278 It turns your preferences into reusable project context. 01:09:22.278 --> 01:09:28.250 And here's a prompt that you can use, which is going to draft agents.md for this project. 01:09:28.250 --> 01:09:34.837 Do not write the file yet include the project purpose, the main folders, work tree, sub-agents, stuff like that. 01:09:34.837 --> 01:09:36.617 So, we're going to jump into plan mode. 01:09:36.617 --> 01:09:38.947 We're going to go ahead and run that. 01:09:38.947 --> 01:09:44.036 And here's the draft for this agents.md tailored to the current project, right? 01:09:44.036 --> 01:09:49.075 Project purpose, main folders, verification steps after changes. 01:09:49.075 --> 01:09:53.470 Serve the app locally, coding and design patterns to preserve. 01:09:53.470 --> 01:09:55.832 When codex should use a work tree. 01:09:55.832 --> 01:09:58.510 Use a separate work tree when these happen. 01:09:58.520 --> 01:10:00.674 When codex should use sub-agents. 01:10:00.674 --> 01:10:06.295 Use sub-agents when work can be split into clearly separate ownership areas such as these. 01:10:06.295 --> 01:10:09.407 What codex should avoid changing without asking? 01:10:09.407 --> 01:10:10.117 All of this. 01:10:10.117 --> 01:10:22.865 Now, the beautiful thing about this agents.md file is that you no longer have to worry about, you know, asking codex to spawn sub-agents or create separate work trees. 01:10:22.865 --> 01:10:24.492 It will be automatic. 01:10:24.492 --> 01:10:28.755 It's like saving you from typing those prompts every single time. 01:10:28.755 --> 01:10:34.110 So, if you want to add a feature, well, you don't need to tell it, "Hey, create a new work tree." 01:10:34.120 --> 01:10:36.366 Or make sure you spawn sub-agents. 01:10:36.366 --> 01:10:37.823 It's going to be automatic. 01:10:37.823 --> 01:10:44.140 And so, at this point, you want to review this proposal here, and you want to save this as agents.md. 01:10:44.140 --> 01:10:49.958 So, I'm going to say, "Save it as agents." So, now it's saved it as agents.md. 01:10:49.958 --> 01:10:54.230 You You can click here, and you can see the whole file right here. 01:10:54.240 --> 01:10:58.561 And this file will be used only for this specific project. 01:10:58.561 --> 01:11:00.137 They're based on a repo. 01:11:00.137 --> 01:11:06.499 So now for my next prompt, if it's a simple change, it's not going to create a work tree probably. 01:11:06.499 --> 01:11:15.150 And it will also not spawn sub-agents, but if it's a more complex change, it should probably create a work tree and maybe even spawn sub-agents. 01:11:15.150 --> 01:11:17.223 So let's go ahead and see if this works. 01:11:17.223 --> 01:11:28.986 So now, let's go ahead and ask it make a simple change that that changes the title for the main index.html to awesome Kanban app. 01:11:28.986 --> 01:11:31.298 Okay, I'm going to go ahead and run it directly. 01:11:31.298 --> 01:11:34.130 So now the title is awesome Kanban app. 01:11:34.130 --> 01:11:52.270 Okay, but if we ask it something more complex, like, you know, figure out a third-party, you know, integration, design, you know, support API calls, or support MCP, or anything like that, it should probably use sub-agents to figure it out and 01:11:52.280 --> 01:11:54.758 implement the changes in its own work tree. 01:11:54.758 --> 01:11:56.472 So let's see if this works. 01:11:56.472 --> 01:12:03.824 Add a robust API functionality for handling outgoing API calls and incoming webhooks. 01:12:03.824 --> 01:12:08.235 Okay, I'm going to jump into plan mode to see if it has any questions for me. 01:12:08.235 --> 01:12:14.404 See how it says agents.mdx explicitly says not to add a backend or proxy without asking. 01:12:14.404 --> 01:12:16.250 Okay, so it did consult this. 01:12:16.250 --> 01:12:18.052 So we're going to add a backend. 01:12:18.052 --> 01:12:26.207 We're going to create tasks and let's see if it's going to create a work tree automatically and maybe even use sub-agents. 01:12:26.207 --> 01:12:30.783 Another question, should the new backend become the source of truth for Kanban tasks? 01:12:30.783 --> 01:12:32.861 Yes, let's just go with the recommended. 01:12:32.861 --> 01:12:41.406 Okay, we're going to expand this plan and we're going to see if it's going to be using a work tree or sub-agents for any of these things. 01:12:41.406 --> 01:12:45.272 Okay, so I do not see it's going to be using sub-agents. 01:12:45.272 --> 01:12:45.768 Update. 01:12:45.768 --> 01:12:53.068 So before we run it, let's ask it, do you plan on using a work tree or sub-agents for this task. 01:12:53.068 --> 01:12:53.837 There you go. 01:12:53.837 --> 01:13:04.070 Yes, for implementation I'd use a work tree because this changes the project from a static only app into a node server app with API routes and persistent states. 01:13:04.080 --> 01:13:08.173 I'd also use subagents, but only for bounded design review tasks. 01:13:08.173 --> 01:13:19.225 And so it's telling you right there that it will be using a work tree and it will be using subagents, and you can bet that this would never happen if we didn't have this agents.md file. 01:13:19.225 --> 01:13:21.722 And so agents.md is super important. 01:13:21.722 --> 01:13:27.383 It's going to save you a lot of time because it basically codifies repeatable tasks. 01:13:27.383 --> 01:13:34.910 So you never have to re-prompt the same thing over and over again. 01:13:34.920 --> 01:13:39.249 Now, before we build real apps, there is one security habit you want to establish early. 01:13:39.249 --> 01:13:43.791 Codex can help inspect configuration, but we should be careful with secrets. 01:13:43.791 --> 01:13:52.037 An environment variable might be safe and public, like a front-end URL, or it might be private, like an API key or deploy token. 01:13:52.037 --> 01:13:57.504 These should not be casually pasted into a prompt or committed into the repo. 01:13:57.504 --> 01:14:02.736 The other important thing is that local config and deployment config are not the same thing. 01:14:02.736 --> 01:14:09.749 A local.env file helps the app run on my machine, but Vercel does not automatically copy that file into production. 01:14:09.749 --> 01:14:15.458 For a deployed app, the required variables need to exist in the deployment environment, too. 01:14:15.458 --> 01:14:26.203 So the right workflow is to ask Codex to identify what variables are needed, classify them as public or private, and then advise you where each one needs to be configured. 01:14:26.203 --> 01:14:31.631 Now, let's say we're building on this app, and we are adding external services. 01:14:31.631 --> 01:14:38.070 So one of those services might be something like OpenAI, or another service could be Open Router. 01:14:38.080 --> 01:14:51.853 Well, every time we connect to external services, we need to connect them using an API key, and those API keys are needed for those services to track how much usage we have so that they can bill us accordingly. 01:14:51.853 --> 01:15:05.910 And so in your app, you need to be storing those API keys because when you're going to be making those requests, regardless whether that's an API token or some kind of deployment token or pretty much anything else, you need to be very, very careful 01:15:05.920 --> 01:15:07.760 how you are storing them. 01:15:07.760 --> 01:15:12.133 And so in this app, let's say we want to use OpenAI here. 01:15:12.133 --> 01:15:12.586 Here. 01:15:12.586 --> 01:15:17.231 So I'm going to say API stack and use the following key. 01:15:17.231 --> 01:15:20.270 And let's say we give it a sample API key. 01:15:20.280 --> 01:15:22.575 Sample API key as a sample. 01:15:22.575 --> 01:15:24.583 We're going to jump into plan mode. 01:15:24.583 --> 01:15:27.052 We're going to select this API stack only. 01:15:27.052 --> 01:15:29.036 We're going to be doing native fetch. 01:15:29.036 --> 01:15:29.531 All right. 01:15:29.531 --> 01:15:33.294 So it went ahead and created our first API stack here. 01:15:33.294 --> 01:15:37.057 And right here it mentions this file where it stores this key. 01:15:37.057 --> 01:15:40.902 And so if you want to use a real key, you never want to paste it in chat. 01:15:40.902 --> 01:15:44.641 What you want to do is you want to open this file and modify it directly. 01:15:44.641 --> 01:15:46.020 So that's what we're going to do. 01:15:46.020 --> 01:15:50.011 We're going to open this in the editor here and I'm going to paste this key right here. 01:15:50.011 --> 01:15:52.359 And this right here is my actual key. 01:15:52.359 --> 01:15:59.530 And so now I have an OpenAI, have an API stack and I have a real key in this file here, okay? 01:15:59.530 --> 01:16:09.801 And now what I need to do is I need to run a check and ensure that we are storing the keys the right way and, you know, they're going to be deployed correctly and all that. 01:16:09.801 --> 01:16:16.445 And so I have this prompt to do just that and it says here inspect this project for environment variables and deployment config. 01:16:16.445 --> 01:16:19.746 Do not print secret values and then tell me all of these things. 01:16:19.746 --> 01:16:20.875 So we're going to run this. 01:16:20.875 --> 01:16:29.335 So now it's telling us that environment inspection required environment variables required only for post OpenAI front end variables, right? 01:16:29.335 --> 01:16:35.386 We don't have any public because, you know, sometimes your app can have both private keys and public keys, right? 01:16:35.386 --> 01:16:42.968 So if you're using something like Superbase, Superbase has an anon key or a secret key or they call it something else now. 01:16:42.968 --> 01:16:48.668 And the idea is the public key can be made available, but it has very, very strict permissions. 01:16:48.668 --> 01:16:57.832 Whereas something like your OpenAI API key or your open router API key or something of that sort needs to be very, very secret, right? 01:16:57.832 --> 01:17:02.312 Because with that key, you can make a lot of calls and do a lot of things. 01:17:02.312 --> 01:17:04.550 And so here it says we have a private key. 01:17:04.560 --> 01:17:07.616 OpenAI PK is private and must stay server-side. 01:17:07.616 --> 01:17:09.606 It is used here, needed locally. 01:17:09.606 --> 01:17:17.983 Hosted service config or cell or another node capable host config as a private server environment variables, port, etc., etc. 01:17:17.983 --> 01:17:21.122 Okay, dot env examples cuz currently untracked. 01:17:21.122 --> 01:17:25.796 So, what we have safest next step before deploying, replace it with only this. 01:17:25.796 --> 01:17:31.005 Only config the real key in the deployment provider's private environment variable settings. 01:17:31.005 --> 01:17:31.452 Okay. 01:17:31.452 --> 01:17:40.588 So, I want to store the key locally for testing, and I want to ensure that it will be deployed also later. 01:17:40.588 --> 01:17:45.131 And so we want that key locally so that we can test, but we also want it to deploy it. 01:17:45.131 --> 01:17:51.435 And that means we need to create a couple of files, one for local settings and one for deployment settings. 01:17:51.435 --> 01:17:57.380 And it's telling us which is the wrong file for local secret because examples are usually committed. 01:17:57.380 --> 01:17:59.843 So let's say we're doing a Vercel deploy. 01:17:59.843 --> 01:18:01.149 We're going to switch that. 01:18:01.149 --> 01:18:04.775 And there we have it, store the real key locally in an untracked. 01:18:04.775 --> 01:18:05.120 Right? 01:18:05.120 --> 01:18:08.393 We need to make sure that this is never committed to Git. 01:18:08.393 --> 01:18:09.597 It needs to be untracked. 01:18:09.597 --> 01:18:12.890 So we're going to expand this, submit this. 01:18:12.890 --> 01:18:14.370 Do not use public. 01:18:14.370 --> 01:18:16.190 These are not public keys. 01:18:16.200 --> 01:18:19.771 Replace dot env example with create dot env. 01:18:19.771 --> 01:18:22.911 Okay, so it's it's going to be creating this dot env. 01:18:22.911 --> 01:18:25.560 The secret is now ignored in dot env. 01:18:25.560 --> 01:18:32.006 And then I'm updating readme and agents to make the local and Vercel setup unambiguous. 01:18:32.006 --> 01:18:35.351 And that way we have the local key stored for local testing. 01:18:35.351 --> 01:18:45.459 It's never going to be committed into Git and then we'll be able to send that key, also deploy that key on Vercel because Vercel is going to be running our app. 01:18:45.459 --> 01:18:47.135 It needs access to that key as well. 01:18:47.135 --> 01:18:48.190 It needs to be secret. 01:18:48.200 --> 01:18:51.102 Okay, implemented the local Vercel key setup. 01:18:51.102 --> 01:19:03.150 And so in this point we've made the the secret key management and not just secret key, any kind of key management is part of our workflow and we can be assured that we have the key for local stuff and we also going to be 01:19:03.160 --> 01:19:12.310 deploying the key correctly for production stuff, regardless what kind of host you're using. 01:19:12.320 --> 01:19:21.345 Now, when you're developing an app, you're going to be writing code for the core stuff, but a lot of things that your app will be doing will be done by existing code. 01:19:21.345 --> 01:19:24.510 You're not going to be building your app from scratch, right? 01:19:24.520 --> 01:19:29.197 You're going to be using existing libraries, existing frameworks, stuff like that. 01:19:29.197 --> 01:19:34.576 And those are called dependencies and that is because your app depends on them to function. 01:19:34.576 --> 01:19:37.738 Without those things, your app will not function. 01:19:37.738 --> 01:19:43.164 And you need to ensure that you have a process for managing these dependencies. 01:19:43.164 --> 01:19:50.148 And I have here a prompt that you can use that will help you inspect this project before adding any dependencies. 01:19:50.148 --> 01:19:51.706 Do not install anything yet. 01:19:51.706 --> 01:19:52.833 Tell me all of this. 01:19:52.833 --> 01:19:54.911 And so let's go ahead and run this prompt. 01:19:54.911 --> 01:19:57.030 Right, and this is what it came back with. 01:19:57.040 --> 01:19:59.155 Dependency project inspection. 01:19:59.155 --> 01:20:01.090 Framework and package manager. 01:20:01.090 --> 01:20:02.410 Framework non-detected. 01:20:02.410 --> 01:20:07.792 This appears to be a plain static JavaScript app served by a custom node server. 01:20:07.792 --> 01:20:12.655 Now, of course, this will definitely not be the case when it comes to your real apps. 01:20:12.655 --> 01:20:19.198 You're going to be using some kind of framework, something that will make your app behave like a real app. 01:20:19.198 --> 01:20:21.597 Here we just have a very, very plain app. 01:20:21.597 --> 01:20:23.910 Package manager non-detected. 01:20:23.920 --> 01:20:25.105 Oh, none of this. 01:20:25.105 --> 01:20:29.446 And of course, when you're going to be building your app, you're going to be having all this as well. 01:20:29.446 --> 01:20:30.765 Available scripts. 01:20:30.765 --> 01:20:36.230 No NPM scripts exist because there's no package manager, because there's no manager, because there's no package.json. 01:20:36.240 --> 01:20:40.308 Current documented run command, we just have this very, very basic. 01:20:40.308 --> 01:20:43.388 Definitely not the case when it comes to production apps. 01:20:43.388 --> 01:20:45.637 OpenAI local env run command. 01:20:45.637 --> 01:20:48.769 So, we have this relevant install dependency. 01:20:48.769 --> 01:20:51.978 So, we do have some basic node built-ins. 01:20:51.978 --> 01:20:55.382 All of these OpenAI calls native fetch, okay? 01:20:55.382 --> 01:20:56.581 So, it's native. 01:20:56.581 --> 01:21:00.766 It's not using the OpenAI SDK, which would have been a dependency. 01:21:00.766 --> 01:21:03.708 Can the task be completed without adding a package? 01:21:03.708 --> 01:21:10.870 Yes, for the current OpenAI API stack and local serving, the project already calls OpenAI via native fetch. 01:21:10.880 --> 01:21:14.816 If a new package is recommended, no package is recommended right now. 01:21:14.816 --> 01:21:26.551 A package could be recommended later if we use Express, Fastify, we start using the official SDK, .env files likely to change if proceeding, right? 01:21:26.551 --> 01:21:30.738 API behavior, OpenAI calls, front end, etc., etc. 01:21:30.738 --> 01:21:35.230 And so, dependencies are important, and you want to limit your dependencies. 01:21:35.240 --> 01:21:39.204 You don't want the system to just add dependencies blindly. 01:21:39.204 --> 01:21:44.724 And so, this is going to be super useful as you're building your app so that you can streamline it. 01:21:44.724 --> 01:21:52.103 Because as I was just building this simple app, Codex asked me whether I want to use OpenAI SDK or native fetch. 01:21:52.103 --> 01:21:55.353 And you always want to err on the side of native stuff. 01:21:55.353 --> 01:21:59.595 If you can avoid a dependency or an SDK, that would be the right move. 01:21:59.595 --> 01:22:01.237 And that's exactly what I did here. 01:22:01.237 --> 01:22:02.524 I just used native, right? 01:22:02.524 --> 01:22:06.564 I could have used an SDK, but I decided I'm just going to keep it as simple as possible. 01:22:06.564 --> 01:22:08.414 And that's really the goal here. 01:22:08.414 --> 01:22:21.252 And this prompt and making this part of your workflow is going to enable you to keep your app streamlined so that you have less dependencies, less chance for something to go wrong, less bloat, etc., etc. 01:22:21.252 --> 01:22:24.959 So, definitely add this to your app building workflow. 01:22:24.959 --> 01:22:34.910 And then ensure that Codex knows about it by making this a part of your agent's MD or a separate step. 01:22:34.920 --> 01:22:40.881 Now that the Cortex foundation is clear, we are going to start with something intentionally small. 01:22:40.881 --> 01:22:43.988 The first step is called Habit Card. 01:22:43.988 --> 01:22:53.385 And it is a tiny habit tracker where users can add habits, check them off for the day, and see a simple streak or count. 01:22:53.385 --> 01:23:02.950 This is a great starter project because the result is visual, easy to check, and small enough that every step stays clear. 01:23:02.960 --> 01:23:18.423 Cortex can plan the app, build the UI, show us the file changes, open the browser, polish the result, and get the front end ready to deploy without also introducing back end complexity. 01:23:18.423 --> 01:23:24.710 Habit Card gives us the core app building pieces without much product complexity. 01:23:24.720 --> 01:23:33.453 A form, a list, a daily check-in state, simple feedback, and later local storage persistence. 01:23:33.453 --> 01:23:40.169 It does not need authentication, payments, APIs, or a real database at first. 01:23:40.169 --> 01:23:48.022 This first app is about getting comfortable with the full Cortex loop on something we can understand immediately. 01:23:48.022 --> 01:23:57.982 Now, here in Cortex, the first thing that you want to do is you want to click here, and you can select start from scratch, but I like to have it set to a specific folder. 01:23:57.982 --> 01:24:03.780 So, I'm going to click on use an existing folder, and I have here a folder prepared called demos. 01:24:03.780 --> 01:24:11.710 I'm going to open this here, and now we have a new project that has been associated with a specific folder. 01:24:11.720 --> 01:24:16.962 And here we can start a brand new And here we can start a brand new conversation for the app that we are building. 01:24:16.962 --> 01:24:23.381 Now, anytime I start building a brand new app, I always want to create a visual architecture. 01:24:23.381 --> 01:24:32.605 Being a visual person, this gives me an understanding of the scope of an app, how the app looks, the user flow, and stuff like that. 01:24:32.605 --> 01:24:38.400 And we can actually use Codex to create that visual architecture for us. 01:24:38.400 --> 01:24:52.192 Now, I have here a prepared prompt that creates this visual architecture, and we want to ensure that we use the built-in image generation that we have as well as Chat GPT to do it. 01:24:52.192 --> 01:24:56.811 So, I'm going to press forward slash, and I'm going to search for Imagen. 01:24:56.811 --> 01:25:01.321 Okay, and then we can say something like use Imagen for the following. 01:25:01.321 --> 01:25:05.936 And I'm going to go jump into plan mode, and I'm going to go ahead and and execute it. 01:25:05.936 --> 01:25:15.285 Okay, and it came back with a habit card architecture diagram, and here it says create one raster infographic using this. 01:25:15.285 --> 01:25:16.444 So, everything looks good. 01:25:16.444 --> 01:25:19.470 There there's some diagram content, visual direction. 01:25:19.480 --> 01:25:21.272 That's a wide composition. 01:25:21.272 --> 01:25:22.030 Looks good. 01:25:22.040 --> 01:25:24.270 We're going to say yes, implement this. 01:25:24.280 --> 01:25:26.162 Okay, and that is our habit card. 01:25:26.162 --> 01:25:28.314 That is our visual interface. 01:25:28.314 --> 01:25:32.382 And right away, I can see what this app is all about, right? 01:25:32.382 --> 01:25:39.086 We have add habit, we have habit list, we have today check-in, and we have a streak count. 01:25:39.086 --> 01:25:44.350 Then we have an empty state, we have local storage later, and we have the Versel deploy. 01:25:44.360 --> 01:25:52.045 And so, this is a very, very simplified visual architecture, but it is very, very important. 01:25:52.045 --> 01:26:01.184 I want to see right away what I'm dealing with, what I'm working with, how many pages, you know, how complex is the app, how simple is the app. 01:26:01.184 --> 01:26:04.756 I see that this is not going to be, you know, a very complex app. 01:26:04.756 --> 01:26:10.190 It's going to be a fairly simple app, but we do have some interesting bits here, right? 01:26:10.200 --> 01:26:14.954 This empty state, we have some local storage, we have a Versel deploy. 01:26:14.954 --> 01:26:19.102 And so, it's a fairly simple app, but still a fairly workable app. 01:26:19.102 --> 01:26:22.777 Now, the next thing that I like to do is create the entity architecture. 01:26:22.777 --> 01:26:28.305 And this is where we're going to be mapping the small set of entities behind the app. 01:26:28.305 --> 01:26:41.540 So, even though the first version is front end only, it is useful to name the habit, the daily check-in, and the streak count summary before we add a local storage later. 01:26:41.540 --> 01:26:44.278 And this right here is the entity diagram. 01:26:44.278 --> 01:26:47.925 And I'm just going to say use ImageGen for below. 01:26:47.925 --> 01:26:50.037 Going to go ahead and run that. 01:26:50.037 --> 01:26:51.870 And I can run it directly. 01:26:51.880 --> 01:26:56.687 I don't really need to run it in plan mode because it's just generating a diagram. 01:26:56.687 --> 01:27:05.737 I'm not asking it a complex, ambiguous coding question or giving it a an ambiguous coding instruction. 01:27:05.737 --> 01:27:08.258 And here is our entity architecture. 01:27:08.258 --> 01:27:18.270 And unlike the visual architecture that we've generated previously, here we're actually seeing the entities that will later become the actual storage schema. 01:27:18.280 --> 01:27:18.608 Okay? 01:27:18.608 --> 01:27:26.650 So, we have the habit, we have a habit check-in, we have a streak summary, and then local storage as the back end. 01:27:26.650 --> 01:27:30.393 So, no back end, everything is stored locally with local storage. 01:27:30.393 --> 01:27:39.005 And this is also very, very useful because unlike the visual diagram here, I want to see the actual schema. 01:27:39.005 --> 01:27:48.894 I want to see what kind of, you know, elements or what kind of, you know, tables we might need to translate this app schema into. 01:27:48.894 --> 01:27:51.590 And as you can see, this is fairly simple. 01:27:51.600 --> 01:27:54.430 Habit, habit check-in, streak summary. 01:27:54.440 --> 01:28:01.398 We have these three main functions here, these three main features that were translated into entities. 01:28:01.398 --> 01:28:01.733 Okay? 01:28:01.733 --> 01:28:08.133 And then we have And for each entity, we have things like name, created at date, completed count. 01:28:08.133 --> 01:28:13.430 Now, at this point, we have both the visual architecture as well as the entity architecture. 01:28:13.430 --> 01:28:21.907 And this is something that I like to do for pretty much every single app that I build because I want to get an idea what I'm really dealing with, right? 01:28:21.907 --> 01:28:26.383 I want to have an understanding of the the scope of the app. 01:28:26.383 --> 01:28:29.138 And right now I can see exactly where we are. 01:28:29.138 --> 01:28:31.547 I can see that this is a fairly simple app. 01:28:31.547 --> 01:28:33.324 I can see the entities. 01:28:33.324 --> 01:28:35.460 I I I see the app building. 01:28:35.460 --> 01:28:37.014 I see the future of the app. 01:28:37.014 --> 01:28:38.628 I see the app coming together. 01:28:38.628 --> 01:28:48.790 Now, the next thing that we want to do is we want to use the plan mode to ask Codex what stack makes sense for this first app. 01:28:48.800 --> 01:28:55.490 The important part is that Codex should recommend the simplest path before it edits any files. 01:28:55.490 --> 01:28:59.271 And as you might have guessed, we are going to be doing this in plan mode. 01:28:59.271 --> 01:28:59.787 All right? 01:28:59.787 --> 01:29:01.988 And here's the prompt that we're going to be using. 01:29:01.988 --> 01:29:03.435 Do not edit files yet. 01:29:03.435 --> 01:29:09.123 Inspect the current project and recommend the simplest stack for Habit Card, right? 01:29:09.123 --> 01:29:23.443 And we ask it what what it should come back with, and we're going to press shift tab to enable the plan mode, of course, because we want it to come back to us if it needs to and ask any clarifying questions. 01:29:23.443 --> 01:29:29.110 We need it to clarify everything before we go deeper into the building the app. 01:29:29.120 --> 01:29:30.992 Okay, I'm going to go ahead and execute this. 01:29:30.992 --> 01:29:33.372 And let's see what it comes back with. 01:29:33.372 --> 01:29:38.230 And in this case, it did not come back with any clarifying questions. 01:29:38.240 --> 01:29:38.639 Okay? 01:29:38.639 --> 01:29:40.552 So, it's writing a plan. 01:29:40.552 --> 01:29:45.017 And the recommended front end stack is going to be React TypeScript, right? 01:29:45.017 --> 01:29:49.396 It wants to use Tailwind CSS for fast simple styling. 01:29:49.396 --> 01:29:51.481 This is the testing library. 01:29:51.481 --> 01:29:52.739 No React Router. 01:29:52.739 --> 01:29:55.317 It's a simple single screen app. 01:29:55.317 --> 01:29:57.230 No global state library. 01:29:57.240 --> 01:29:57.612 Okay? 01:29:57.612 --> 01:29:58.949 Back end decision. 01:29:58.949 --> 01:30:01.652 No back end is needed for the first version, right? 01:30:01.652 --> 01:30:03.187 And that's what we told it. 01:30:03.187 --> 01:30:06.663 We said bias toward a front end only implementation first. 01:30:06.663 --> 01:30:09.635 And then it's also going to use browser verification. 01:30:09.635 --> 01:30:12.423 Okay, open the app in the browser, verify all this. 01:30:12.423 --> 01:30:15.176 Okay, so let's go ahead and and run this. 01:30:15.176 --> 01:30:23.830 All right, so it worked for about 10 minutes and it has implemented the habit card as a front-end only React TypeScript app. 01:30:23.840 --> 01:30:25.652 This is where it is and this is what it did, right? 01:30:25.652 --> 01:30:27.207 It built the app shell and did, right? 01:30:27.207 --> 01:30:35.795 It built the app shell and UI, habit logic, local storage, components for adding form for the add form, list card, and empty state. 01:30:35.795 --> 01:30:42.957 Tests for app flow logic and storage, and verification passed nine tests, production build succeeded. 01:30:42.957 --> 01:30:47.331 And it also gave us a dev server that is running the app. 01:30:47.331 --> 01:30:56.159 And so this dev server is running on my machine right now and this allows us to quickly test things without needing to deploy and test there. 01:30:56.159 --> 01:31:09.161 And on the right-hand side we have this card that is always available and it shows us things like artifacts, background terminal, and basically things that were created as part of this conversation. 01:31:09.161 --> 01:31:13.753 Okay, so we have the images that were generated, we have the index.html for the app. 01:31:13.753 --> 01:31:16.821 We have the background terminal that is running here. 01:31:16.821 --> 01:31:23.003 And so I can click here and that's going to go ahead and and go to the server that's running our app. 01:31:23.003 --> 01:31:23.927 So let's do that. 01:31:23.927 --> 01:31:25.316 That's going to go ahead and open. 01:31:25.316 --> 01:31:29.320 It's also going to open the browser right here in the right-hand pane. 01:31:29.320 --> 01:31:35.352 Now, before we had we had no right-hand pane, but if you click here, you can see that it opens up here right there. 01:31:35.352 --> 01:31:38.416 Another thing that you can do is you can open the browser directly. 01:31:38.416 --> 01:31:42.282 This is the front page here and I can add a habit, habit one. 01:31:42.282 --> 01:31:44.900 I can click here and we have a habit here. 01:31:44.900 --> 01:31:46.299 I can add another we have a habit here. 01:31:46.299 --> 01:31:49.039 I can add another habit, habit two or maybe gym. 01:31:49.039 --> 01:31:51.682 And it's creating these these habits here. 01:31:51.682 --> 01:31:54.038 So I can check it off and that is done. 01:31:54.038 --> 01:31:54.835 Check it off. 01:31:54.835 --> 01:31:57.082 And so it's a very very simple app. 01:31:57.082 --> 01:32:05.420 And if you want to see the actual files that were created as part of this, you can simply right click here and open in finder. 01:32:05.420 --> 01:32:08.653 And this is the React app that was created for this here. 01:32:08.653 --> 01:32:13.981 Once the UI works, we'll add a small persistence step with local storage. 01:32:13.981 --> 01:32:18.025 Habits and today's check-ins can persist after refresh. 01:32:18.025 --> 01:32:23.851 So, the app starts to feel real without introducing a backend yet. 01:32:23.851 --> 01:32:26.038 And this is the prompt that we're going to be using. 01:32:26.038 --> 01:32:31.120 Upgrade habit card so habits and today's check-ins persist with local storage. 01:32:31.120 --> 01:32:35.030 I'm going to jump into the plan mode here just in case. 01:32:35.040 --> 01:32:36.790 And I'm going to go ahead and run this. 01:32:36.800 --> 01:32:45.305 Now, it's actually telling us that inspection shows that habit card already implements the requested front-end only local storage persistence. 01:32:45.305 --> 01:32:45.726 Okay? 01:32:45.726 --> 01:32:48.350 So, no file edits are needed for this upgrade. 01:32:48.360 --> 01:32:52.129 So, we must have done this in one of the previous prompts. 01:32:52.129 --> 01:32:55.750 But, if we hadn't done this, then we would run this prompt. 01:32:55.760 --> 01:32:57.230 But, still, let's go ahead and run it. 01:32:57.240 --> 01:33:05.270 And now it tells us that persistence works through this storage using these keys and a lot of other details here. 01:33:05.280 --> 01:33:05.811 Okay? 01:33:05.811 --> 01:33:10.587 So, we can reload this and now we have something called local storage. 01:33:10.587 --> 01:33:17.734 And what this means is that this app does not have a backend, but this stuff is going to be stored on my browser. 01:33:17.734 --> 01:33:18.168 Okay? 01:33:18.168 --> 01:33:22.437 So, if I'm using this instance, it's going to be stored on this browser. 01:33:22.437 --> 01:33:26.189 If I run it in a different browser, then it's not going to have the data. 01:33:26.189 --> 01:33:30.483 So, whatever I do in that new browser is going to have fresh data. 01:33:30.483 --> 01:33:35.894 And so, this is a way to create, you know, storage just for testing me. 01:33:35.894 --> 01:33:41.036 I mean, you can use this in production as well for certain apps, for certain situations. 01:33:41.036 --> 01:33:48.357 It does have its place, but it's very, very limiting compared to something like Supabase or something of that sort. 01:33:48.357 --> 01:33:53.019 And so, we can delete all this, we can do all that, we can start. 01:33:53.019 --> 01:34:09.630 And if I copy this, run this app, and I load this app, there's nothing there because I'm using a brand new browser instance, and I can create, I can do, I can check off, I can do this, I can do all that, but if I go back to CodeX, there's nothing here, 01:34:09.640 --> 01:34:10.005 right? 01:34:10.005 --> 01:34:23.345 It's not syncing, it's not using my account, and it's not using a unified back-end, so that no matter which browser I use, it will still store the data and keep track of everything. 01:34:23.345 --> 01:34:24.721 That is not happening. 01:34:24.721 --> 01:34:28.369 Once the app works locally, it's time to deploy it. 01:34:28.369 --> 01:34:37.811 Even though Habit Card is simple, this is the first moment where CodeX helps move something from local code to a real-life URL. 01:34:37.811 --> 01:34:41.106 And so, CodeX can do the whole deployment process. 01:34:41.106 --> 01:34:52.542 It can run the local checks, prepare the projects, connect or create the Vercel project, deploy the front-end, and then verify that the live page actually loads. 01:34:52.542 --> 01:34:56.905 And additionally, you want that first deployment to feel very concrete. 01:34:56.905 --> 01:35:00.350 We're not just writing code and hoping it works. 01:35:00.360 --> 01:35:09.530 We're taking a small app, shipping it, opening the deployed URL, and checking the result like we would with a real project. 01:35:09.530 --> 01:35:12.815 And here is my Vercel deployment prompt. 01:35:12.815 --> 01:35:20.132 Prepare Habit Card for deployment on Vercel, and verify it works as a small front-end only app. 01:35:20.132 --> 01:35:23.696 So, at this point, we are just preparing it for deployment. 01:35:23.696 --> 01:35:34.570 We're not yet deploying it, but still, this is an important step because this will ensure that once we do deploy it, that it will work without any issues. 01:35:34.570 --> 01:35:44.590 I'm going to go jump into the plan mode, and remember, we do have that Vercel plugin enabled, and so it should use it automatically with no issues. 01:35:44.600 --> 01:35:46.350 I'm going to go ahead and execute this. 01:35:46.360 --> 01:35:49.983 All right, so it went ahead and created a Vercel deployment plan. 01:35:49.983 --> 01:35:55.916 Okay, Habit Card is already a suitable for a front-end only for sale deployment, okay? 01:35:55.916 --> 01:36:00.334 And this is what it's going to do, and here is the deployment implementation. 01:36:00.334 --> 01:36:10.230 Keep the app front-end only, do not add Convex, which is a back-end APIs or database server functions, or external services, none of functions, or external services, none of that. 01:36:10.240 --> 01:36:16.755 And local storage persistence is expected to be local to each browser and deployment origin. 01:36:16.755 --> 01:36:20.067 Data will not sync across devices or URLs, okay? 01:36:20.067 --> 01:36:22.969 Let's go ahead and implement this plan. 01:36:22.969 --> 01:36:29.180 And 3 minutes later, it tells us that deployed Habit Card to Vercel and verified it live, okay? 01:36:29.180 --> 01:36:31.226 So, this is the live URL. 01:36:31.226 --> 01:36:38.011 We can click here, and that's going to open our Habit Card app running on the web, right? 01:36:38.011 --> 01:36:39.495 Accessible to everybody. 01:36:39.495 --> 01:36:42.572 And this again uses local storage, okay? 01:36:42.572 --> 01:36:50.208 So, we can do that over here, and of course, you know, it's not going to be available in another instance because it's all stored locally. 01:36:50.208 --> 01:37:05.769 And so, at this point, we designed, architected, built, tested, and then deployed a very, very simple web app that uses local storage as our back-end, and this proved the whole cycle for us. 01:37:05.769 --> 01:37:25.350 Now, in the next several modules, we're going to be doing the same, but with more complex apps, slowly adding things like authentication, back-end, and other important components that you need for a real production app. 01:37:25.360 --> 01:37:33.938 The second app we'll be building will be a mini team voting app where people submit lunch or snack ideas and vote on the winner. 01:37:33.938 --> 01:37:38.903 It's a bit more complex with more features, but still fairly simple overall. 01:37:38.903 --> 01:37:48.550 Snack Vote has a submit option form, a snack option list, vote buttons, a live leaderboard, and a winner card. 01:37:48.560 --> 01:37:55.749 This app will serve as a bridge between a simple front end and the larger marketplace app we'll build right after this. 01:37:55.749 --> 01:38:06.471 Instead of jumping straight into complex entities such as customers, bookings, and permissions, we can first learn the back end pattern on a much smaller app. 01:38:06.471 --> 01:38:10.409 Snack Vote only needs snack options and votes. 01:38:10.409 --> 01:38:17.379 Someone can submit an option, other people can vote, and the leaderboard updates as the vote counts change. 01:38:17.379 --> 01:38:25.168 That gives us enough structure to understand live back end data without making the product itself hard to follow. 01:38:25.168 --> 01:38:30.628 As always, in this first step, we'll be mapping the Snack Vote interface visually. 01:38:30.628 --> 01:38:34.350 The app should be simple enough to understand immediately. 01:38:34.360 --> 01:38:45.446 Create or join a voting room, submit a snack option, vote once, watch the leaderboard update, and see a leaderboard update, and see a deadline-driven winner state. 01:38:45.446 --> 01:38:51.588 Now, here in Codex, we're going to come here, and we're going to create a new project from an existing folder. 01:38:51.588 --> 01:38:52.950 We're going to click over here. 01:38:52.960 --> 01:38:54.904 Here, we're going to create a new folder. 01:38:54.904 --> 01:38:58.476 I'm going to type Snack Vote, and we're going to click open. 01:38:58.476 --> 01:39:02.802 And now, we have a brand new project configured here in Codex. 01:39:02.802 --> 01:39:06.089 And here's our prompt for the visual architecture. 01:39:06.089 --> 01:39:12.249 We want to preface that we want to use this image, and we're going to jump into plan mode and execute this. 01:39:12.249 --> 01:39:13.390 And that looks good. 01:39:13.400 --> 01:39:15.150 We're going to go ahead and expand that. 01:39:15.160 --> 01:39:16.656 Go ahead and implement that. 01:39:16.656 --> 01:39:19.704 And here's our Snack Vote visual architecture. 01:39:19.704 --> 01:39:21.679 Look at this beautiful diagram. 01:39:21.679 --> 01:39:24.081 So, you can create or join a room. 01:39:24.081 --> 01:39:29.150 In the current room, you're going to be seeing this, members and the time left. 01:39:29.150 --> 01:39:31.494 You can You have here a snack list. 01:39:31.494 --> 01:39:34.230 You have your your voting buttons. 01:39:34.240 --> 01:39:38.782 You have a live leaderboard, and you have a closed winner state. 01:39:38.782 --> 01:39:46.714 Okay, with some voting deadlines here, here as well, and then we also have our Vercel deploy. 01:39:46.714 --> 01:39:54.110 And so this looks like a fairly fun app with a lot of things going on, and so I can't wait to implement this. 01:39:54.120 --> 01:39:57.924 And we're also going to be adding more and more features as we go along. 01:39:57.924 --> 01:40:04.070 Next, I want to go ahead and create an entity diagram, an entity architecture diagram. 01:40:04.080 --> 01:40:05.334 So here's our prompt. 01:40:05.334 --> 01:40:09.213 We're going to do this, and we're going to go ahead and execute that. 01:40:09.213 --> 01:40:11.158 And here's our entity diagram. 01:40:11.158 --> 01:40:17.073 Okay, so a room contains multiple snack options and has one voting session, right? 01:40:17.073 --> 01:40:21.623 We have the voting room, many snack options, and many votes, right? 01:40:21.623 --> 01:40:31.514 We have We have here some winner logic, the winner logic snack option with the highest vote count when now is greater than or equal to closes at, right? 01:40:31.514 --> 01:40:39.030 So after the deadline, we have here a legend, and here we have a sample kind of workflow, a pipeline. 01:40:39.040 --> 01:40:41.709 Build the UI first, connect it to Convex. 01:40:41.709 --> 01:40:52.364 Later, Convex is going to be our backend, and we are going to be leveraging things like real-time updates, persistence, and live vote counts. 01:40:52.364 --> 01:41:07.550 And so now that we've generated a visual architecture diagram, as well as our entity diagram, the next thing that we want to do is we want to ask Codex for some stack recommendations, because there are lots of ways that we 01:41:07.560 --> 01:41:12.885 can build out this app, and we want Codex to tell us the best options for this specific app. 01:41:12.885 --> 01:41:17.723 Here's the prompt that we're going to be using, and I'm going to switch into plan mode here. 01:41:17.723 --> 01:41:25.466 And it's telling us do not edit files yet, inspect the current project, and recommend the simplest stack for Snack Poll. 01:41:25.466 --> 01:41:27.504 And here's the plan that it came back with. 01:41:27.504 --> 01:41:29.396 Here we have the stack recommendation. 01:41:29.396 --> 01:41:32.955 We're going to be using React, TypeScript, Tailwind. 01:41:32.955 --> 01:41:39.317 And here it says backend later Convex with TypeScript server functions and generated client types. 01:41:39.317 --> 01:41:55.830 And so, for the most part, uh this is very, very similar, if not the exact same architecture stack that we use for the first app, except we're going to be adding more and more features, and also connecting a back end for the first time 01:41:55.840 --> 01:41:57.088 in this tutorial. 01:41:57.088 --> 01:42:06.250 Now, here, instead of clicking submit, I'm going to give it another prompt, and this prompt is going to start building the app, writing the code. 01:42:06.250 --> 01:42:14.308 And here's the prompt, "Implement the first working Snack Vote UI without a database or persistence, okay? 01:42:14.308 --> 01:42:23.030 Inspect the current project first, then build the smallest useful Snack Vote UI." And there's some verification steps as well. 01:42:23.040 --> 01:42:32.002 And we also explicitly tell it to not use convex, local storage, or an API, nothing of that, just keep it to these specs right here. 01:42:32.002 --> 01:42:33.963 And we also have some verification. 01:42:33.963 --> 01:42:38.724 So, I'm going to go ahead and run this in plan mode, in case it wants to ask me something. 01:42:38.724 --> 01:42:50.131 So, it doesn't have any questions for us, and that is because in this specific conversation, we already fleshed out, you know, things like the architecture, the stack, and all of that stuff. 01:42:50.131 --> 01:42:54.142 And so, it kind of knows what it needs to do to build out this app. 01:42:54.142 --> 01:43:00.100 So, we're going to say, "Yes, implement this." because this is the step where we actually want the code written. 01:43:00.100 --> 01:43:07.860 All right, so this has completed, and it says here, "Implemented the first working UI-only Snack Vote app here. 01:43:07.860 --> 01:43:09.748 Created all of this. 01:43:09.748 --> 01:43:10.954 What works? 01:43:10.954 --> 01:43:12.995 Verification completed. 01:43:12.995 --> 01:43:15.070 Still needs attention later." 01:43:15.080 --> 01:43:18.617 Okay, all of these things, and we'll talk about that a little bit later. 01:43:18.617 --> 01:43:20.792 And so, now we have a web preview. 01:43:20.792 --> 01:43:27.300 So, we can click on open, and that's going to go ahead and open it right here in our built-in browser here. 01:43:27.300 --> 01:43:28.993 This is our app right here. 01:43:28.993 --> 01:43:31.508 And so, we have snack and lunch options. 01:43:31.508 --> 01:43:41.790 We can create, we can submit an option, add sample snacks, click here, and we have these snack options here with some votes here. 01:43:41.800 --> 01:43:43.179 Leaderboard, right? 01:43:43.179 --> 01:43:44.630 So, this is winning. 01:43:44.640 --> 01:43:48.471 Winner state, current winner leader, spicy ramen bowls. 01:43:48.471 --> 01:43:52.717 And so, if I vote on falafel wraps, uh wraps, six. 01:43:52.717 --> 01:43:53.246 Right? 01:43:53.246 --> 01:43:54.526 So, now it's six. 01:43:54.526 --> 01:43:55.918 I can keep voting. 01:43:55.918 --> 01:43:59.754 And that's a problem right away, and it's in memory. 01:43:59.754 --> 01:44:03.474 And one person can vote multiple times, which is an issue. 01:44:03.474 --> 01:44:07.815 We're going to fix that a little bit later, but I can also add a snack. 01:44:07.815 --> 01:44:09.335 Let's say sushi. 01:44:09.335 --> 01:44:10.617 I don't know, sushi. 01:44:10.617 --> 01:44:14.017 Add this, and we have sushi, and I can also vote on that. 01:44:14.017 --> 01:44:19.630 So, it's a big big issue, but for the most part, the logic works, the UI works. 01:44:19.640 --> 01:44:25.946 Now, once the snack vote UI exists, we're going to replace the mock snack data with real Convex data. 01:44:25.946 --> 01:44:33.424 And for those of you that that are not familiar, Convex is a back end that we're going to be using in this tutorial. 01:44:33.424 --> 01:44:35.807 It's an awesome back end, super fast. 01:44:35.807 --> 01:44:42.670 And if you want to learn more information, I actually did a dedicated video on it that you can find right there. 01:44:42.680 --> 01:44:52.392 And so, once we add Convex, our app will stop being a static interface and start behaving like a real database back product. 01:44:52.392 --> 01:44:54.523 And the path is very very simple. 01:44:54.523 --> 01:45:07.322 Code X creates the Convex schema, adds a query, adds mutations, connects it to the UI, and then we verify the result in both the browser and the Convex dashboard. 01:45:07.322 --> 01:45:12.660 And so, when we submit an option in the app, it should be written back to Convex. 01:45:12.660 --> 01:45:17.870 When we look inside the Convex dashboard, that snack option should be there. 01:45:17.870 --> 01:45:30.110 And when someone votes, the UI should update live so that we can see the front end and back end working together instead of treating the back end like a black box. 01:45:30.120 --> 01:45:34.470 And when you head over to convex.dev, you can learn more about this back end. 01:45:34.480 --> 01:45:36.470 And this is a great, great back end. 01:45:36.480 --> 01:45:41.464 It's very, very fast, and it works really great with agents, right? 01:45:41.464 --> 01:45:44.386 So, the back end building blocks for your agents, okay? 01:45:44.386 --> 01:45:47.438 So, I'm going to go ahead and log in to my free account. 01:45:47.438 --> 01:45:48.766 I'm using the free plan. 01:45:48.766 --> 01:45:50.233 I'm not paying for anything. 01:45:50.233 --> 01:45:54.006 And this is also an open-source back end, so you can also self-host it if you want. 01:45:54.006 --> 01:45:55.576 So, I'm going to go ahead and log in. 01:45:55.576 --> 01:45:57.057 All right, so here I am logged in. 01:45:57.057 --> 01:45:59.859 And as you can see, I have here two projects. 01:45:59.859 --> 01:46:06.887 Now, our app is going to automatically create a brand new project for its data, for its functions, for everything. 01:46:06.887 --> 01:46:12.030 And here back in Codex, we're going to paste a new prompt that looks something like this. 01:46:12.040 --> 01:46:19.835 Upgrade Snack Votes to Snack Options, and Votes are stored in Convex instead of local in-memory state. 01:46:19.835 --> 01:46:26.473 Now, if I press command, comma, and go to MCP Servers, you can see that I do not have the Convex MCP server. 01:46:26.473 --> 01:46:30.296 And that is because we're not going to be connecting to Convex via MCP. 01:46:30.296 --> 01:46:39.310 We're actually going to be connecting to it using a much simpler method, and that is the CLI, which stands for command line interface. 01:46:39.320 --> 01:46:45.634 And actually, before I run this prompt, we're going to check to make sure that we have a connection. 01:46:45.634 --> 01:46:54.550 Can you first check that we have the Convex CLI installed, and if not, do install it. 01:46:54.560 --> 01:46:55.905 I'm going to go ahead and run it. 01:46:55.905 --> 01:47:01.630 Now, I already have Convex CLI installed, but you can just tell Codex to install it. 01:47:01.640 --> 01:47:02.410 It's that easy. 01:47:02.410 --> 01:47:11.707 And so, it's telling me that NPX, which is a package manager, could fetch Convex temporarily, but the project does not have it installed. 01:47:11.707 --> 01:47:16.903 I'm installing Convex into the project now as a dev dependency, okay? 01:47:16.903 --> 01:47:19.144 Convex is installed locally now, okay? 01:47:19.144 --> 01:47:20.884 I'll verify the CLI results. 01:47:20.884 --> 01:47:26.861 And so, you don't need to read lots and lots of documentation, figure out how to connect to it. 01:47:26.861 --> 01:47:29.409 You just tell Codex that you want to connect to it. 01:47:29.409 --> 01:47:30.431 It's that easy. 01:47:30.431 --> 01:47:34.070 So, Convex CLI is installed locally in the project now. 01:47:34.080 --> 01:47:36.590 Okay, so now we can paste the prompt. 01:47:36.600 --> 01:47:42.531 Upgrade snack votes so snack options and votes are stored in Convex instead of local in-memory state. 01:47:42.531 --> 01:47:46.323 So, I'm going to go ahead and do this and let's go into plan mode. 01:47:46.323 --> 01:47:49.757 See if it wants to ask me something or clarify something. 01:47:49.757 --> 01:47:53.095 And so, it's telling me one material set of choices to open. 01:47:53.095 --> 01:47:55.304 There's no existing Convex folder. 01:47:55.304 --> 01:47:58.859 So, this app is not linked to a Convex deployment yet. 01:47:58.859 --> 01:47:59.676 And that is correct. 01:47:59.676 --> 01:48:01.342 And that's what we want to do next. 01:48:01.342 --> 01:48:07.902 And now it's asking me which Convex backend should snack vote use for this first backed version. 01:48:07.902 --> 01:48:09.745 We want to create a new one, right? 01:48:09.745 --> 01:48:12.459 So, we're going to go with the recommended option. 01:48:12.459 --> 01:48:20.634 All right, and now we have a new plan to upgrade the existing app from in-memory snack options to live Convex data. 01:48:20.634 --> 01:48:21.110 Okay? 01:48:21.120 --> 01:48:29.574 So, it's going to do everything and it's going to essentially configure the backend to be Convex, set up the schema, set up the data, everything. 01:48:29.574 --> 01:48:36.175 And once it's done, we should be able to go to Convex and see a brand new project here automatically created. 01:48:36.175 --> 01:48:37.849 So, I'm going to hit submit here. 01:48:37.849 --> 01:48:45.354 All right, so it says it has created a fresh cloud project and synced the backend function successfully. 01:48:45.354 --> 01:48:49.916 And now you see this cursor, it's testing out the UI. 01:48:49.916 --> 01:48:53.354 And so, right now it's not running, so it should start it out. 01:48:53.354 --> 01:48:58.710 And here it says the existing browser tab was sitting on the browser error, so it has restarted it. 01:48:58.720 --> 01:49:03.879 And if we jump into Convex, you can see that we have a new project created. 01:49:03.879 --> 01:49:08.756 Now, I did authenticate this account with Codex, so it knows that this is my account. 01:49:08.756 --> 01:49:13.144 And so, if we click over here, we should see some initial stuff happening, right? 01:49:13.144 --> 01:49:16.430 There's some data, functions, and it's not done yet, right? 01:49:16.440 --> 01:49:17.816 It's still working. 01:49:17.816 --> 01:49:21.470 And while it's working, we can see what has been done. 01:49:21.480 --> 01:49:22.848 And it's actually typing it. 01:49:22.848 --> 01:49:23.609 Look at that. 01:49:23.609 --> 01:49:24.919 Key press input. 01:49:24.919 --> 01:49:26.310 It's creating it. 01:49:26.320 --> 01:49:27.646 It's testing it right here. 01:49:27.646 --> 01:49:29.408 You can actually see it happening. 01:49:29.408 --> 01:49:33.788 This snack was submitted through the browser and appeared from Convex. 01:49:33.788 --> 01:49:35.430 I'm voting on it. 01:49:35.440 --> 01:49:38.650 There is this testing all the flows, which is pretty cool. 01:49:38.650 --> 01:49:50.884 All right, now it's telling us implemented the Convex back snack vote upgrade, changed all of this, what changed, verification, edge cases handled, and it is running. 01:49:50.884 --> 01:49:52.802 So, we can test it out ourselves. 01:49:52.802 --> 01:49:54.713 And so, here's the app. 01:49:54.713 --> 01:49:57.036 And now it's Convex here's the app. 01:49:57.036 --> 01:49:57.750 And now it's Convex backed. 01:49:57.760 --> 01:50:01.692 And so, now if we head to Convex, we should see the data. 01:50:01.692 --> 01:50:05.310 So, as you can see, snack options, this has a vote of one. 01:50:05.320 --> 01:50:07.884 This is the snack tools, vote one. 01:50:07.884 --> 01:50:11.634 And if we increase the vote, it should be two, and it's automatic. 01:50:11.634 --> 01:50:13.011 It's absolutely two, and it's automatic. 01:50:13.011 --> 01:50:13.630 It's absolutely automatic. 01:50:13.640 --> 01:50:14.744 Three, it's three. 01:50:14.744 --> 01:50:16.643 It does not need to do anything. 01:50:16.643 --> 01:50:21.150 And we can create a new snack option, let's say sushi, submit. 01:50:21.160 --> 01:50:23.860 And if we come over here, we see sushi, zero votes. 01:50:23.860 --> 01:50:25.312 Now it's winning. 01:50:25.312 --> 01:50:30.561 And so, this is essentially the same app, except it's Convex backed. 01:50:30.561 --> 01:50:32.675 And we also have functions. 01:50:32.675 --> 01:50:37.767 And with Convex, you need to create functions to access your data. 01:50:37.767 --> 01:50:41.296 It's not like with other systems where it's automatic. 01:50:41.296 --> 01:50:45.870 Here you need list, you need submit, you need a vote, you need functions. 01:50:45.880 --> 01:50:52.127 And so, the snack options table or document has three functions. 01:50:52.127 --> 01:50:57.910 No files, no schedules, and there's some logs here, so that you can see things are here, so that you can see things are happening. 01:50:57.920 --> 01:51:01.079 >> Okay, so this was a fairly successful migration. 01:51:01.079 --> 01:51:06.250 We went to no back end to a Convex back end very, very quickly. 01:51:06.250 --> 01:51:12.334 Now that snack vote has real Convex data, we can make it feel more like a shared group app. 01:51:12.334 --> 01:51:21.597 Instead of one global snackboard, users can create or join a simple voting room like Friday lunch or team snacks. 01:51:21.597 --> 01:51:28.835 Each room should own its own snack options, votes, leaderboard, and winner state. 01:51:28.835 --> 01:51:36.266 This keeps the app more interesting while teaching a clean back-end concept, scoped data. 01:51:36.266 --> 01:51:41.400 We still do not need accounts, permissions, invites, or admin tools. 01:51:41.400 --> 01:51:44.230 And here's the prompt that we're going to be using. 01:51:44.240 --> 01:51:49.274 Upgrade snack vote so voting happens inside simple rooms. 01:51:49.274 --> 01:51:52.236 And I'm going to run this in a plan mode. 01:51:52.236 --> 01:51:55.070 All right, so it came back with a plan for us. 01:51:55.070 --> 01:51:58.350 This is the room-based snack vote upgrade. 01:51:58.360 --> 01:52:03.510 Upgrade the current Convex back app from one global snackboard to simple rooms. 01:52:03.520 --> 01:52:04.842 Can I expand that? 01:52:04.842 --> 01:52:06.310 Yes, implement that. 01:52:06.320 --> 01:52:10.710 Now, as it's running, I am seeing an error message here. 01:52:10.720 --> 01:52:14.430 Did you forget to run NPX Convex dev? 01:52:14.440 --> 01:52:20.378 Okay, so let's see if it's able to catch that and solve it before the next prompt. 01:52:20.378 --> 01:52:21.096 It is done. 01:52:21.096 --> 01:52:24.221 So, it has implemented room-based snack vote. 01:52:24.221 --> 01:52:29.167 This is what it changed, files, things, verification limits. 01:52:29.167 --> 01:52:30.599 Okay, very important. 01:52:30.599 --> 01:52:32.757 Limits is actually very, very useful. 01:52:32.757 --> 01:52:37.719 No auth, ownership, invites, or duplicate vote guard yet. 01:52:37.719 --> 01:52:40.168 And we'll fix some of these a little later. 01:52:40.168 --> 01:52:41.703 Room selection, room codes. 01:52:41.703 --> 01:52:43.162 Okay, so how does this work? 01:52:43.162 --> 01:52:44.667 Let's go ahead and refresh this. 01:52:44.667 --> 01:52:49.869 All right, so we can create or join a room, and there are some rooms over here. 01:52:49.869 --> 01:52:54.452 So, let's say we type Friday lunch, and so now we've switched the room. 01:52:54.452 --> 01:52:56.830 Okay, current room Friday lunch. 01:52:56.840 --> 01:52:59.228 And now we can do the same thing. 01:52:59.228 --> 01:53:01.124 We're now in in the scope. 01:53:01.124 --> 01:53:03.476 It's all about scoping now, right? 01:53:03.476 --> 01:53:08.884 And so this is a specific room, and I can say, I don't know, submit. 01:53:08.884 --> 01:53:10.867 There we have it in this room. 01:53:10.867 --> 01:53:15.250 And now if I switch a room, let's say I switch to launch ideas. 01:53:15.250 --> 01:53:16.822 So now it's brand new. 01:53:16.822 --> 01:53:18.825 There's nothing nothing there. 01:53:18.825 --> 01:53:22.008 And I can say something like I don't know, tacos. 01:53:22.008 --> 01:53:23.587 And now we have tacos here. 01:53:23.587 --> 01:53:26.517 And if we go into Codex, we should see that. 01:53:26.517 --> 01:53:30.830 So we have voting rooms here, and we have different ideas here. 01:53:30.840 --> 01:53:35.684 And now if we go into snack options, we can see that they belong to a specific room. 01:53:35.684 --> 01:53:36.710 We have the room IDs. 01:53:36.710 --> 01:53:41.730 These are the same same room that we have a bunch of different room IDs there. 01:53:41.730 --> 01:53:47.702 Probably some of them created by Codex as part of testing, like lunch ideas. 01:53:47.702 --> 01:53:49.600 Oh, no, I created lunch ideas. 01:53:49.600 --> 01:53:53.203 These ones were created by Codex, these three rooms. 01:53:53.203 --> 01:53:55.035 And we can remove them. 01:53:55.035 --> 01:53:58.020 I can select these, and we can delete these. 01:53:58.020 --> 01:54:02.940 And if we go into functions, we can see that for snack options, it's the same pre-functions. 01:54:02.940 --> 01:54:08.708 But for voting room, we have get, create, or join, bunch of other functions that we have. 01:54:08.708 --> 01:54:10.771 And And so it pretty much did everything. 01:54:10.771 --> 01:54:18.392 It created the functions, it created the schema, it even, you know, created some test data while it was testing. 01:54:18.392 --> 01:54:24.121 We'll add one simple rule that makes the voting feel like a real product. 01:54:24.121 --> 01:54:30.434 After all, a person should not be able to spam the same room with repeated votes. 01:54:30.434 --> 01:54:33.589 And that is because we still do not have real authentication. 01:54:33.589 --> 01:54:39.153 And so for this tutorial, a local or session-based voter identity is enough. 01:54:39.153 --> 01:54:42.359 And that's what we're going to be doing right now. 01:54:42.359 --> 01:54:44.069 And here's my next prompt. 01:54:44.069 --> 01:54:50.947 We're going to upgrade snack votes, so each person can only have one active vote per room. 01:54:50.947 --> 01:54:52.622 Jump into plan mode. 01:54:52.622 --> 01:54:53.427 Run that. 01:54:53.427 --> 01:54:55.027 So here's the plan. 01:54:55.027 --> 01:54:57.163 One active vote per room. 01:54:57.163 --> 01:55:00.270 Add a lightweight session-based voting rule. 01:55:00.280 --> 01:55:09.392 Each browser session gets a session ID and Convex stores one active vote per room ID and session ID, right? 01:55:09.392 --> 01:55:11.163 So, this needs to be unique. 01:55:11.163 --> 01:55:16.091 So, if I voted in that room, my session ID was used to vote. 01:55:16.091 --> 01:55:17.950 And so, this needs to be unique. 01:55:17.960 --> 01:55:22.080 So, for that room, my session can only happen twice. 01:55:22.080 --> 01:55:26.190 If there's a chance for a repeat, it's not going to count it. 01:55:26.200 --> 01:55:31.470 Yeah, I can vote in other rooms, but per session per room can only happen once. 01:55:31.480 --> 01:55:32.894 We're going to expand this. 01:55:32.894 --> 01:55:33.470 Looks good. 01:55:33.480 --> 01:55:34.672 And submit this. 01:55:34.672 --> 01:55:35.790 So, it is done. 01:55:35.800 --> 01:55:39.270 Implemented one active vote per room. 01:55:39.280 --> 01:55:40.676 Okay, change this. 01:55:40.676 --> 01:55:41.685 What changed? 01:55:41.685 --> 01:55:43.900 And it added this get my vote. 01:55:43.900 --> 01:55:45.488 Added votes with table. 01:55:45.488 --> 01:55:47.645 So, let's go ahead and try this out. 01:55:47.645 --> 01:55:48.566 Open this here. 01:55:48.566 --> 01:55:51.968 So, let's say I go to another room, friend Friday lunch. 01:55:51.968 --> 01:55:54.390 I switch that room and I have my burrito. 01:55:54.400 --> 01:55:55.866 So, I'm going to vote for this. 01:55:55.866 --> 01:55:57.956 I just voted and I can't vote again. 01:55:57.956 --> 01:55:58.763 You see that? 01:55:58.763 --> 01:56:08.953 I can't vote again because if I go to Convex and I go into data and I go into votes, I should see a session ID with room ID. 01:56:08.953 --> 01:56:14.270 So, let me go ahead and delete all of these so that we can see which one is mine. 01:56:14.280 --> 01:56:15.561 And so, now I can vote again. 01:56:15.561 --> 01:56:16.673 You see it's back up. 01:56:16.673 --> 01:56:18.507 It's it's it's uh reactive. 01:56:18.507 --> 01:56:20.430 I'm going to hit vote. 01:56:20.440 --> 01:56:24.028 And now you see room ID and session ID. 01:56:24.028 --> 01:56:28.051 These two, if they can only appear once in this table. 01:56:28.051 --> 01:56:35.604 And so, obviously now it's knows that my session ID and I'm trying to vote for this one and that's not going to work because I'm in this room. 01:56:35.604 --> 01:56:37.794 I'm in this room here, Friday lunch. 01:56:37.794 --> 01:56:39.630 Friday lunch right there. 01:56:39.640 --> 01:56:44.021 Now, if I switch rooms, let's so let's say I go to another room. 01:56:44.021 --> 01:56:46.470 Let's say I go into Sunday brunch. 01:56:46.470 --> 01:56:48.227 Now, I can vote, right? 01:56:48.227 --> 01:56:49.454 I can vote for anything. 01:56:49.454 --> 01:56:50.751 I can say tacos. 01:56:50.751 --> 01:56:51.472 Submit. 01:56:51.472 --> 01:56:53.121 I can vote here. 01:56:53.121 --> 01:56:55.036 And let's say I create another one. 01:56:55.036 --> 01:56:56.381 I I change my vote. 01:56:56.381 --> 01:57:02.602 Yes, I can switch votes, but I cannot pad, you know, with multiple votes an item. 01:57:02.602 --> 01:57:05.854 And so, if I go back here, now there are two options, right? 01:57:05.854 --> 01:57:12.179 Two different rooms, same session ID, but I cannot vote in the same room more than once. 01:57:12.179 --> 01:57:14.717 So, this works really, really nice. 01:57:14.717 --> 01:57:21.382 And finally, we'll add a deadline, so each room has a moment when voting closes. 01:57:21.382 --> 01:57:24.903 Before the deadline, people can submit and vote. 01:57:24.903 --> 01:57:31.918 After the deadline, voting locks and the app shows the winner or a simple tie state. 01:57:31.918 --> 01:57:37.308 This adds time-based product state without becoming a scheduling system. 01:57:37.308 --> 01:57:49.310 It is still a small group decision app, but now it shows how front-end UI and back-end data can derive open, closed, winner, and tie states from one field. 01:57:49.320 --> 01:57:51.583 And here's the prompt that we're going to be using. 01:57:51.583 --> 01:57:54.594 I'm going to switch into plan mode, run this. 01:57:54.594 --> 01:57:56.936 Oh, it needs a product decision. 01:57:56.936 --> 01:58:02.635 Okay, how should users set a room deadline in this small tutorial version? 01:58:02.635 --> 01:58:12.765 Quick durations, okay, add simple buttons like 1 minute, 5 minutes, 15 minutes when creating opening a room, date time input, or fixed default. 01:58:12.765 --> 01:58:14.630 Let's do quick durations. 01:58:14.640 --> 01:58:15.673 That sounds good. 01:58:15.673 --> 01:58:16.950 Let's implement this. 01:58:16.960 --> 01:58:18.228 And it is complete. 01:58:18.228 --> 01:58:20.486 Implemented simple voting deadlines. 01:58:20.486 --> 01:58:22.178 This is what was changed. 01:58:22.178 --> 01:58:28.413 Added quick deadline choices, no deadline, 1 minute, 5 minutes, 15 minutes. 01:58:28.413 --> 01:58:32.225 All of this, and let's go ahead and see how this works. 01:58:32.225 --> 01:58:33.841 All right, so here we are. 01:58:33.841 --> 01:58:39.614 And let's go ahead and create a room, Friday lunch, and let's say it's 5 minutes. 01:58:39.614 --> 01:58:41.831 Select 5 minutes, open the room. 01:58:41.831 --> 01:58:43.464 This still says no deadline. 01:58:43.464 --> 01:58:44.750 Let's try another room. 01:58:44.750 --> 01:58:46.562 Let's say Sunday brunch. 01:58:46.562 --> 01:58:48.409 I can select no deadline. 01:58:48.409 --> 01:58:49.674 I can do 15 minutes. 01:58:49.674 --> 01:58:51.333 Let's Let's 15 minutes. 01:58:51.333 --> 01:58:53.079 See, it says no deadline. 01:58:53.079 --> 01:58:54.258 Okay, that's a bug. 01:58:54.258 --> 01:58:55.620 That's definitely a bug. 01:58:55.620 --> 01:58:57.967 So, let's see if it's able to fix it. 01:58:57.967 --> 01:59:03.870 That's the first bug that has happened to us as far as I that has happened to us as far as I remember. 01:59:03.880 --> 01:59:15.327 And so, we're going to say created tried creating a room and selecting a deadline, but it ended up creating a room with no deadline. 01:59:15.327 --> 01:59:18.331 And we don't really need plan mode for this. 01:59:18.331 --> 01:59:21.870 There's no, you know, clarifying questions here. 01:59:21.880 --> 01:59:23.179 It's a simple bug. 01:59:23.179 --> 01:59:25.695 And we don't really want it to clarify. 01:59:25.695 --> 01:59:27.196 We we know what the bug is. 01:59:27.196 --> 01:59:28.517 We just want it to fix it. 01:59:28.517 --> 01:59:31.069 So, there's really no ambiguity there. 01:59:31.069 --> 01:59:34.865 It's like It's like I'm not looking to negotiate with Codex. 01:59:34.865 --> 01:59:38.390 I know this is a bug and I want it to fix it, right? 01:59:38.400 --> 01:59:39.702 There's no other ways. 01:59:39.702 --> 01:59:41.704 There's nothing else happening. 01:59:41.704 --> 01:59:49.633 Unless I'm wrong, and in that case, it's going to tell me that I'm wrong, that it works, but there's no other paths here as far as I'm concerned. 01:59:49.633 --> 01:59:57.638 Now, sometimes Codex would output something like this and it tries to go into plan mode. 01:59:57.638 --> 02:00:04.299 And so, right now it thinks it's in plan mode, but it's it actually is not in plan mode. 02:00:04.299 --> 02:00:13.007 And so, if I say something like do it, it's going to complain that that I did not uh leave the plan mode while I'm not in the plan mode. 02:00:13.007 --> 02:00:21.532 So, this is a bug that I have been experiencing from time to time and it's annoying, but it's it's easily fixable. 02:00:21.532 --> 02:00:26.670 You see, it says I can't edit files because this thread is in plan mode, but we're not in plan mode. 02:00:26.680 --> 02:00:31.043 And so, the solution is to go into plan mode and type something. 02:00:31.043 --> 02:00:32.150 Okay, fix it. 02:00:32.160 --> 02:00:35.409 And then it's going to say something like, well, you know, I can't do it. 02:00:35.409 --> 02:00:36.195 I'm in plan mode. 02:00:36.195 --> 02:00:37.911 And then you can leave plan mode. 02:00:37.911 --> 02:00:39.550 And now it understands it. 02:00:39.560 --> 02:00:41.340 You see, now it's correct. 02:00:41.340 --> 02:00:48.790 Fixed the bug where it's selecting a deadline and opening an existing no deadline room still leaves the room with no deadline. 02:00:48.800 --> 02:00:50.140 So, we're going to submit this. 02:00:50.140 --> 02:00:50.722 All right. 02:00:50.722 --> 02:01:00.941 So, it looks like it fixed it and here it says in the browser, I created a no deadline room, reopened it with 15 minutes, and it showed open plus closes in, etc. 02:01:00.941 --> 02:01:06.736 So, let's go ahead and test this out ourselves to ensure that it does really work. 02:01:06.736 --> 02:01:12.299 So, we have this and let's do Friday lunch and we said 15 minutes. 02:01:12.299 --> 02:01:13.548 And now it shows it. 02:01:13.548 --> 02:01:17.017 And let's say 1 minute room one, 1 minute. 02:01:17.017 --> 02:01:17.989 There we go. 02:01:17.989 --> 02:01:18.753 1 minute. 02:01:18.753 --> 02:01:24.210 And let's try no deadline room two, select no deadline, open no deadline. 02:01:24.210 --> 02:01:24.636 Okay. 02:01:24.636 --> 02:01:28.526 So, this looks like this was finally fixed. 02:01:28.526 --> 02:01:43.941 Now, once SnackVote has rooms, session-based voting, and a deadline, we are ready to deploy the front-end app with Vercel and verify that the deployed app points to the right back-end environment. 02:01:43.941 --> 02:01:47.430 And this will round up this specific app build. 02:01:47.440 --> 02:01:56.377 And here's our prompt, prepare SnackVote for deployment on Vercel and verify it works with the Convex back-end, okay? 02:01:56.377 --> 02:01:59.426 I'm just going to do it in plan mode, run that. 02:01:59.426 --> 02:02:01.988 Here it's being very, very clever. 02:02:01.988 --> 02:02:12.630 One important deployment decision remains, whether the Vercel app should use the existing Convex dev deployment or it should promote it to production, okay? 02:02:12.640 --> 02:02:17.910 And this is really, really cool because this is something that I wanted to cover once this was done. 02:02:17.920 --> 02:02:24.830 So, if we go into Convex and you click over here, you can see all your deployments, your different deployments. 02:02:24.840 --> 02:02:30.070 So, so we we are currently under development deployment, under development cloud. 02:02:30.080 --> 02:02:34.888 We can also have a production deployment, preview deployments, other deployments, stuff like that. 02:02:34.888 --> 02:02:44.290 So, ideally, once we deploy it with Vercel, we want it to use the production Convex, and that's what we're going to select, because this makes sense. 02:02:44.290 --> 02:02:48.710 Production deployment uses the production Convex. 02:02:48.720 --> 02:02:51.785 Development deployment uses the development Convex. 02:02:51.785 --> 02:03:00.262 And this is our plan prepare snack vote for a production result deploy connected to the Convex production backend. 02:03:00.262 --> 02:03:02.002 We're going to hit submit. 02:03:02.002 --> 02:03:05.277 And it's going to create a production. 02:03:05.277 --> 02:03:06.974 In fact, they already did it, right? 02:03:06.974 --> 02:03:12.865 We can switch to this and it's going to have a production environment here created for us. 02:03:12.865 --> 02:03:13.417 All right. 02:03:13.417 --> 02:03:19.508 So, it has deployed snack vote to Vercel and verified it against Convex production, okay? 02:03:19.508 --> 02:03:22.942 So, this is the live URL, what we're seeing here. 02:03:22.942 --> 02:03:25.719 Deployment URL and the Convex backend. 02:03:25.719 --> 02:03:32.256 Okay, and if we go into Convex, you can see that it's currently pointing to the production URL here. 02:03:32.256 --> 02:03:34.723 And we have everything here in production, right? 02:03:34.723 --> 02:03:39.663 So, we have the dev instance pointing to the dev deployment in Convex. 02:03:39.663 --> 02:03:46.068 And the production instance in Vercel pointing to the production instance here in Convex. 02:03:46.068 --> 02:03:48.265 So, we have all the same functions. 02:03:48.265 --> 02:03:49.800 We have all the same data. 02:03:49.800 --> 02:03:51.078 Everything is there. 02:03:51.078 --> 02:03:56.927 The data might be a little different, but the schema is exactly the same and it works, right? 02:03:56.927 --> 02:04:01.590 So, we can create a room, whatever new room, 1 minute, open it. 02:04:01.600 --> 02:04:05.163 And now 59 seconds, 58 seconds, looks good. 02:04:05.163 --> 02:04:08.576 We can create another room, room three, no deadline. 02:04:08.576 --> 02:04:10.050 And that has no deadline. 02:04:10.050 --> 02:04:11.545 So, I'm currently in this room. 02:04:11.545 --> 02:04:13.405 I can create a food option. 02:04:13.405 --> 02:04:14.153 I can vote. 02:04:14.153 --> 02:04:15.804 I can't vote anymore. 02:04:15.804 --> 02:04:17.613 One active vote per room. 02:04:17.613 --> 02:04:19.350 This is the leaderboard. 02:04:19.360 --> 02:04:21.564 So, it looks really good. 02:04:21.564 --> 02:04:35.622 And this time we've actually built a fairly cool and a fun app along with a backend that uses several different deployments depending on where the app is is running. 02:04:35.622 --> 02:04:44.937 So, for local deployment, we have the local, the dev convex deployment, and for the production Vercel deployment, we're using the production convex deployment, okay? 02:04:44.937 --> 02:04:48.870 So, this was a slightly more complex app. 02:04:48.880 --> 02:04:54.422 But, there's still one more app that I want to build, and this app is going to be the most complex of them all. 02:04:54.422 --> 02:05:09.830 It's going to bring a lot of these things that we've been talking about so far together, and also we're going to be introducing some new functionality, new features, and a lot of really cool features, and a lot of really cool things. 02:05:09.840 --> 02:05:14.022 Now, for this last app in the course, we're going to be building FlexHelp. 02:05:14.022 --> 02:05:26.561 And this is where we take the workflow from the first two smaller apps and apply it to a more realistic product, a two-sided marketplace where helpers offer fixers services and customers book them. 02:05:26.561 --> 02:05:30.403 The important thing is that we will still build it in controlled steps. 02:05:30.403 --> 02:05:33.897 We're not going to ask Codex to build the whole marketplace at once. 02:05:33.897 --> 02:05:39.250 We are going to architect the design, and build the UI, then add feature by feature. 02:05:39.250 --> 02:05:44.123 And last but not least, we're going to be deploying the app, making it available to anyone. 02:05:44.123 --> 02:05:48.757 As always, our first step will be creating the visual architecture. 02:05:48.757 --> 02:05:58.480 This gives us the shape of the product, the customer flow, the helper flow, the main screens, and the path from browsing a service to booking help. 02:05:58.480 --> 02:06:02.941 Now, here in Codex, we're going to click here, and we're going to create a brand new project. 02:06:02.941 --> 02:06:07.948 Now, I like to start it from an existing folder, and I'm going to create a new folder. 02:06:07.948 --> 02:06:08.590 FlexHelp. 02:06:08.600 --> 02:06:11.089 I'm going to hit create, and I'm going to click open. 02:06:11.089 --> 02:06:13.405 And that creates a brand new project. 02:06:13.405 --> 02:06:21.586 Now, the first thing that we're going to be doing is we're going to be building a visual architecture, the same thing that we did for the previous two apps. 02:06:21.586 --> 02:06:32.710 And this is important because this gives us the shape of the product, the customer flow, the helper flow, the main screens, and the path from browsing a service to booking help. 02:06:32.720 --> 02:06:38.354 And here's the prompt that I'm going to be using and I want to specify that we want to use ImageGen. 02:06:38.354 --> 02:06:41.702 We're going to jump into plan mode and we're going to run this. 02:06:41.702 --> 02:06:44.807 And here we have the Flex Help Visual Architecture. 02:06:44.807 --> 02:06:46.349 And here's a better view. 02:06:46.349 --> 02:06:54.655 And so here we have the customer, we have the shared marketplace screens, and we have the helper, which are the two sides of this marketplace. 02:06:54.655 --> 02:06:57.502 We also have the Convex and the Versel here. 02:06:57.502 --> 02:07:03.953 On the customer side, we have browse services, get the service detail, and then send a booking request. 02:07:03.953 --> 02:07:07.836 The helper side, we have the helper dashboard and the status updates. 02:07:07.836 --> 02:07:14.583 And on the shared marketplace screens, we have explore the marketplace, my bookings, and booking details. 02:07:14.583 --> 02:07:19.847 So right off the bat, this app is a bit more complex than the previous apps that we were building. 02:07:19.847 --> 02:07:27.866 And that's really the goal, to finish off with a more complex, but also a more realistic, more production-ready app. 02:07:27.866 --> 02:07:29.693 Next, we'll map the core entities. 02:07:29.693 --> 02:07:40.784 And this is where the product becomes more tangible because we can actually see the real objects in the app before Codex starts writing the schema for code. 02:07:40.784 --> 02:07:42.302 And here's our prompt. 02:07:42.302 --> 02:07:45.029 We want to preface this with this ImageGen. 02:07:45.029 --> 02:07:47.603 All right, and here's our entity architecture. 02:07:47.603 --> 02:07:52.043 Okay, so we have the user, that could be a customer or a helper profile. 02:07:52.043 --> 02:07:59.575 We have the booking here, booking status, service, category, review, and all of that backed with Convex data. 02:07:59.575 --> 02:08:05.729 So at this point, we have a better idea of how the final app is going to look. 02:08:05.729 --> 02:08:10.161 I see that we need a user entity and that could be a customer or a helper profile. 02:08:10.161 --> 02:08:16.829 And I see that booking is super important because everybody needs to have access to booking, both customers and helpers. 02:08:16.829 --> 02:08:34.550 Booking status, service, category, and so right away I see that this is a fairly sophisticated app, but I can see that it's not a super complex or like a super complicated app that you know has a ton of different entities, has lots of things happening. 02:08:34.560 --> 02:08:44.750 But still, as we are developing this app, we might be adding various entities and so that will increase the complexity as the development can continues. 02:08:44.750 --> 02:08:59.670 Now, the next step is before we start actually building the app is we want to ask Codex to recommend the simplest stack for FlexHelp based on what we need to build based on what we've told it so far. 02:08:59.670 --> 02:09:05.755 This keeps the technology choices tied to the product instead of starting with tools first. 02:09:05.755 --> 02:09:13.489 And this is super important because we want to start with the blueprint before any code has been written. 02:09:13.489 --> 02:09:15.267 And here's the prompt to do that. 02:09:15.267 --> 02:09:18.060 Do not edit any files and spec everything. 02:09:18.060 --> 02:09:26.264 And I'm going to be running this in plan mode so that I can decide whether I want to accept its recommendations or just leave it in the conversation. 02:09:26.264 --> 02:09:27.510 Going to run this here. 02:09:27.520 --> 02:09:29.287 This is what it's suggesting. 02:09:29.287 --> 02:09:31.175 The workspace is currently empty. 02:09:31.175 --> 02:09:41.206 The simplest course-friendly stack is React, TypeScript, Convex for backend data, off, Tailwind for UI, and Vercel for hosting. 02:09:41.206 --> 02:09:44.473 Okay, and this is exactly what we've been doing so far. 02:09:44.473 --> 02:09:47.310 And and here it's listing some primary routes. 02:09:47.320 --> 02:09:51.567 Services, bookings, customer bookings, helper, helper services. 02:09:51.567 --> 02:10:01.432 Here we have the data flow, the auth recommendations, UI and component approach, Vercel deployment path, staged build plan, everything. 02:10:01.432 --> 02:10:01.701 Okay? 02:10:01.701 --> 02:10:06.417 So, I'm going to exit out because this was only a read-only plan mode. 02:10:06.417 --> 02:10:06.666 Okay? 02:10:06.666 --> 02:10:11.545 I don't want it to do anything just yet because that's what we're going to be doing in the next step. 02:10:11.545 --> 02:10:20.859 Now, from the visual architecture, the entity map, and the stack recommendation, we have a pretty good idea of how the FlexHelp app is evolving. 02:10:20.859 --> 02:10:29.115 The next thing that we want to do is we want to get Codex to take a first pass at turning that plan into a static product UI. 02:10:29.115 --> 02:10:32.550 Now, this first version does not need any back-end data. 02:10:32.560 --> 02:10:39.058 The goal is to see how far Codex can get from the architecture alone to viable UI mock-ups. 02:10:39.058 --> 02:10:41.553 And this is the prompt that I'm going to be using. 02:10:41.553 --> 02:10:47.366 Build the first static FlexHelp UI design from the existing architecture and stack direction. 02:10:47.366 --> 02:10:49.161 We're going to stay in the plan mode. 02:10:49.161 --> 02:10:51.017 Going to go ahead and execute that. 02:10:51.017 --> 02:10:53.110 And let's see how well it does. 02:10:53.120 --> 02:10:55.212 And here's the plan that it came up with. 02:10:55.212 --> 02:11:00.658 Okay, the goal is a polished visual prototype that matches the FlexHelp architecture. 02:11:00.658 --> 02:11:04.317 Okay, and here it lists some details about the architecture. 02:11:04.317 --> 02:11:07.463 And let's go ahead and run this prompt. 02:11:07.463 --> 02:11:09.270 So, it finished working. 02:11:09.280 --> 02:11:12.082 And let's go ahead and see what we have here. 02:11:12.082 --> 02:11:13.891 Okay, so this is our app. 02:11:13.891 --> 02:11:16.019 And this is kind of how it looks like. 02:11:16.019 --> 02:11:17.661 Okay, book practical help. 02:11:17.661 --> 02:11:20.011 And we have some active requests. 02:11:20.011 --> 02:11:22.928 We have booking entry, helper dashboard. 02:11:22.928 --> 02:11:23.979 We have this. 02:11:23.979 --> 02:11:25.030 Look at this. 02:11:25.040 --> 02:11:26.353 It even works. 02:11:26.353 --> 02:11:31.590 Service detail, a small plumbing repair, helper dashboard shell. 02:11:31.600 --> 02:11:34.270 And so, this UI doesn't look too bad. 02:11:34.280 --> 02:11:39.151 But there's something that you need to know when you design UI with Codex. 02:11:39.151 --> 02:11:43.872 They all look pretty much the same or at least very, very similar. 02:11:43.872 --> 02:11:50.158 And that is because Codex is not really an expert when it comes to designing pages. 02:11:50.158 --> 02:11:54.066 It's great for coding, for solving all kinds of problems. 02:11:54.066 --> 02:11:58.950 But for actually designing stuff, it's not the most ideal tool. 02:11:58.960 --> 02:12:01.893 There are a lot of other tools that do it a lot better. 02:12:01.893 --> 02:12:17.608 And so, during this specific app build, I want to bring in another tool and show you how we can have a more specialized tool actually design the UI and then bring that UI back into Codex and get Codex to kind of implement it. okay? 02:12:17.608 --> 02:12:21.518 Now, when it comes to UI designs, there's lots of cool tools. 02:12:21.518 --> 02:12:29.698 There's Google Stitch, there's Figma, and there's also a tool that I really like to use, and it is called FlutterFlow Designer. 02:12:29.698 --> 02:12:34.495 It's a very very lightweight tool, and it works really great with Codex. 02:12:34.495 --> 02:12:40.510 And so, if you head over to designer.flutterflow.io, you're going to be on this page here. 02:12:40.520 --> 02:12:47.350 And you can use the web app version here, but what I really like to do is I like to use their desktop app, okay? 02:12:47.360 --> 02:12:53.011 Here's the desktop app, and what's nice about the desktop app is that you have this app integrations. 02:12:53.011 --> 02:13:00.101 So, if you click over here, you can connect designer to external agents and IDEs. 02:13:00.101 --> 02:13:03.202 So, Claude Code, Gemini CLI, and Codex. 02:13:03.202 --> 02:13:04.718 And so, I have this set up. 02:13:04.718 --> 02:13:06.767 So, all you need to do is click here. 02:13:06.767 --> 02:13:08.134 Now it's installed. 02:13:08.134 --> 02:13:13.755 And now, this app here is going to serve as an MCP server, okay? 02:13:13.755 --> 02:13:23.540 Because if I go to Codex here, and I press command comma, and I go into MCP servers, I also have this FlutterFlow Designer configured here. 02:13:23.540 --> 02:13:26.976 And if you want to set this up, you can simply ask Codex to do it. 02:13:26.976 --> 02:13:36.948 It's going to research, it's going to figure out, and it's going to eventually set it up for you so that you can have this FlutterFlow Designer as one of your MCP servers here, okay? 02:13:36.948 --> 02:13:52.203 So, now that we have this set up, what we want to do is we want to go into this designer, and we want to click a new design, and here you can enter a prompt ask it to design any kind of app UI for you, whether it is a mobile app or desktop app. 02:13:52.203 --> 02:13:57.070 They also have, you know, explore styles feature, or you can have an instant generation. 02:13:57.080 --> 02:14:00.790 Now, what you don't want to do is you do not want to type this prompt directly. 02:14:00.800 --> 02:14:08.630 You want to ask Codex to generate a prompt for you since it knows a lot more about the app that you can input here. 02:14:08.640 --> 02:14:16.369 And this is the same workflow regardless of whether you're using this tool, Google Stage, or pretty much any other tool out there. 02:14:16.369 --> 02:14:20.785 And so, we're going to go ahead and we're going to grab a prompt to do just that. 02:14:20.785 --> 02:14:22.621 And here's a prompt that we can use. 02:14:22.621 --> 02:14:25.885 Create a polished FlutterFlow designer concept for FlexHelp. 02:14:25.885 --> 02:14:31.299 FlexHelp is a two-sided marketplace, and we are telling it what kind of screens to design. 02:14:31.299 --> 02:14:33.185 We give it some design requirements. 02:14:33.185 --> 02:14:36.415 We give give it some guardrails, stuff like that. 02:14:36.415 --> 02:14:45.932 And so, we're going to input this prompt, and here we're going to stay on the explore styles, and that way we can have different styles show up, and we can decide which one we like better. 02:14:45.932 --> 02:14:49.480 So, I'm going to go ahead and run this, and here are the designs. 02:14:49.480 --> 02:14:52.052 So, as you can see, they're all very different. 02:14:52.052 --> 02:15:02.504 We have this, we have this, we have this, we have these ones, so and you got to admit that in my view, these look a lot better than what Codex did, right? 02:15:02.504 --> 02:15:04.262 So, this is what Codex did. 02:15:04.262 --> 02:15:09.863 In my view, these designs are a lot more interesting than Codex's design. 02:15:09.863 --> 02:15:10.150 Okay? 02:15:10.150 --> 02:15:12.527 So, I don't know which one you guys like. 02:15:12.527 --> 02:15:14.136 This is a classical one. 02:15:14.136 --> 02:15:15.116 This is nice. 02:15:15.116 --> 02:15:16.191 Let's take a look. 02:15:16.191 --> 02:15:18.030 Let's go ahead and use this classical one. 02:15:18.030 --> 02:15:23.984 So, I'm going to say use this style, and it's going to use this style, and then it's going to generate all the pages that we need. 02:15:23.984 --> 02:15:26.221 So, here we have seven pages that we need. 02:15:26.221 --> 02:15:27.758 So, now we have all the pages. 02:15:27.758 --> 02:15:41.627 Here we have customer home, we have service details, really nice page, booking request form, customer booking status, we even have a map, helper dashboard, helper request management, and a user profile. 02:15:41.627 --> 02:15:50.470 The next thing that we want to do is we want to tell Codex to fetch these designs and implement them, bake them into our app. 02:15:50.480 --> 02:15:51.654 And so, let's take a look. 02:15:51.654 --> 02:15:55.245 So, this is called FlexHelp Marketplace, the name of the project here. 02:15:55.245 --> 02:15:58.202 And so, now what we're going to do is we're going to go back to Codex. 02:15:58.202 --> 02:16:12.750 We're going to close out this section here, and we're going to give it a prompt that's going to ask it to connect to FlutterFlow designer, look at that specific project and grab those designs and then bake them into our app 02:16:12.760 --> 02:16:13.440 right here. 02:16:13.440 --> 02:16:15.815 And I have a prompt here to do just that. 02:16:15.815 --> 02:16:16.990 So, here's the prompt. 02:16:17.000 --> 02:16:21.905 Update the Flex sub static UI to match the approved FlutterFlow Designer reference. 02:16:21.905 --> 02:16:29.021 So, this is the main prompt, but we also need to ensure that we tell it that we want to use the FlutterFlow Designer MCP. 02:16:29.021 --> 02:16:36.278 Use FlutterFlow Designer MCP and then project is because there are multiple projects. 02:16:36.278 --> 02:16:38.197 We want to copy this project here. 02:16:38.197 --> 02:16:38.486 This. 02:16:38.486 --> 02:16:42.541 And we're going to go into plan mode just to make sure that everything is good. 02:16:42.541 --> 02:16:43.596 And I'm going to run that. 02:16:43.596 --> 02:16:51.732 And here it says, "Next, I'm opening a Designer MCP session." And once it does that, you can see you can actually see the agent working. 02:16:51.732 --> 02:16:58.600 This is our agent, our client cuz Codex is acting as an MCP client connecting to this MCP server. 02:16:58.600 --> 02:17:01.368 And as you can see, it's it's analyzing this page. 02:17:01.368 --> 02:17:04.597 And you can see this little Codex icon here. 02:17:04.597 --> 02:17:16.621 And you can see it says here, "One active agent." It's studying the designs and then it's going to pull the designs back here and build an actual UI using those designs. 02:17:16.621 --> 02:17:23.612 And the goal here is to ensure that it builds a pixel-perfect or at least as close as possible to what we see here. 02:17:23.612 --> 02:17:23.929 Okay? 02:17:23.929 --> 02:17:25.774 So, let's see what it's doing. 02:17:25.774 --> 02:17:27.830 So, now it came back with a plan. 02:17:27.840 --> 02:17:34.356 Update the existing React static UI to visually follow the approved FlutterFlow Designer reference. 02:17:34.356 --> 02:17:39.917 So, here it's it has five pages, but over here we actually have more. 02:17:39.917 --> 02:17:41.511 We have seven pages. 02:17:41.511 --> 02:17:48.205 So, I don't know if I if it missed it or that I did not it was it wasn't part of the prompt or some mix-up. 02:17:48.205 --> 02:17:52.168 So, we want to make sure that it captures all the seven pages. 02:17:52.168 --> 02:17:58.659 Ensure that it captures all the seven pages from FlutterFlow Designer project. 02:17:58.659 --> 02:17:59.045 Okay? 02:17:59.045 --> 02:18:06.854 And still in the plan mode just to make sure we get this right because our app ideally should should have all of these pages. 02:18:06.854 --> 02:18:11.526 User profile, helper, request management, helper dashboard, etc. etc. 02:18:11.526 --> 02:18:13.148 All of these make sense. 02:18:13.148 --> 02:18:19.589 Okay, so it went ahead and it updated it and it's going to add static page components for all seven pages. 02:18:19.599 --> 02:18:20.504 Okay, submit this. 02:18:20.504 --> 02:18:25.517 All right, so it has implemented the seven page designer reference update. 02:18:25.517 --> 02:18:27.557 Let's go ahead and see how it looks. 02:18:27.557 --> 02:18:30.202 All right, so this looks a lot better in my opinion. 02:18:30.202 --> 02:18:32.270 All right, we have settings. 02:18:32.270 --> 02:18:34.908 We do have the CH customer home. 02:18:34.908 --> 02:18:36.319 Do we even see that? 02:18:36.319 --> 02:18:37.847 I don't even see that here. 02:18:37.847 --> 02:18:42.051 But this customer home service details, click on book. 02:18:42.051 --> 02:18:44.720 So this menu we need to kind of remove this. 02:18:44.720 --> 02:18:46.300 So let me go ahead and sell it. 02:18:46.300 --> 02:18:48.424 What are those abbreviations? 02:18:48.424 --> 02:18:49.039 Let's see. 02:18:49.039 --> 02:18:50.532 Do they need to be there? 02:18:50.532 --> 02:18:52.117 Let's see what it says. 02:18:52.117 --> 02:18:57.611 But it looks a lot cleaner than than the original UI, at least to my eyes. 02:18:57.611 --> 02:19:02.541 And now we're doing a little bit of tweaking, clean-up plan. 02:19:02.541 --> 02:19:08.047 Okay, they were placeholder text icons used to mimic the nav icon column. 02:19:08.047 --> 02:19:13.112 So we need to remove that and we should probably remove any other placeholder icons. 02:19:13.112 --> 02:19:15.163 But right now it looks fairly clean. 02:19:15.163 --> 02:19:17.127 Static preview, what is that? 02:19:17.127 --> 02:19:19.041 This this also needs to be removed. 02:19:19.041 --> 02:19:27.399 So we're going to actually tell it check for any placeholders and see if you can match what it should be on the design. 02:19:27.399 --> 02:19:33.015 Pull pull the design elements and re-replace these placeholders with with the actual design. 02:19:33.015 --> 02:19:34.629 All right, so it has fixed it. 02:19:34.639 --> 02:19:36.083 Now it looks a lot better. 02:19:36.083 --> 02:19:38.258 We still see some other static preview. 02:19:38.258 --> 02:19:38.950 That's okay. 02:19:38.960 --> 02:19:43.168 Let's see if they go away once we have real data being fed. 02:19:43.168 --> 02:19:48.133 So once we're happy with the UI, we can start designing the backend. 02:19:48.133 --> 02:19:52.318 Data model should match the screens that we actually have here. 02:19:52.318 --> 02:20:01.292 And so for FlexHelp, the first schema to support service browsing, helper profiles, booking creation, and helper status updates. 02:20:01.292 --> 02:20:03.544 Anything beyond that can wait. 02:20:03.544 --> 02:20:09.190 And here's a prompt that we can use to connect our app to Convex, okay? 02:20:09.200 --> 02:20:12.157 We're going to be using Convex for this app as well. 02:20:12.157 --> 02:20:17.673 So, we have here connect let's help UI to live Convex service and helper data. 02:20:17.673 --> 02:20:20.012 Let's go ahead and keep it in plan mode. 02:20:20.012 --> 02:20:21.573 All right, so this is our plan. 02:20:21.573 --> 02:20:24.110 This is the Convex read path plan. 02:20:24.120 --> 02:20:30.717 Connect the customer facing marketplace UI to Convex for the first database back read path. 02:20:30.717 --> 02:20:33.458 The repo currently has no Convex setup. 02:20:33.458 --> 02:20:36.838 So, add Convex from from scratch, etc., etc. 02:20:36.838 --> 02:20:39.030 And we have Convex here running. 02:20:39.030 --> 02:20:40.609 We have these three projects. 02:20:40.609 --> 02:20:46.967 One that was created for the other app that we did, and so we're going to be creating another project for this app as well. 02:20:46.967 --> 02:20:52.985 All right, so it has implemented the first Convex back read path for the customer marketplace. 02:20:52.985 --> 02:20:55.030 And these are the files that has changed. 02:20:55.040 --> 02:20:56.341 This is what's connected. 02:20:56.341 --> 02:21:02.589 And if we jump into our Convex dashboard, we can see we have a brand new project here that wasn't there before. 02:21:02.589 --> 02:21:08.818 And if we jump here, we should see that we have a deployment here on my own machine. 02:21:08.818 --> 02:21:13.739 This is a local deployment that Convex is running on, right? 02:21:13.739 --> 02:21:16.516 This is not on Convex, it's on my own machine. 02:21:16.516 --> 02:21:18.649 And we also have a production, right? 02:21:18.649 --> 02:21:25.165 So, with this deployment here, you go into data, we can see that we have categories, we have helper profiles. 02:21:25.165 --> 02:21:26.548 We also have services. 02:21:26.548 --> 02:21:29.216 And then we have a bunch of functions, right? 02:21:29.216 --> 02:21:33.030 Marketplace list, and then we have seed, creating seed data. 02:21:33.040 --> 02:21:36.789 Now, if you go into production, we may not see anything there, right? 02:21:36.789 --> 02:21:40.346 There's nothing there because we haven't deployed this app to production. 02:21:40.346 --> 02:21:43.510 There's no need for a production deployment. 02:21:43.520 --> 02:21:51.922 Now, if we jump back to Codex and we refresh the app, this is now data that it's pulling from my local Convex deployment, okay? 02:21:51.922 --> 02:21:53.192 So, we have here Marcus. 02:21:53.192 --> 02:21:55.976 If you go back here, we should see Marcus, right? 02:21:55.976 --> 02:21:57.888 Helper profiles, there's Marcus. 02:21:57.888 --> 02:22:02.455 And if I change Marcus, if I edit name and I change, let's say, Marcus, right? 02:22:02.455 --> 02:22:05.910 And I go back here, now it's automatically Marcus E here. 02:22:05.920 --> 02:22:07.188 Automatically updates. 02:22:07.188 --> 02:22:09.397 If I change that to James, guess what? 02:22:09.397 --> 02:22:10.563 Now it says James S. 02:22:10.563 --> 02:22:16.019 So, as you can see, this is now linked to our local Convex instance on my machine. 02:22:16.019 --> 02:22:17.542 Both of these are on my machine. 02:22:17.542 --> 02:22:24.237 Now, the next thing that I want to do is I want to build out the booking flow, because that's the key in this app, right? 02:22:24.237 --> 02:22:26.767 The ability to book these services. 02:22:26.767 --> 02:22:28.613 And I have a prompt here as well. 02:22:28.613 --> 02:22:31.056 We're going to be using this prompt right here. 02:22:31.056 --> 02:22:34.190 Okay, add the customer booking flow to FlexHelp. 02:22:34.200 --> 02:22:38.109 Inspect all of this, and I'm going to set this to plan mode. 02:22:38.109 --> 02:22:39.935 And let's go ahead and run that. 02:22:39.935 --> 02:22:40.790 That's our plan. 02:22:40.800 --> 02:22:48.291 We're going to be adding the first customer-side booking creation path on top of the existing Convex back service listing. 02:22:48.291 --> 02:22:49.845 And there's some information there. 02:22:49.845 --> 02:22:51.336 We're going to implement this plan. 02:22:51.336 --> 02:22:55.810 All right, so it has implemented the customer booking creation path. 02:22:55.810 --> 02:22:57.651 And it also tested it out. 02:22:57.651 --> 02:23:01.298 As you can see, there's also a booking here as well. 02:23:01.298 --> 02:23:03.350 So, let's go ahead and see if this works. 02:23:03.360 --> 02:23:05.595 All right, so let's say I want to book James. 02:23:05.595 --> 02:23:06.753 Click over here. 02:23:06.753 --> 02:23:11.160 So, I can't quite pick anything here, but I can do request to book. 02:23:11.160 --> 02:23:12.630 Send booking request. 02:23:12.640 --> 02:23:13.905 And I need an address. 02:23:13.905 --> 02:23:16.122 Okay, so let's say do, I don't know. 02:23:16.122 --> 02:23:18.149 We need auto-complete here as well. 02:23:18.149 --> 02:23:19.634 Fill in every field. 02:23:19.634 --> 02:23:20.081 Okay. 02:23:20.081 --> 02:23:21.870 Okay, so task, task. 02:23:21.880 --> 02:23:24.390 Okay, this I cannot fill every field. 02:23:24.400 --> 02:23:28.110 Okay, customer, schedule, say 10:00 a.m. 02:23:28.120 --> 02:23:33.063 And this obviously needs to be, you know, like a calendar picker, that kind of thing. 02:23:33.063 --> 02:23:34.996 Okay, and now we have the booking request. 02:23:34.996 --> 02:23:38.160 And I can click on view bookings, and I see my bookings. 02:23:38.160 --> 02:23:42.553 Okay, so this was done by the Codex while it was testing. 02:23:42.553 --> 02:23:49.230 So, now if we jump into Codex, we should see on my local instance here, we should see bookings. 02:23:49.240 --> 02:23:51.083 And we see two bookings, okay? 02:23:51.083 --> 02:23:51.681 Right here. 02:23:51.681 --> 02:23:53.596 So, the booking flow seems to work. 02:23:53.596 --> 02:23:59.470 There are some rough edges here and there that we need to fix, but for the most part, it is coming together. 02:23:59.480 --> 02:24:04.547 Now, once customers can create bookings, helpers need a place to see and manage them. 02:24:04.547 --> 02:24:11.697 The helper dashboard should show incoming requests and make it obvious what action the helper can take next. 02:24:11.697 --> 02:24:16.510 At the simplest level, the helper should be able to accept or decline a request. 02:24:16.520 --> 02:24:22.901 After accepting, the helper should be able to move the job into progress and then mark it completed. 02:24:22.901 --> 02:24:27.232 Those status changes are what turn the app into a workflow. 02:24:27.232 --> 02:24:31.060 This is also a good place to show the power of live data. 02:24:31.060 --> 02:24:36.506 When a status changes, the UI should update and the Convex row should change. 02:24:36.506 --> 02:24:39.950 That gives us a real end-to-end marketplace loop. 02:24:39.960 --> 02:24:44.291 Customer request, helper action, back end state, and UI update. 02:24:44.291 --> 02:24:46.790 And this is the prompt that we're going to be using. 02:24:46.800 --> 02:24:52.119 Add the helper dashboard workflow for viewing booking requests and updating booking status. 02:24:52.119 --> 02:24:57.255 Okay, I'm going to switch into plan mode and we're going to go ahead and send this. 02:24:57.255 --> 02:25:03.203 So, it's asking me that how should the helper workflow handle the existing requested booking status? 02:25:03.203 --> 02:25:05.471 Keep requested, this is recommended. 02:25:05.471 --> 02:25:10.544 Preserve existing created bookings, show it as pending in the UI, or rename to pending. 02:25:10.544 --> 02:25:13.947 Change the stored initial status to pending and require a small data. 02:25:13.947 --> 02:25:15.689 So, we don't want any migration. 02:25:15.689 --> 02:25:18.402 We just want to go with the easiest option. 02:25:18.402 --> 02:25:23.686 And then, how should the helper request visibility work before auth is added? 02:25:23.686 --> 02:25:24.927 Helper selected. 02:25:24.927 --> 02:25:32.310 This is add a simple static helper switcher filter, so each helper sees bookings for their Convex helper profile only. 02:25:32.320 --> 02:25:34.675 Simplest UI and back end, but less realistic. 02:25:34.675 --> 02:25:36.790 So, we want helper selected. 02:25:36.800 --> 02:25:38.221 Okay, we're going to select that. 02:25:38.221 --> 02:25:39.962 All right, there's the plan. 02:25:39.962 --> 02:25:44.750 Add the first helper-facing workflow on top of existing convex booking creation pack. 02:25:44.760 --> 02:25:46.032 We're going to submit this. 02:25:46.032 --> 02:25:47.049 Here is our progress. 02:25:47.049 --> 02:25:51.298 All right, so he just implemented the helper booking status workflow. 02:25:51.298 --> 02:25:52.775 And these are the files that changed. 02:25:52.775 --> 02:25:53.811 This is what it did. 02:25:53.811 --> 02:25:58.148 So it updated it through pending, accepted, in progress, completed. 02:25:58.148 --> 02:26:01.808 It viewed it under helper James created booking this. 02:26:01.808 --> 02:26:02.720 So it did all that. 02:26:02.720 --> 02:26:03.495 It did some tests. 02:26:03.495 --> 02:26:04.727 Let's go ahead and open it. 02:26:04.727 --> 02:26:06.315 And let's see what we can do. 02:26:06.315 --> 02:26:08.911 So this is the helper booking status. 02:26:08.911 --> 02:26:12.993 I'm going to helper dashboard have my incoming requests, right? 02:26:12.993 --> 02:26:16.650 So I can accept it, I can start it, and I can complete it. 02:26:16.650 --> 02:26:17.038 Okay? 02:26:17.038 --> 02:26:19.398 So that's the piece that is working. 02:26:19.398 --> 02:26:20.550 I can also cancel it. 02:26:20.560 --> 02:26:21.954 And that is canceled. 02:26:21.954 --> 02:26:22.884 And that's it. 02:26:22.884 --> 02:26:24.108 I can't come back to it. 02:26:24.108 --> 02:26:25.130 I can't do anything. 02:26:25.130 --> 02:26:27.017 Here we have recent activity, right? 02:26:27.017 --> 02:26:28.550 Completed, completed, canceled. 02:26:28.560 --> 02:26:31.710 And this is the one that did 148 116. 02:26:31.720 --> 02:26:33.950 This is the one that it has completed. 02:26:33.960 --> 02:26:35.443 This seems to work, right? 02:26:35.443 --> 02:26:38.081 And we have canceled, we have completed. 02:26:38.081 --> 02:26:41.405 Even a simple marketplace has different responsibilities. 02:26:41.405 --> 02:26:44.821 Customers create booking requests and view their own bookings. 02:26:44.821 --> 02:26:48.990 Helpers manage requests that belong to them or are available to them. 02:26:49.000 --> 02:26:55.022 Admin or system logic may handle category alteration or platform level controls later. 02:26:55.022 --> 02:26:58.556 The key point is that these rules should not only live in the UI. 02:26:58.556 --> 02:27:05.371 Back-end functions need to enforce ownership and permissions because the UI can always be bypassed. 02:27:05.371 --> 02:27:10.770 This is where Codex needs to think carefully instead of just adding buttons. 02:27:10.770 --> 02:27:16.750 And so now what we want to do is we want to add the roles off and the access boundary layer. 02:27:16.760 --> 02:27:18.731 And here's the prompt to do that. 02:27:18.731 --> 02:27:25.286 Add the first practical roles off and access boundary layer around the existing flex help workflows, okay? 02:27:25.286 --> 02:27:27.816 So we're going to go definitely in the plan mode. 02:27:27.816 --> 02:27:30.270 We're going to run this and see what it says. 02:27:30.280 --> 02:27:32.001 And so it has a question for us. 02:27:32.001 --> 02:27:36.767 Which identity approach should this plan should this step plan for? 02:27:36.767 --> 02:27:37.945 Demo sessions. 02:27:37.945 --> 02:27:50.974 Add Convex back demo users and for Convex or add real Convex or sign and sign up more production shape but larger and currently beta or this clerk use third-party or provider. 02:27:50.974 --> 02:27:57.129 Let's go with Convex or how should customer helper roles be represented for or version one? 02:27:57.129 --> 02:27:58.642 Role plus profile. 02:27:58.642 --> 02:27:59.805 So what is this? 02:27:59.805 --> 02:28:05.936 Each demo user has customer helper both and helpers linked to one helper profile for request. 02:28:05.936 --> 02:28:07.090 Separate accounts. 02:28:07.090 --> 02:28:10.405 Customer and helper are always separate demo users. 02:28:10.405 --> 02:28:13.055 Simpler boundaries but less flexible. 02:28:13.055 --> 02:28:19.241 And sometimes when I'm not sure but I want the system to come up with a really solid answer. 02:28:19.241 --> 02:28:20.916 This is what I usually type. 02:28:20.916 --> 02:28:26.294 For the second question, what's the most durable long-term option? 02:28:26.294 --> 02:28:28.652 Okay, that's the key here, durable. 02:28:28.652 --> 02:28:30.085 Now let's see what it says. 02:28:30.085 --> 02:28:33.914 The most durable long-term option is role plus profile. 02:28:33.914 --> 02:28:34.552 Perfect. 02:28:34.552 --> 02:28:35.218 That's it. 02:28:35.218 --> 02:28:39.561 And for the first question, choose demo sessions for the for this core step. 02:28:39.561 --> 02:28:42.735 Okay, so let's go ahead with demo sessions, okay? 02:28:42.735 --> 02:28:46.395 So do demo sessions and role plus profile. 02:28:46.395 --> 02:28:48.992 Let's just go with the recommendations. 02:28:48.992 --> 02:28:49.667 Expand it. 02:28:49.667 --> 02:28:54.265 All right, so now you can see that Codex is testing everything, right? 02:28:54.265 --> 02:28:58.962 It's testing on the UI in the browser and you see this cursor right here. 02:28:58.962 --> 02:29:06.466 The browser flow now confirms a customer created book booking appears for the linked helper and can be moved into in progress. 02:29:06.466 --> 02:29:13.003 All right, so it has finished and it has implemented the demo roles and access boundary layer over here, okay? 02:29:13.003 --> 02:29:15.830 So marketplace browsing stays public. 02:29:15.840 --> 02:29:19.971 Booking creation requires a customer or both demo user. 02:29:19.971 --> 02:29:25.107 Customer booking status only shows bookings owned by the signed-in customer. 02:29:25.107 --> 02:29:33.210 Helper request status updates require a helper or both demo user with a linked helper ID helper profile ID. 02:29:33.210 --> 02:29:38.590 And so, remaining limitation, this is still tutorial demo auth, not production authentication. 02:29:38.600 --> 02:29:46.392 Real Convex auth or Clerk can replace demo session issuance later while keeping the same role profile access model. 02:29:46.392 --> 02:29:50.473 And so, this should give us some uh role separation, right? 02:29:50.473 --> 02:29:52.515 Some kind of authentication on the backend. 02:29:52.515 --> 02:29:57.518 And here, if we jump into Convex, you can see we now have users over here, right? 02:29:57.518 --> 02:29:59.779 These are the users, and there's a role. 02:29:59.779 --> 02:30:04.091 So, you can be either both, or you can be a helper, or you can be a customer. 02:30:04.091 --> 02:30:08.966 And depending on which role you're you're in, you can do various operations. 02:30:08.966 --> 02:30:16.146 Here we have sessions, we have various services, we also have functions that also handle these roles. 02:30:16.146 --> 02:30:24.204 So, you can list demo users, you can start demo session, viewer list for helper, list for customer, etc., etc. 02:30:24.204 --> 02:30:29.187 And these functions, they are meant to work with specific roles, right? 02:30:29.187 --> 02:30:32.797 So, that authentic- -ation is is baked in into these functions. 02:30:32.797 --> 02:30:39.510 Now, when something breaks, the wrong move is to immediately ask Codex to rewrite a whole section. 02:30:39.520 --> 02:30:48.692 The better move is to give it the error, ask it to inspect the relevant files, and make it explain the likely cause before changing anything. 02:30:48.692 --> 02:30:59.291 That debugging loop is the same whether the problem is a browser error, a build failure, a Convex function error, or a UI state that does not make sense. 02:30:59.291 --> 02:31:04.368 Observe the issue, diagnose it, patch it narrowly, and verify the fix. 02:31:04.368 --> 02:31:13.950 And so, let's give it a prompt that will deal with this sort of issue regarding debugging, polish, verification, stuff like that. 02:31:13.960 --> 02:31:15.907 We're going to be using this prompt over here. 02:31:15.907 --> 02:31:20.430 Debug, polish, and verify the existing flex help product workflow. 02:31:20.440 --> 02:31:30.310 Inspect the current app first, then identify this is smallest set of fixes and polish improvements needed to make the current workflow feel credible. 02:31:30.320 --> 02:31:32.084 Let's jump into plan mode. 02:31:32.084 --> 02:31:40.004 Right away, it tells us that I see a few concrete polish fix candidates already and it lists some here, okay? 02:31:40.004 --> 02:31:44.038 And so, the build passes and both local servers are responding. 02:31:44.038 --> 02:31:48.150 So, it's using an in-app browser now for a quick workflow probe. 02:31:48.160 --> 02:31:52.983 So, the plan targets actual UI issues rather than guesses, okay? 02:31:52.983 --> 02:31:55.163 So, let's wait to see what it finds. 02:31:55.163 --> 02:31:57.705 And this is the plan that it came up with. 02:31:57.705 --> 02:32:04.674 Tighten the existing customer helper Convex and demo app workflows without adding new product scope, okay? 02:32:04.674 --> 02:32:09.679 So, it lists a bunch of things and we want to quickly scan assumptions. 02:32:09.679 --> 02:32:14.372 No new marketplace features will be added, no payments, nothing, okay? 02:32:14.372 --> 02:32:17.345 That stays and here's some key changes. 02:32:17.345 --> 02:32:19.131 You can kind of scan through that. 02:32:19.131 --> 02:32:20.522 Let's go ahead and submit this. 02:32:20.522 --> 02:32:25.175 Right, so it is done and it has implemented the debug polish task. 02:32:25.175 --> 02:32:27.818 And it actually fixed a lot of interesting things. 02:32:27.818 --> 02:32:35.834 It fixed some placeholders, it did some testing, it switched to different accounts, actually cleaned up a lot of cool stuff. 02:32:35.834 --> 02:32:50.424 So, if we take a look here, we can see that we can book, we can request a book, we can describe the task, we can fill all of this out, send, add the preferred date, and now it's showing in that I'm signed in as the customer, right? 02:32:50.424 --> 02:32:51.946 And I can switch a demo user. 02:32:51.946 --> 02:32:55.870 Now, I'm signed in as the helper and now I'm signed in as both. 02:32:55.880 --> 02:33:00.294 Customer access, choose a customer demo user to create a booking request. 02:33:00.294 --> 02:33:03.870 So, it's coming along really, really nicely. 02:33:03.880 --> 02:33:06.670 And the final build step is deployment. 02:33:06.680 --> 02:33:16.180 The app is not done until the front end is live, connected to the intended Convex back end, and smoke tested through the real product workflow. 02:33:16.180 --> 02:33:19.944 So, let's go ahead and grab this prompt and let's go ahead and paste it. 02:33:19.944 --> 02:33:27.135 So, deploy the existing Flex app with Vercel and smoke test the connected Convex backend, okay? 02:33:27.135 --> 02:33:31.587 We're going to jump into plan mode so that it can prepare everything, plan everything out. 02:33:31.587 --> 02:33:38.230 One thing that I want to tell it that I didn't tell it, and I'm going to do that right now, is I want to make sure it uses the Vercel package. 02:33:38.240 --> 02:33:40.874 Use the Vercel Vercel plugin. 02:33:40.874 --> 02:33:50.010 And I'm going to press command enter so that it steers the conversation because we want the model to ensure that it catches that, right? 02:33:50.010 --> 02:33:52.003 That we want to use the Vercel plugin. 02:33:52.003 --> 02:33:56.376 Which Convex environment should the deployed Vercel app use for the smoke test? 02:33:56.376 --> 02:33:57.659 We want to use production. 02:33:57.659 --> 02:34:00.354 And where should the front end be deployed? 02:34:00.354 --> 02:34:01.710 New personal project. 02:34:01.720 --> 02:34:02.240 Exactly. 02:34:02.240 --> 02:34:04.060 This is a brand new project. 02:34:04.060 --> 02:34:05.910 We already have a bunch of projects, right? 02:34:05.920 --> 02:34:08.241 So, if we go over here, we have this project. 02:34:08.241 --> 02:34:10.394 Actually, we should have used the existing project. 02:34:10.394 --> 02:34:13.504 We already have this project, but I think it's going to create a new project. 02:34:13.504 --> 02:34:15.292 Let's see if we can tell it. 02:34:15.292 --> 02:34:17.077 I'm going to copy that. 02:34:17.077 --> 02:34:18.900 See if we can use the existing project. 02:34:18.900 --> 02:34:20.628 No need to create a new project. 02:34:20.628 --> 02:34:21.503 And let me check. 02:34:21.503 --> 02:34:24.182 So, this is actually plan mode, so we're okay. 02:34:24.182 --> 02:34:25.834 Okay, implement this. 02:34:25.834 --> 02:34:27.990 And here it's going to create a production. 02:34:28.000 --> 02:34:30.654 So, if we go over here, remember we're using this. 02:34:30.654 --> 02:34:33.088 We also have a production deployment set up. 02:34:33.088 --> 02:34:35.480 So, it's going to be using the production deployment. 02:34:35.480 --> 02:34:40.531 So, we should see data and tables and functions and all that good stuff as part of this deployment. 02:34:40.531 --> 02:34:44.989 Production Convex is now seeded and responding with services and demo users. 02:34:44.989 --> 02:34:47.482 So, if you go over here, we have everything now. 02:34:47.482 --> 02:34:48.030 Look at this. 02:34:48.040 --> 02:34:49.491 Sessions, services. 02:34:49.491 --> 02:34:50.790 We have the data. 02:34:50.800 --> 02:35:04.520 All right, so looks like it has deployed it, and now it's doing a couple of smoke tests to make sure that everything works in production because now it's in production and it's also using the production Convex deployment, right? 02:35:04.520 --> 02:35:09.407 So, we need to test things again because, you know, it's using new environments now. 02:35:09.407 --> 02:35:11.015 All right, and it is done. 02:35:11.015 --> 02:35:12.177 Deployed FlexHelp. 02:35:12.177 --> 02:35:13.346 This is the URL. 02:35:13.346 --> 02:35:16.264 This is the Vercel project deployment ID. 02:35:16.264 --> 02:35:18.325 Everything is live now, okay? 02:35:18.325 --> 02:35:21.644 And you can access it as well at this URL, okay? 02:35:21.644 --> 02:35:28.582 So, we have customer home, and I'm signed in as one of these demo users, customer or helper, right? 02:35:28.582 --> 02:35:36.574 I can go into helper dashboard, and let's say I go I sign in as a customer, and I go into customer home, but I can't click here, right? 02:35:36.574 --> 02:35:37.946 This is helper access, right? 02:35:37.946 --> 02:35:39.325 Remember the roles, right? 02:35:39.325 --> 02:35:41.096 It's it's being handled here. 02:35:41.096 --> 02:35:46.145 And so, now as a customer, I want to book professional seasonal garden cleanup. 02:35:46.145 --> 02:35:54.804 I'm going to book this, request to book, I'm going to fill all of this out, 10:00 a.m., 2 hours, it's fixed address, send booking. 02:35:54.804 --> 02:35:59.699 Okay, so with booking request submitted, your request was saved, view my bookings. 02:35:59.699 --> 02:36:08.121 So, we have all of these pending, and so now I'm going to log in as Marcus, and Marcus is going to go into helper dashboard, and now he sees the booking. 02:36:08.121 --> 02:36:11.492 And I'm going to say accept or complete, it's completed. 02:36:11.492 --> 02:36:21.597 Now, if I come back as Anders again, and I go into customer's home, booking request for maybe summary, right here, customer booking status. 02:36:21.597 --> 02:36:23.116 Okay, there we go, completed. 02:36:23.116 --> 02:36:24.439 And here we see completed. 02:36:24.439 --> 02:36:25.670 This one is completed. 02:36:25.680 --> 02:36:28.486 Actually, this one, for Marcus, it has been completed. 02:36:28.486 --> 02:36:30.289 And then there's some more requests here. 02:36:30.289 --> 02:36:31.486 So, the flow is working. 02:36:31.486 --> 02:36:33.310 The flow is working perfectly. 02:36:33.320 --> 02:36:45.638 Of course, there are so many other things that we can do, we can use real auth, we can change the page, we can update things, but right now, the core of the app works perfectly. 02:36:45.638 --> 02:37:01.950 And just as a little bonus, when you reach this stage, there's more things that you can do, but one thing that, you know, right away that you can ask Codex to do would be something like suggest top five high impact, low effort features, 02:37:01.960 --> 02:37:02.760 functionalities. 02:37:02.760 --> 02:37:12.587 And I'm going to switch into plan mode, and we want to see if there is some high amp impact features that we can add that do not require a lot of effort. 02:37:12.587 --> 02:37:18.056 And here they are, top five high impact, low effort next features I prioritize. 02:37:18.056 --> 02:37:23.911 Functional marketplace search, booking detail view, customer cancel pending requests, etc., etc. 02:37:23.911 --> 02:37:40.988 And if you don't want to implement these right now, what I like to do is save this list as dots.todo.md as a markdown file and prioritize each item on a scale of one to five, one being urgent. 02:37:40.988 --> 02:37:47.515 And so that way I have a constantly evolving list of things that I can build in the future. 02:37:47.515 --> 02:37:53.032 So I do not need to ask Codex all the time constantly, you know, you know, to to suggest new features. 02:37:53.032 --> 02:38:04.253 And I'm going to say submit and that's going to go create this dots directory as well and this todo.md, which is the file that I usually keep to store new features. 02:38:04.253 --> 02:38:15.811 And now we can open this file and say, "Codex, so this is priority one, two, three, four, five." So now we have a an app that is live, that is on the internet, that we have built, that works. 02:38:15.811 --> 02:38:24.233 This workflow, this main workflow works as expected, but of course, there's so many things that you can do to improve this app. 02:38:24.233 --> 02:38:41.030 And in some of the later videos, I'm going to be showing you some more advanced Codex techniques that you can use to make your apps even better and more robust because I've been using Codex for a while now and I have some advanced tips and tricks that I'd 02:38:41.040 --> 02:38:42.906 like to share you in some of the future videos. 02:38:42.906 --> 02:38:48.132 And so I really hope that you enjoyed this mega Codex tutorial. 02:38:48.132 --> 02:39:03.030 Now, if you want to go ahead and build this app or modify this app or whatnot, I'm going to be leaving all my prompts, every single prompt that I used to build this app inside of our amazing Patreon community and you can check it out and 02:39:03.040 --> 02:39:03.794 hopefully join. 02:39:03.794 --> 02:39:09.591 There are lots of great people there and of course, support this channel, and support my work. 02:39:09.591 --> 02:39:17.160 And so, like this video, leave a comment, and check out our amazing Patreon community.