1
00:00:00,000 --> 00:00:03,567
In this video, we're going to do a comprehensive Codex tutorial.

2
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.

3
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.

4
00:00:28,277 --> 00:00:31,885
Then, we'll turn that foundation into a real workflow.

5
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.

6
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.

7
00:00:53,676 --> 00:00:59,407
Now, when you Google for Codex, you're going to land on this website here.

8
00:00:59,407 --> 00:01:04,331
And here, you can learn more about Codex, and you can also download the app.

9
00:01:04,331 --> 00:01:07,205
Now, as you can see, it says here download for macOS.

10
00:01:07,205 --> 00:01:09,548
That is because I have macOS.

11
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.

12
00:01:14,920 --> 00:01:17,442
So, it does support macOS and Windows.

13
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?

14
00:01:29,200 --> 00:01:32,393
And you can kind of scroll down, you can learn more about it.

15
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.

16
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.

17
00:01:44,114 --> 00:01:49,310
Just below that, we have our main organization, right?

18
00:01:49,320 --> 00:01:52,384
And this is where you can organize your projects, okay?

19
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.

20
00:02:06,368 --> 00:02:11,264
They're actually linked to folders on your disk, okay?

21
00:02:11,264 --> 00:02:16,340
And so, everything that you see here represents actual folders.

22
00:02:16,340 --> 00:02:19,993
Now, inside of these folders, we have some items here.

23
00:02:19,993 --> 00:02:24,010
Now, these are not files, and they do not represent anything on the disk.

24
00:02:24,010 --> 00:02:26,398
These are actually conversations, right?

25
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?

26
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.

27
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?

28
00:02:48,101 --> 00:02:52,583
So, if we scroll back up, this was my initial prompt here.

29
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.

30
00:02:59,251 --> 00:03:01,951
And then I have this interaction here, right?

31
00:03:01,951 --> 00:03:06,628
It does something, I ask it to do something else, etc., etc.

32
00:03:06,628 --> 00:03:11,419
Now, just below that is where you're going to be entering your prompt, okay?

33
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.

34
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?

35
00:03:27,252 --> 00:03:30,313
And a lot of people are not really like using it.

36
00:03:30,313 --> 00:03:35,115
And And you need to understand to leverage this whole app experience, right?

37
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?

38
00:03:43,909 --> 00:03:47,885
So, we have branch details, we have some artifacts, right?

39
00:03:47,885 --> 00:03:52,916
And these are the data that happened as a result of this convo, right?

40
00:03:52,916 --> 00:03:56,914
And so, if I go to another conversation, we might have different artifacts, right?

41
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?

42
00:04:03,524 --> 00:04:06,817
So, if you've created a readme file, you're going to see it here.

43
00:04:06,817 --> 00:04:09,310
If you did a web search, you're going to see it here.

44
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.

45
00:04:15,293 --> 00:04:18,177
And here, you can see all kinds of interesting things, right?

46
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.

47
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

48
00:04:41,440 --> 00:04:45,796
see exactly how the app looks as I'm developing it.

49
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.

50
00:04:53,880 --> 00:04:56,235
First, let's talk about Codex.

51
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.

52
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.

53
00:05:19,454 --> 00:05:21,741
The difference matters a lot.

54
00:05:21,741 --> 00:05:28,477
ChatGPT is great when I want an explanation, a rewrite, a brainstorm, or a quick answer.

55
00:05:28,477 --> 00:05:33,968
Codex is what I use when I want work to happen inside a real project.

56
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.

57
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.

58
00:05:50,441 --> 00:05:54,830
So, my project context stays focused and clean.

59
00:05:54,840 --> 00:05:57,157
There are two main ways to use Coda.

60
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.

61
00:06:10,529 --> 00:06:16,098
The second is the Mac app, which is usually better for visual app building work.

62
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.

63
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.

64
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.

65
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.

66
00:07:08,881 --> 00:07:13,550
The project pane is where you open or switch between projects.

67
00:07:13,560 --> 00:07:18,750
The thread area is where the conversation and task history lives.

68
00:07:18,760 --> 00:07:25,123
The file change view shows what Coda wants to edit before those changes are accepted.

69
00:07:25,123 --> 00:07:31,175
The terminal output shows commands, builds, errors, and verification steps.

70
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.

71
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.

72
00:07:44,720 --> 00:07:47,150
Permission flow is also important.

73
00:07:47,160 --> 00:07:52,854
Cortex should never feel like a black box that silently changes everything.

74
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.

75
00:08:09,000 --> 00:08:13,710
The next thing to understand is that Cortex is not just one fixed experience.

76
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.

77
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.

78
00:08:27,800 --> 00:08:32,477
Because most app building tasks benefit from better reasoning.

79
00:08:32,477 --> 00:08:38,270
Here's a rough guide to picking the correct model for your specific task.

80
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.

81
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.

82
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.

83
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.

84
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.

85
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.

86
00:09:53,720 --> 00:09:56,812
The next important decision is the reasoning mode.

87
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.

88
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.

89
00:10:12,842 --> 00:10:19,435
Low thinking is useful for quick, obvious tasks where the risk is small.

90
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.

91
00:10:31,172 --> 00:10:35,150
High is what I use when the decision is more expensive.

92
00:10:35,160 --> 00:10:47,482
Architecture, convex data model design, authentication, permissions, hard bugs, multi-file changes, and the final review.

93
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.

94
00:11:01,200 --> 00:11:03,750
But, the practical lesson is simple.

95
00:11:03,760 --> 00:11:08,578
Match the model and thinking mode to the risk of the decision.

96
00:11:08,578 --> 00:11:13,045
If the task is small and reversible, keep it fast.

97
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.

98
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.

99
00:11:30,429 --> 00:11:34,134
Now, first of all, you have your contacts window here, right?

100
00:11:34,134 --> 00:11:37,341
Here you can see how much of the context you have used.

101
00:11:37,341 --> 00:11:43,191
Now, Korax says that it automatically compacts its contacts.

102
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.

103
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?

104
00:11:57,620 --> 00:12:01,835
Next, we have here the all-important model selector, okay?

105
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?

106
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.

107
00:12:19,895 --> 00:12:24,981
We also have things like speed, standard versus fast.

108
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?

109
00:12:31,402 --> 00:12:35,828
So, depending on which plan you're at, you may want to stay on standard.

110
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.

111
00:12:40,440 --> 00:12:42,751
Next, we have intelligence, right?

112
00:12:42,751 --> 00:12:44,697
Now, this is very, very important.

113
00:12:44,697 --> 00:12:47,576
By default, I keep this on high.

114
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?

115
00:13:02,050 --> 00:13:04,400
You're going to be giving up intelligence.

116
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?

117
00:13:12,011 --> 00:13:13,947
It's kind of like a person, right?

118
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?

119
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?

120
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.

121
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.

122
00:13:48,680 --> 00:13:51,097
And it's the exact same thing here, right?

123
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.

124
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?

125
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.

126
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.

127
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.

128
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.

129
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.

130
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.

131
00:15:03,041 --> 00:15:07,950
For most people learning Codex, the important question is not what is the most expensive plan.

132
00:15:07,960 --> 00:15:12,119
The question is, what do I actually need for the kind of work I'm doing?

133
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.

134
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.

135
00:15:32,251 --> 00:15:36,205
Now, here I am on OpenAI's Codex pricing page.

136
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?

137
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.

138
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.

139
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?

140
00:16:05,600 --> 00:16:09,537
Something like, you know, building a part of an app, or building some scripts.

141
00:16:09,537 --> 00:16:14,670
And they say this can power a few focused coding sessions each week.

142
00:16:14,680 --> 00:16:16,545
Next, we have the pro plan, right?

143
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.

144
00:16:24,889 --> 00:16:28,190
I'm actually using the pro plan 20x.

145
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.

146
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.

147
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?

148
00:16:54,145 --> 00:16:56,312
But I never really get to the limit.

149
00:16:56,312 --> 00:16:59,470
You need to decide which plan is right for you.

150
00:16:59,480 --> 00:17:03,280
Now, from what I understand, plus plan is very, very popular.

151
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

152
00:17:15,800 --> 00:17:16,331
this plan.

153
00:17:16,331 --> 00:17:19,521
And so, the next logical step is to try out the plus plan.

154
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.

155
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?

156
00:17:39,201 --> 00:17:40,779
Lots and lots of code base.

157
00:17:40,779 --> 00:17:43,717
They run out of their plan very, very quickly.

158
00:17:43,717 --> 00:17:48,025
But if you're working on a smaller projects, you're not using the fast mode.

159
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.

160
00:17:57,840 --> 00:18:01,619
So if you're on standard and you're using maybe medium often, right?

161
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.

162
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?

163
00:18:18,848 --> 00:18:20,921
Such as the pro 5x or 20x.

164
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.

165
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?

166
00:18:33,000 --> 00:18:37,176
Use only current official OpenAI pricing and help center information.

167
00:18:37,176 --> 00:18:40,065
And I'm going to go ahead and run this and see what it says.

168
00:18:40,065 --> 00:18:42,395
All right, then this is what we got back.

169
00:18:42,395 --> 00:18:46,639
As of this day, ChatGPT plan is that include Codex, okay?

170
00:18:46,639 --> 00:18:48,310
So this is the practical read.

171
00:18:48,320 --> 00:18:51,279
Free, try Codex on quick tasks.

172
00:18:51,279 --> 00:18:53,387
Go lightweight coding tasks.

173
00:18:53,387 --> 00:18:56,670
Plus a few focus coding sessions each week, okay?

174
00:18:56,680 --> 00:19:00,283
And this is exactly what I just told you from that official page.

175
00:19:00,283 --> 00:19:04,107
And so if you scroll down, you can see how Codex usage and credits work.

176
00:19:04,107 --> 00:19:05,826
You can learn you can read this.

177
00:19:05,826 --> 00:19:08,209
Best fit for your use case, okay?

178
00:19:08,209 --> 00:19:13,971
For learning Codex and building small to medium apps, ChatGPT plus is the sensible default.

179
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.

180
00:19:20,760 --> 00:19:26,299
Okay, when heavier or business plans make sense, what to verify live before deciding?

181
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.

182
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.

183
00:19:38,242 --> 00:19:45,470
And then you can decide whether you want to upgrade to the higher tier plans.

184
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.

185
00:19:53,557 --> 00:19:57,786
These are features I use all the time across different projects.

186
00:19:57,786 --> 00:20:05,079
Skills, plugins, automations, and MCP along with its tools and connectors.

187
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.

188
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.

189
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.

190
00:20:36,819 --> 00:20:42,950
Skills are reusable instructions for how Codex should do a workflow.

191
00:20:42,960 --> 00:20:45,465
They're not external tools by themselves.

192
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.

193
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.

194
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.

195
00:21:18,560 --> 00:21:19,808
The rule is simple.

196
00:21:19,808 --> 00:21:24,330
Anything that gets used over and over again becomes a skill.

197
00:21:24,330 --> 00:21:28,986
That matters because a lot of real work is not just about getting an answer.

198
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.

199
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.

200
00:21:45,400 --> 00:21:49,190
So, I have here a conversation for an app that I was building.

201
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?

202
00:21:54,923 --> 00:21:56,550
I can do many, many things.

203
00:21:56,560 --> 00:22:00,049
And as you can see for skills, I have lots and lots of skills.

204
00:22:00,049 --> 00:22:02,997
I have tons and tons of skills over there.

205
00:22:02,997 --> 00:22:07,578
And skills allow me to package a repeatable process.

206
00:22:07,578 --> 00:22:11,075
You can think of it as a function that does something.

207
00:22:11,075 --> 00:22:14,150
It gets some input and it produces an output.

208
00:22:14,160 --> 00:22:18,343
And the goal is to produce consistent output as you've done before.

209
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?

210
00:22:23,242 --> 00:22:25,960
And I asked the model to do something for me.

211
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?

212
00:22:32,078 --> 00:22:33,707
And it comes up with this.

213
00:22:33,707 --> 00:22:36,493
Now, right here can package that as a skill.

214
00:22:36,493 --> 00:22:38,990
Now, what do I want to package as a skill?

215
00:22:38,990 --> 00:22:42,876
Well, I want to package, for instance, maybe creating the architecture.

216
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.

217
00:22:52,932 --> 00:22:54,670
Sample arch stack.

218
00:22:54,680 --> 00:22:55,133
Okay?

219
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.

220
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.

221
00:23:13,487 --> 00:23:15,780
And I'm going to go ahead and execute this.

222
00:23:15,780 --> 00:23:17,343
And let's see what happens.

223
00:23:17,343 --> 00:23:22,310
Now, it came back to me and it wants me to answer a question.

224
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?

225
00:23:32,437 --> 00:23:35,063
So, we want it to be a general app architecture.

226
00:23:35,063 --> 00:23:36,869
So, I'm going to go ahead and save this.

227
00:23:36,869 --> 00:23:39,301
And now it came back with a plan, okay?

228
00:23:39,301 --> 00:23:47,131
Create the reusable Codex skill named sample arch stack under wherever it's storing those skills.

229
00:23:47,131 --> 00:23:51,550
The skill will guide Codex through the architecture step for simple app ideas.

230
00:23:51,560 --> 00:23:54,994
And it's going to package that step into a reusable process.

231
00:23:54,994 --> 00:23:55,580
All right.

232
00:23:55,580 --> 00:23:58,110
And now it tells me that created the skill app.

233
00:23:58,120 --> 00:24:04,270
It contains skill.md and then It contains skill.md and then agents.for.openai.yaml.

234
00:24:04,280 --> 00:24:06,480
Validation passed, etc. etc.

235
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.

236
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?

237
00:24:27,152 --> 00:24:28,806
We're just going to do local only.

238
00:24:28,806 --> 00:24:30,676
And here it came back with a plan.

239
00:24:30,676 --> 00:24:34,775
Brand new local only project management app architecture, right?

240
00:24:34,775 --> 00:24:36,701
That's the purpose of the skill, okay?

241
00:24:36,701 --> 00:24:41,090
We're going to expand this and it's coming up with this architecture, right?

242
00:24:41,090 --> 00:24:46,710
App shape, data state model, component architecture, test plan, etc.

243
00:24:46,720 --> 00:24:46,970
etc.

244
00:24:46,970 --> 00:24:50,615
And we can say yes and it's going to go ahead and implement all that.

245
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.

246
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.

247
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.

248
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.

249
00:25:23,840 --> 00:25:28,774
They all expand what Codex can do, but they are not the same thing.

250
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.

251
00:25:36,720 --> 00:25:42,818
For example, a Notion plugin can help Codex read and update Notion pages.

252
00:25:42,818 --> 00:25:47,270
A Vercel plugin can help with deploys and project settings.

253
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.

254
00:25:58,040 --> 00:26:00,850
The simple way to think about plugins is this.

255
00:26:00,850 --> 00:26:07,430
They give Codex a more specialized tool set for a specific job.

256
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.

257
00:26:18,358 --> 00:26:20,252
Automations are different.

258
00:26:20,252 --> 00:26:22,330
A plugin gives Codex a different.

259
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.

260
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.

261
00:26:42,440 --> 00:26:47,228
This is useful because not every task needs to happen immediately.

262
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.

263
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.

264
00:27:11,171 --> 00:27:13,861
The important distinction is simple.

265
00:27:13,861 --> 00:27:21,188
Plugins are about what Codex can do, and automations are about when Codex should do it.

266
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?

267
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?

268
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?

269
00:27:37,372 --> 00:27:40,861
So, you can click on the plugin, and you can learn more about it, right?

270
00:27:40,861 --> 00:27:46,425
So, for instance, this spreadsheets allows you to create and edit spreadsheet files, right?

271
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?

272
00:27:52,730 --> 00:27:59,961
Create, edit, inspect, render, verify, and export Excel SX, CSV, and TSV spreadsheets locally.

273
00:27:59,961 --> 00:28:05,845
Use spreadsheets when the durable output or target is a spreadsheet workbook, etc., etc.

274
00:28:05,845 --> 00:28:08,095
So, this includes the skill, right?

275
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?

276
00:28:20,561 --> 00:28:23,764
It's kind of this higher-level structure, okay?

277
00:28:23,764 --> 00:28:27,415
Whereas a skill is a very, very specific thing.

278
00:28:27,415 --> 00:28:29,854
It's a specific piece of instruction.

279
00:28:29,854 --> 00:28:31,644
Essentially, a specific prompt.

280
00:28:31,644 --> 00:28:35,440
A plugin is this umbrella that contains a skill, right?

281
00:28:35,440 --> 00:28:36,603
So, you can have that.

282
00:28:36,603 --> 00:28:39,213
One plugin that I use all the time is Notion.

283
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?

284
00:28:45,162 --> 00:28:51,072
Notion workflows for specs, research, meetings, and knowledge capture, right?

285
00:28:51,072 --> 00:28:54,510
So, you can specify this, and then you can give it a prompt.

286
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.

287
00:29:00,047 --> 00:29:01,150
These are skills.

288
00:29:01,160 --> 00:29:02,514
This is an app.

289
00:29:02,514 --> 00:29:06,630
Okay, so this allows it to connect to an external system, right?

290
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.

291
00:29:11,917 --> 00:29:14,774
And this right here, these are skills, right?

292
00:29:14,774 --> 00:29:18,097
I can open that, and that's going to open the skill right here, right?

293
00:29:18,097 --> 00:29:21,514
This is This is how the skill is actually stored.

294
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.

295
00:29:26,520 --> 00:29:29,734
Now, this is a plugin that I use all the time, right?

296
00:29:29,734 --> 00:29:36,935
I use Notion for my planning, for, you know, writing stuff, scheduling stuff like that.

297
00:29:36,935 --> 00:29:40,552
It's the brain of my workflow, essentially.

298
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?

299
00:29:51,287 --> 00:29:53,112
Connected to my Notion account.

300
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

301
00:30:10,920 --> 00:30:11,243
Codex.

302
00:30:11,243 --> 00:30:16,058
That's kind of the purpose of a skill, to make something an extension of Codex.

303
00:30:16,058 --> 00:30:16,557
Right?

304
00:30:16,557 --> 00:30:19,691
And that's the main idea with all of this, right?

305
00:30:19,691 --> 00:30:23,707
Another really cool one is, like, for instance, Google Calendar is another one, right?

306
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.

307
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.

308
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?

309
00:30:41,440 --> 00:30:47,700
Vercel, or maybe something like Netlify for deploying your apps, right?

310
00:30:47,700 --> 00:30:50,692
I use Vercel when demoing apps.

311
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

312
00:31:06,320 --> 00:31:08,201
understand how to deploy and all of that.

313
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.

314
00:31:17,748 --> 00:31:22,099
Or Vercel, which Vercel tools fit fit this app app best.

315
00:31:22,099 --> 00:31:24,886
Or Vercel, deploy this app, right?

316
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.

317
00:31:30,153 --> 00:31:31,743
All of these different skills.

318
00:31:31,743 --> 00:31:32,342
Look at this.

319
00:31:32,342 --> 00:31:34,399
It has a ton a ton of skills.

320
00:31:34,399 --> 00:31:37,091
Vercel CLI, Vercel agent, all of these.

321
00:31:37,091 --> 00:31:41,786
And obviously, these skills are not just for deploying, right?

322
00:31:41,786 --> 00:31:43,515
Because we also have payments.

323
00:31:43,515 --> 00:31:45,399
We have best practices.

324
00:31:45,399 --> 00:31:47,995
We have all of these other ones.

325
00:31:47,995 --> 00:31:55,230
So, these skills essentially map to different parts of Vercel, to different features of Vercel.

326
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?

327
00:32:01,537 --> 00:32:03,854
This could be one skill that I may need.

328
00:32:03,854 --> 00:32:06,550
I I may not need all of these other skills.

329
00:32:06,560 --> 00:32:07,332
But why not?

330
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.

331
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.

332
00:32:19,199 --> 00:32:25,072
And like I said, this allows me to basically bring Vercel into my Codex workflow.

333
00:32:25,072 --> 00:32:27,719
That's the beauty of these plugins, okay?

334
00:32:27,719 --> 00:32:30,048
And that's the same idea with all of these plugins.

335
00:32:30,048 --> 00:32:35,654
You're essentially bringing an external system and letting Codex manage it for you.

336
00:32:35,654 --> 00:32:38,775
Now, automations work very, very differently.

337
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?

338
00:32:47,784 --> 00:32:49,259
And you can learn more here.

339
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.

340
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?

341
00:33:02,963 --> 00:33:05,147
And what exactly is it trying to do?

342
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?

343
00:33:11,392 --> 00:33:12,903
So, it creates this automation.

344
00:33:12,903 --> 00:33:15,370
This is the name of the automation, right?

345
00:33:15,370 --> 00:33:16,463
This is the prompt.

346
00:33:16,463 --> 00:33:18,294
This right here is the prompt.

347
00:33:18,294 --> 00:33:24,614
And the prompt is summarize yesterday's Git activity for standup, grounding rules, etc., etc.

348
00:33:24,614 --> 00:33:26,358
We can select a work tree.

349
00:33:26,358 --> 00:33:28,597
We can select a project here.

350
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?

351
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.

352
00:33:39,907 --> 00:33:45,508
But, you can also select it, make it hourly, daily, weekly, etc., etc.

353
00:33:45,508 --> 00:33:48,642
And you can also change the time, obviously.

354
00:33:48,642 --> 00:33:53,780
Now, here you can change the model, and here you can change the reasoning level.

355
00:33:53,780 --> 00:33:57,264
Now, with this kind of automation, you don't really need a high reasoning.

356
00:33:57,264 --> 00:33:59,177
Medium is going to be just fine.

357
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.

358
00:34:08,159 --> 00:34:09,214
running this prompt.

359
00:34:09,214 --> 00:34:11,627
And And remember, this is a special prompt.

360
00:34:11,627 --> 00:34:14,666
Here, you're asking it to consult Git activity.

361
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.

362
00:34:26,742 --> 00:34:30,225
And that's going to run every weekday at 9:00 a.m., right?

363
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.

364
00:34:41,864 --> 00:34:44,762
If you scroll down, you can see some other automations here.

365
00:34:44,762 --> 00:34:47,923
You have incidents, you have code quality, right?

366
00:34:47,923 --> 00:34:51,813
Maybe you want to run a code quality check every 24 hours.

367
00:34:51,813 --> 00:34:55,884
Well, you can click here daily at 9:00 a.m., right?

368
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.

369
00:35:04,273 --> 00:35:09,071
Okay, that's another very, very useful automation, right?

370
00:35:09,071 --> 00:35:10,498
Repo maintenance.

371
00:35:10,498 --> 00:35:14,030
You have here growth and exploration, right?

372
00:35:14,040 --> 00:35:19,780
Click here from recent PRs and reviews, suggest next skills to deepen.

373
00:35:19,780 --> 00:35:21,331
This is great, right?

374
00:35:21,331 --> 00:35:24,988
So, automations, they could be used for pretty much anything, right?

375
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.

376
00:35:28,225 --> 00:35:33,201
You don't need to be in software development or project management or anything like that.

377
00:35:33,201 --> 00:35:34,747
You can be a writer, right?

378
00:35:34,747 --> 00:35:35,753
You want a status.

379
00:35:35,753 --> 00:35:38,026
You're writing maybe 1,000 words every day.

380
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.

381
00:35:51,120 --> 00:35:55,609
And that can run every morning at 9:00 or 10:00 a.m., okay?

382
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.

383
00:36:03,993 --> 00:36:07,533
And I want to talk a little bit about MCP.

384
00:36:07,533 --> 00:36:12,675
So, MCP or model context protocol is very, very important, okay?

385
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.

386
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.

387
00:36:28,035 --> 00:36:31,274
Now, an MCP server is basically a server.

388
00:36:31,274 --> 00:36:36,025
It's a remote system that your Codex instance can connect to.

389
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.

390
00:36:40,673 --> 00:36:45,014
For instance, I have here a Stitch MCP server configured.

391
00:36:45,014 --> 00:36:48,022
I have here a Superbase MCP server.

392
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.

393
00:36:54,177 --> 00:36:59,572
And when you connect to them, Codex is acting like an MCP client.

394
00:36:59,572 --> 00:37:03,056
So, you have that same client-server paradigm.

395
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?

396
00:37:09,103 --> 00:37:11,705
Well, the reason is very simple.

397
00:37:11,705 --> 00:37:16,935
You want Codex to do all the administration, all the work for you, right?

398
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.

399
00:37:27,384 --> 00:37:28,846
You can configure all of that.

400
00:37:28,846 --> 00:37:31,436
That takes time, but it's, you know, it's very, very doable.

401
00:37:31,436 --> 00:37:38,633
Or, you can simply configure a Superbase MCP server in your Codex instance.

402
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.

403
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

404
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

405
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.

406
00:38:27,968 --> 00:38:30,812
And this is extremely helpful to us, okay?

407
00:38:30,812 --> 00:38:33,882
And so, there's a couple of ways that you can add a server.

408
00:38:33,882 --> 00:38:37,140
You can click here, and you can fill all of this manually.

409
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.

410
00:38:43,993 --> 00:38:45,047
It's going to search for it.

411
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.

412
00:38:48,566 --> 00:38:50,632
And the same thing for all of these other ones.

413
00:38:50,632 --> 00:38:54,624
Now, after setting up the MCP server, you can simply tell Codex to use it.

414
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.

415
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.

416
00:39:23,730 --> 00:39:26,143
What is the best way to approach it?

417
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.

418
00:39:32,868 --> 00:39:34,896
The loop is simple.

419
00:39:34,896 --> 00:39:39,081
Inspect, plan, edit, verify, and report.

420
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.

421
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.

422
00:40:00,480 --> 00:40:06,390
That can work for small tasks, but it breaks down quickly on real projects.

423
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.

424
00:40:19,997 --> 00:40:22,830
A good Codex prompt is not just a request.

425
00:40:22,830 --> 00:40:24,820
It is a small project brief.

426
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.

427
00:40:34,663 --> 00:40:36,990
The basic structure is simple.

428
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.

429
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.

430
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

431
00:41:13,040 --> 00:41:17,867
how you will verify." That gives Codex a much cleaner job.

432
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.

433
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.

434
00:41:37,779 --> 00:41:43,187
Then Codex can use the actual project context to choose the cleanest path.

435
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.

436
00:41:50,151 --> 00:41:56,630
Plan mode is a superpower that I use for 80 to 90% of my prompts.

437
00:41:56,640 --> 00:42:00,190
There are two main benefits to using the plan mode.

438
00:42:00,200 --> 00:42:07,277
First, it's a form of brainstorming where the model cannot change or alter your files.

439
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.

440
00:42:14,285 --> 00:42:18,122
This is especially useful when the request is under specified.

441
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.

442
00:42:24,342 --> 00:42:26,809
What fields does the form need?

443
00:42:26,809 --> 00:42:29,734
What status should the booking start with?

444
00:42:29,734 --> 00:42:32,457
Where should the booking appear for the helper?

445
00:42:32,457 --> 00:42:35,519
What should happen after submission?

446
00:42:35,519 --> 00:42:42,384
Plan mode gives Codex a chance to surface those questions before it edits the app.

447
00:42:42,384 --> 00:42:45,451
I also use plan mode as a quality filter.

448
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.

449
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.

450
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.

451
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.

452
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.

453
00:43:30,160 --> 00:43:34,996
Then it should plan the work in a way that is small enough to review.

454
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.

455
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.

456
00:43:49,992 --> 00:43:55,515
And finally, it should report what changed and what still needs attention.

457
00:43:55,515 --> 00:43:58,668
Verification is the part I want to emphasize.

458
00:43:58,668 --> 00:44:03,310
A task is not finished just because Codex wrote code.

459
00:44:03,320 --> 00:44:06,070
For UI work, I want to see the browser.

460
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.

461
00:44:12,204 --> 00:44:17,990
For deployment work, I want the live URL and a real smoke test.

462
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.

463
00:44:25,159 --> 00:44:30,186
Additionally, you always want to break big tasks into smaller one.

464
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,

465
00:44:46,520 --> 00:44:47,870
and so on.

466
00:44:47,880 --> 00:44:53,584
Each step has a clear target and a clear way to check whether it worked.

467
00:44:53,584 --> 00:44:58,264
A good Codex task should usually fit into one reviewable outcome.

468
00:44:58,264 --> 00:45:02,745
Create the first static marketplace homepage is reviewable.

469
00:45:02,745 --> 00:45:07,182
Wire service listings from Convex is reviewable.

470
00:45:07,182 --> 00:45:12,473
Add booking creation and verify the booking row appears is reviewable.

471
00:45:12,473 --> 00:45:19,950
Build the whole app is not reviewable because there are too many decisions happening at once.

472
00:45:19,960 --> 00:45:23,178
So, the workflow is not just a technical process.

473
00:45:23,178 --> 00:45:26,374
It is also a way to stay in control.

474
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.

475
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.

476
00:45:46,520 --> 00:45:49,062
Or, you can click here and toggle this.

477
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.

478
00:45:53,840 --> 00:45:57,300
And then, whenever I'm in plan mode, I can start brainstorming.

479
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

480
00:46:14,760 --> 00:46:17,214
Codex knows exactly what it's doing.

481
00:46:17,214 --> 00:46:18,465
We Codex knows exactly what it's doing.

482
00:46:18,465 --> 00:46:23,031
We never the last thing that we want is for Codex to assume something.

483
00:46:23,031 --> 00:46:25,305
We never want it to assume anything.

484
00:46:25,305 --> 00:46:28,683
We always want to make sure that we are on the same page.

485
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.

486
00:46:33,466 --> 00:46:37,350
I want to build some kind of a an intricate architecture.

487
00:46:37,360 --> 00:46:41,641
And, you know, I I want to make sure that we built out an architecture.

488
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.

489
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.

490
00:47:02,480 --> 00:47:06,109
Ensure it is fast and robust.

491
00:47:06,109 --> 00:47:06,735
Okay?

492
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.

493
00:47:13,054 --> 00:47:14,657
I don't even know what I want.

494
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.

495
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.

496
00:47:24,292 --> 00:47:24,921
Let's see.

497
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?

498
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.

499
00:47:40,866 --> 00:47:45,976
You share TypeScript domain logic with separate Expo mobile, etc.

500
00:47:45,976 --> 00:47:51,849
Do we want a one universal app, or do we want web first wrappers, right?

501
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.

502
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.

503
00:48:06,341 --> 00:48:07,807
So, I'm going to say this one.

504
00:48:07,807 --> 00:48:09,801
I'm going to I'm going to go with recommended.

505
00:48:09,801 --> 00:48:14,517
And now, it wants to know what should the app support for data and reliability.

506
00:48:14,517 --> 00:48:19,389
Offline first cloud sync, cloud only real-time, or local only.

507
00:48:19,389 --> 00:48:24,141
And you can click and you can hover over the little I to get more details.

508
00:48:24,141 --> 00:48:28,634
Users can can work offline and sync across devices.

509
00:48:28,634 --> 00:48:33,657
Cloud only, simpler shared back and live updates, but weaker offline behavior.

510
00:48:33,657 --> 00:48:36,023
Now, here you can also tell Codex something else.

511
00:48:36,023 --> 00:48:38,910
You can say, "Well, I want this, this, this, this."

512
00:48:38,920 --> 00:48:39,380
Right?

513
00:48:39,380 --> 00:48:44,716
Or, you can press escape, and you can ask Codex to explain the question.

514
00:48:44,716 --> 00:48:50,270
I can say something like this, "Explain the last question in simple terms."

515
00:48:50,280 --> 00:48:50,573
Okay?

516
00:48:50,573 --> 00:48:52,742
I don't need to answer it right away.

517
00:48:52,742 --> 00:48:55,858
I can get Codex to kind of walk me through it, right?

518
00:48:55,858 --> 00:48:56,995
Explain the last question.

519
00:48:56,995 --> 00:48:58,108
Let's see what it says.

520
00:48:58,108 --> 00:49:00,430
I was asking two choices.

521
00:49:00,440 --> 00:49:02,050
How should data work?

522
00:49:02,050 --> 00:49:07,062
My recommendation, shared code and native shells plus offline first cloud sync.

523
00:49:07,062 --> 00:49:09,229
If you want this to become a serious app.

524
00:49:09,229 --> 00:49:10,690
So, it tells you these things.

525
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.

526
00:49:14,937 --> 00:49:19,950
You can close that, and you can ask Codex to clarify.

527
00:49:19,960 --> 00:49:23,874
And now, what we can do is ask me those questions again.

528
00:49:23,874 --> 00:49:26,604
You can do that, or you can simply answer it here.

529
00:49:26,604 --> 00:49:27,248
It doesn't matter.

530
00:49:27,248 --> 00:49:29,918
So, if you do that, it's going to come back with that question here again.

531
00:49:29,918 --> 00:49:31,171
And here are the questions.

532
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.

533
00:49:37,225 --> 00:49:37,738
Got it.

534
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.

535
00:49:45,880 --> 00:49:46,614
And that's good.

536
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.

537
00:49:49,906 --> 00:49:53,830
Go and implement this." Something like this or something more specific.

538
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.

539
00:50:05,320 --> 00:50:08,910
Now, I want to talk to you about some advanced Codex workflow techniques.

540
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.

541
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.

542
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.

543
00:50:31,208 --> 00:50:33,694
A good handoff is not a vague summary.

544
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.

545
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.

546
00:50:50,135 --> 00:50:53,630
And there are two main reasons that you may want to do that.

547
00:50:53,630 --> 00:50:59,975
The first reason is that after a while, this conversation here, this it starts to degrade.

548
00:50:59,975 --> 00:51:06,096
As you keep typing new prompts, and as the model answers, the convo starts to degrade.

549
00:51:06,096 --> 00:51:12,178
Now, Codex tells you that it automatically compacts its context, and that is true.

550
00:51:12,178 --> 00:51:16,230
You do not need to start a new convo every time.

551
00:51:16,230 --> 00:51:18,726
It it does automatically compact it.

552
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.

553
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

554
00:51:43,280 --> 00:51:44,216
starting point.

555
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.

556
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.

557
00:52:03,882 --> 00:52:05,989
It doesn't give you the right algorithm.

558
00:52:05,989 --> 00:52:07,861
It doesn't give you the right solution.

559
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.

560
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

561
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.

562
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.

563
00:52:40,280 --> 00:52:41,925
That solution might actually work.

564
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.

565
00:52:49,164 --> 00:52:53,394
One of the simplest ways would be by typing something like this.

566
00:52:53,394 --> 00:52:59,870
Okay, this is a very very simple prompt that still delivers a fairly high quality handoff.

567
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.

568
00:53:06,412 --> 00:53:06,800
Okay.

569
00:53:06,800 --> 00:53:11,674
So let's go ahead and send this and see what what answer we get.

570
00:53:11,674 --> 00:53:11,964
Right.

571
00:53:11,964 --> 00:53:13,585
And this is the response we got.

572
00:53:13,585 --> 00:53:18,030
I want to design a fast robust cross platform project management app.

573
00:53:18,040 --> 00:53:22,120
So it's essentially summarizing everything that has happened in the convo, right?

574
00:53:22,120 --> 00:53:23,412
This is the context.

575
00:53:23,412 --> 00:53:24,812
This is the product direction.

576
00:53:24,812 --> 00:53:26,728
This is the architecture preference.

577
00:53:26,728 --> 00:53:31,708
Please produce a detailed architecture plan covering all this important, right?

578
00:53:31,708 --> 00:53:32,769
Also some constraints.

579
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.

580
00:53:38,687 --> 00:53:41,901
For instance, you can click here and you can simply paste it.

581
00:53:41,901 --> 00:53:44,217
Okay, well you you don't want to delete that.

582
00:53:44,217 --> 00:53:45,961
You want to delete like the top.

583
00:53:45,961 --> 00:53:47,459
You want to delete that.

584
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.

585
00:53:55,104 --> 00:53:56,626
That is one way to do it.

586
00:53:56,626 --> 00:54:01,911
Another way to do it is by giving it a more detailed handoff prompt.

587
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.

588
00:54:06,400 --> 00:54:09,593
Create a clean handoff for a new Codex thread.

589
00:54:09,593 --> 00:54:10,830
Include all of this.

590
00:54:10,830 --> 00:54:12,477
Do not make any changes.

591
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.

592
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.

593
00:54:26,223 --> 00:54:28,782
Now, take a look at this handoff right here.

594
00:54:28,782 --> 00:54:34,234
Look at how much more detailed this handoff versus this handoff right here.

595
00:54:34,234 --> 00:54:39,126
Now, this handoff would definitely work, but this handoff would work even better.

596
00:54:39,126 --> 00:54:42,041
Going to result in a higher quality conversation.

597
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.

598
00:54:57,000 --> 00:55:01,605
The next practical habit is using Git as a checkpoint system.

599
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.

600
00:55:06,560 --> 00:55:11,950
After each milestone, I want a diff that is small enough to review and explain.

601
00:55:11,960 --> 00:55:17,746
That is what keeps an agentic workflow from turning into one giant mystery edit.

602
00:55:17,746 --> 00:55:22,326
The useful trick is to make Codex summarize the diff in plain English.

603
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.

604
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.

605
00:55:43,000 --> 00:55:48,782
And in software development, you want to be using a source control system, such as Git.

606
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.

607
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.

608
00:56:01,752 --> 00:56:04,317
I have no way to revert the changes.

609
00:56:04,317 --> 00:56:08,115
I have no way to see what the actual change represents.

610
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.

611
00:56:14,232 --> 00:56:16,980
Now, in this convo, we have another problem, okay?

612
00:56:16,980 --> 00:56:19,368
The current working directory is missing.

613
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.

614
00:56:32,477 --> 00:56:33,799
So, I'm going to go over here.

615
00:56:33,799 --> 00:56:35,506
I'm just going to do start from scratch.

616
00:56:35,506 --> 00:56:39,810
I'm going to paste this handoff prompt to start a brand new convo.

617
00:56:39,810 --> 00:56:45,473
And I'm going to preface it by telling it to create a Git repository.

618
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.

619
00:56:51,934 --> 00:56:53,775
So, I'm going to run that.

620
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.

621
00:57:00,080 --> 00:57:00,552
All right.

622
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.

623
00:57:06,760 --> 00:57:08,990
Initial architecture plan here, okay?

624
00:57:09,000 --> 00:57:10,784
The workspace was empty when I inspected.

625
00:57:10,784 --> 00:57:11,897
There was nothing there.

626
00:57:11,897 --> 00:57:16,160
We just created a brand new project, and it essentially created an architecture.

627
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.

628
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?

629
00:57:32,832 --> 00:57:34,258
Let's go ahead and run that.

630
00:57:34,258 --> 00:57:36,343
So, it now created this index.html.

631
00:57:36,343 --> 00:57:39,203
We're going to open it, and it says hello world.

632
00:57:39,203 --> 00:57:44,852
And so, now what we can do is we can say check the Git status.

633
00:57:44,852 --> 00:57:49,270
And obviously, this file is not going to be in our Git, right?

634
00:57:49,270 --> 00:57:52,310
You see this is not tracked, an untracked file.

635
00:57:52,320 --> 00:57:57,349
So, what we want is we want to commit index.html as initial commit.

636
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.

637
00:58:02,402 --> 00:58:05,690
The files that are not tracked are the files you don't really care about, right?

638
00:58:05,690 --> 00:58:08,139
You don't You don't really need to store them in Git.

639
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.

640
00:58:15,321 --> 00:58:19,218
But for your actual code, you always want to be tracking them, right?

641
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.

642
00:58:25,437 --> 00:58:25,726
Okay?

643
00:58:25,726 --> 00:58:28,899
So, now it says committed as initial commit, right?

644
00:58:28,899 --> 00:58:32,108
We have this It's now on main, which is the a type of branch.

645
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.

646
00:58:36,881 --> 00:58:39,528
And as you can see here, it says no file changes yet.

647
00:58:39,528 --> 00:58:44,301
And that is because we have not made any changes since tracking that file.

648
00:58:44,301 --> 00:58:50,013
So, what I'm going to do now is that make index.html output hello James.

649
00:58:50,013 --> 00:58:52,950
That has updated, and now it says hello James.

650
00:58:52,960 --> 00:58:54,944
And now what we can do is we can commit it.

651
00:58:54,944 --> 00:58:56,527
Commit index.html.

652
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?

653
00:59:03,089 --> 00:59:06,214
It's modified, and it's tracked, but it hasn't been committed.

654
00:59:06,214 --> 00:59:06,481
Okay?

655
00:59:06,481 --> 00:59:09,103
It has been modified and uncommitted, right?

656
00:59:09,103 --> 00:59:11,621
You see this M, which means this has been modified.

657
00:59:11,621 --> 00:59:15,270
So, we're going to do commit index.html.

658
00:59:15,280 --> 00:59:18,753
And it will also generate a default message.

659
00:59:18,753 --> 00:59:20,232
Here it has committed it.

660
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.

661
00:59:26,558 --> 00:59:30,580
You can see on stage, stage, branch, or last turn.

662
00:59:30,580 --> 00:59:34,949
And when you click on last turn, you can see what was changed, okay?

663
00:59:34,949 --> 00:59:37,732
Because we are we are using source control.

664
00:59:37,732 --> 00:59:39,404
We can see the stuff that was changed.

665
00:59:39,404 --> 00:59:42,434
As you can see, this is the one line that was changed.

666
00:59:42,434 --> 00:59:46,143
Red means it was deleted, and green means it was inserted.

667
00:59:46,143 --> 00:59:48,792
So, this was deleted, and this was inserted.

668
00:59:48,792 --> 00:59:52,710
We basically changed the message that it says from Hello World to Hello James.

669
00:59:52,720 --> 00:59:55,965
And so, Git is very very important.

670
00:59:55,965 --> 00:59:58,923
If you're working on any kind of project, right?

671
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.

672
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.

673
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.

674
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.

675
01:00:31,880 --> 01:00:34,073
This matters a lot with the genetic coding.

676
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.

677
01:00:45,280 --> 01:00:50,034
Now, what's nice about work trees is that they give you parallelism.

678
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.

679
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.

680
01:01:12,107 --> 01:01:16,864
And when you're done, you merge the changes back onto your main tree.

681
01:01:16,864 --> 01:01:19,790
Now, that doesn't mean you can only create one work tree.

682
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

683
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

684
01:01:47,400 --> 01:01:49,350
conflict so that there's no corruption.

685
01:01:49,360 --> 01:01:52,367
Now, this is a feature I use all the time in big projects.

686
01:01:52,367 --> 01:01:55,029
Now, let's say I'm working on this app over here.

687
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.

688
01:02:04,691 --> 01:02:07,052
So, let's continue what we were doing.

689
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.

690
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.

691
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.

692
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.

693
01:02:40,968 --> 01:02:44,094
And so, as you can see here, there's more stuff happening.

694
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.

695
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,

696
01:03:06,720 --> 01:03:08,038
and deleted the worktree.

697
01:03:08,038 --> 01:03:10,754
And so, that was a very, very small change.

698
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?

699
01:03:18,114 --> 01:03:22,962
So, if I click over here, that will fork it into a separate work tree.

700
01:03:22,962 --> 01:03:27,097
And here you can see we're working in a separate work tree here, okay?

701
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.

702
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.

703
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?

704
01:03:49,204 --> 01:03:51,470
So, here's the file, we can open it.

705
01:03:51,470 --> 01:03:52,590
Hello, USA here.

706
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?

707
01:03:58,412 --> 01:04:02,787
Index now displays Hello, USA, and we no longer have this temporary work tree.

708
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.

709
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.

710
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.

711
01:04:22,769 --> 01:04:26,150
And so, this is really nice for feature isolation.

712
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.

713
01:04:36,520 --> 01:04:40,744
Another advanced trick is using sub-agents for parallel work.

714
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.

715
01:04:45,499 --> 01:04:47,950
The useful version is much more controlled.

716
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.

717
01:04:56,458 --> 01:04:57,713
The key is ownership.

718
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.

719
01:05:04,281 --> 01:05:08,999
That keeps the work parallel without turning it into a merge mess.

720
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.

721
01:05:17,868 --> 01:05:23,399
Now, sub-agents is another really cool feature that will help speed up your workflows.

722
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.

723
01:05:32,288 --> 01:05:35,923
All right, so here I have a very, very simple Kanban app.

724
01:05:35,923 --> 01:05:38,231
If I click over here, I have this.

725
01:05:38,231 --> 01:05:42,018
I can drag and drop. create new tasks, etc., etc.

726
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

727
01:05:56,360 --> 01:05:56,779
possible.

728
01:05:56,779 --> 01:05:59,024
And so, I'm going to paste this prompt here.

729
01:05:59,024 --> 01:06:02,281
Plan how to split this feature across sub-agents, right?

730
01:06:02,281 --> 01:06:03,469
Do not edit files yet.

731
01:06:03,469 --> 01:06:04,022
Recommend.

732
01:06:04,022 --> 01:06:06,263
We're going to jump into plan mode.

733
01:06:06,263 --> 01:06:08,553
Preface this with the feature.

734
01:06:08,553 --> 01:06:13,315
Add to party apps, such as make.com, Zapier, etc.

735
01:06:13,315 --> 01:06:15,420
And so, I'm going to I'm going to leave it at this.

736
01:06:15,420 --> 01:06:17,124
And I'm going to go ahead and run this.

737
01:06:17,124 --> 01:06:18,893
And so, let's go ahead and run this.

738
01:06:18,893 --> 01:06:20,414
And here we have the plan.

739
01:06:20,414 --> 01:06:25,390
The safest split is for the main thread to own architecture, shared data contracts.

740
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.

741
01:06:34,286 --> 01:06:37,083
Okay, so we have main thread responsibilities.

742
01:06:37,083 --> 01:06:39,568
And then we have sub-agent delegation.

743
01:06:39,568 --> 01:06:44,304
Integration settings, integration data model, web hook event dispatcher.

744
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.

745
01:06:53,342 --> 01:06:54,721
Let's go ahead and run this.

746
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.

747
01:07:03,214 --> 01:07:05,200
And each sub-agent gets a prompt.

748
01:07:05,200 --> 01:07:08,270
It's basically like me creating a new conversation.

749
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.

750
01:07:15,663 --> 01:07:18,555
And here it tells you all four sub agents are running.

751
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.

752
01:07:23,770 --> 01:07:24,074
Okay?

753
01:07:24,074 --> 01:07:25,797
So, they're working in parallel.

754
01:07:25,797 --> 01:07:27,507
They're working on their own thing.

755
01:07:27,507 --> 01:07:30,950
They own different pieces of the app, and they're kind of working.

756
01:07:30,960 --> 01:07:34,554
And when they're done, they come back to this main agent, right?

757
01:07:34,554 --> 01:07:37,365
This combo here, and tell it what happened, right?

758
01:07:37,365 --> 01:07:38,874
They come back with the result.

759
01:07:38,874 --> 01:07:42,641
And so, now it says the persistent sub agent returned a cleaner data shape.

760
01:07:42,641 --> 01:07:46,529
And here you can actually click on any one of these and see what's happening.

761
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.

762
01:07:51,161 --> 01:07:52,496
So, this one is finished.

763
01:07:52,496 --> 01:07:53,496
Some are finished.

764
01:07:53,496 --> 01:07:54,631
How about this one?

765
01:07:54,631 --> 01:07:55,995
This one is also finished.

766
01:07:55,995 --> 01:07:57,338
And so, that's how it works.

767
01:07:57,338 --> 01:08:01,093
And when they finish, they come back, and then it decides what to do later.

768
01:08:01,093 --> 01:08:04,333
Maybe it's going to respond, and maybe it's going to spawn something else.

769
01:08:04,333 --> 01:08:05,269
Maybe it's done.

770
01:08:05,269 --> 01:08:07,008
They did what they needed to do.

771
01:08:07,008 --> 01:08:11,569
They finished their isolated task, and their services are no longer needed.

772
01:08:11,569 --> 01:08:14,949
And again, sub agent is something that I use all the time.

773
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.

774
01:08:26,135 --> 01:08:31,309
And that's a huge productivity boost.

775
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.

776
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.

777
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.

778
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.

779
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.

780
01:09:17,100 --> 01:09:22,278
It turns your preferences into reusable project context.

781
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.

782
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.

783
01:09:34,837 --> 01:09:36,617
So, we're going to jump into plan mode.

784
01:09:36,617 --> 01:09:38,947
We're going to go ahead and run that.

785
01:09:38,947 --> 01:09:44,036
And here's the draft for this agents.md tailored to the current project, right?

786
01:09:44,036 --> 01:09:49,075
Project purpose, main folders, verification steps after changes.

787
01:09:49,075 --> 01:09:53,470
Serve the app locally, coding and design patterns to preserve.

788
01:09:53,470 --> 01:09:55,832
When codex should use a work tree.

789
01:09:55,832 --> 01:09:58,510
Use a separate work tree when these happen.

790
01:09:58,520 --> 01:10:00,674
When codex should use sub-agents.

791
01:10:00,674 --> 01:10:06,295
Use sub-agents when work can be split into clearly separate ownership areas such as these.

792
01:10:06,295 --> 01:10:09,407
What codex should avoid changing without asking?

793
01:10:09,407 --> 01:10:10,117
All of this.

794
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.

795
01:10:22,865 --> 01:10:24,492
It will be automatic.

796
01:10:24,492 --> 01:10:28,755
It's like saving you from typing those prompts every single time.

797
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."

798
01:10:34,120 --> 01:10:36,366
Or make sure you spawn sub-agents.

799
01:10:36,366 --> 01:10:37,823
It's going to be automatic.

800
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.

801
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.

802
01:10:49,958 --> 01:10:54,230
You You can click here, and you can see the whole file right here.

803
01:10:54,240 --> 01:10:58,561
And this file will be used only for this specific project.

804
01:10:58,561 --> 01:11:00,137
They're based on a repo.

805
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.

806
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.

807
01:11:15,150 --> 01:11:17,223
So let's go ahead and see if this works.

808
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.

809
01:11:28,986 --> 01:11:31,298
Okay, I'm going to go ahead and run it directly.

810
01:11:31,298 --> 01:11:34,130
So now the title is awesome Kanban app.

811
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

812
01:11:52,280 --> 01:11:54,758
implement the changes in its own work tree.

813
01:11:54,758 --> 01:11:56,472
So let's see if this works.

814
01:11:56,472 --> 01:12:03,824
Add a robust API functionality for handling outgoing API calls and incoming webhooks.

815
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.

816
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.

817
01:12:14,404 --> 01:12:16,250
Okay, so it did consult this.

818
01:12:16,250 --> 01:12:18,052
So we're going to add a backend.

819
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.

820
01:12:26,207 --> 01:12:30,783
Another question, should the new backend become the source of truth for Kanban tasks?

821
01:12:30,783 --> 01:12:32,861
Yes, let's just go with the recommended.

822
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.

823
01:12:41,406 --> 01:12:45,272
Okay, so I do not see it's going to be using sub-agents.

824
01:12:45,272 --> 01:12:45,768
Update.

825
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.

826
01:12:53,068 --> 01:12:53,837
There you go.

827
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.

828
01:13:04,080 --> 01:13:08,173
I'd also use subagents, but only for bounded design review tasks.

829
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.

830
01:13:19,225 --> 01:13:21,722
And so agents.md is super important.

831
01:13:21,722 --> 01:13:27,383
It's going to save you a lot of time because it basically codifies repeatable tasks.

832
01:13:27,383 --> 01:13:34,910
So you never have to re-prompt the same thing over and over again.

833
01:13:34,920 --> 01:13:39,249
Now, before we build real apps, there is one security habit you want to establish early.

834
01:13:39,249 --> 01:13:43,791
Codex can help inspect configuration, but we should be careful with secrets.

835
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.

836
01:13:52,037 --> 01:13:57,504
These should not be casually pasted into a prompt or committed into the repo.

837
01:13:57,504 --> 01:14:02,736
The other important thing is that local config and deployment config are not the same thing.

838
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.

839
01:14:09,749 --> 01:14:15,458
For a deployed app, the required variables need to exist in the deployment environment, too.

840
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.

841
01:14:26,203 --> 01:14:31,631
Now, let's say we're building on this app, and we are adding external services.

842
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.

843
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.

844
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

845
01:15:05,920 --> 01:15:07,760
how you are storing them.

846
01:15:07,760 --> 01:15:12,133
And so in this app, let's say we want to use OpenAI here.

847
01:15:12,133 --> 01:15:12,586
Here.

848
01:15:12,586 --> 01:15:17,231
So I'm going to say API stack and use the following key.

849
01:15:17,231 --> 01:15:20,270
And let's say we give it a sample API key.

850
01:15:20,280 --> 01:15:22,575
Sample API key as a sample.

851
01:15:22,575 --> 01:15:24,583
We're going to jump into plan mode.

852
01:15:24,583 --> 01:15:27,052
We're going to select this API stack only.

853
01:15:27,052 --> 01:15:29,036
We're going to be doing native fetch.

854
01:15:29,036 --> 01:15:29,531
All right.

855
01:15:29,531 --> 01:15:33,294
So it went ahead and created our first API stack here.

856
01:15:33,294 --> 01:15:37,057
And right here it mentions this file where it stores this key.

857
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.

858
01:15:40,902 --> 01:15:44,641
What you want to do is you want to open this file and modify it directly.

859
01:15:44,641 --> 01:15:46,020
So that's what we're going to do.

860
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.

861
01:15:50,011 --> 01:15:52,359
And this right here is my actual key.

862
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?

863
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.

864
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.

865
01:16:16,445 --> 01:16:19,746
Do not print secret values and then tell me all of these things.

866
01:16:19,746 --> 01:16:20,875
So we're going to run this.

867
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?

868
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?

869
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.

870
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.

871
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?

872
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.

873
01:17:02,312 --> 01:17:04,550
And so here it says we have a private key.

874
01:17:04,560 --> 01:17:07,616
OpenAI PK is private and must stay server-side.

875
01:17:07,616 --> 01:17:09,606
It is used here, needed locally.

876
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.

877
01:17:17,983 --> 01:17:21,122
Okay, dot env examples cuz currently untracked.

878
01:17:21,122 --> 01:17:25,796
So, what we have safest next step before deploying, replace it with only this.

879
01:17:25,796 --> 01:17:31,005
Only config the real key in the deployment provider's private environment variable settings.

880
01:17:31,005 --> 01:17:31,452
Okay.

881
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.

882
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.

883
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.

884
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.

885
01:17:57,380 --> 01:17:59,843
So let's say we're doing a Vercel deploy.

886
01:17:59,843 --> 01:18:01,149
We're going to switch that.

887
01:18:01,149 --> 01:18:04,775
And there we have it, store the real key locally in an untracked.

888
01:18:04,775 --> 01:18:05,120
Right?

889
01:18:05,120 --> 01:18:08,393
We need to make sure that this is never committed to Git.

890
01:18:08,393 --> 01:18:09,597
It needs to be untracked.

891
01:18:09,597 --> 01:18:12,890
So we're going to expand this, submit this.

892
01:18:12,890 --> 01:18:14,370
Do not use public.

893
01:18:14,370 --> 01:18:16,190
These are not public keys.

894
01:18:16,200 --> 01:18:19,771
Replace dot env example with create dot env.

895
01:18:19,771 --> 01:18:22,911
Okay, so it's it's going to be creating this dot env.

896
01:18:22,911 --> 01:18:25,560
The secret is now ignored in dot env.

897
01:18:25,560 --> 01:18:32,006
And then I'm updating readme and agents to make the local and Vercel setup unambiguous.

898
01:18:32,006 --> 01:18:35,351
And that way we have the local key stored for local testing.

899
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.

900
01:18:45,459 --> 01:18:47,135
It needs access to that key as well.

901
01:18:47,135 --> 01:18:48,190
It needs to be secret.

902
01:18:48,200 --> 01:18:51,102
Okay, implemented the local Vercel key setup.

903
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

904
01:19:03,160 --> 01:19:12,310
deploying the key correctly for production stuff, regardless what kind of host you're using.

905
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.

906
01:19:21,345 --> 01:19:24,510
You're not going to be building your app from scratch, right?

907
01:19:24,520 --> 01:19:29,197
You're going to be using existing libraries, existing frameworks, stuff like that.

908
01:19:29,197 --> 01:19:34,576
And those are called dependencies and that is because your app depends on them to function.

909
01:19:34,576 --> 01:19:37,738
Without those things, your app will not function.

910
01:19:37,738 --> 01:19:43,164
And you need to ensure that you have a process for managing these dependencies.

911
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.

912
01:19:50,148 --> 01:19:51,706
Do not install anything yet.

913
01:19:51,706 --> 01:19:52,833
Tell me all of this.

914
01:19:52,833 --> 01:19:54,911
And so let's go ahead and run this prompt.

915
01:19:54,911 --> 01:19:57,030
Right, and this is what it came back with.

916
01:19:57,040 --> 01:19:59,155
Dependency project inspection.

917
01:19:59,155 --> 01:20:01,090
Framework and package manager.

918
01:20:01,090 --> 01:20:02,410
Framework non-detected.

919
01:20:02,410 --> 01:20:07,792
This appears to be a plain static JavaScript app served by a custom node server.

920
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.

921
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.

922
01:20:19,198 --> 01:20:21,597
Here we just have a very, very plain app.

923
01:20:21,597 --> 01:20:23,910
Package manager non-detected.

924
01:20:23,920 --> 01:20:25,105
Oh, none of this.

925
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.

926
01:20:29,446 --> 01:20:30,765
Available scripts.

927
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.

928
01:20:36,240 --> 01:20:40,308
Current documented run command, we just have this very, very basic.

929
01:20:40,308 --> 01:20:43,388
Definitely not the case when it comes to production apps.

930
01:20:43,388 --> 01:20:45,637
OpenAI local env run command.

931
01:20:45,637 --> 01:20:48,769
So, we have this relevant install dependency.

932
01:20:48,769 --> 01:20:51,978
So, we do have some basic node built-ins.

933
01:20:51,978 --> 01:20:55,382
All of these OpenAI calls native fetch, okay?

934
01:20:55,382 --> 01:20:56,581
So, it's native.

935
01:20:56,581 --> 01:21:00,766
It's not using the OpenAI SDK, which would have been a dependency.

936
01:21:00,766 --> 01:21:03,708
Can the task be completed without adding a package?

937
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.

938
01:21:10,880 --> 01:21:14,816
If a new package is recommended, no package is recommended right now.

939
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?

940
01:21:26,551 --> 01:21:30,738
API behavior, OpenAI calls, front end, etc., etc.

941
01:21:30,738 --> 01:21:35,230
And so, dependencies are important, and you want to limit your dependencies.

942
01:21:35,240 --> 01:21:39,204
You don't want the system to just add dependencies blindly.

943
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.

944
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.

945
01:21:52,103 --> 01:21:55,353
And you always want to err on the side of native stuff.

946
01:21:55,353 --> 01:21:59,595
If you can avoid a dependency or an SDK, that would be the right move.

947
01:21:59,595 --> 01:22:01,237
And that's exactly what I did here.

948
01:22:01,237 --> 01:22:02,524
I just used native, right?

949
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.

950
01:22:06,564 --> 01:22:08,414
And that's really the goal here.

951
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.

952
01:22:21,252 --> 01:22:24,959
So, definitely add this to your app building workflow.

953
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.

954
01:22:34,920 --> 01:22:40,881
Now that the Cortex foundation is clear, we are going to start with something intentionally small.

955
01:22:40,881 --> 01:22:43,988
The first step is called Habit Card.

956
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.

957
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.

958
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.

959
01:23:18,423 --> 01:23:24,710
Habit Card gives us the core app building pieces without much product complexity.

960
01:23:24,720 --> 01:23:33,453
A form, a list, a daily check-in state, simple feedback, and later local storage persistence.

961
01:23:33,453 --> 01:23:40,169
It does not need authentication, payments, APIs, or a real database at first.

962
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.

963
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.

964
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.

965
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.

966
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.

967
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.

968
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.

969
01:24:32,605 --> 01:24:38,400
And we can actually use Codex to create that visual architecture for us.

970
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.

971
01:24:52,192 --> 01:24:56,811
So, I'm going to press forward slash, and I'm going to search for Imagen.

972
01:24:56,811 --> 01:25:01,321
Okay, and then we can say something like use Imagen for the following.

973
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.

974
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.

975
01:25:15,285 --> 01:25:16,444
So, everything looks good.

976
01:25:16,444 --> 01:25:19,470
There there's some diagram content, visual direction.

977
01:25:19,480 --> 01:25:21,272
That's a wide composition.

978
01:25:21,272 --> 01:25:22,030
Looks good.

979
01:25:22,040 --> 01:25:24,270
We're going to say yes, implement this.

980
01:25:24,280 --> 01:25:26,162
Okay, and that is our habit card.

981
01:25:26,162 --> 01:25:28,314
That is our visual interface.

982
01:25:28,314 --> 01:25:32,382
And right away, I can see what this app is all about, right?

983
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.

984
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.

985
01:25:44,360 --> 01:25:52,045
And so, this is a very, very simplified visual architecture, but it is very, very important.

986
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.

987
01:26:01,184 --> 01:26:04,756
I see that this is not going to be, you know, a very complex app.

988
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?

989
01:26:10,200 --> 01:26:14,954
This empty state, we have some local storage, we have a Versel deploy.

990
01:26:14,954 --> 01:26:19,102
And so, it's a fairly simple app, but still a fairly workable app.

991
01:26:19,102 --> 01:26:22,777
Now, the next thing that I like to do is create the entity architecture.

992
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.

993
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.

994
01:26:41,540 --> 01:26:44,278
And this right here is the entity diagram.

995
01:26:44,278 --> 01:26:47,925
And I'm just going to say use ImageGen for below.

996
01:26:47,925 --> 01:26:50,037
Going to go ahead and run that.

997
01:26:50,037 --> 01:26:51,870
And I can run it directly.

998
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.

999
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.

1000
01:27:05,737 --> 01:27:08,258
And here is our entity architecture.

1001
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.

1002
01:27:18,280 --> 01:27:18,608
Okay?

1003
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.

1004
01:27:26,650 --> 01:27:30,393
So, no back end, everything is stored locally with local storage.

1005
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.

1006
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.

1007
01:27:48,894 --> 01:27:51,590
And as you can see, this is fairly simple.

1008
01:27:51,600 --> 01:27:54,430
Habit, habit check-in, streak summary.

1009
01:27:54,440 --> 01:28:01,398
We have these three main functions here, these three main features that were translated into entities.

1010
01:28:01,398 --> 01:28:01,733
Okay?

1011
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.

1012
01:28:08,133 --> 01:28:13,430
Now, at this point, we have both the visual architecture as well as the entity architecture.

1013
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?

1014
01:28:21,907 --> 01:28:26,383
I want to have an understanding of the the scope of the app.

1015
01:28:26,383 --> 01:28:29,138
And right now I can see exactly where we are.

1016
01:28:29,138 --> 01:28:31,547
I can see that this is a fairly simple app.

1017
01:28:31,547 --> 01:28:33,324
I can see the entities.

1018
01:28:33,324 --> 01:28:35,460
I I I see the app building.

1019
01:28:35,460 --> 01:28:37,014
I see the future of the app.

1020
01:28:37,014 --> 01:28:38,628
I see the app coming together.

1021
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.

1022
01:28:48,800 --> 01:28:55,490
The important part is that Codex should recommend the simplest path before it edits any files.

1023
01:28:55,490 --> 01:28:59,271
And as you might have guessed, we are going to be doing this in plan mode.

1024
01:28:59,271 --> 01:28:59,787
All right?

1025
01:28:59,787 --> 01:29:01,988
And here's the prompt that we're going to be using.

1026
01:29:01,988 --> 01:29:03,435
Do not edit files yet.

1027
01:29:03,435 --> 01:29:09,123
Inspect the current project and recommend the simplest stack for Habit Card, right?

1028
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.

1029
01:29:23,443 --> 01:29:29,110
We need it to clarify everything before we go deeper into the building the app.

1030
01:29:29,120 --> 01:29:30,992
Okay, I'm going to go ahead and execute this.

1031
01:29:30,992 --> 01:29:33,372
And let's see what it comes back with.

1032
01:29:33,372 --> 01:29:38,230
And in this case, it did not come back with any clarifying questions.

1033
01:29:38,240 --> 01:29:38,639
Okay?

1034
01:29:38,639 --> 01:29:40,552
So, it's writing a plan.

1035
01:29:40,552 --> 01:29:45,017
And the recommended front end stack is going to be React TypeScript, right?

1036
01:29:45,017 --> 01:29:49,396
It wants to use Tailwind CSS for fast simple styling.

1037
01:29:49,396 --> 01:29:51,481
This is the testing library.

1038
01:29:51,481 --> 01:29:52,739
No React Router.

1039
01:29:52,739 --> 01:29:55,317
It's a simple single screen app.

1040
01:29:55,317 --> 01:29:57,230
No global state library.

1041
01:29:57,240 --> 01:29:57,612
Okay?

1042
01:29:57,612 --> 01:29:58,949
Back end decision.

1043
01:29:58,949 --> 01:30:01,652
No back end is needed for the first version, right?

1044
01:30:01,652 --> 01:30:03,187
And that's what we told it.

1045
01:30:03,187 --> 01:30:06,663
We said bias toward a front end only implementation first.

1046
01:30:06,663 --> 01:30:09,635
And then it's also going to use browser verification.

1047
01:30:09,635 --> 01:30:12,423
Okay, open the app in the browser, verify all this.

1048
01:30:12,423 --> 01:30:15,176
Okay, so let's go ahead and and run this.

1049
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.

1050
01:30:23,840 --> 01:30:25,652
This is where it is and this is what it did, right?

1051
01:30:25,652 --> 01:30:27,207
It built the app shell and did, right?

1052
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.

1053
01:30:35,795 --> 01:30:42,957
Tests for app flow logic and storage, and verification passed nine tests, production build succeeded.

1054
01:30:42,957 --> 01:30:47,331
And it also gave us a dev server that is running the app.

1055
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.

1056
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.

1057
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.

1058
01:31:13,753 --> 01:31:16,821
We have the background terminal that is running here.

1059
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.

1060
01:31:23,003 --> 01:31:23,927
So let's do that.

1061
01:31:23,927 --> 01:31:25,316
That's going to go ahead and open.

1062
01:31:25,316 --> 01:31:29,320
It's also going to open the browser right here in the right-hand pane.

1063
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.

1064
01:31:35,352 --> 01:31:38,416
Another thing that you can do is you can open the browser directly.

1065
01:31:38,416 --> 01:31:42,282
This is the front page here and I can add a habit, habit one.

1066
01:31:42,282 --> 01:31:44,900
I can click here and we have a habit here.

1067
01:31:44,900 --> 01:31:46,299
I can add another we have a habit here.

1068
01:31:46,299 --> 01:31:49,039
I can add another habit, habit two or maybe gym.

1069
01:31:49,039 --> 01:31:51,682
And it's creating these these habits here.

1070
01:31:51,682 --> 01:31:54,038
So I can check it off and that is done.

1071
01:31:54,038 --> 01:31:54,835
Check it off.

1072
01:31:54,835 --> 01:31:57,082
And so it's a very very simple app.

1073
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.

1074
01:32:05,420 --> 01:32:08,653
And this is the React app that was created for this here.

1075
01:32:08,653 --> 01:32:13,981
Once the UI works, we'll add a small persistence step with local storage.

1076
01:32:13,981 --> 01:32:18,025
Habits and today's check-ins can persist after refresh.

1077
01:32:18,025 --> 01:32:23,851
So, the app starts to feel real without introducing a backend yet.

1078
01:32:23,851 --> 01:32:26,038
And this is the prompt that we're going to be using.

1079
01:32:26,038 --> 01:32:31,120
Upgrade habit card so habits and today's check-ins persist with local storage.

1080
01:32:31,120 --> 01:32:35,030
I'm going to jump into the plan mode here just in case.

1081
01:32:35,040 --> 01:32:36,790
And I'm going to go ahead and run this.

1082
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.

1083
01:32:45,305 --> 01:32:45,726
Okay?

1084
01:32:45,726 --> 01:32:48,350
So, no file edits are needed for this upgrade.

1085
01:32:48,360 --> 01:32:52,129
So, we must have done this in one of the previous prompts.

1086
01:32:52,129 --> 01:32:55,750
But, if we hadn't done this, then we would run this prompt.

1087
01:32:55,760 --> 01:32:57,230
But, still, let's go ahead and run it.

1088
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.

1089
01:33:05,280 --> 01:33:05,811
Okay?

1090
01:33:05,811 --> 01:33:10,587
So, we can reload this and now we have something called local storage.

1091
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.

1092
01:33:17,734 --> 01:33:18,168
Okay?

1093
01:33:18,168 --> 01:33:22,437
So, if I'm using this instance, it's going to be stored on this browser.

1094
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.

1095
01:33:26,189 --> 01:33:30,483
So, whatever I do in that new browser is going to have fresh data.

1096
01:33:30,483 --> 01:33:35,894
And so, this is a way to create, you know, storage just for testing me.

1097
01:33:35,894 --> 01:33:41,036
I mean, you can use this in production as well for certain apps, for certain situations.

1098
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.

1099
01:33:48,357 --> 01:33:53,019
And so, we can delete all this, we can do all that, we can start.

1100
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,

1101
01:34:09,640 --> 01:34:10,005
right?

1102
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.

1103
01:34:23,345 --> 01:34:24,721
That is not happening.

1104
01:34:24,721 --> 01:34:28,369
Once the app works locally, it's time to deploy it.

1105
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.

1106
01:34:37,811 --> 01:34:41,106
And so, CodeX can do the whole deployment process.

1107
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.

1108
01:34:52,542 --> 01:34:56,905
And additionally, you want that first deployment to feel very concrete.

1109
01:34:56,905 --> 01:35:00,350
We're not just writing code and hoping it works.

1110
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.

1111
01:35:09,530 --> 01:35:12,815
And here is my Vercel deployment prompt.

1112
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.

1113
01:35:20,132 --> 01:35:23,696
So, at this point, we are just preparing it for deployment.

1114
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.

1115
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.

1116
01:35:44,600 --> 01:35:46,350
I'm going to go ahead and execute this.

1117
01:35:46,360 --> 01:35:49,983
All right, so it went ahead and created a Vercel deployment plan.

1118
01:35:49,983 --> 01:35:55,916
Okay, Habit Card is already a suitable for a front-end only for sale deployment, okay?

1119
01:35:55,916 --> 01:36:00,334
And this is what it's going to do, and here is the deployment implementation.

1120
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.

1121
01:36:10,240 --> 01:36:16,755
And local storage persistence is expected to be local to each browser and deployment origin.

1122
01:36:16,755 --> 01:36:20,067
Data will not sync across devices or URLs, okay?

1123
01:36:20,067 --> 01:36:22,969
Let's go ahead and implement this plan.

1124
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?

1125
01:36:29,180 --> 01:36:31,226
So, this is the live URL.

1126
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?

1127
01:36:38,011 --> 01:36:39,495
Accessible to everybody.

1128
01:36:39,495 --> 01:36:42,572
And this again uses local storage, okay?

1129
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.

1130
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.

1131
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.

1132
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.

1133
01:37:33,938 --> 01:37:38,903
It's a bit more complex with more features, but still fairly simple overall.

1134
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.

1135
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.

1136
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.

1137
01:38:06,471 --> 01:38:10,409
Snack Vote only needs snack options and votes.

1138
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.

1139
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.

1140
01:38:25,168 --> 01:38:30,628
As always, in this first step, we'll be mapping the Snack Vote interface visually.

1141
01:38:30,628 --> 01:38:34,350
The app should be simple enough to understand immediately.

1142
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.

1143
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.

1144
01:38:51,588 --> 01:38:52,950
We're going to click over here.

1145
01:38:52,960 --> 01:38:54,904
Here, we're going to create a new folder.

1146
01:38:54,904 --> 01:38:58,476
I'm going to type Snack Vote, and we're going to click open.

1147
01:38:58,476 --> 01:39:02,802
And now, we have a brand new project configured here in Codex.

1148
01:39:02,802 --> 01:39:06,089
And here's our prompt for the visual architecture.

1149
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.

1150
01:39:12,249 --> 01:39:13,390
And that looks good.

1151
01:39:13,400 --> 01:39:15,150
We're going to go ahead and expand that.

1152
01:39:15,160 --> 01:39:16,656
Go ahead and implement that.

1153
01:39:16,656 --> 01:39:19,704
And here's our Snack Vote visual architecture.

1154
01:39:19,704 --> 01:39:21,679
Look at this beautiful diagram.

1155
01:39:21,679 --> 01:39:24,081
So, you can create or join a room.

1156
01:39:24,081 --> 01:39:29,150
In the current room, you're going to be seeing this, members and the time left.

1157
01:39:29,150 --> 01:39:31,494
You can You have here a snack list.

1158
01:39:31,494 --> 01:39:34,230
You have your your voting buttons.

1159
01:39:34,240 --> 01:39:38,782
You have a live leaderboard, and you have a closed winner state.

1160
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.

1161
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.

1162
01:39:54,120 --> 01:39:57,924
And we're also going to be adding more and more features as we go along.

1163
01:39:57,924 --> 01:40:04,070
Next, I want to go ahead and create an entity diagram, an entity architecture diagram.

1164
01:40:04,080 --> 01:40:05,334
So here's our prompt.

1165
01:40:05,334 --> 01:40:09,213
We're going to do this, and we're going to go ahead and execute that.

1166
01:40:09,213 --> 01:40:11,158
And here's our entity diagram.

1167
01:40:11,158 --> 01:40:17,073
Okay, so a room contains multiple snack options and has one voting session, right?

1168
01:40:17,073 --> 01:40:21,623
We have the voting room, many snack options, and many votes, right?

1169
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?

1170
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.

1171
01:40:39,040 --> 01:40:41,709
Build the UI first, connect it to Convex.

1172
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.

1173
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

1174
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.

1175
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.

1176
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.

1177
01:41:25,466 --> 01:41:27,504
And here's the plan that it came back with.

1178
01:41:27,504 --> 01:41:29,396
Here we have the stack recommendation.

1179
01:41:29,396 --> 01:41:32,955
We're going to be using React, TypeScript, Tailwind.

1180
01:41:32,955 --> 01:41:39,317
And here it says backend later Convex with TypeScript server functions and generated client types.

1181
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

1182
01:41:55,840 --> 01:41:57,088
in this tutorial.

1183
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.

1184
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?

1185
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.

1186
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.

1187
01:42:32,002 --> 01:42:33,963
And we also have some verification.

1188
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.

1189
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.

1190
01:42:50,131 --> 01:42:54,142
And so, it kind of knows what it needs to do to build out this app.

1191
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.

1192
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.

1193
01:43:07,860 --> 01:43:09,748
Created all of this.

1194
01:43:09,748 --> 01:43:10,954
What works?

1195
01:43:10,954 --> 01:43:12,995
Verification completed.

1196
01:43:12,995 --> 01:43:15,070
Still needs attention later."

1197
01:43:15,080 --> 01:43:18,617
Okay, all of these things, and we'll talk about that a little bit later.

1198
01:43:18,617 --> 01:43:20,792
And so, now we have a web preview.

1199
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.

1200
01:43:27,300 --> 01:43:28,993
This is our app right here.

1201
01:43:28,993 --> 01:43:31,508
And so, we have snack and lunch options.

1202
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.

1203
01:43:41,800 --> 01:43:43,179
Leaderboard, right?

1204
01:43:43,179 --> 01:43:44,630
So, this is winning.

1205
01:43:44,640 --> 01:43:48,471
Winner state, current winner leader, spicy ramen bowls.

1206
01:43:48,471 --> 01:43:52,717
And so, if I vote on falafel wraps, uh wraps, six.

1207
01:43:52,717 --> 01:43:53,246
Right?

1208
01:43:53,246 --> 01:43:54,526
So, now it's six.

1209
01:43:54,526 --> 01:43:55,918
I can keep voting.

1210
01:43:55,918 --> 01:43:59,754
And that's a problem right away, and it's in memory.

1211
01:43:59,754 --> 01:44:03,474
And one person can vote multiple times, which is an issue.

1212
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.

1213
01:44:07,815 --> 01:44:09,335
Let's say sushi.

1214
01:44:09,335 --> 01:44:10,617
I don't know, sushi.

1215
01:44:10,617 --> 01:44:14,017
Add this, and we have sushi, and I can also vote on that.

1216
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.

1217
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.

1218
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.

1219
01:44:33,424 --> 01:44:35,807
It's an awesome back end, super fast.

1220
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.

1221
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.

1222
01:44:52,392 --> 01:44:54,523
And the path is very very simple.

1223
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.

1224
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.

1225
01:45:12,660 --> 01:45:17,870
When we look inside the Convex dashboard, that snack option should be there.

1226
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.

1227
01:45:30,120 --> 01:45:34,470
And when you head over to convex.dev, you can learn more about this back end.

1228
01:45:34,480 --> 01:45:36,470
And this is a great, great back end.

1229
01:45:36,480 --> 01:45:41,464
It's very, very fast, and it works really great with agents, right?

1230
01:45:41,464 --> 01:45:44,386
So, the back end building blocks for your agents, okay?

1231
01:45:44,386 --> 01:45:47,438
So, I'm going to go ahead and log in to my free account.

1232
01:45:47,438 --> 01:45:48,766
I'm using the free plan.

1233
01:45:48,766 --> 01:45:50,233
I'm not paying for anything.

1234
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.

1235
01:45:54,006 --> 01:45:55,576
So, I'm going to go ahead and log in.

1236
01:45:55,576 --> 01:45:57,057
All right, so here I am logged in.

1237
01:45:57,057 --> 01:45:59,859
And as you can see, I have here two projects.

1238
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.

1239
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.

1240
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.

1241
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.

1242
01:46:26,473 --> 01:46:30,296
And that is because we're not going to be connecting to Convex via MCP.

1243
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.

1244
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.

1245
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.

1246
01:46:54,560 --> 01:46:55,905
I'm going to go ahead and run it.

1247
01:46:55,905 --> 01:47:01,630
Now, I already have Convex CLI installed, but you can just tell Codex to install it.

1248
01:47:01,640 --> 01:47:02,410
It's that easy.

1249
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.

1250
01:47:11,707 --> 01:47:16,903
I'm installing Convex into the project now as a dev dependency, okay?

1251
01:47:16,903 --> 01:47:19,144
Convex is installed locally now, okay?

1252
01:47:19,144 --> 01:47:20,884
I'll verify the CLI results.

1253
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.

1254
01:47:26,861 --> 01:47:29,409
You just tell Codex that you want to connect to it.

1255
01:47:29,409 --> 01:47:30,431
It's that easy.

1256
01:47:30,431 --> 01:47:34,070
So, Convex CLI is installed locally in the project now.

1257
01:47:34,080 --> 01:47:36,590
Okay, so now we can paste the prompt.

1258
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.

1259
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.

1260
01:47:46,323 --> 01:47:49,757
See if it wants to ask me something or clarify something.

1261
01:47:49,757 --> 01:47:53,095
And so, it's telling me one material set of choices to open.

1262
01:47:53,095 --> 01:47:55,304
There's no existing Convex folder.

1263
01:47:55,304 --> 01:47:58,859
So, this app is not linked to a Convex deployment yet.

1264
01:47:58,859 --> 01:47:59,676
And that is correct.

1265
01:47:59,676 --> 01:48:01,342
And that's what we want to do next.

1266
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.

1267
01:48:07,902 --> 01:48:09,745
We want to create a new one, right?

1268
01:48:09,745 --> 01:48:12,459
So, we're going to go with the recommended option.

1269
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.

1270
01:48:20,634 --> 01:48:21,110
Okay?

1271
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.

1272
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.

1273
01:48:36,175 --> 01:48:37,849
So, I'm going to hit submit here.

1274
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.

1275
01:48:45,354 --> 01:48:49,916
And now you see this cursor, it's testing out the UI.

1276
01:48:49,916 --> 01:48:53,354
And so, right now it's not running, so it should start it out.

1277
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.

1278
01:48:58,720 --> 01:49:03,879
And if we jump into Convex, you can see that we have a new project created.

1279
01:49:03,879 --> 01:49:08,756
Now, I did authenticate this account with Codex, so it knows that this is my account.

1280
01:49:08,756 --> 01:49:13,144
And so, if we click over here, we should see some initial stuff happening, right?

1281
01:49:13,144 --> 01:49:16,430
There's some data, functions, and it's not done yet, right?

1282
01:49:16,440 --> 01:49:17,816
It's still working.

1283
01:49:17,816 --> 01:49:21,470
And while it's working, we can see what has been done.

1284
01:49:21,480 --> 01:49:22,848
And it's actually typing it.

1285
01:49:22,848 --> 01:49:23,609
Look at that.

1286
01:49:23,609 --> 01:49:24,919
Key press input.

1287
01:49:24,919 --> 01:49:26,310
It's creating it.

1288
01:49:26,320 --> 01:49:27,646
It's testing it right here.

1289
01:49:27,646 --> 01:49:29,408
You can actually see it happening.

1290
01:49:29,408 --> 01:49:33,788
This snack was submitted through the browser and appeared from Convex.

1291
01:49:33,788 --> 01:49:35,430
I'm voting on it.

1292
01:49:35,440 --> 01:49:38,650
There is this testing all the flows, which is pretty cool.

1293
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.

1294
01:49:50,884 --> 01:49:52,802
So, we can test it out ourselves.

1295
01:49:52,802 --> 01:49:54,713
And so, here's the app.

1296
01:49:54,713 --> 01:49:57,036
And now it's Convex here's the app.

1297
01:49:57,036 --> 01:49:57,750
And now it's Convex backed.

1298
01:49:57,760 --> 01:50:01,692
And so, now if we head to Convex, we should see the data.

1299
01:50:01,692 --> 01:50:05,310
So, as you can see, snack options, this has a vote of one.

1300
01:50:05,320 --> 01:50:07,884
This is the snack tools, vote one.

1301
01:50:07,884 --> 01:50:11,634
And if we increase the vote, it should be two, and it's automatic.

1302
01:50:11,634 --> 01:50:13,011
It's absolutely two, and it's automatic.

1303
01:50:13,011 --> 01:50:13,630
It's absolutely automatic.

1304
01:50:13,640 --> 01:50:14,744
Three, it's three.

1305
01:50:14,744 --> 01:50:16,643
It does not need to do anything.

1306
01:50:16,643 --> 01:50:21,150
And we can create a new snack option, let's say sushi, submit.

1307
01:50:21,160 --> 01:50:23,860
And if we come over here, we see sushi, zero votes.

1308
01:50:23,860 --> 01:50:25,312
Now it's winning.

1309
01:50:25,312 --> 01:50:30,561
And so, this is essentially the same app, except it's Convex backed.

1310
01:50:30,561 --> 01:50:32,675
And we also have functions.

1311
01:50:32,675 --> 01:50:37,767
And with Convex, you need to create functions to access your data.

1312
01:50:37,767 --> 01:50:41,296
It's not like with other systems where it's automatic.

1313
01:50:41,296 --> 01:50:45,870
Here you need list, you need submit, you need a vote, you need functions.

1314
01:50:45,880 --> 01:50:52,127
And so, the snack options table or document has three functions.

1315
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.

1316
01:50:57,920 --> 01:51:01,079
>> Okay, so this was a fairly successful migration.

1317
01:51:01,079 --> 01:51:06,250
We went to no back end to a Convex back end very, very quickly.

1318
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.

1319
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.

1320
01:51:21,597 --> 01:51:28,835
Each room should own its own snack options, votes, leaderboard, and winner state.

1321
01:51:28,835 --> 01:51:36,266
This keeps the app more interesting while teaching a clean back-end concept, scoped data.

1322
01:51:36,266 --> 01:51:41,400
We still do not need accounts, permissions, invites, or admin tools.

1323
01:51:41,400 --> 01:51:44,230
And here's the prompt that we're going to be using.

1324
01:51:44,240 --> 01:51:49,274
Upgrade snack vote so voting happens inside simple rooms.

1325
01:51:49,274 --> 01:51:52,236
And I'm going to run this in a plan mode.

1326
01:51:52,236 --> 01:51:55,070
All right, so it came back with a plan for us.

1327
01:51:55,070 --> 01:51:58,350
This is the room-based snack vote upgrade.

1328
01:51:58,360 --> 01:52:03,510
Upgrade the current Convex back app from one global snackboard to simple rooms.

1329
01:52:03,520 --> 01:52:04,842
Can I expand that?

1330
01:52:04,842 --> 01:52:06,310
Yes, implement that.

1331
01:52:06,320 --> 01:52:10,710
Now, as it's running, I am seeing an error message here.

1332
01:52:10,720 --> 01:52:14,430
Did you forget to run NPX Convex dev?

1333
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.

1334
01:52:20,378 --> 01:52:21,096
It is done.

1335
01:52:21,096 --> 01:52:24,221
So, it has implemented room-based snack vote.

1336
01:52:24,221 --> 01:52:29,167
This is what it changed, files, things, verification limits.

1337
01:52:29,167 --> 01:52:30,599
Okay, very important.

1338
01:52:30,599 --> 01:52:32,757
Limits is actually very, very useful.

1339
01:52:32,757 --> 01:52:37,719
No auth, ownership, invites, or duplicate vote guard yet.

1340
01:52:37,719 --> 01:52:40,168
And we'll fix some of these a little later.

1341
01:52:40,168 --> 01:52:41,703
Room selection, room codes.

1342
01:52:41,703 --> 01:52:43,162
Okay, so how does this work?

1343
01:52:43,162 --> 01:52:44,667
Let's go ahead and refresh this.

1344
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.

1345
01:52:49,869 --> 01:52:54,452
So, let's say we type Friday lunch, and so now we've switched the room.

1346
01:52:54,452 --> 01:52:56,830
Okay, current room Friday lunch.

1347
01:52:56,840 --> 01:52:59,228
And now we can do the same thing.

1348
01:52:59,228 --> 01:53:01,124
We're now in in the scope.

1349
01:53:01,124 --> 01:53:03,476
It's all about scoping now, right?

1350
01:53:03,476 --> 01:53:08,884
And so this is a specific room, and I can say, I don't know, submit.

1351
01:53:08,884 --> 01:53:10,867
There we have it in this room.

1352
01:53:10,867 --> 01:53:15,250
And now if I switch a room, let's say I switch to launch ideas.

1353
01:53:15,250 --> 01:53:16,822
So now it's brand new.

1354
01:53:16,822 --> 01:53:18,825
There's nothing nothing there.

1355
01:53:18,825 --> 01:53:22,008
And I can say something like I don't know, tacos.

1356
01:53:22,008 --> 01:53:23,587
And now we have tacos here.

1357
01:53:23,587 --> 01:53:26,517
And if we go into Codex, we should see that.

1358
01:53:26,517 --> 01:53:30,830
So we have voting rooms here, and we have different ideas here.

1359
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.

1360
01:53:35,684 --> 01:53:36,710
We have the room IDs.

1361
01:53:36,710 --> 01:53:41,730
These are the same same room that we have a bunch of different room IDs there.

1362
01:53:41,730 --> 01:53:47,702
Probably some of them created by Codex as part of testing, like lunch ideas.

1363
01:53:47,702 --> 01:53:49,600
Oh, no, I created lunch ideas.

1364
01:53:49,600 --> 01:53:53,203
These ones were created by Codex, these three rooms.

1365
01:53:53,203 --> 01:53:55,035
And we can remove them.

1366
01:53:55,035 --> 01:53:58,020
I can select these, and we can delete these.

1367
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.

1368
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.

1369
01:54:08,708 --> 01:54:10,771
And And so it pretty much did everything.

1370
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.

1371
01:54:18,392 --> 01:54:24,121
We'll add one simple rule that makes the voting feel like a real product.

1372
01:54:24,121 --> 01:54:30,434
After all, a person should not be able to spam the same room with repeated votes.

1373
01:54:30,434 --> 01:54:33,589
And that is because we still do not have real authentication.

1374
01:54:33,589 --> 01:54:39,153
And so for this tutorial, a local or session-based voter identity is enough.

1375
01:54:39,153 --> 01:54:42,359
And that's what we're going to be doing right now.

1376
01:54:42,359 --> 01:54:44,069
And here's my next prompt.

1377
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.

1378
01:54:50,947 --> 01:54:52,622
Jump into plan mode.

1379
01:54:52,622 --> 01:54:53,427
Run that.

1380
01:54:53,427 --> 01:54:55,027
So here's the plan.

1381
01:54:55,027 --> 01:54:57,163
One active vote per room.

1382
01:54:57,163 --> 01:55:00,270
Add a lightweight session-based voting rule.

1383
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?

1384
01:55:09,392 --> 01:55:11,163
So, this needs to be unique.

1385
01:55:11,163 --> 01:55:16,091
So, if I voted in that room, my session ID was used to vote.

1386
01:55:16,091 --> 01:55:17,950
And so, this needs to be unique.

1387
01:55:17,960 --> 01:55:22,080
So, for that room, my session can only happen twice.

1388
01:55:22,080 --> 01:55:26,190
If there's a chance for a repeat, it's not going to count it.

1389
01:55:26,200 --> 01:55:31,470
Yeah, I can vote in other rooms, but per session per room can only happen once.

1390
01:55:31,480 --> 01:55:32,894
We're going to expand this.

1391
01:55:32,894 --> 01:55:33,470
Looks good.

1392
01:55:33,480 --> 01:55:34,672
And submit this.

1393
01:55:34,672 --> 01:55:35,790
So, it is done.

1394
01:55:35,800 --> 01:55:39,270
Implemented one active vote per room.

1395
01:55:39,280 --> 01:55:40,676
Okay, change this.

1396
01:55:40,676 --> 01:55:41,685
What changed?

1397
01:55:41,685 --> 01:55:43,900
And it added this get my vote.

1398
01:55:43,900 --> 01:55:45,488
Added votes with table.

1399
01:55:45,488 --> 01:55:47,645
So, let's go ahead and try this out.

1400
01:55:47,645 --> 01:55:48,566
Open this here.

1401
01:55:48,566 --> 01:55:51,968
So, let's say I go to another room, friend Friday lunch.

1402
01:55:51,968 --> 01:55:54,390
I switch that room and I have my burrito.

1403
01:55:54,400 --> 01:55:55,866
So, I'm going to vote for this.

1404
01:55:55,866 --> 01:55:57,956
I just voted and I can't vote again.

1405
01:55:57,956 --> 01:55:58,763
You see that?

1406
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.

1407
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.

1408
01:56:14,280 --> 01:56:15,561
And so, now I can vote again.

1409
01:56:15,561 --> 01:56:16,673
You see it's back up.

1410
01:56:16,673 --> 01:56:18,507
It's it's it's uh reactive.

1411
01:56:18,507 --> 01:56:20,430
I'm going to hit vote.

1412
01:56:20,440 --> 01:56:24,028
And now you see room ID and session ID.

1413
01:56:24,028 --> 01:56:28,051
These two, if they can only appear once in this table.

1414
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.

1415
01:56:35,604 --> 01:56:37,794
I'm in this room here, Friday lunch.

1416
01:56:37,794 --> 01:56:39,630
Friday lunch right there.

1417
01:56:39,640 --> 01:56:44,021
Now, if I switch rooms, let's so let's say I go to another room.

1418
01:56:44,021 --> 01:56:46,470
Let's say I go into Sunday brunch.

1419
01:56:46,470 --> 01:56:48,227
Now, I can vote, right?

1420
01:56:48,227 --> 01:56:49,454
I can vote for anything.

1421
01:56:49,454 --> 01:56:50,751
I can say tacos.

1422
01:56:50,751 --> 01:56:51,472
Submit.

1423
01:56:51,472 --> 01:56:53,121
I can vote here.

1424
01:56:53,121 --> 01:56:55,036
And let's say I create another one.

1425
01:56:55,036 --> 01:56:56,381
I I change my vote.

1426
01:56:56,381 --> 01:57:02,602
Yes, I can switch votes, but I cannot pad, you know, with multiple votes an item.

1427
01:57:02,602 --> 01:57:05,854
And so, if I go back here, now there are two options, right?

1428
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.

1429
01:57:12,179 --> 01:57:14,717
So, this works really, really nice.

1430
01:57:14,717 --> 01:57:21,382
And finally, we'll add a deadline, so each room has a moment when voting closes.

1431
01:57:21,382 --> 01:57:24,903
Before the deadline, people can submit and vote.

1432
01:57:24,903 --> 01:57:31,918
After the deadline, voting locks and the app shows the winner or a simple tie state.

1433
01:57:31,918 --> 01:57:37,308
This adds time-based product state without becoming a scheduling system.

1434
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.

1435
01:57:49,320 --> 01:57:51,583
And here's the prompt that we're going to be using.

1436
01:57:51,583 --> 01:57:54,594
I'm going to switch into plan mode, run this.

1437
01:57:54,594 --> 01:57:56,936
Oh, it needs a product decision.

1438
01:57:56,936 --> 01:58:02,635
Okay, how should users set a room deadline in this small tutorial version?

1439
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.

1440
01:58:12,765 --> 01:58:14,630
Let's do quick durations.

1441
01:58:14,640 --> 01:58:15,673
That sounds good.

1442
01:58:15,673 --> 01:58:16,950
Let's implement this.

1443
01:58:16,960 --> 01:58:18,228
And it is complete.

1444
01:58:18,228 --> 01:58:20,486
Implemented simple voting deadlines.

1445
01:58:20,486 --> 01:58:22,178
This is what was changed.

1446
01:58:22,178 --> 01:58:28,413
Added quick deadline choices, no deadline, 1 minute, 5 minutes, 15 minutes.

1447
01:58:28,413 --> 01:58:32,225
All of this, and let's go ahead and see how this works.

1448
01:58:32,225 --> 01:58:33,841
All right, so here we are.

1449
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.

1450
01:58:39,614 --> 01:58:41,831
Select 5 minutes, open the room.

1451
01:58:41,831 --> 01:58:43,464
This still says no deadline.

1452
01:58:43,464 --> 01:58:44,750
Let's try another room.

1453
01:58:44,750 --> 01:58:46,562
Let's say Sunday brunch.

1454
01:58:46,562 --> 01:58:48,409
I can select no deadline.

1455
01:58:48,409 --> 01:58:49,674
I can do 15 minutes.

1456
01:58:49,674 --> 01:58:51,333
Let's Let's 15 minutes.

1457
01:58:51,333 --> 01:58:53,079
See, it says no deadline.

1458
01:58:53,079 --> 01:58:54,258
Okay, that's a bug.

1459
01:58:54,258 --> 01:58:55,620
That's definitely a bug.

1460
01:58:55,620 --> 01:58:57,967
So, let's see if it's able to fix it.

1461
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.

1462
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.

1463
01:59:15,327 --> 01:59:18,331
And we don't really need plan mode for this.

1464
01:59:18,331 --> 01:59:21,870
There's no, you know, clarifying questions here.

1465
01:59:21,880 --> 01:59:23,179
It's a simple bug.

1466
01:59:23,179 --> 01:59:25,695
And we don't really want it to clarify.

1467
01:59:25,695 --> 01:59:27,196
We we know what the bug is.

1468
01:59:27,196 --> 01:59:28,517
We just want it to fix it.

1469
01:59:28,517 --> 01:59:31,069
So, there's really no ambiguity there.

1470
01:59:31,069 --> 01:59:34,865
It's like It's like I'm not looking to negotiate with Codex.

1471
01:59:34,865 --> 01:59:38,390
I know this is a bug and I want it to fix it, right?

1472
01:59:38,400 --> 01:59:39,702
There's no other ways.

1473
01:59:39,702 --> 01:59:41,704
There's nothing else happening.

1474
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.

1475
01:59:49,633 --> 01:59:57,638
Now, sometimes Codex would output something like this and it tries to go into plan mode.

1476
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.

1477
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.

1478
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.

1479
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.

1480
02:00:26,680 --> 02:00:31,043
And so, the solution is to go into plan mode and type something.

1481
02:00:31,043 --> 02:00:32,150
Okay, fix it.

1482
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.

1483
02:00:35,409 --> 02:00:36,195
I'm in plan mode.

1484
02:00:36,195 --> 02:00:37,911
And then you can leave plan mode.

1485
02:00:37,911 --> 02:00:39,550
And now it understands it.

1486
02:00:39,560 --> 02:00:41,340
You see, now it's correct.

1487
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.

1488
02:00:48,800 --> 02:00:50,140
So, we're going to submit this.

1489
02:00:50,140 --> 02:00:50,722
All right.

1490
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.

1491
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.

1492
02:01:06,736 --> 02:01:12,299
So, we have this and let's do Friday lunch and we said 15 minutes.

1493
02:01:12,299 --> 02:01:13,548
And now it shows it.

1494
02:01:13,548 --> 02:01:17,017
And let's say 1 minute room one, 1 minute.

1495
02:01:17,017 --> 02:01:17,989
There we go.

1496
02:01:17,989 --> 02:01:18,753
1 minute.

1497
02:01:18,753 --> 02:01:24,210
And let's try no deadline room two, select no deadline, open no deadline.

1498
02:01:24,210 --> 02:01:24,636
Okay.

1499
02:01:24,636 --> 02:01:28,526
So, this looks like this was finally fixed.

1500
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.

1501
02:01:43,941 --> 02:01:47,430
And this will round up this specific app build.

1502
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?

1503
02:01:56,377 --> 02:01:59,426
I'm just going to do it in plan mode, run that.

1504
02:01:59,426 --> 02:02:01,988
Here it's being very, very clever.

1505
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?

1506
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.

1507
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.

1508
02:02:24,840 --> 02:02:30,070
So, so we we are currently under development deployment, under development cloud.

1509
02:02:30,080 --> 02:02:34,888
We can also have a production deployment, preview deployments, other deployments, stuff like that.

1510
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.

1511
02:02:44,290 --> 02:02:48,710
Production deployment uses the production Convex.

1512
02:02:48,720 --> 02:02:51,785
Development deployment uses the development Convex.

1513
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.

1514
02:03:00,262 --> 02:03:02,002
We're going to hit submit.

1515
02:03:02,002 --> 02:03:05,277
And it's going to create a production.

1516
02:03:05,277 --> 02:03:06,974
In fact, they already did it, right?

1517
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.

1518
02:03:12,865 --> 02:03:13,417
All right.

1519
02:03:13,417 --> 02:03:19,508
So, it has deployed snack vote to Vercel and verified it against Convex production, okay?

1520
02:03:19,508 --> 02:03:22,942
So, this is the live URL, what we're seeing here.

1521
02:03:22,942 --> 02:03:25,719
Deployment URL and the Convex backend.

1522
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.

1523
02:03:32,256 --> 02:03:34,723
And we have everything here in production, right?

1524
02:03:34,723 --> 02:03:39,663
So, we have the dev instance pointing to the dev deployment in Convex.

1525
02:03:39,663 --> 02:03:46,068
And the production instance in Vercel pointing to the production instance here in Convex.

1526
02:03:46,068 --> 02:03:48,265
So, we have all the same functions.

1527
02:03:48,265 --> 02:03:49,800
We have all the same data.

1528
02:03:49,800 --> 02:03:51,078
Everything is there.

1529
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?

1530
02:03:56,927 --> 02:04:01,590
So, we can create a room, whatever new room, 1 minute, open it.

1531
02:04:01,600 --> 02:04:05,163
And now 59 seconds, 58 seconds, looks good.

1532
02:04:05,163 --> 02:04:08,576
We can create another room, room three, no deadline.

1533
02:04:08,576 --> 02:04:10,050
And that has no deadline.

1534
02:04:10,050 --> 02:04:11,545
So, I'm currently in this room.

1535
02:04:11,545 --> 02:04:13,405
I can create a food option.

1536
02:04:13,405 --> 02:04:14,153
I can vote.

1537
02:04:14,153 --> 02:04:15,804
I can't vote anymore.

1538
02:04:15,804 --> 02:04:17,613
One active vote per room.

1539
02:04:17,613 --> 02:04:19,350
This is the leaderboard.

1540
02:04:19,360 --> 02:04:21,564
So, it looks really good.

1541
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.

1542
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?

1543
02:04:44,937 --> 02:04:48,870
So, this was a slightly more complex app.

1544
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.

1545
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.

1546
02:05:09,840 --> 02:05:14,022
Now, for this last app in the course, we're going to be building FlexHelp.

1547
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.

1548
02:05:26,561 --> 02:05:30,403
The important thing is that we will still build it in controlled steps.

1549
02:05:30,403 --> 02:05:33,897
We're not going to ask Codex to build the whole marketplace at once.

1550
02:05:33,897 --> 02:05:39,250
We are going to architect the design, and build the UI, then add feature by feature.

1551
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.

1552
02:05:44,123 --> 02:05:48,757
As always, our first step will be creating the visual architecture.

1553
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.

1554
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.

1555
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.

1556
02:06:07,948 --> 02:06:08,590
FlexHelp.

1557
02:06:08,600 --> 02:06:11,089
I'm going to hit create, and I'm going to click open.

1558
02:06:11,089 --> 02:06:13,405
And that creates a brand new project.

1559
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.

1560
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.

1561
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.

1562
02:06:38,354 --> 02:06:41,702
We're going to jump into plan mode and we're going to run this.

1563
02:06:41,702 --> 02:06:44,807
And here we have the Flex Help Visual Architecture.

1564
02:06:44,807 --> 02:06:46,349
And here's a better view.

1565
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.

1566
02:06:54,655 --> 02:06:57,502
We also have the Convex and the Versel here.

1567
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.

1568
02:07:03,953 --> 02:07:07,836
The helper side, we have the helper dashboard and the status updates.

1569
02:07:07,836 --> 02:07:14,583
And on the shared marketplace screens, we have explore the marketplace, my bookings, and booking details.

1570
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.

1571
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.

1572
02:07:27,866 --> 02:07:29,693
Next, we'll map the core entities.

1573
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.

1574
02:07:40,784 --> 02:07:42,302
And here's our prompt.

1575
02:07:42,302 --> 02:07:45,029
We want to preface this with this ImageGen.

1576
02:07:45,029 --> 02:07:47,603
All right, and here's our entity architecture.

1577
02:07:47,603 --> 02:07:52,043
Okay, so we have the user, that could be a customer or a helper profile.

1578
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.

1579
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.

1580
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.

1581
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.

1582
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.

1583
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.

1584
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.

1585
02:08:59,670 --> 02:09:05,755
This keeps the technology choices tied to the product instead of starting with tools first.

1586
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.

1587
02:09:13,489 --> 02:09:15,267
And here's the prompt to do that.

1588
02:09:15,267 --> 02:09:18,060
Do not edit any files and spec everything.

1589
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.

1590
02:09:26,264 --> 02:09:27,510
Going to run this here.

1591
02:09:27,520 --> 02:09:29,287
This is what it's suggesting.

1592
02:09:29,287 --> 02:09:31,175
The workspace is currently empty.

1593
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.

1594
02:09:41,206 --> 02:09:44,473
Okay, and this is exactly what we've been doing so far.

1595
02:09:44,473 --> 02:09:47,310
And and here it's listing some primary routes.

1596
02:09:47,320 --> 02:09:51,567
Services, bookings, customer bookings, helper, helper services.

1597
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.

1598
02:10:01,432 --> 02:10:01,701
Okay?

1599
02:10:01,701 --> 02:10:06,417
So, I'm going to exit out because this was only a read-only plan mode.

1600
02:10:06,417 --> 02:10:06,666
Okay?

1601
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.

1602
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.

1603
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.

1604
02:10:29,115 --> 02:10:32,550
Now, this first version does not need any back-end data.

1605
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.

1606
02:10:39,058 --> 02:10:41,553
And this is the prompt that I'm going to be using.

1607
02:10:41,553 --> 02:10:47,366
Build the first static FlexHelp UI design from the existing architecture and stack direction.

1608
02:10:47,366 --> 02:10:49,161
We're going to stay in the plan mode.

1609
02:10:49,161 --> 02:10:51,017
Going to go ahead and execute that.

1610
02:10:51,017 --> 02:10:53,110
And let's see how well it does.

1611
02:10:53,120 --> 02:10:55,212
And here's the plan that it came up with.

1612
02:10:55,212 --> 02:11:00,658
Okay, the goal is a polished visual prototype that matches the FlexHelp architecture.

1613
02:11:00,658 --> 02:11:04,317
Okay, and here it lists some details about the architecture.

1614
02:11:04,317 --> 02:11:07,463
And let's go ahead and run this prompt.

1615
02:11:07,463 --> 02:11:09,270
So, it finished working.

1616
02:11:09,280 --> 02:11:12,082
And let's go ahead and see what we have here.

1617
02:11:12,082 --> 02:11:13,891
Okay, so this is our app.

1618
02:11:13,891 --> 02:11:16,019
And this is kind of how it looks like.

1619
02:11:16,019 --> 02:11:17,661
Okay, book practical help.

1620
02:11:17,661 --> 02:11:20,011
And we have some active requests.

1621
02:11:20,011 --> 02:11:22,928
We have booking entry, helper dashboard.

1622
02:11:22,928 --> 02:11:23,979
We have this.

1623
02:11:23,979 --> 02:11:25,030
Look at this.

1624
02:11:25,040 --> 02:11:26,353
It even works.

1625
02:11:26,353 --> 02:11:31,590
Service detail, a small plumbing repair, helper dashboard shell.

1626
02:11:31,600 --> 02:11:34,270
And so, this UI doesn't look too bad.

1627
02:11:34,280 --> 02:11:39,151
But there's something that you need to know when you design UI with Codex.

1628
02:11:39,151 --> 02:11:43,872
They all look pretty much the same or at least very, very similar.

1629
02:11:43,872 --> 02:11:50,158
And that is because Codex is not really an expert when it comes to designing pages.

1630
02:11:50,158 --> 02:11:54,066
It's great for coding, for solving all kinds of problems.

1631
02:11:54,066 --> 02:11:58,950
But for actually designing stuff, it's not the most ideal tool.

1632
02:11:58,960 --> 02:12:01,893
There are a lot of other tools that do it a lot better.

1633
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?

1634
02:12:17,608 --> 02:12:21,518
Now, when it comes to UI designs, there's lots of cool tools.

1635
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.

1636
02:12:29,698 --> 02:12:34,495
It's a very very lightweight tool, and it works really great with Codex.

1637
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.

1638
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?

1639
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.

1640
02:12:53,011 --> 02:13:00,101
So, if you click over here, you can connect designer to external agents and IDEs.

1641
02:13:00,101 --> 02:13:03,202
So, Claude Code, Gemini CLI, and Codex.

1642
02:13:03,202 --> 02:13:04,718
And so, I have this set up.

1643
02:13:04,718 --> 02:13:06,767
So, all you need to do is click here.

1644
02:13:06,767 --> 02:13:08,134
Now it's installed.

1645
02:13:08,134 --> 02:13:13,755
And now, this app here is going to serve as an MCP server, okay?

1646
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.

1647
02:13:23,540 --> 02:13:26,976
And if you want to set this up, you can simply ask Codex to do it.

1648
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?

1649
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.

1650
02:13:52,203 --> 02:13:57,070
They also have, you know, explore styles feature, or you can have an instant generation.

1651
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.

1652
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.

1653
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.

1654
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.

1655
02:14:20,785 --> 02:14:22,621
And here's a prompt that we can use.

1656
02:14:22,621 --> 02:14:25,885
Create a polished FlutterFlow designer concept for FlexHelp.

1657
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.

1658
02:14:31,299 --> 02:14:33,185
We give it some design requirements.

1659
02:14:33,185 --> 02:14:36,415
We give give it some guardrails, stuff like that.

1660
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.

1661
02:14:45,932 --> 02:14:49,480
So, I'm going to go ahead and run this, and here are the designs.

1662
02:14:49,480 --> 02:14:52,052
So, as you can see, they're all very different.

1663
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?

1664
02:15:02,504 --> 02:15:04,262
So, this is what Codex did.

1665
02:15:04,262 --> 02:15:09,863
In my view, these designs are a lot more interesting than Codex's design.

1666
02:15:09,863 --> 02:15:10,150
Okay?

1667
02:15:10,150 --> 02:15:12,527
So, I don't know which one you guys like.

1668
02:15:12,527 --> 02:15:14,136
This is a classical one.

1669
02:15:14,136 --> 02:15:15,116
This is nice.

1670
02:15:15,116 --> 02:15:16,191
Let's take a look.

1671
02:15:16,191 --> 02:15:18,030
Let's go ahead and use this classical one.

1672
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.

1673
02:15:23,984 --> 02:15:26,221
So, here we have seven pages that we need.

1674
02:15:26,221 --> 02:15:27,758
So, now we have all the pages.

1675
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.

1676
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.

1677
02:15:50,480 --> 02:15:51,654
And so, let's take a look.

1678
02:15:51,654 --> 02:15:55,245
So, this is called FlexHelp Marketplace, the name of the project here.

1679
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.

1680
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

1681
02:16:12,760 --> 02:16:13,440
right here.

1682
02:16:13,440 --> 02:16:15,815
And I have a prompt here to do just that.

1683
02:16:15,815 --> 02:16:16,990
So, here's the prompt.

1684
02:16:17,000 --> 02:16:21,905
Update the Flex sub static UI to match the approved FlutterFlow Designer reference.

1685
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.

1686
02:16:29,021 --> 02:16:36,278
Use FlutterFlow Designer MCP and then project is because there are multiple projects.

1687
02:16:36,278 --> 02:16:38,197
We want to copy this project here.

1688
02:16:38,197 --> 02:16:38,486
This.

1689
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.

1690
02:16:42,541 --> 02:16:43,596
And I'm going to run that.

1691
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.

1692
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.

1693
02:16:58,600 --> 02:17:01,368
And as you can see, it's it's analyzing this page.

1694
02:17:01,368 --> 02:17:04,597
And you can see this little Codex icon here.

1695
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.

1696
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.

1697
02:17:23,612 --> 02:17:23,929
Okay?

1698
02:17:23,929 --> 02:17:25,774
So, let's see what it's doing.

1699
02:17:25,774 --> 02:17:27,830
So, now it came back with a plan.

1700
02:17:27,840 --> 02:17:34,356
Update the existing React static UI to visually follow the approved FlutterFlow Designer reference.

1701
02:17:34,356 --> 02:17:39,917
So, here it's it has five pages, but over here we actually have more.

1702
02:17:39,917 --> 02:17:41,511
We have seven pages.

1703
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.

1704
02:17:48,205 --> 02:17:52,168
So, we want to make sure that it captures all the seven pages.

1705
02:17:52,168 --> 02:17:58,659
Ensure that it captures all the seven pages from FlutterFlow Designer project.

1706
02:17:58,659 --> 02:17:59,045
Okay?

1707
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.

1708
02:18:06,854 --> 02:18:11,526
User profile, helper, request management, helper dashboard, etc. etc.

1709
02:18:11,526 --> 02:18:13,148
All of these make sense.

1710
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.

1711
02:18:19,599 --> 02:18:20,504
Okay, submit this.

1712
02:18:20,504 --> 02:18:25,517
All right, so it has implemented the seven page designer reference update.

1713
02:18:25,517 --> 02:18:27,557
Let's go ahead and see how it looks.

1714
02:18:27,557 --> 02:18:30,202
All right, so this looks a lot better in my opinion.

1715
02:18:30,202 --> 02:18:32,270
All right, we have settings.

1716
02:18:32,270 --> 02:18:34,908
We do have the CH customer home.

1717
02:18:34,908 --> 02:18:36,319
Do we even see that?

1718
02:18:36,319 --> 02:18:37,847
I don't even see that here.

1719
02:18:37,847 --> 02:18:42,051
But this customer home service details, click on book.

1720
02:18:42,051 --> 02:18:44,720
So this menu we need to kind of remove this.

1721
02:18:44,720 --> 02:18:46,300
So let me go ahead and sell it.

1722
02:18:46,300 --> 02:18:48,424
What are those abbreviations?

1723
02:18:48,424 --> 02:18:49,039
Let's see.

1724
02:18:49,039 --> 02:18:50,532
Do they need to be there?

1725
02:18:50,532 --> 02:18:52,117
Let's see what it says.

1726
02:18:52,117 --> 02:18:57,611
But it looks a lot cleaner than than the original UI, at least to my eyes.

1727
02:18:57,611 --> 02:19:02,541
And now we're doing a little bit of tweaking, clean-up plan.

1728
02:19:02,541 --> 02:19:08,047
Okay, they were placeholder text icons used to mimic the nav icon column.

1729
02:19:08,047 --> 02:19:13,112
So we need to remove that and we should probably remove any other placeholder icons.

1730
02:19:13,112 --> 02:19:15,163
But right now it looks fairly clean.

1731
02:19:15,163 --> 02:19:17,127
Static preview, what is that?

1732
02:19:17,127 --> 02:19:19,041
This this also needs to be removed.

1733
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.

1734
02:19:27,399 --> 02:19:33,015
Pull pull the design elements and re-replace these placeholders with with the actual design.

1735
02:19:33,015 --> 02:19:34,629
All right, so it has fixed it.

1736
02:19:34,639 --> 02:19:36,083
Now it looks a lot better.

1737
02:19:36,083 --> 02:19:38,258
We still see some other static preview.

1738
02:19:38,258 --> 02:19:38,950
That's okay.

1739
02:19:38,960 --> 02:19:43,168
Let's see if they go away once we have real data being fed.

1740
02:19:43,168 --> 02:19:48,133
So once we're happy with the UI, we can start designing the backend.

1741
02:19:48,133 --> 02:19:52,318
Data model should match the screens that we actually have here.

1742
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.

1743
02:20:01,292 --> 02:20:03,544
Anything beyond that can wait.

1744
02:20:03,544 --> 02:20:09,190
And here's a prompt that we can use to connect our app to Convex, okay?

1745
02:20:09,200 --> 02:20:12,157
We're going to be using Convex for this app as well.

1746
02:20:12,157 --> 02:20:17,673
So, we have here connect let's help UI to live Convex service and helper data.

1747
02:20:17,673 --> 02:20:20,012
Let's go ahead and keep it in plan mode.

1748
02:20:20,012 --> 02:20:21,573
All right, so this is our plan.

1749
02:20:21,573 --> 02:20:24,110
This is the Convex read path plan.

1750
02:20:24,120 --> 02:20:30,717
Connect the customer facing marketplace UI to Convex for the first database back read path.

1751
02:20:30,717 --> 02:20:33,458
The repo currently has no Convex setup.

1752
02:20:33,458 --> 02:20:36,838
So, add Convex from from scratch, etc., etc.

1753
02:20:36,838 --> 02:20:39,030
And we have Convex here running.

1754
02:20:39,030 --> 02:20:40,609
We have these three projects.

1755
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.

1756
02:20:46,967 --> 02:20:52,985
All right, so it has implemented the first Convex back read path for the customer marketplace.

1757
02:20:52,985 --> 02:20:55,030
And these are the files that has changed.

1758
02:20:55,040 --> 02:20:56,341
This is what's connected.

1759
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.

1760
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.

1761
02:21:08,818 --> 02:21:13,739
This is a local deployment that Convex is running on, right?

1762
02:21:13,739 --> 02:21:16,516
This is not on Convex, it's on my own machine.

1763
02:21:16,516 --> 02:21:18,649
And we also have a production, right?

1764
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.

1765
02:21:25,165 --> 02:21:26,548
We also have services.

1766
02:21:26,548 --> 02:21:29,216
And then we have a bunch of functions, right?

1767
02:21:29,216 --> 02:21:33,030
Marketplace list, and then we have seed, creating seed data.

1768
02:21:33,040 --> 02:21:36,789
Now, if you go into production, we may not see anything there, right?

1769
02:21:36,789 --> 02:21:40,346
There's nothing there because we haven't deployed this app to production.

1770
02:21:40,346 --> 02:21:43,510
There's no need for a production deployment.

1771
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?

1772
02:21:51,922 --> 02:21:53,192
So, we have here Marcus.

1773
02:21:53,192 --> 02:21:55,976
If you go back here, we should see Marcus, right?

1774
02:21:55,976 --> 02:21:57,888
Helper profiles, there's Marcus.

1775
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?

1776
02:22:02,455 --> 02:22:05,910
And I go back here, now it's automatically Marcus E here.

1777
02:22:05,920 --> 02:22:07,188
Automatically updates.

1778
02:22:07,188 --> 02:22:09,397
If I change that to James, guess what?

1779
02:22:09,397 --> 02:22:10,563
Now it says James S.

1780
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.

1781
02:22:16,019 --> 02:22:17,542
Both of these are on my machine.

1782
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?

1783
02:22:24,237 --> 02:22:26,767
The ability to book these services.

1784
02:22:26,767 --> 02:22:28,613
And I have a prompt here as well.

1785
02:22:28,613 --> 02:22:31,056
We're going to be using this prompt right here.

1786
02:22:31,056 --> 02:22:34,190
Okay, add the customer booking flow to FlexHelp.

1787
02:22:34,200 --> 02:22:38,109
Inspect all of this, and I'm going to set this to plan mode.

1788
02:22:38,109 --> 02:22:39,935
And let's go ahead and run that.

1789
02:22:39,935 --> 02:22:40,790
That's our plan.

1790
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.

1791
02:22:48,291 --> 02:22:49,845
And there's some information there.

1792
02:22:49,845 --> 02:22:51,336
We're going to implement this plan.

1793
02:22:51,336 --> 02:22:55,810
All right, so it has implemented the customer booking creation path.

1794
02:22:55,810 --> 02:22:57,651
And it also tested it out.

1795
02:22:57,651 --> 02:23:01,298
As you can see, there's also a booking here as well.

1796
02:23:01,298 --> 02:23:03,350
So, let's go ahead and see if this works.

1797
02:23:03,360 --> 02:23:05,595
All right, so let's say I want to book James.

1798
02:23:05,595 --> 02:23:06,753
Click over here.

1799
02:23:06,753 --> 02:23:11,160
So, I can't quite pick anything here, but I can do request to book.

1800
02:23:11,160 --> 02:23:12,630
Send booking request.

1801
02:23:12,640 --> 02:23:13,905
And I need an address.

1802
02:23:13,905 --> 02:23:16,122
Okay, so let's say do, I don't know.

1803
02:23:16,122 --> 02:23:18,149
We need auto-complete here as well.

1804
02:23:18,149 --> 02:23:19,634
Fill in every field.

1805
02:23:19,634 --> 02:23:20,081
Okay.

1806
02:23:20,081 --> 02:23:21,870
Okay, so task, task.

1807
02:23:21,880 --> 02:23:24,390
Okay, this I cannot fill every field.

1808
02:23:24,400 --> 02:23:28,110
Okay, customer, schedule, say 10:00 a.m.

1809
02:23:28,120 --> 02:23:33,063
And this obviously needs to be, you know, like a calendar picker, that kind of thing.

1810
02:23:33,063 --> 02:23:34,996
Okay, and now we have the booking request.

1811
02:23:34,996 --> 02:23:38,160
And I can click on view bookings, and I see my bookings.

1812
02:23:38,160 --> 02:23:42,553
Okay, so this was done by the Codex while it was testing.

1813
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.

1814
02:23:49,240 --> 02:23:51,083
And we see two bookings, okay?

1815
02:23:51,083 --> 02:23:51,681
Right here.

1816
02:23:51,681 --> 02:23:53,596
So, the booking flow seems to work.

1817
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.

1818
02:23:59,480 --> 02:24:04,547
Now, once customers can create bookings, helpers need a place to see and manage them.

1819
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.

1820
02:24:11,697 --> 02:24:16,510
At the simplest level, the helper should be able to accept or decline a request.

1821
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.

1822
02:24:22,901 --> 02:24:27,232
Those status changes are what turn the app into a workflow.

1823
02:24:27,232 --> 02:24:31,060
This is also a good place to show the power of live data.

1824
02:24:31,060 --> 02:24:36,506
When a status changes, the UI should update and the Convex row should change.

1825
02:24:36,506 --> 02:24:39,950
That gives us a real end-to-end marketplace loop.

1826
02:24:39,960 --> 02:24:44,291
Customer request, helper action, back end state, and UI update.

1827
02:24:44,291 --> 02:24:46,790
And this is the prompt that we're going to be using.

1828
02:24:46,800 --> 02:24:52,119
Add the helper dashboard workflow for viewing booking requests and updating booking status.

1829
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.

1830
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?

1831
02:25:03,203 --> 02:25:05,471
Keep requested, this is recommended.

1832
02:25:05,471 --> 02:25:10,544
Preserve existing created bookings, show it as pending in the UI, or rename to pending.

1833
02:25:10,544 --> 02:25:13,947
Change the stored initial status to pending and require a small data.

1834
02:25:13,947 --> 02:25:15,689
So, we don't want any migration.

1835
02:25:15,689 --> 02:25:18,402
We just want to go with the easiest option.

1836
02:25:18,402 --> 02:25:23,686
And then, how should the helper request visibility work before auth is added?

1837
02:25:23,686 --> 02:25:24,927
Helper selected.

1838
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.

1839
02:25:32,320 --> 02:25:34,675
Simplest UI and back end, but less realistic.

1840
02:25:34,675 --> 02:25:36,790
So, we want helper selected.

1841
02:25:36,800 --> 02:25:38,221
Okay, we're going to select that.

1842
02:25:38,221 --> 02:25:39,962
All right, there's the plan.

1843
02:25:39,962 --> 02:25:44,750
Add the first helper-facing workflow on top of existing convex booking creation pack.

1844
02:25:44,760 --> 02:25:46,032
We're going to submit this.

1845
02:25:46,032 --> 02:25:47,049
Here is our progress.

1846
02:25:47,049 --> 02:25:51,298
All right, so he just implemented the helper booking status workflow.

1847
02:25:51,298 --> 02:25:52,775
And these are the files that changed.

1848
02:25:52,775 --> 02:25:53,811
This is what it did.

1849
02:25:53,811 --> 02:25:58,148
So it updated it through pending, accepted, in progress, completed.

1850
02:25:58,148 --> 02:26:01,808
It viewed it under helper James created booking this.

1851
02:26:01,808 --> 02:26:02,720
So it did all that.

1852
02:26:02,720 --> 02:26:03,495
It did some tests.

1853
02:26:03,495 --> 02:26:04,727
Let's go ahead and open it.

1854
02:26:04,727 --> 02:26:06,315
And let's see what we can do.

1855
02:26:06,315 --> 02:26:08,911
So this is the helper booking status.

1856
02:26:08,911 --> 02:26:12,993
I'm going to helper dashboard have my incoming requests, right?

1857
02:26:12,993 --> 02:26:16,650
So I can accept it, I can start it, and I can complete it.

1858
02:26:16,650 --> 02:26:17,038
Okay?

1859
02:26:17,038 --> 02:26:19,398
So that's the piece that is working.

1860
02:26:19,398 --> 02:26:20,550
I can also cancel it.

1861
02:26:20,560 --> 02:26:21,954
And that is canceled.

1862
02:26:21,954 --> 02:26:22,884
And that's it.

1863
02:26:22,884 --> 02:26:24,108
I can't come back to it.

1864
02:26:24,108 --> 02:26:25,130
I can't do anything.

1865
02:26:25,130 --> 02:26:27,017
Here we have recent activity, right?

1866
02:26:27,017 --> 02:26:28,550
Completed, completed, canceled.

1867
02:26:28,560 --> 02:26:31,710
And this is the one that did 148 116.

1868
02:26:31,720 --> 02:26:33,950
This is the one that it has completed.

1869
02:26:33,960 --> 02:26:35,443
This seems to work, right?

1870
02:26:35,443 --> 02:26:38,081
And we have canceled, we have completed.

1871
02:26:38,081 --> 02:26:41,405
Even a simple marketplace has different responsibilities.

1872
02:26:41,405 --> 02:26:44,821
Customers create booking requests and view their own bookings.

1873
02:26:44,821 --> 02:26:48,990
Helpers manage requests that belong to them or are available to them.

1874
02:26:49,000 --> 02:26:55,022
Admin or system logic may handle category alteration or platform level controls later.

1875
02:26:55,022 --> 02:26:58,556
The key point is that these rules should not only live in the UI.

1876
02:26:58,556 --> 02:27:05,371
Back-end functions need to enforce ownership and permissions because the UI can always be bypassed.

1877
02:27:05,371 --> 02:27:10,770
This is where Codex needs to think carefully instead of just adding buttons.

1878
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.

1879
02:27:16,760 --> 02:27:18,731
And here's the prompt to do that.

1880
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?

1881
02:27:25,286 --> 02:27:27,816
So we're going to go definitely in the plan mode.

1882
02:27:27,816 --> 02:27:30,270
We're going to run this and see what it says.

1883
02:27:30,280 --> 02:27:32,001
And so it has a question for us.

1884
02:27:32,001 --> 02:27:36,767
Which identity approach should this plan should this step plan for?

1885
02:27:36,767 --> 02:27:37,945
Demo sessions.

1886
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.

1887
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?

1888
02:27:57,129 --> 02:27:58,642
Role plus profile.

1889
02:27:58,642 --> 02:27:59,805
So what is this?

1890
02:27:59,805 --> 02:28:05,936
Each demo user has customer helper both and helpers linked to one helper profile for request.

1891
02:28:05,936 --> 02:28:07,090
Separate accounts.

1892
02:28:07,090 --> 02:28:10,405
Customer and helper are always separate demo users.

1893
02:28:10,405 --> 02:28:13,055
Simpler boundaries but less flexible.

1894
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.

1895
02:28:19,241 --> 02:28:20,916
This is what I usually type.

1896
02:28:20,916 --> 02:28:26,294
For the second question, what's the most durable long-term option?

1897
02:28:26,294 --> 02:28:28,652
Okay, that's the key here, durable.

1898
02:28:28,652 --> 02:28:30,085
Now let's see what it says.

1899
02:28:30,085 --> 02:28:33,914
The most durable long-term option is role plus profile.

1900
02:28:33,914 --> 02:28:34,552
Perfect.

1901
02:28:34,552 --> 02:28:35,218
That's it.

1902
02:28:35,218 --> 02:28:39,561
And for the first question, choose demo sessions for the for this core step.

1903
02:28:39,561 --> 02:28:42,735
Okay, so let's go ahead with demo sessions, okay?

1904
02:28:42,735 --> 02:28:46,395
So do demo sessions and role plus profile.

1905
02:28:46,395 --> 02:28:48,992
Let's just go with the recommendations.

1906
02:28:48,992 --> 02:28:49,667
Expand it.

1907
02:28:49,667 --> 02:28:54,265
All right, so now you can see that Codex is testing everything, right?

1908
02:28:54,265 --> 02:28:58,962
It's testing on the UI in the browser and you see this cursor right here.

1909
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.

1910
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?

1911
02:29:13,003 --> 02:29:15,830
So marketplace browsing stays public.

1912
02:29:15,840 --> 02:29:19,971
Booking creation requires a customer or both demo user.

1913
02:29:19,971 --> 02:29:25,107
Customer booking status only shows bookings owned by the signed-in customer.

1914
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.

1915
02:29:33,210 --> 02:29:38,590
And so, remaining limitation, this is still tutorial demo auth, not production authentication.

1916
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.

1917
02:29:46,392 --> 02:29:50,473
And so, this should give us some uh role separation, right?

1918
02:29:50,473 --> 02:29:52,515
Some kind of authentication on the backend.

1919
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?

1920
02:29:57,518 --> 02:29:59,779
These are the users, and there's a role.

1921
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.

1922
02:30:04,091 --> 02:30:08,966
And depending on which role you're you're in, you can do various operations.

1923
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.

1924
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.

1925
02:30:24,204 --> 02:30:29,187
And these functions, they are meant to work with specific roles, right?

1926
02:30:29,187 --> 02:30:32,797
So, that authentic- -ation is is baked in into these functions.

1927
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.

1928
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.

1929
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.

1930
02:30:59,291 --> 02:31:04,368
Observe the issue, diagnose it, patch it narrowly, and verify the fix.

1931
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.

1932
02:31:13,960 --> 02:31:15,907
We're going to be using this prompt over here.

1933
02:31:15,907 --> 02:31:20,430
Debug, polish, and verify the existing flex help product workflow.

1934
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.

1935
02:31:30,320 --> 02:31:32,084
Let's jump into plan mode.

1936
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?

1937
02:31:40,004 --> 02:31:44,038
And so, the build passes and both local servers are responding.

1938
02:31:44,038 --> 02:31:48,150
So, it's using an in-app browser now for a quick workflow probe.

1939
02:31:48,160 --> 02:31:52,983
So, the plan targets actual UI issues rather than guesses, okay?

1940
02:31:52,983 --> 02:31:55,163
So, let's wait to see what it finds.

1941
02:31:55,163 --> 02:31:57,705
And this is the plan that it came up with.

1942
02:31:57,705 --> 02:32:04,674
Tighten the existing customer helper Convex and demo app workflows without adding new product scope, okay?

1943
02:32:04,674 --> 02:32:09,679
So, it lists a bunch of things and we want to quickly scan assumptions.

1944
02:32:09,679 --> 02:32:14,372
No new marketplace features will be added, no payments, nothing, okay?

1945
02:32:14,372 --> 02:32:17,345
That stays and here's some key changes.

1946
02:32:17,345 --> 02:32:19,131
You can kind of scan through that.

1947
02:32:19,131 --> 02:32:20,522
Let's go ahead and submit this.

1948
02:32:20,522 --> 02:32:25,175
Right, so it is done and it has implemented the debug polish task.

1949
02:32:25,175 --> 02:32:27,818
And it actually fixed a lot of interesting things.

1950
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.

1951
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?

1952
02:32:50,424 --> 02:32:51,946
And I can switch a demo user.

1953
02:32:51,946 --> 02:32:55,870
Now, I'm signed in as the helper and now I'm signed in as both.

1954
02:32:55,880 --> 02:33:00,294
Customer access, choose a customer demo user to create a booking request.

1955
02:33:00,294 --> 02:33:03,870
So, it's coming along really, really nicely.

1956
02:33:03,880 --> 02:33:06,670
And the final build step is deployment.

1957
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.

1958
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.

1959
02:33:19,944 --> 02:33:27,135
So, deploy the existing Flex app with Vercel and smoke test the connected Convex backend, okay?

1960
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.

1961
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.

1962
02:33:38,240 --> 02:33:40,874
Use the Vercel Vercel plugin.

1963
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?

1964
02:33:50,010 --> 02:33:52,003
That we want to use the Vercel plugin.

1965
02:33:52,003 --> 02:33:56,376
Which Convex environment should the deployed Vercel app use for the smoke test?

1966
02:33:56,376 --> 02:33:57,659
We want to use production.

1967
02:33:57,659 --> 02:34:00,354
And where should the front end be deployed?

1968
02:34:00,354 --> 02:34:01,710
New personal project.

1969
02:34:01,720 --> 02:34:02,240
Exactly.

1970
02:34:02,240 --> 02:34:04,060
This is a brand new project.

1971
02:34:04,060 --> 02:34:05,910
We already have a bunch of projects, right?

1972
02:34:05,920 --> 02:34:08,241
So, if we go over here, we have this project.

1973
02:34:08,241 --> 02:34:10,394
Actually, we should have used the existing project.

1974
02:34:10,394 --> 02:34:13,504
We already have this project, but I think it's going to create a new project.

1975
02:34:13,504 --> 02:34:15,292
Let's see if we can tell it.

1976
02:34:15,292 --> 02:34:17,077
I'm going to copy that.

1977
02:34:17,077 --> 02:34:18,900
See if we can use the existing project.

1978
02:34:18,900 --> 02:34:20,628
No need to create a new project.

1979
02:34:20,628 --> 02:34:21,503
And let me check.

1980
02:34:21,503 --> 02:34:24,182
So, this is actually plan mode, so we're okay.

1981
02:34:24,182 --> 02:34:25,834
Okay, implement this.

1982
02:34:25,834 --> 02:34:27,990
And here it's going to create a production.

1983
02:34:28,000 --> 02:34:30,654
So, if we go over here, remember we're using this.

1984
02:34:30,654 --> 02:34:33,088
We also have a production deployment set up.

1985
02:34:33,088 --> 02:34:35,480
So, it's going to be using the production deployment.

1986
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.

1987
02:34:40,531 --> 02:34:44,989
Production Convex is now seeded and responding with services and demo users.

1988
02:34:44,989 --> 02:34:47,482
So, if you go over here, we have everything now.

1989
02:34:47,482 --> 02:34:48,030
Look at this.

1990
02:34:48,040 --> 02:34:49,491
Sessions, services.

1991
02:34:49,491 --> 02:34:50,790
We have the data.

1992
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?

1993
02:35:04,520 --> 02:35:09,407
So, we need to test things again because, you know, it's using new environments now.

1994
02:35:09,407 --> 02:35:11,015
All right, and it is done.

1995
02:35:11,015 --> 02:35:12,177
Deployed FlexHelp.

1996
02:35:12,177 --> 02:35:13,346
This is the URL.

1997
02:35:13,346 --> 02:35:16,264
This is the Vercel project deployment ID.

1998
02:35:16,264 --> 02:35:18,325
Everything is live now, okay?

1999
02:35:18,325 --> 02:35:21,644
And you can access it as well at this URL, okay?

2000
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?

2001
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?

2002
02:35:36,574 --> 02:35:37,946
This is helper access, right?

2003
02:35:37,946 --> 02:35:39,325
Remember the roles, right?

2004
02:35:39,325 --> 02:35:41,096
It's it's being handled here.

2005
02:35:41,096 --> 02:35:46,145
And so, now as a customer, I want to book professional seasonal garden cleanup.

2006
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.

2007
02:35:54,804 --> 02:35:59,699
Okay, so with booking request submitted, your request was saved, view my bookings.

2008
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.

2009
02:36:08,121 --> 02:36:11,492
And I'm going to say accept or complete, it's completed.

2010
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.

2011
02:36:21,597 --> 02:36:23,116
Okay, there we go, completed.

2012
02:36:23,116 --> 02:36:24,439
And here we see completed.

2013
02:36:24,439 --> 02:36:25,670
This one is completed.

2014
02:36:25,680 --> 02:36:28,486
Actually, this one, for Marcus, it has been completed.

2015
02:36:28,486 --> 02:36:30,289
And then there's some more requests here.

2016
02:36:30,289 --> 02:36:31,486
So, the flow is working.

2017
02:36:31,486 --> 02:36:33,310
The flow is working perfectly.

2018
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.

2019
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,

2020
02:37:01,960 --> 02:37:02,760
functionalities.

2021
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.

2022
02:37:12,587 --> 02:37:18,056
And here they are, top five high impact, low effort next features I prioritize.

2023
02:37:18,056 --> 02:37:23,911
Functional marketplace search, booking detail view, customer cancel pending requests, etc., etc.

2024
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.

2025
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.

2026
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.

2027
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.

2028
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.

2029
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.

2030
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

2031
02:38:41,040 --> 02:38:42,906
like to share you in some of the future videos.

2032
02:38:42,906 --> 02:38:48,132
And so I really hope that you enjoyed this mega Codex tutorial.

2033
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

2034
02:39:03,040 --> 02:39:03,794
hopefully join.

2035
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.

2036
02:39:09,591 --> 02:39:17,160
And so, like this video, leave a comment, and check out our amazing Patreon community.