start	end	text
0	3567	In this video, we're going to do a comprehensive Codex tutorial.
3567	10693	I want to show you not just what Codex is, but how to actually use it as a serious app building agent.
10693	28277	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.
28277	31885	Then, we'll turn that foundation into a real workflow.
31885	42020	We'll use Codex to plan, architect, design, implement, debug, and ultimately deploy a production-ready app from scratch.
42020	53676	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.
53676	59407	Now, when you Google for Codex, you're going to land on this website here.
59407	64331	And here, you can learn more about Codex, and you can also download the app.
64331	67205	Now, as you can see, it says here download for macOS.
67205	69548	That is because I have macOS.
69548	74920	If you're running Windows, you're going to have a button that says download for Windows.
74920	77442	So, it does support macOS and Windows.
77442	89190	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?
89200	92393	And you can kind of scroll down, you can learn more about it.
92393	97127	Or we can jump into my Codex instance here, and I can give you a quick overview.
97127	104114	So, on the left-hand side, we have things like starting a new chat, search, various plugins, automations.
104114	109310	Just below that, we have our main organization, right?
109320	112384	And this is where you can organize your projects, okay?
112384	126368	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.
126368	131264	They're actually linked to folders on your disk, okay?
131264	136340	And so, everything that you see here represents actual folders.
136340	139993	Now, inside of these folders, we have some items here.
139993	144010	Now, these are not files, and they do not represent anything on the disk.
144010	146398	These are actually conversations, right?
146398	152579	And you can think of them as, you know, similar to what you might have in Chat GPT, okay?
152579	162878	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.
162878	168101	Now, in the center pane over here, this is where you're going to be communicating, right?
168101	172583	So, if we scroll back up, this was my initial prompt here.
172583	179251	I want to build a very, very simple web app that arranges items as a Trello Kanban board style, etc.
179251	181951	And then I have this interaction here, right?
181951	186628	It does something, I ask it to do something else, etc., etc.
186628	191419	Now, just below that is where you're going to be entering your prompt, okay?
191419	200061	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.
200061	207252	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?
207252	210313	And a lot of people are not really like using it.
210313	215115	And And you need to understand to leverage this whole app experience, right?
215115	223909	So, right here, we have this little card that displays a little bit of information about this specific conversation, right?
223909	227885	So, we have branch details, we have some artifacts, right?
227885	232916	And these are the data that happened as a result of this convo, right?
232916	236914	And so, if I go to another conversation, we might have different artifacts, right?
236914	243524	And you can think of an artifact as a side effect of, you know, of your conversation, okay?
243524	246817	So, if you've created a readme file, you're going to see it here.
246817	249310	If you did a web search, you're going to see it here.
249320	255293	Now, one of the more interesting things happens when you click this button and open the right-hand pane.
255293	258177	And here, you can see all kinds of interesting things, right?
258177	263922	So, for instance, if I click this button, I can have a side chat, or I can have a browser.
263922	281430	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
281440	285796	see exactly how the app looks as I'm developing it.
285796	293870	And we're going to be doing all of that in more detail a little bit later in this tutorial.
293880	296235	First, let's talk about Codex.
296235	306799	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.
306799	319454	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.
319454	321741	The difference matters a lot.
321741	328477	ChatGPT is great when I want an explanation, a rewrite, a brainstorm, or a quick answer.
328477	333968	Codex is what I use when I want work to happen inside a real project.
333968	341832	It can do many of the same reasoning tasks as ChatGPT, but it can also act on the project directly.
341832	350441	That is why I keep ChatGPT mostly for pure informational questions, and I keep Coda for work threads.
350441	354830	So, my project context stays focused and clean.
354840	357157	There are two main ways to use Coda.
357157	370529	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.
370529	376098	The second is the Mac app, which is usually better for visual app building work.
376098	392478	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.
392478	398305	And that is why I highly prefer to use the Mac app, and that is what I recommend you use as well.
398305	419018	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.
419018	428881	Once those pieces make sense, Coda stops feeling like a chat box and starts feeling like an app building environment.
428881	433550	The project pane is where you open or switch between projects.
433560	438750	The thread area is where the conversation and task history lives.
438760	445123	The file change view shows what Coda wants to edit before those changes are accepted.
445123	451175	The terminal output shows commands, builds, errors, and verification steps.
451175	456310	The browser preview is where you can inspect the running app is where you can inspect the running app visually.
456320	464710	Together, these pieces make Coda feel less like a chat bot and more like a working development environment.
464720	467150	Permission flow is also important.
467160	472854	Cortex should never feel like a black box that silently changes everything.
472854	488990	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.
489000	493710	The next thing to understand is that Cortex is not just one fixed experience.
493720	500006	There are a few workflow decisions you make each time you use it, and the first one is which model to use.
500006	507790	In practice, I usually default to the latest strongest model unless I have a clear reason not to.
507800	512477	Because most app building tasks benefit from better reasoning.
512477	518270	Here's a rough guide to picking the correct model for your specific task.
518270	531590	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.
531600	543288	For small copy tweaks, simple UI polish, short refactors, or low-risk tasks, a faster, a lighter model can be a better tool.
543288	551692	And here's where you can use an older model, or a mini, or a nano version of the current latest model.
551692	564110	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.
564120	582070	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.
582080	593710	The more expensive the mistake, the more I want to slow down and use the better reasoning setup.
593720	596812	The next important decision is the reasoning mode.
596812	605404	This controls how much time and effort Cortex spends thinking through the task before and during the work.
605404	612842	This decision is a little more nuanced than model choice because every reasoning mode has a place.
612842	619435	Low thinking is useful for quick, obvious tasks where the risk is small.
619435	631172	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.
631172	635150	High is what I use when the decision is more expensive.
635160	647482	Architecture, convex data model design, authentication, permissions, hard bugs, multi-file changes, and the final review.
647482	661190	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.
661200	663750	But, the practical lesson is simple.
663760	668578	Match the model and thinking mode to the risk of the decision.
668578	673045	If the task is small and reversible, keep it fast.
673045	679165	If the task affects the structure of the app, slow the model down and let it reason.
679165	690429	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.
690429	694134	Now, first of all, you have your contacts window here, right?
694134	697341	Here you can see how much of the context you have used.
697341	703191	Now, Korax says that it automatically compacts its contacts.
703191	708416	And yeah, you can do that, but over time, it's not going to be as effective.
708416	717620	And so, you always want to be starting new conversations anytime you're working on something new that requires a context switch, okay?
717620	721835	Next, we have here the all-important model selector, okay?
721835	731423	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?
731423	739895	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.
739895	744981	We also have things like speed, standard versus fast.
744981	751402	Fast is 1 and 1/2 times faster, but it also uses more of your usage, okay?
751402	755828	So, depending on which plan you're at, you may want to stay on standard.
755828	760440	I mostly keep it on standard unless, you know, I'm in a hurry and I want to switch it on fast.
760440	762751	Next, we have intelligence, right?
762751	764697	Now, this is very, very important.
764697	767576	By default, I keep this on high.
767576	782050	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?
782050	784400	You're going to be giving up intelligence.
784400	792011	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?
792011	793947	It's kind of like a person, right?
793947	801811	You can ask a person a question, and that person may think more, think through something longer, right?
801811	807834	You know how people say, "Let me sleep or let me sleep on it." Or let me think it over, right?
807834	819110	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.
819120	828670	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.
828680	831097	And it's the exact same thing here, right?
831097	838389	If you set something too low, and you're working through something fairly complex, well, the model is not going to think it through.
838389	846750	It's going to give you an answer that well, it's an answer, but it might not be the ideal answer, okay?
846760	856703	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.
856703	869698	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.
869698	875474	You know, the situations where extra high really proven itself over high, it hasn't been that many.
875474	880279	And so, for the most part, I keep it on high, sometimes I also switch it back to medium.
880279	894230	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.
894240	903041	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.
903041	907950	For most people learning Codex, the important question is not what is the most expensive plan.
907960	912119	The question is, what do I actually need for the kind of work I'm doing?
912119	920638	If you're learning, testing prompts, and building smaller projects, you can usually start with the normal Chat GPT plan access available to you.
920638	932251	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.
932251	936205	Now, here I am on OpenAI's Codex pricing page.
936205	943223	And if you scroll down, you can see the prices that are available at the time of filming this video, right?
943223	949359	So, we have the free plan, and this allows you to explore Codex capabilities on quick coding tasks.
949359	955288	We have the gold plan, which is $8 a month, and you can use Codex for lightweight coding tasks.
955288	965590	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?
965600	969537	Something like, you know, building a part of an app, or building some scripts.
969537	974670	And they say this can power a few focused coding sessions each week.
974680	976545	Next, we have the pro plan, right?
976545	984889	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.
984889	988190	I'm actually using the pro plan 20x.
988190	997443	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.
997443	1006492	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.
1006492	1014145	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?
1014145	1016312	But I never really get to the limit.
1016312	1019470	You need to decide which plan is right for you.
1019480	1023280	Now, from what I understand, plus plan is very, very popular.
1023280	1035790	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
1035800	1036331	this plan.
1036331	1039521	And so, the next logical step is to try out the plus plan.
1039521	1051390	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.
1051400	1059201	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?
1059201	1060779	Lots and lots of code base.
1060779	1063717	They run out of their plan very, very quickly.
1063717	1068025	But if you're working on a smaller projects, you're not using the fast mode.
1068025	1077830	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.
1077840	1081619	So if you're on standard and you're using maybe medium often, right?
1081619	1089788	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.
1089788	1098848	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?
1098848	1100921	Such as the pro 5x or 20x.
1100921	1106642	Now you can also ask Codex to help you choose the right Codex plan for your specific use case.
1106642	1112990	For instance, you can use this prompt here, help me choose the right Codex plan for my use case, okay?
1113000	1117176	Use only current official OpenAI pricing and help center information.
1117176	1120065	And I'm going to go ahead and run this and see what it says.
1120065	1122395	All right, then this is what we got back.
1122395	1126639	As of this day, ChatGPT plan is that include Codex, okay?
1126639	1128310	So this is the practical read.
1128320	1131279	Free, try Codex on quick tasks.
1131279	1133387	Go lightweight coding tasks.
1133387	1136670	Plus a few focus coding sessions each week, okay?
1136680	1140283	And this is exactly what I just told you from that official page.
1140283	1144107	And so if you scroll down, you can see how Codex usage and credits work.
1144107	1145826	You can learn you can read this.
1145826	1148209	Best fit for your use case, okay?
1148209	1153971	For learning Codex and building small to medium apps, ChatGPT plus is the sensible default.
1153971	1160760	If your current plan is Plus, I would not upgrade until you actually hit Codex limits often enough that the friction matters.
1160760	1166299	Okay, when heavier or business plans make sense, what to verify live before deciding?
1166299	1173149	And so, a sensible thing to do would be to try Codex Plus and see if that's enough for your specific use case.
1173149	1178242	If you're not a heavy Codex user, if you just want to experiment, it should be more than enough.
1178242	1185470	And then you can decide whether you want to upgrade to the higher tier plans.
1185480	1193557	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.
1193557	1197786	These are features I use all the time across different projects.
1197786	1205079	Skills, plugins, automations, and MCP along with its tools and connectors.
1205079	1224270	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.
1224280	1231296	Once those pieces make sense, Codex feels less like a code editor and more like a project agent.
1231296	1236819	First, let's talk about one of my favorite features that I use pretty much all the time, skills.
1236819	1242950	Skills are reusable instructions for how Codex should do a workflow.
1242960	1245465	They're not external tools by themselves.
1245465	1256714	They're more like local playbooks that tell Codex the style, process, output format, and validation steps for a specific kind of work.
1256714	1266790	For example, this course uses skills for explainers, Notion editing, video timelines, and other repeatable production tasks.
1266800	1278550	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.
1278560	1279808	The rule is simple.
1279808	1284330	Anything that gets used over and over again becomes a skill.
1284330	1288986	That matters because a lot of real work is not just about getting an answer.
1288986	1299150	It's about getting an answer in the right format, following the right process, and producing something consistent with the rest of the project.
1299160	1305390	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.
1305400	1309190	So, I have here a conversation for an app that I was building.
1309200	1314923	And if I press the the forward slash, you can see that I have many options here, right?
1314923	1316550	I can do many, many things.
1316560	1320049	And as you can see for skills, I have lots and lots of skills.
1320049	1322997	I have tons and tons of skills over there.
1322997	1327578	And skills allow me to package a repeatable process.
1327578	1331075	You can think of it as a function that does something.
1331075	1334150	It gets some input and it produces an output.
1334160	1338343	And the goal is to produce consistent output as you've done before.
1338343	1343242	And so, as an example, let's say if I'm working in this convo here, right?
1343242	1345960	And I asked the model to do something for me.
1345960	1352078	So, here I have I want to build a very simple web app that arranges items as a Trello Kanban board style, okay?
1352078	1353707	And it comes up with this.
1353707	1356493	Now, right here can package that as a skill.
1356493	1358990	Now, what do I want to package as a skill?
1358990	1362876	Well, I want to package, for instance, maybe creating the architecture.
1362876	1372932	So, I can say something like package the architecture step as a skill, and then I just give it a name of the skill.
1372932	1374670	Sample arch stack.
1374680	1375133	Okay?
1375133	1386478	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.
1386478	1393487	So, I'm going to go ahead and jump into the plan mode in case the model wants to confirm something or clarify something.
1393487	1395780	And I'm going to go ahead and execute this.
1395780	1397343	And let's see what happens.
1397343	1402310	Now, it came back to me and it wants me to answer a question.
1402320	1412437	Should the sample arch stack package this as a general architecture planning skill or specifically as the Kanban Trello app architecture, right?
1412437	1415063	So, we want it to be a general app architecture.
1415063	1416869	So, I'm going to go ahead and save this.
1416869	1419301	And now it came back with a plan, okay?
1419301	1427131	Create the reusable Codex skill named sample arch stack under wherever it's storing those skills.
1427131	1431550	The skill will guide Codex through the architecture step for simple app ideas.
1431560	1434994	And it's going to package that step into a reusable process.
1434994	1435580	All right.
1435580	1438110	And now it tells me that created the skill app.
1438120	1444270	It contains skill.md and then It contains skill.md and then agents.for.openai.yaml.
1444280	1446480	Validation passed, etc. etc.
1446480	1461516	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.
1461516	1467152	So, it wants to know for the brand new project management app, what should the version one data model support?
1467152	1468806	We're just going to do local only.
1468806	1470676	And here it came back with a plan.
1470676	1474775	Brand new local only project management app architecture, right?
1474775	1476701	That's the purpose of the skill, okay?
1476701	1481090	We're going to expand this and it's coming up with this architecture, right?
1481090	1486710	App shape, data state model, component architecture, test plan, etc.
1486720	1486970	etc.
1486970	1490615	And we can say yes and it's going to go ahead and implement all that.
1490615	1502104	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.
1502104	1508510	But, by having the skill, we do not need to explain all of that over and over again.
1508520	1514280	So, as you're building more and more apps, you can simply reuse this skill from now on.
1514280	1523830	Now, before moving further, I also want to explain a few terms that can sound similar at first, plugins, automations, and MCP.
1523840	1528774	They all expand what Codex can do, but they are not the same thing.
1528774	1536710	Plugins are packaged capabilities or workflows that make Codex better at a specific kind of make Codex better at a specific kind of work.
1536720	1542818	For example, a Notion plugin can help Codex read and update Notion pages.
1542818	1547270	A Vercel plugin can help with deploys and project settings.
1547280	1558030	A Hyperframes plugin can help create explainers, and browser or document tools can help Codex inspect apps or work with files.
1558040	1560850	The simple way to think about plugins is this.
1560850	1567430	They give Codex a more specialized tool set for a specific job.
1567440	1578358	Codex still needs the right context and the right instruction, but the plugin gives it a cleaner way to operate inside that workflow.
1578358	1580252	Automations are different.
1580252	1582330	A plugin gives Codex a different.
1582330	1590190	A plugin gives Codex a capability, but an automation gives Codex a time-based job or follow-up behavior.
1590200	1602430	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.
1602440	1607228	This is useful because not every task needs to happen immediately.
1607228	1622990	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.
1623000	1631171	Automations turn Codex from a one-time assistant into something that can help manage longer-running work.
1631171	1633861	The important distinction is simple.
1633861	1641188	Plugins are about what Codex can do, and automations are about when Codex should do it.
1641188	1645922	All right, so here I am back in Codex, and I want to show you how plugins work, right?
1645922	1650752	So, if you click over here on plugins, you can see all the plugins that you have here, okay?
1650752	1657372	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?
1657372	1660861	So, you can click on the plugin, and you can learn more about it, right?
1660861	1666425	So, for instance, this spreadsheets allows you to create and edit spreadsheet files, right?
1666425	1672730	You can use this plugin to create a spreadsheet to analyze this company's financial, etc., etc., right?
1672730	1679961	Create, edit, inspect, render, verify, and export Excel SX, CSV, and TSV spreadsheets locally.
1679961	1685845	Use spreadsheets when the durable output or target is a spreadsheet workbook, etc., etc.
1685845	1688095	So, this includes the skill, right?
1688095	1700561	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?
1700561	1703764	It's kind of this higher-level structure, okay?
1703764	1707415	Whereas a skill is a very, very specific thing.
1707415	1709854	It's a specific piece of instruction.
1709854	1711644	Essentially, a specific prompt.
1711644	1715440	A plugin is this umbrella that contains a skill, right?
1715440	1716603	So, you can have that.
1716603	1719213	One plugin that I use all the time is Notion.
1719213	1725162	So, if we click over here, you can see that this actually includes a lot more interesting things, right?
1725162	1731072	Notion workflows for specs, research, meetings, and knowledge capture, right?
1731072	1734510	So, you can specify this, and then you can give it a prompt.
1734520	1740047	And if you scroll down, you can see that it includes the Notion app, the knowledge capture.
1740047	1741150	These are skills.
1741160	1742514	This is an app.
1742514	1746630	Okay, so this allows it to connect to an external system, right?
1746640	1751917	So, if I click over here, I can manage this in ChatGPT as well, because it's an external app.
1751917	1754774	And this right here, these are skills, right?
1754774	1758097	I can open that, and that's going to open the skill right here, right?
1758097	1761514	This is This is how the skill is actually stored.
1761514	1766510	And I can also turn it off or turn it on, depending on if I want that skill enabled or not.
1766520	1769734	Now, this is a plugin that I use all the time, right?
1769734	1776935	I use Notion for my planning, for, you know, writing stuff, scheduling stuff like that.
1776935	1780552	It's the brain of my workflow, essentially.
1780552	1791287	And then I installed this pre-built Notion plugin, and the first time I ran it, it authenticated against my Notion workspace, right?
1791287	1793112	Connected to my Notion account.
1793112	1810910	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
1810920	1811243	Codex.
1811243	1816058	That's kind of the purpose of a skill, to make something an extension of Codex.
1816058	1816557	Right?
1816557	1819691	And that's the main idea with all of this, right?
1819691	1823707	Another really cool one is, like, for instance, Google Calendar is another one, right?
1823707	1829787	Instead of connecting to Notion, or in addition to connecting to Notion, you can also connect to Google Calendar.
1829787	1834833	I personally do not use Google Calendar, I use Notion, so I do not have this skill set up.
1834833	1841430	Another really useful skill that you're definitely going to be using if you're building apps is Vercel, right?
1841440	1847700	Vercel, or maybe something like Netlify for deploying your apps, right?
1847700	1850692	I use Vercel when demoing apps.
1850692	1866310	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
1866320	1868201	understand how to deploy and all of that.
1868201	1877748	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.
1877748	1882099	Or Vercel, which Vercel tools fit fit this app app best.
1882099	1884886	Or Vercel, deploy this app, right?
1884886	1890153	And if you scroll down, you can see that this has this app and then it has all of these skills.
1890153	1891743	All of these different skills.
1891743	1892342	Look at this.
1892342	1894399	It has a ton a ton of skills.
1894399	1897091	Vercel CLI, Vercel agent, all of these.
1897091	1901786	And obviously, these skills are not just for deploying, right?
1901786	1903515	Because we also have payments.
1903515	1905399	We have best practices.
1905399	1907995	We have all of these other ones.
1907995	1915230	So, these skills essentially map to different parts of Vercel, to different features of Vercel.
1915240	1921537	We're not just talking about, you know, deploying your app, because this could be just a skill, deployment, right?
1921537	1923854	This could be one skill that I may need.
1923854	1926550	I I may not need all of these other skills.
1926560	1927332	But why not?
1927332	1934621	You know, Codex will figure out which skill it needs to consult, you know, according to the prompt that I give it.
1934621	1939199	So, it doesn't you know, it's not a big deal to have all of these enabled if I'm using Vercel.
1939199	1945072	And like I said, this allows me to basically bring Vercel into my Codex workflow.
1945072	1947719	That's the beauty of these plugins, okay?
1947719	1950048	And that's the same idea with all of these plugins.
1950048	1955654	You're essentially bringing an external system and letting Codex manage it for you.
1955654	1958775	Now, automations work very, very differently.
1958775	1967784	So, if you click on automations here, you can see that automations, they allow you to automate work by setting up scheduled chats, okay?
1967784	1969259	And you can learn more here.
1969259	1974174	Now, if you click on any of these automations, you can see exactly how they're going to be working.
1974174	1982963	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?
1982963	1985147	And what exactly is it trying to do?
1985147	1991392	Well, it's essentially trying to create a essentially trying to create a conversation that will be repeatable, okay?
1991392	1992903	So, it creates this automation.
1992903	1995370	This is the name of the automation, right?
1995370	1996463	This is the prompt.
1996463	1998294	This right here is the prompt.
1998294	2004614	And the prompt is summarize yesterday's Git activity for standup, grounding rules, etc., etc.
2004614	2006358	We can select a work tree.
2006358	2008597	We can select a project here.
2008597	2015109	And then we can select the time where it's going to run over and over again, right?
2015109	2019907	So, with this kind of automation, you may want to run it on weekdays at 9:00 a.m.
2019907	2025508	But, you can also select it, make it hourly, daily, weekly, etc., etc.
2025508	2028642	And you can also change the time, obviously.
2028642	2033780	Now, here you can change the model, and here you can change the reasoning level.
2033780	2037264	Now, with this kind of automation, you don't really need a high reasoning.
2037264	2039177	Medium is going to be just fine.
2039177	2048149	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.
2048159	2049214	running this prompt.
2049214	2051627	And And remember, this is a special prompt.
2051627	2054666	Here, you're asking it to consult Git activity.
2054666	2066742	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.
2066742	2070225	And that's going to run every weekday at 9:00 a.m., right?
2070225	2081864	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.
2081864	2084762	If you scroll down, you can see some other automations here.
2084762	2087923	You have incidents, you have code quality, right?
2087923	2091813	Maybe you want to run a code quality check every 24 hours.
2091813	2095884	Well, you can click here daily at 9:00 a.m., right?
2095884	2104273	Scan recent commits since the last run or last 24 hours for likely bugs and propose minimal fixes.
2104273	2109071	Okay, that's another very, very useful automation, right?
2109071	2110498	Repo maintenance.
2110498	2114030	You have here growth and exploration, right?
2114040	2119780	Click here from recent PRs and reviews, suggest next skills to deepen.
2119780	2121331	This is great, right?
2121331	2124988	So, automations, they could be used for pretty much anything, right?
2124988	2128225	And they are, you know, it doesn't really matter what kind of niche you're in.
2128225	2133201	You don't need to be in software development or project management or anything like that.
2133201	2134747	You can be a writer, right?
2134747	2135753	You want a status.
2135753	2138026	You're writing maybe 1,000 words every day.
2138026	2151120	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.
2151120	2155609	And that can run every morning at 9:00 or 10:00 a.m., okay?
2155609	2163993	And so, automations are very, very useful if you need some kind of a repeatable structure in your workflows.
2163993	2167533	And I want to talk a little bit about MCP.
2167533	2172675	So, MCP or model context protocol is very, very important, okay?
2172675	2178435	So, if you press command comma or you go into settings over here, you're going to be on this screen.
2178435	2188035	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.
2188035	2191274	Now, an MCP server is basically a server.
2191274	2196025	It's a remote system that your Codex instance can connect to.
2196025	2200673	So, as you can see, I have a bunch of MCP servers here that do all kinds of interesting things.
2200673	2205014	For instance, I have here a Stitch MCP server configured.
2205014	2208022	I have here a Superbase MCP server.
2208022	2214177	I also have, you know, Flow Upload Designer, Flow Base, a bunch of apps that support MCP.
2214177	2219572	And when you connect to them, Codex is acting like an MCP client.
2219572	2223056	So, you have that same client-server paradigm.
2223056	2229103	Now, why would you want to use an MCP server to connect to something like Superbase or something else?
2229103	2231705	Well, the reason is very simple.
2231705	2236935	You want Codex to do all the administration, all the work for you, right?
2236935	2247384	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.
2247384	2248846	You can configure all of that.
2248846	2251436	That takes time, but it's, you know, it's very, very doable.
2251436	2258633	Or, you can simply configure a Superbase MCP server in your Codex instance.
2258633	2269879	And that will allow Codex to use that MCP server to essentially manage this remote server, this tool, this app for you.
2269879	2285470	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
2285480	2301390	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
2301400	2307968	already have, such as the code or things it has been working on, and figure out a unified solution.
2307968	2310812	And this is extremely helpful to us, okay?
2310812	2313882	And so, there's a couple of ways that you can add a server.
2313882	2317140	You can click here, and you can fill all of this manually.
2317140	2323993	Or, you can simply tell Codex, "Set up and activate a Supabase MCP server." It's going to figure out how to do that.
2323993	2325047	It's going to search for it.
2325047	2328566	It's going to figure out the specs, and it's going to set it up for you.
2328566	2330632	And the same thing for all of these other ones.
2330632	2334624	Now, after setting up the MCP server, you can simply tell Codex to use it.
2334624	2355990	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.
2356000	2363730	Now that we have laid the foundation, and before we start building the real app, let's talk about the ideal Codex workflow.
2363730	2366143	What is the best way to approach it?
2366143	2372868	Before we begin building our app, you want to establish the workflow that you're going to use again and again.
2372868	2374896	The loop is simple.
2374896	2379081	Inspect, plan, edit, verify, and report.
2379081	2389033	That sounds basic, but it is the difference between using Codex as a random code generator and using Codex as a controlled build partner.
2389033	2400470	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.
2400480	2406390	That can work for small tasks, but it breaks down quickly on real projects.
2406400	2419997	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.
2419997	2422830	A good Codex prompt is not just a request.
2422830	2424820	It is a small project brief.
2424820	2434663	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.
2434663	2436990	The basic structure is simple.
2437000	2448087	Explain the goal, give the relevant context, define what should change, define what should not change, and tell Codex how to verify the work.
2448087	2456051	If the task is risky or unclear, ask Codex to inspect first and make a plan before editing.
2456051	2473030	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
2473040	2477867	how you will verify." That gives Codex a much cleaner job.
2477867	2490750	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.
2490760	2497779	I usually describe the outcome I want, the constraints I care about, and the checks that need to pass.
2497779	2503187	Then Codex can use the actual project context to choose the cleanest path.
2503187	2510151	As part of this workflow, I want to introduce you to one of the most important Codex features, plan mode.
2510151	2516630	Plan mode is a superpower that I use for 80 to 90% of my prompts.
2516640	2520190	There are two main benefits to using the plan mode.
2520200	2527277	First, it's a form of brainstorming where the model cannot change or alter your files.
2527277	2534285	Second, it's a way for the model to clarify your requests by asking follow-up questions.
2534285	2538122	This is especially useful when the request is under specified.
2538122	2544342	If I say, "Build the booking flow." there are a lot of hidden decisions inside that request.
2544342	2546809	What fields does the form need?
2546809	2549734	What status should the booking start with?
2549734	2552457	Where should the booking appear for the helper?
2552457	2555519	What should happen after submission?
2555519	2562384	Plan mode gives Codex a chance to surface those questions before it edits the app.
2562384	2565451	I also use plan mode as a quality filter.
2565451	2573656	If the plan is vague, too large, or misses something important, I know the implementation will probably be messy.
2573656	2582036	If the plan is specific, scoped, and easy to verify, then the actual coding step becomes much safer.
2582036	2595224	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.
2595224	2601561	Now, if you're working with an existing repo, the first step should always be to inspect.
2601561	2610150	Codex should understand the files, the app structure, the current state, and the goal before changing anything.
2610160	2614996	Then it should plan the work in a way that is small enough to review.
2614996	2622081	Only then, once Codex is fully in sync with your goals, should it make the actual edits and write code.
2622081	2629992	Once the code is written, it should verify the code with the browser, terminal, using tests, or the build output.
2629992	2635515	And finally, it should report what changed and what still needs attention.
2635515	2638668	Verification is the part I want to emphasize.
2638668	2643310	A task is not finished just because Codex wrote code.
2643320	2646070	For UI work, I want to see the browser.
2646080	2652204	For back-end work, I want to see the function call, the dashboard row, or the test results.
2652204	2657990	For deployment work, I want the live URL and a real smoke test.
2658000	2665159	That habit keeps the workflow grounded in evidence instead of trusting that the code is probably fine.
2665159	2670186	Additionally, you always want to break big tasks into smaller one.
2670186	2686510	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,
2686520	2687870	and so on.
2687880	2693584	Each step has a clear target and a clear way to check whether it worked.
2693584	2698264	A good Codex task should usually fit into one reviewable outcome.
2698264	2702745	Create the first static marketplace homepage is reviewable.
2702745	2707182	Wire service listings from Convex is reviewable.
2707182	2712473	Add booking creation and verify the booking row appears is reviewable.
2712473	2719950	Build the whole app is not reviewable because there are too many decisions happening at once.
2719960	2723178	So, the workflow is not just a technical process.
2723178	2726374	It is also a way to stay in control.
2726374	2739688	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.
2739688	2746520	And so, here I am back in Codex, and you can enable plan mode by pressing shift tab, and here you have plan mode.
2746520	2749062	Or, you can click here and toggle this.
2749062	2753830	I typically just use shift tab cuz it's a lot easier and it's a lot faster.
2753840	2757300	And then, whenever I'm in plan mode, I can start brainstorming.
2757300	2774750	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
2774760	2777214	Codex knows exactly what it's doing.
2777214	2778465	We Codex knows exactly what it's doing.
2778465	2783031	We never the last thing that we want is for Codex to assume something.
2783031	2785305	We never want it to assume anything.
2785305	2788683	We always want to make sure that we are on the same page.
2788683	2793466	And so, let's say I have a command over here going, and I want to build an architecture.
2793466	2797350	I want to build some kind of a an intricate architecture.
2797360	2801641	And, you know, I I want to make sure that we built out an architecture.
2801641	2809603	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.
2809603	2822470	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.
2822480	2826109	Ensure it is fast and robust.
2826109	2826735	Okay?
2826735	2833054	I'm here in plan mode, and typically with this kind of prompt, it's not clear what I want.
2833054	2834657	I don't even know what I want.
2834657	2839567	I want Codex to figure it out, but I want Codex to come back to me and confirm with me.
2839567	2844292	And so, if we execute this prompt, hopefully it's going to ask me some follow-up questions.
2844292	2844921	Let's see.
2844921	2855006	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?
2855006	2860866	Do we want shared core native shells, and you can click here, and you can get a little detail.
2860866	2865976	You share TypeScript domain logic with separate Expo mobile, etc.
2865976	2871849	Do we want a one universal app, or do we want web first wrappers, right?
2871849	2880698	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.
2880698	2886341	And so, it came back to me, and it wants to clarify one universal app, this or that.
2886341	2887807	So, I'm going to say this one.
2887807	2889801	I'm going to I'm going to go with recommended.
2889801	2894517	And now, it wants to know what should the app support for data and reliability.
2894517	2899389	Offline first cloud sync, cloud only real-time, or local only.
2899389	2904141	And you can click and you can hover over the little I to get more details.
2904141	2908634	Users can can work offline and sync across devices.
2908634	2913657	Cloud only, simpler shared back and live updates, but weaker offline behavior.
2913657	2916023	Now, here you can also tell Codex something else.
2916023	2918910	You can say, "Well, I want this, this, this, this."
2918920	2919380	Right?
2919380	2924716	Or, you can press escape, and you can ask Codex to explain the question.
2924716	2930270	I can say something like this, "Explain the last question in simple terms."
2930280	2930573	Okay?
2930573	2932742	I don't need to answer it right away.
2932742	2935858	I can get Codex to kind of walk me through it, right?
2935858	2936995	Explain the last question.
2936995	2938108	Let's see what it says.
2938108	2940430	I was asking two choices.
2940440	2942050	How should data work?
2942050	2947062	My recommendation, shared code and native shells plus offline first cloud sync.
2947062	2949229	If you want this to become a serious app.
2949229	2950690	So, it tells you these things.
2950690	2954937	And so, you don't need to pick a pick a choice or tell it something else.
2954937	2959950	You can close that, and you can ask Codex to clarify.
2959960	2963874	And now, what we can do is ask me those questions again.
2963874	2966604	You can do that, or you can simply answer it here.
2966604	2967248	It doesn't matter.
2967248	2969918	So, if you do that, it's going to come back with that question here again.
2969918	2971171	And here are the questions.
2971171	2977225	I'm going to say this, and now I want to say this because I I I understood what it was asking me.
2977225	2977738	Got it.
2977738	2985870	Your choices are that means the architecture should prioritize a shared TypeScript app a brand used by this, this, this, this.
2985880	2986614	And that's good.
2986614	2989906	And now, I can exit the plan mode, and I can say, "Go ahead and do it.
2989906	2993830	Go and implement this." Something like this or something more specific.
2993840	3005310	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.
3005320	3008910	Now, I want to talk to you about some advanced Codex workflow techniques.
3008920	3016149	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.
3016149	3021550	One thing I do all the time is asking Codex to create a handoff before I start a new thread.
3021560	3031208	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.
3031208	3033694	A good handoff is not a vague summary.
3033694	3042976	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.
3042976	3050135	That way, the next Codex thread can pick up the work without rereading the entire conversation or repeating mistakes.
3050135	3053630	And there are two main reasons that you may want to do that.
3053630	3059975	The first reason is that after a while, this conversation here, this it starts to degrade.
3059975	3066096	As you keep typing new prompts, and as the model answers, the convo starts to degrade.
3066096	3072178	Now, Codex tells you that it automatically compacts its context, and that is true.
3072178	3076230	You do not need to start a new convo every time.
3076230	3078726	It it does automatically compact it.
3078726	3089190	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.
3089200	3103270	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
3103280	3104216	starting point.
3104216	3115073	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.
3115073	3123882	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.
3123882	3125989	It doesn't give you the right algorithm.
3125989	3127861	It doesn't give you the right solution.
3127861	3132907	There's a high chance that each additional prompt is not going to get you closer to a solution.
3132907	3145870	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
3145880	3152226	and where you are right now and telling the model as part of that handoff prompt to work on a different solution.
3152226	3160270	And because AI is is can be fairly random in some ways, creating a new conversation usually give you a different solution.
3160280	3161925	That solution might actually work.
3161925	3169164	Now there are various ways to create this handoff prompt that's going to give you a handoff for a new conversation.
3169164	3173394	One of the simplest ways would be by typing something like this.
3173394	3179870	Okay, this is a very very simple prompt that still delivers a fairly high quality handoff.
3179880	3186412	Okay, so you can type create a detailed handoff prompt that I can use for a new Codex convo.
3186412	3186800	Okay.
3186800	3191674	So let's go ahead and send this and see what what answer we get.
3191674	3191964	Right.
3191964	3193585	And this is the response we got.
3193585	3198030	I want to design a fast robust cross platform project management app.
3198040	3202120	So it's essentially summarizing everything that has happened in the convo, right?
3202120	3203412	This is the context.
3203412	3204812	This is the product direction.
3204812	3206728	This is the architecture preference.
3206728	3211708	Please produce a detailed architecture plan covering all this important, right?
3211708	3212769	Also some constraints.
3212769	3218687	And so what you can do is you can copy that and then you can go ahead and create a brand new convo.
3218687	3221901	For instance, you can click here and you can simply paste it.
3221901	3224217	Okay, well you you don't want to delete that.
3224217	3225961	You want to delete like the top.
3225961	3227459	You want to delete that.
3227459	3235104	And when you paste it, that's going to create a conversation and the model can simply continue where the other conversation.
3235104	3236626	That is one way to do it.
3236626	3241911	Another way to do it is by giving it a more detailed handoff prompt.
3241911	3246390	So, let's go back here and let's go ahead and give it a slightly different prompt.
3246400	3249593	Create a clean handoff for a new Codex thread.
3249593	3250830	Include all of this.
3250830	3252477	Do not make any changes.
3252477	3258522	So, this prompt is slightly more detailed and you can bet that it's going to give you a higher quality handoff.
3258522	3266223	Okay, so let's go ahead and run this and then we can compare the two handoffs and see which one is more detailed.
3266223	3268782	Now, take a look at this handoff right here.
3268782	3274234	Look at how much more detailed this handoff versus this handoff right here.
3274234	3279126	Now, this handoff would definitely work, but this handoff would work even better.
3279126	3282041	Going to result in a higher quality conversation.
3282041	3296990	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.
3297000	3301605	The next practical habit is using Git as a checkpoint system.
3301605	3306550	Before I let Codex do meaningful work, I want to know whether the current state is clean.
3306560	3311950	After each milestone, I want a diff that is small enough to review and explain.
3311960	3317746	That is what keeps an agentic workflow from turning into one giant mystery edit.
3317746	3322326	The useful trick is to make Codex summarize the diff in plain English.
3322326	3333939	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.
3333939	3342990	So, when you are working in Codex, you do not want to be just creating edits without recording what the edit is all about.
3343000	3348782	And in software development, you want to be using a source control system, such as Git.
3348782	3356190	We have here a convo where we were building an app, and in this particular instance, we did not use Git.
3356200	3361752	And so, I do not know, I have no way to check which changes were made where.
3361752	3364317	I have no way to revert the changes.
3364317	3368115	I have no way to see what the actual change represents.
3368115	3374232	And if working in, you know, bigger teams, I do not know who was the person responsible for the change.
3374232	3376980	Now, in this convo, we have another problem, okay?
3376980	3379368	The current working directory is missing.
3379368	3392477	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.
3392477	3393799	So, I'm going to go over here.
3393799	3395506	I'm just going to do start from scratch.
3395506	3399810	I'm going to paste this handoff prompt to start a brand new convo.
3399810	3405473	And I'm going to preface it by telling it to create a Git repository.
3405473	3411934	Create a Git repo if it doesn't exist, and do an initial commit with the code.
3411934	3413775	So, I'm going to run that.
3413775	3420070	And the idea is we are going to initialize Git if needed, and then commit the current code as is.
3420080	3420552	All right.
3420552	3426750	So, what it did was it initialized a Git repo in this directory, and made an initial commit.
3426760	3428990	Initial architecture plan here, okay?
3429000	3430784	The workspace was empty when I inspected.
3430784	3431897	There was nothing there.
3431897	3436160	We just created a brand new project, and it essentially created an architecture.
3436160	3443430	And so, at this point, we have here a Git repo, which means that each additional change will be automatically tracked.
3443440	3452832	So, for instance, I can say something like, "Make the smallest possible change, a route that displays 'Hello, world.'" Okay?
3452832	3454258	Let's go ahead and run that.
3454258	3456343	So, it now created this index.html.
3456343	3459203	We're going to open it, and it says hello world.
3459203	3464852	And so, now what we can do is we can say check the Git status.
3464852	3469270	And obviously, this file is not going to be in our Git, right?
3469270	3472310	You see this is not tracked, an untracked file.
3472320	3477349	So, what we want is we want to commit index.html as initial commit.
3477349	3482402	Because in Git, you can have files that are tracked, and also files that are not tracked.
3482402	3485690	The files that are not tracked are the files you don't really care about, right?
3485690	3488139	You don't You don't really need to store them in Git.
3488139	3495321	These could be like media files, or generated files, code generated files that that can always be regenerated.
3495321	3499218	But for your actual code, you always want to be tracking them, right?
3499218	3505437	So, we we have this commit, and now this files is going to be tracked, and it's going to be committed as well.
3505437	3505726	Okay?
3505726	3508899	So, now it says committed as initial commit, right?
3508899	3512108	We have this It's now on main, which is the a type of branch.
3512108	3516881	And so, now if we go into changes, you can see that we can select a branch here.
3516881	3519528	And as you can see here, it says no file changes yet.
3519528	3524301	And that is because we have not made any changes since tracking that file.
3524301	3530013	So, what I'm going to do now is that make index.html output hello James.
3530013	3532950	That has updated, and now it says hello James.
3532960	3534944	And now what we can do is we can commit it.
3534944	3536527	Commit index.html.
3536527	3543089	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?
3543089	3546214	It's modified, and it's tracked, but it hasn't been committed.
3546214	3546481	Okay?
3546481	3549103	It has been modified and uncommitted, right?
3549103	3551621	You see this M, which means this has been modified.
3551621	3555270	So, we're going to do commit index.html.
3555280	3558753	And it will also generate a default message.
3558753	3560232	Here it has committed it.
3560232	3566558	We can click here, and we can click select review, and you can select the the of change you want to see.
3566558	3570580	You can see on stage, stage, branch, or last turn.
3570580	3574949	And when you click on last turn, you can see what was changed, okay?
3574949	3577732	Because we are we are using source control.
3577732	3579404	We can see the stuff that was changed.
3579404	3582434	As you can see, this is the one line that was changed.
3582434	3586143	Red means it was deleted, and green means it was inserted.
3586143	3588792	So, this was deleted, and this was inserted.
3588792	3592710	We basically changed the message that it says from Hello World to Hello James.
3592720	3595965	And so, Git is very very important.
3595965	3598923	If you're working on any kind of project, right?
3598923	3610350	Anything beyond something super simple, you want to create a repo, and you want to implement source control into your workflow.
3610360	3616390	One advanced trick that becomes more useful as projects get bigger is working with Git work trees.
3616390	3622599	A work tree is a separate working copy of the same repo connected to a different branch.
3622599	3631870	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.
3631880	3634073	This matters a lot with the genetic coding.
3634073	3645270	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.
3645280	3650034	Now, what's nice about work trees is that they give you parallelism.
3650034	3664489	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.
3664489	3672107	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.
3672107	3676864	And when you're done, you merge the changes back onto your main tree.
3676864	3679790	Now, that doesn't mean you can only create one work tree.
3679800	3694310	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
3694320	3707390	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
3707400	3709350	conflict so that there's no corruption.
3709360	3712367	Now, this is a feature I use all the time in big projects.
3712367	3715029	Now, let's say I'm working on this app over here.
3715029	3724691	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.
3724691	3727052	So, let's continue what we were doing.
3727052	3731674	So, let's say I want to change this index.html, and I wanted to say something else.
3731674	3741397	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.
3741397	3755276	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.
3755276	3760968	It's going to branch out, do the work, and then come back and merge the changes back in.
3760968	3764094	And so, as you can see here, there's more stuff happening.
3764094	3772724	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.
3772724	3786710	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,
3786720	3788038	and deleted the worktree.
3788038	3790754	And so, that was a very, very small change.
3790754	3798114	Now, another thing that you can do is you can click here, and you can fork this whole convo in a separate worktree, right?
3798114	3802962	So, if I click over here, that will fork it into a separate work tree.
3802962	3807097	And here you can see we're working in a separate work tree here, okay?
3807097	3819078	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.
3819078	3824494	So, for instance, I can say something like to say, "Hello, USA." I can simply do that.
3824494	3829204	I don't need to tell it to work in a separate work tree because we are isolated here, okay?
3829204	3831470	So, here's the file, we can open it.
3831470	3832590	Hello, USA here.
3832600	3838412	And so, at this point, we have merged the work tree change into main and cleaned up the temporary work tree, right?
3838412	3842787	Index now displays Hello, USA, and we no longer have this temporary work tree.
3842787	3847243	We've done everything that we needed to do separate from the main branch and then we merge.
3847243	3855332	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.
3855332	3862769	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.
3862769	3866150	And so, this is really nice for feature isolation.
3866160	3876510	Create a new work tree, work there, merge back into main, and then simply click here to archive this conversation.
3876520	3880744	Another advanced trick is using sub-agents for parallel work.
3880744	3885499	The idea is not to throw a whole project at a bunch of agents and hope it works.
3885499	3887950	The useful version is much more controlled.
3887960	3896458	An agent explores the code base, another works on a clearly bounded part of the UI, another checks tests, or reviews the result.
3896458	3897713	The key is ownership.
3897713	3904281	If you use sub-agents, you want each one to have a specific job, clear file area, and a clear output.
3904281	3908999	That keeps the work parallel without turning it into a merge mess.
3908999	3917868	Sub-agents are best when the tasks are independent enough to run side by side, but still simple enough to integrate at the end.
3917868	3923399	Now, sub-agents is another really cool feature that will help speed up your workflows.
3923399	3932288	And this is something that I use all the time, especially in big repos, in big codebases, to do multiple tasks in parallel.
3932288	3935923	All right, so here I have a very, very simple Kanban app.
3935923	3938231	If I click over here, I have this.
3938231	3942018	I can drag and drop. create new tasks, etc., etc.
3942018	3956350	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
3956360	3956779	possible.
3956779	3959024	And so, I'm going to paste this prompt here.
3959024	3962281	Plan how to split this feature across sub-agents, right?
3962281	3963469	Do not edit files yet.
3963469	3964022	Recommend.
3964022	3966263	We're going to jump into plan mode.
3966263	3968553	Preface this with the feature.
3968553	3973315	Add to party apps, such as make.com, Zapier, etc.
3973315	3975420	And so, I'm going to I'm going to leave it at this.
3975420	3977124	And I'm going to go ahead and run this.
3977124	3978893	And so, let's go ahead and run this.
3978893	3980414	And here we have the plan.
3980414	3985390	The safest split is for the main thread to own architecture, shared data contracts.
3985400	3994286	Sub-agents can work on isolated feature areas inside index.html, but they must not all edit the same broad sections at once.
3994286	3997083	Okay, so we have main thread responsibilities.
3997083	3999568	And then we have sub-agent delegation.
3999568	4004304	Integration settings, integration data model, web hook event dispatcher.
4004304	4013342	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.
4013342	4014721	Let's go ahead and run this.
4014721	4023214	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.
4023214	4025200	And each sub-agent gets a prompt.
4025200	4028270	It's basically like me creating a new conversation.
4028280	4035663	Your sub agent one integration, your sub agent two integration data model, your sub agent three, and they're working independently.
4035663	4038555	And here it tells you all four sub agents are running.
4038555	4043770	While they work, I'll inspect the current partial edit, and you can see these background agents here.
4043770	4044074	Okay?
4044074	4045797	So, they're working in parallel.
4045797	4047507	They're working on their own thing.
4047507	4050950	They own different pieces of the app, and they're kind of working.
4050960	4054554	And when they're done, they come back to this main agent, right?
4054554	4057365	This combo here, and tell it what happened, right?
4057365	4058874	They come back with the result.
4058874	4062641	And so, now it says the persistent sub agent returned a cleaner data shape.
4062641	4066529	And here you can actually click on any one of these and see what's happening.
4066529	4071161	You can click here, you can come back, you can click on this one, and see what it's doing.
4071161	4072496	So, this one is finished.
4072496	4073496	Some are finished.
4073496	4074631	How about this one?
4074631	4075995	This one is also finished.
4075995	4077338	And so, that's how it works.
4077338	4081093	And when they finish, they come back, and then it decides what to do later.
4081093	4084333	Maybe it's going to respond, and maybe it's going to spawn something else.
4084333	4085269	Maybe it's done.
4085269	4087008	They did what they needed to do.
4087008	4091569	They finished their isolated task, and their services are no longer needed.
4091569	4094949	And again, sub agent is something that I use all the time.
4094949	4106135	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.
4106135	4111309	And that's a huge productivity boost.
4111319	4120621	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.
4120621	4127057	This is where you can write down the rules you want Codex to follow every time it works in a specific repo.
4127057	4136502	Which commands to run, which folders matter, which patterns to preserve, how to verify changes, and when to use work trees or sub agents.
4136502	4141822	This is useful because you do not want to repeat the same project rules in every prompt.
4141822	4157100	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.
4157100	4162278	It turns your preferences into reusable project context.
4162278	4168250	And here's a prompt that you can use, which is going to draft agents.md for this project.
4168250	4174837	Do not write the file yet include the project purpose, the main folders, work tree, sub-agents, stuff like that.
4174837	4176617	So, we're going to jump into plan mode.
4176617	4178947	We're going to go ahead and run that.
4178947	4184036	And here's the draft for this agents.md tailored to the current project, right?
4184036	4189075	Project purpose, main folders, verification steps after changes.
4189075	4193470	Serve the app locally, coding and design patterns to preserve.
4193470	4195832	When codex should use a work tree.
4195832	4198510	Use a separate work tree when these happen.
4198520	4200674	When codex should use sub-agents.
4200674	4206295	Use sub-agents when work can be split into clearly separate ownership areas such as these.
4206295	4209407	What codex should avoid changing without asking?
4209407	4210117	All of this.
4210117	4222865	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.
4222865	4224492	It will be automatic.
4224492	4228755	It's like saving you from typing those prompts every single time.
4228755	4234110	So, if you want to add a feature, well, you don't need to tell it, "Hey, create a new work tree."
4234120	4236366	Or make sure you spawn sub-agents.
4236366	4237823	It's going to be automatic.
4237823	4244140	And so, at this point, you want to review this proposal here, and you want to save this as agents.md.
4244140	4249958	So, I'm going to say, "Save it as agents." So, now it's saved it as agents.md.
4249958	4254230	You You can click here, and you can see the whole file right here.
4254240	4258561	And this file will be used only for this specific project.
4258561	4260137	They're based on a repo.
4260137	4266499	So now for my next prompt, if it's a simple change, it's not going to create a work tree probably.
4266499	4275150	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.
4275150	4277223	So let's go ahead and see if this works.
4277223	4288986	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.
4288986	4291298	Okay, I'm going to go ahead and run it directly.
4291298	4294130	So now the title is awesome Kanban app.
4294130	4312270	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
4312280	4314758	implement the changes in its own work tree.
4314758	4316472	So let's see if this works.
4316472	4323824	Add a robust API functionality for handling outgoing API calls and incoming webhooks.
4323824	4328235	Okay, I'm going to jump into plan mode to see if it has any questions for me.
4328235	4334404	See how it says agents.mdx explicitly says not to add a backend or proxy without asking.
4334404	4336250	Okay, so it did consult this.
4336250	4338052	So we're going to add a backend.
4338052	4346207	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.
4346207	4350783	Another question, should the new backend become the source of truth for Kanban tasks?
4350783	4352861	Yes, let's just go with the recommended.
4352861	4361406	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.
4361406	4365272	Okay, so I do not see it's going to be using sub-agents.
4365272	4365768	Update.
4365768	4373068	So before we run it, let's ask it, do you plan on using a work tree or sub-agents for this task.
4373068	4373837	There you go.
4373837	4384070	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.
4384080	4388173	I'd also use subagents, but only for bounded design review tasks.
4388173	4399225	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.
4399225	4401722	And so agents.md is super important.
4401722	4407383	It's going to save you a lot of time because it basically codifies repeatable tasks.
4407383	4414910	So you never have to re-prompt the same thing over and over again.
4414920	4419249	Now, before we build real apps, there is one security habit you want to establish early.
4419249	4423791	Codex can help inspect configuration, but we should be careful with secrets.
4423791	4432037	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.
4432037	4437504	These should not be casually pasted into a prompt or committed into the repo.
4437504	4442736	The other important thing is that local config and deployment config are not the same thing.
4442736	4449749	A local.env file helps the app run on my machine, but Vercel does not automatically copy that file into production.
4449749	4455458	For a deployed app, the required variables need to exist in the deployment environment, too.
4455458	4466203	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.
4466203	4471631	Now, let's say we're building on this app, and we are adding external services.
4471631	4478070	So one of those services might be something like OpenAI, or another service could be Open Router.
4478080	4491853	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.
4491853	4505910	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
4505920	4507760	how you are storing them.
4507760	4512133	And so in this app, let's say we want to use OpenAI here.
4512133	4512586	Here.
4512586	4517231	So I'm going to say API stack and use the following key.
4517231	4520270	And let's say we give it a sample API key.
4520280	4522575	Sample API key as a sample.
4522575	4524583	We're going to jump into plan mode.
4524583	4527052	We're going to select this API stack only.
4527052	4529036	We're going to be doing native fetch.
4529036	4529531	All right.
4529531	4533294	So it went ahead and created our first API stack here.
4533294	4537057	And right here it mentions this file where it stores this key.
4537057	4540902	And so if you want to use a real key, you never want to paste it in chat.
4540902	4544641	What you want to do is you want to open this file and modify it directly.
4544641	4546020	So that's what we're going to do.
4546020	4550011	We're going to open this in the editor here and I'm going to paste this key right here.
4550011	4552359	And this right here is my actual key.
4552359	4559530	And so now I have an OpenAI, have an API stack and I have a real key in this file here, okay?
4559530	4569801	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.
4569801	4576445	And so I have this prompt to do just that and it says here inspect this project for environment variables and deployment config.
4576445	4579746	Do not print secret values and then tell me all of these things.
4579746	4580875	So we're going to run this.
4580875	4589335	So now it's telling us that environment inspection required environment variables required only for post OpenAI front end variables, right?
4589335	4595386	We don't have any public because, you know, sometimes your app can have both private keys and public keys, right?
4595386	4602968	So if you're using something like Superbase, Superbase has an anon key or a secret key or they call it something else now.
4602968	4608668	And the idea is the public key can be made available, but it has very, very strict permissions.
4608668	4617832	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?
4617832	4622312	Because with that key, you can make a lot of calls and do a lot of things.
4622312	4624550	And so here it says we have a private key.
4624560	4627616	OpenAI PK is private and must stay server-side.
4627616	4629606	It is used here, needed locally.
4629606	4637983	Hosted service config or cell or another node capable host config as a private server environment variables, port, etc., etc.
4637983	4641122	Okay, dot env examples cuz currently untracked.
4641122	4645796	So, what we have safest next step before deploying, replace it with only this.
4645796	4651005	Only config the real key in the deployment provider's private environment variable settings.
4651005	4651452	Okay.
4651452	4660588	So, I want to store the key locally for testing, and I want to ensure that it will be deployed also later.
4660588	4665131	And so we want that key locally so that we can test, but we also want it to deploy it.
4665131	4671435	And that means we need to create a couple of files, one for local settings and one for deployment settings.
4671435	4677380	And it's telling us which is the wrong file for local secret because examples are usually committed.
4677380	4679843	So let's say we're doing a Vercel deploy.
4679843	4681149	We're going to switch that.
4681149	4684775	And there we have it, store the real key locally in an untracked.
4684775	4685120	Right?
4685120	4688393	We need to make sure that this is never committed to Git.
4688393	4689597	It needs to be untracked.
4689597	4692890	So we're going to expand this, submit this.
4692890	4694370	Do not use public.
4694370	4696190	These are not public keys.
4696200	4699771	Replace dot env example with create dot env.
4699771	4702911	Okay, so it's it's going to be creating this dot env.
4702911	4705560	The secret is now ignored in dot env.
4705560	4712006	And then I'm updating readme and agents to make the local and Vercel setup unambiguous.
4712006	4715351	And that way we have the local key stored for local testing.
4715351	4725459	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.
4725459	4727135	It needs access to that key as well.
4727135	4728190	It needs to be secret.
4728200	4731102	Okay, implemented the local Vercel key setup.
4731102	4743150	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
4743160	4752310	deploying the key correctly for production stuff, regardless what kind of host you're using.
4752320	4761345	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.
4761345	4764510	You're not going to be building your app from scratch, right?
4764520	4769197	You're going to be using existing libraries, existing frameworks, stuff like that.
4769197	4774576	And those are called dependencies and that is because your app depends on them to function.
4774576	4777738	Without those things, your app will not function.
4777738	4783164	And you need to ensure that you have a process for managing these dependencies.
4783164	4790148	And I have here a prompt that you can use that will help you inspect this project before adding any dependencies.
4790148	4791706	Do not install anything yet.
4791706	4792833	Tell me all of this.
4792833	4794911	And so let's go ahead and run this prompt.
4794911	4797030	Right, and this is what it came back with.
4797040	4799155	Dependency project inspection.
4799155	4801090	Framework and package manager.
4801090	4802410	Framework non-detected.
4802410	4807792	This appears to be a plain static JavaScript app served by a custom node server.
4807792	4812655	Now, of course, this will definitely not be the case when it comes to your real apps.
4812655	4819198	You're going to be using some kind of framework, something that will make your app behave like a real app.
4819198	4821597	Here we just have a very, very plain app.
4821597	4823910	Package manager non-detected.
4823920	4825105	Oh, none of this.
4825105	4829446	And of course, when you're going to be building your app, you're going to be having all this as well.
4829446	4830765	Available scripts.
4830765	4836230	No NPM scripts exist because there's no package manager, because there's no manager, because there's no package.json.
4836240	4840308	Current documented run command, we just have this very, very basic.
4840308	4843388	Definitely not the case when it comes to production apps.
4843388	4845637	OpenAI local env run command.
4845637	4848769	So, we have this relevant install dependency.
4848769	4851978	So, we do have some basic node built-ins.
4851978	4855382	All of these OpenAI calls native fetch, okay?
4855382	4856581	So, it's native.
4856581	4860766	It's not using the OpenAI SDK, which would have been a dependency.
4860766	4863708	Can the task be completed without adding a package?
4863708	4870870	Yes, for the current OpenAI API stack and local serving, the project already calls OpenAI via native fetch.
4870880	4874816	If a new package is recommended, no package is recommended right now.
4874816	4886551	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?
4886551	4890738	API behavior, OpenAI calls, front end, etc., etc.
4890738	4895230	And so, dependencies are important, and you want to limit your dependencies.
4895240	4899204	You don't want the system to just add dependencies blindly.
4899204	4904724	And so, this is going to be super useful as you're building your app so that you can streamline it.
4904724	4912103	Because as I was just building this simple app, Codex asked me whether I want to use OpenAI SDK or native fetch.
4912103	4915353	And you always want to err on the side of native stuff.
4915353	4919595	If you can avoid a dependency or an SDK, that would be the right move.
4919595	4921237	And that's exactly what I did here.
4921237	4922524	I just used native, right?
4922524	4926564	I could have used an SDK, but I decided I'm just going to keep it as simple as possible.
4926564	4928414	And that's really the goal here.
4928414	4941252	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.
4941252	4944959	So, definitely add this to your app building workflow.
4944959	4954910	And then ensure that Codex knows about it by making this a part of your agent's MD or a separate step.
4954920	4960881	Now that the Cortex foundation is clear, we are going to start with something intentionally small.
4960881	4963988	The first step is called Habit Card.
4963988	4973385	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.
4973385	4982950	This is a great starter project because the result is visual, easy to check, and small enough that every step stays clear.
4982960	4998423	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.
4998423	5004710	Habit Card gives us the core app building pieces without much product complexity.
5004720	5013453	A form, a list, a daily check-in state, simple feedback, and later local storage persistence.
5013453	5020169	It does not need authentication, payments, APIs, or a real database at first.
5020169	5028022	This first app is about getting comfortable with the full Cortex loop on something we can understand immediately.
5028022	5037982	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.
5037982	5043780	So, I'm going to click on use an existing folder, and I have here a folder prepared called demos.
5043780	5051710	I'm going to open this here, and now we have a new project that has been associated with a specific folder.
5051720	5056962	And here we can start a brand new And here we can start a brand new conversation for the app that we are building.
5056962	5063381	Now, anytime I start building a brand new app, I always want to create a visual architecture.
5063381	5072605	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.
5072605	5078400	And we can actually use Codex to create that visual architecture for us.
5078400	5092192	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.
5092192	5096811	So, I'm going to press forward slash, and I'm going to search for Imagen.
5096811	5101321	Okay, and then we can say something like use Imagen for the following.
5101321	5105936	And I'm going to go jump into plan mode, and I'm going to go ahead and and execute it.
5105936	5115285	Okay, and it came back with a habit card architecture diagram, and here it says create one raster infographic using this.
5115285	5116444	So, everything looks good.
5116444	5119470	There there's some diagram content, visual direction.
5119480	5121272	That's a wide composition.
5121272	5122030	Looks good.
5122040	5124270	We're going to say yes, implement this.
5124280	5126162	Okay, and that is our habit card.
5126162	5128314	That is our visual interface.
5128314	5132382	And right away, I can see what this app is all about, right?
5132382	5139086	We have add habit, we have habit list, we have today check-in, and we have a streak count.
5139086	5144350	Then we have an empty state, we have local storage later, and we have the Versel deploy.
5144360	5152045	And so, this is a very, very simplified visual architecture, but it is very, very important.
5152045	5161184	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.
5161184	5164756	I see that this is not going to be, you know, a very complex app.
5164756	5170190	It's going to be a fairly simple app, but we do have some interesting bits here, right?
5170200	5174954	This empty state, we have some local storage, we have a Versel deploy.
5174954	5179102	And so, it's a fairly simple app, but still a fairly workable app.
5179102	5182777	Now, the next thing that I like to do is create the entity architecture.
5182777	5188305	And this is where we're going to be mapping the small set of entities behind the app.
5188305	5201540	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.
5201540	5204278	And this right here is the entity diagram.
5204278	5207925	And I'm just going to say use ImageGen for below.
5207925	5210037	Going to go ahead and run that.
5210037	5211870	And I can run it directly.
5211880	5216687	I don't really need to run it in plan mode because it's just generating a diagram.
5216687	5225737	I'm not asking it a complex, ambiguous coding question or giving it a an ambiguous coding instruction.
5225737	5228258	And here is our entity architecture.
5228258	5238270	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.
5238280	5238608	Okay?
5238608	5246650	So, we have the habit, we have a habit check-in, we have a streak summary, and then local storage as the back end.
5246650	5250393	So, no back end, everything is stored locally with local storage.
5250393	5259005	And this is also very, very useful because unlike the visual diagram here, I want to see the actual schema.
5259005	5268894	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.
5268894	5271590	And as you can see, this is fairly simple.
5271600	5274430	Habit, habit check-in, streak summary.
5274440	5281398	We have these three main functions here, these three main features that were translated into entities.
5281398	5281733	Okay?
5281733	5288133	And then we have And for each entity, we have things like name, created at date, completed count.
5288133	5293430	Now, at this point, we have both the visual architecture as well as the entity architecture.
5293430	5301907	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?
5301907	5306383	I want to have an understanding of the the scope of the app.
5306383	5309138	And right now I can see exactly where we are.
5309138	5311547	I can see that this is a fairly simple app.
5311547	5313324	I can see the entities.
5313324	5315460	I I I see the app building.
5315460	5317014	I see the future of the app.
5317014	5318628	I see the app coming together.
5318628	5328790	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.
5328800	5335490	The important part is that Codex should recommend the simplest path before it edits any files.
5335490	5339271	And as you might have guessed, we are going to be doing this in plan mode.
5339271	5339787	All right?
5339787	5341988	And here's the prompt that we're going to be using.
5341988	5343435	Do not edit files yet.
5343435	5349123	Inspect the current project and recommend the simplest stack for Habit Card, right?
5349123	5363443	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.
5363443	5369110	We need it to clarify everything before we go deeper into the building the app.
5369120	5370992	Okay, I'm going to go ahead and execute this.
5370992	5373372	And let's see what it comes back with.
5373372	5378230	And in this case, it did not come back with any clarifying questions.
5378240	5378639	Okay?
5378639	5380552	So, it's writing a plan.
5380552	5385017	And the recommended front end stack is going to be React TypeScript, right?
5385017	5389396	It wants to use Tailwind CSS for fast simple styling.
5389396	5391481	This is the testing library.
5391481	5392739	No React Router.
5392739	5395317	It's a simple single screen app.
5395317	5397230	No global state library.
5397240	5397612	Okay?
5397612	5398949	Back end decision.
5398949	5401652	No back end is needed for the first version, right?
5401652	5403187	And that's what we told it.
5403187	5406663	We said bias toward a front end only implementation first.
5406663	5409635	And then it's also going to use browser verification.
5409635	5412423	Okay, open the app in the browser, verify all this.
5412423	5415176	Okay, so let's go ahead and and run this.
5415176	5423830	All right, so it worked for about 10 minutes and it has implemented the habit card as a front-end only React TypeScript app.
5423840	5425652	This is where it is and this is what it did, right?
5425652	5427207	It built the app shell and did, right?
5427207	5435795	It built the app shell and UI, habit logic, local storage, components for adding form for the add form, list card, and empty state.
5435795	5442957	Tests for app flow logic and storage, and verification passed nine tests, production build succeeded.
5442957	5447331	And it also gave us a dev server that is running the app.
5447331	5456159	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.
5456159	5469161	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.
5469161	5473753	Okay, so we have the images that were generated, we have the index.html for the app.
5473753	5476821	We have the background terminal that is running here.
5476821	5483003	And so I can click here and that's going to go ahead and and go to the server that's running our app.
5483003	5483927	So let's do that.
5483927	5485316	That's going to go ahead and open.
5485316	5489320	It's also going to open the browser right here in the right-hand pane.
5489320	5495352	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.
5495352	5498416	Another thing that you can do is you can open the browser directly.
5498416	5502282	This is the front page here and I can add a habit, habit one.
5502282	5504900	I can click here and we have a habit here.
5504900	5506299	I can add another we have a habit here.
5506299	5509039	I can add another habit, habit two or maybe gym.
5509039	5511682	And it's creating these these habits here.
5511682	5514038	So I can check it off and that is done.
5514038	5514835	Check it off.
5514835	5517082	And so it's a very very simple app.
5517082	5525420	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.
5525420	5528653	And this is the React app that was created for this here.
5528653	5533981	Once the UI works, we'll add a small persistence step with local storage.
5533981	5538025	Habits and today's check-ins can persist after refresh.
5538025	5543851	So, the app starts to feel real without introducing a backend yet.
5543851	5546038	And this is the prompt that we're going to be using.
5546038	5551120	Upgrade habit card so habits and today's check-ins persist with local storage.
5551120	5555030	I'm going to jump into the plan mode here just in case.
5555040	5556790	And I'm going to go ahead and run this.
5556800	5565305	Now, it's actually telling us that inspection shows that habit card already implements the requested front-end only local storage persistence.
5565305	5565726	Okay?
5565726	5568350	So, no file edits are needed for this upgrade.
5568360	5572129	So, we must have done this in one of the previous prompts.
5572129	5575750	But, if we hadn't done this, then we would run this prompt.
5575760	5577230	But, still, let's go ahead and run it.
5577240	5585270	And now it tells us that persistence works through this storage using these keys and a lot of other details here.
5585280	5585811	Okay?
5585811	5590587	So, we can reload this and now we have something called local storage.
5590587	5597734	And what this means is that this app does not have a backend, but this stuff is going to be stored on my browser.
5597734	5598168	Okay?
5598168	5602437	So, if I'm using this instance, it's going to be stored on this browser.
5602437	5606189	If I run it in a different browser, then it's not going to have the data.
5606189	5610483	So, whatever I do in that new browser is going to have fresh data.
5610483	5615894	And so, this is a way to create, you know, storage just for testing me.
5615894	5621036	I mean, you can use this in production as well for certain apps, for certain situations.
5621036	5628357	It does have its place, but it's very, very limiting compared to something like Supabase or something of that sort.
5628357	5633019	And so, we can delete all this, we can do all that, we can start.
5633019	5649630	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,
5649640	5650005	right?
5650005	5663345	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.
5663345	5664721	That is not happening.
5664721	5668369	Once the app works locally, it's time to deploy it.
5668369	5677811	Even though Habit Card is simple, this is the first moment where CodeX helps move something from local code to a real-life URL.
5677811	5681106	And so, CodeX can do the whole deployment process.
5681106	5692542	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.
5692542	5696905	And additionally, you want that first deployment to feel very concrete.
5696905	5700350	We're not just writing code and hoping it works.
5700360	5709530	We're taking a small app, shipping it, opening the deployed URL, and checking the result like we would with a real project.
5709530	5712815	And here is my Vercel deployment prompt.
5712815	5720132	Prepare Habit Card for deployment on Vercel, and verify it works as a small front-end only app.
5720132	5723696	So, at this point, we are just preparing it for deployment.
5723696	5734570	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.
5734570	5744590	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.
5744600	5746350	I'm going to go ahead and execute this.
5746360	5749983	All right, so it went ahead and created a Vercel deployment plan.
5749983	5755916	Okay, Habit Card is already a suitable for a front-end only for sale deployment, okay?
5755916	5760334	And this is what it's going to do, and here is the deployment implementation.
5760334	5770230	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.
5770240	5776755	And local storage persistence is expected to be local to each browser and deployment origin.
5776755	5780067	Data will not sync across devices or URLs, okay?
5780067	5782969	Let's go ahead and implement this plan.
5782969	5789180	And 3 minutes later, it tells us that deployed Habit Card to Vercel and verified it live, okay?
5789180	5791226	So, this is the live URL.
5791226	5798011	We can click here, and that's going to open our Habit Card app running on the web, right?
5798011	5799495	Accessible to everybody.
5799495	5802572	And this again uses local storage, okay?
5802572	5810208	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.
5810208	5825769	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.
5825769	5845350	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.
5845360	5853938	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.
5853938	5858903	It's a bit more complex with more features, but still fairly simple overall.
5858903	5868550	Snack Vote has a submit option form, a snack option list, vote buttons, a live leaderboard, and a winner card.
5868560	5875749	This app will serve as a bridge between a simple front end and the larger marketplace app we'll build right after this.
5875749	5886471	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.
5886471	5890409	Snack Vote only needs snack options and votes.
5890409	5897379	Someone can submit an option, other people can vote, and the leaderboard updates as the vote counts change.
5897379	5905168	That gives us enough structure to understand live back end data without making the product itself hard to follow.
5905168	5910628	As always, in this first step, we'll be mapping the Snack Vote interface visually.
5910628	5914350	The app should be simple enough to understand immediately.
5914360	5925446	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.
5925446	5931588	Now, here in Codex, we're going to come here, and we're going to create a new project from an existing folder.
5931588	5932950	We're going to click over here.
5932960	5934904	Here, we're going to create a new folder.
5934904	5938476	I'm going to type Snack Vote, and we're going to click open.
5938476	5942802	And now, we have a brand new project configured here in Codex.
5942802	5946089	And here's our prompt for the visual architecture.
5946089	5952249	We want to preface that we want to use this image, and we're going to jump into plan mode and execute this.
5952249	5953390	And that looks good.
5953400	5955150	We're going to go ahead and expand that.
5955160	5956656	Go ahead and implement that.
5956656	5959704	And here's our Snack Vote visual architecture.
5959704	5961679	Look at this beautiful diagram.
5961679	5964081	So, you can create or join a room.
5964081	5969150	In the current room, you're going to be seeing this, members and the time left.
5969150	5971494	You can You have here a snack list.
5971494	5974230	You have your your voting buttons.
5974240	5978782	You have a live leaderboard, and you have a closed winner state.
5978782	5986714	Okay, with some voting deadlines here, here as well, and then we also have our Vercel deploy.
5986714	5994110	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.
5994120	5997924	And we're also going to be adding more and more features as we go along.
5997924	6004070	Next, I want to go ahead and create an entity diagram, an entity architecture diagram.
6004080	6005334	So here's our prompt.
6005334	6009213	We're going to do this, and we're going to go ahead and execute that.
6009213	6011158	And here's our entity diagram.
6011158	6017073	Okay, so a room contains multiple snack options and has one voting session, right?
6017073	6021623	We have the voting room, many snack options, and many votes, right?
6021623	6031514	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?
6031514	6039030	So after the deadline, we have here a legend, and here we have a sample kind of workflow, a pipeline.
6039040	6041709	Build the UI first, connect it to Convex.
6041709	6052364	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.
6052364	6067550	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
6067560	6072885	can build out this app, and we want Codex to tell us the best options for this specific app.
6072885	6077723	Here's the prompt that we're going to be using, and I'm going to switch into plan mode here.
6077723	6085466	And it's telling us do not edit files yet, inspect the current project, and recommend the simplest stack for Snack Poll.
6085466	6087504	And here's the plan that it came back with.
6087504	6089396	Here we have the stack recommendation.
6089396	6092955	We're going to be using React, TypeScript, Tailwind.
6092955	6099317	And here it says backend later Convex with TypeScript server functions and generated client types.
6099317	6115830	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
6115840	6117088	in this tutorial.
6117088	6126250	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.
6126250	6134308	And here's the prompt, "Implement the first working Snack Vote UI without a database or persistence, okay?
6134308	6143030	Inspect the current project first, then build the smallest useful Snack Vote UI." And there's some verification steps as well.
6143040	6152002	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.
6152002	6153963	And we also have some verification.
6153963	6158724	So, I'm going to go ahead and run this in plan mode, in case it wants to ask me something.
6158724	6170131	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.
6170131	6174142	And so, it kind of knows what it needs to do to build out this app.
6174142	6180100	So, we're going to say, "Yes, implement this." because this is the step where we actually want the code written.
6180100	6187860	All right, so this has completed, and it says here, "Implemented the first working UI-only Snack Vote app here.
6187860	6189748	Created all of this.
6189748	6190954	What works?
6190954	6192995	Verification completed.
6192995	6195070	Still needs attention later."
6195080	6198617	Okay, all of these things, and we'll talk about that a little bit later.
6198617	6200792	And so, now we have a web preview.
6200792	6207300	So, we can click on open, and that's going to go ahead and open it right here in our built-in browser here.
6207300	6208993	This is our app right here.
6208993	6211508	And so, we have snack and lunch options.
6211508	6221790	We can create, we can submit an option, add sample snacks, click here, and we have these snack options here with some votes here.
6221800	6223179	Leaderboard, right?
6223179	6224630	So, this is winning.
6224640	6228471	Winner state, current winner leader, spicy ramen bowls.
6228471	6232717	And so, if I vote on falafel wraps, uh wraps, six.
6232717	6233246	Right?
6233246	6234526	So, now it's six.
6234526	6235918	I can keep voting.
6235918	6239754	And that's a problem right away, and it's in memory.
6239754	6243474	And one person can vote multiple times, which is an issue.
6243474	6247815	We're going to fix that a little bit later, but I can also add a snack.
6247815	6249335	Let's say sushi.
6249335	6250617	I don't know, sushi.
6250617	6254017	Add this, and we have sushi, and I can also vote on that.
6254017	6259630	So, it's a big big issue, but for the most part, the logic works, the UI works.
6259640	6265946	Now, once the snack vote UI exists, we're going to replace the mock snack data with real Convex data.
6265946	6273424	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.
6273424	6275807	It's an awesome back end, super fast.
6275807	6282670	And if you want to learn more information, I actually did a dedicated video on it that you can find right there.
6282680	6292392	And so, once we add Convex, our app will stop being a static interface and start behaving like a real database back product.
6292392	6294523	And the path is very very simple.
6294523	6307322	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.
6307322	6312660	And so, when we submit an option in the app, it should be written back to Convex.
6312660	6317870	When we look inside the Convex dashboard, that snack option should be there.
6317870	6330110	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.
6330120	6334470	And when you head over to convex.dev, you can learn more about this back end.
6334480	6336470	And this is a great, great back end.
6336480	6341464	It's very, very fast, and it works really great with agents, right?
6341464	6344386	So, the back end building blocks for your agents, okay?
6344386	6347438	So, I'm going to go ahead and log in to my free account.
6347438	6348766	I'm using the free plan.
6348766	6350233	I'm not paying for anything.
6350233	6354006	And this is also an open-source back end, so you can also self-host it if you want.
6354006	6355576	So, I'm going to go ahead and log in.
6355576	6357057	All right, so here I am logged in.
6357057	6359859	And as you can see, I have here two projects.
6359859	6366887	Now, our app is going to automatically create a brand new project for its data, for its functions, for everything.
6366887	6372030	And here back in Codex, we're going to paste a new prompt that looks something like this.
6372040	6379835	Upgrade Snack Votes to Snack Options, and Votes are stored in Convex instead of local in-memory state.
6379835	6386473	Now, if I press command, comma, and go to MCP Servers, you can see that I do not have the Convex MCP server.
6386473	6390296	And that is because we're not going to be connecting to Convex via MCP.
6390296	6399310	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.
6399320	6405634	And actually, before I run this prompt, we're going to check to make sure that we have a connection.
6405634	6414550	Can you first check that we have the Convex CLI installed, and if not, do install it.
6414560	6415905	I'm going to go ahead and run it.
6415905	6421630	Now, I already have Convex CLI installed, but you can just tell Codex to install it.
6421640	6422410	It's that easy.
6422410	6431707	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.
6431707	6436903	I'm installing Convex into the project now as a dev dependency, okay?
6436903	6439144	Convex is installed locally now, okay?
6439144	6440884	I'll verify the CLI results.
6440884	6446861	And so, you don't need to read lots and lots of documentation, figure out how to connect to it.
6446861	6449409	You just tell Codex that you want to connect to it.
6449409	6450431	It's that easy.
6450431	6454070	So, Convex CLI is installed locally in the project now.
6454080	6456590	Okay, so now we can paste the prompt.
6456600	6462531	Upgrade snack votes so snack options and votes are stored in Convex instead of local in-memory state.
6462531	6466323	So, I'm going to go ahead and do this and let's go into plan mode.
6466323	6469757	See if it wants to ask me something or clarify something.
6469757	6473095	And so, it's telling me one material set of choices to open.
6473095	6475304	There's no existing Convex folder.
6475304	6478859	So, this app is not linked to a Convex deployment yet.
6478859	6479676	And that is correct.
6479676	6481342	And that's what we want to do next.
6481342	6487902	And now it's asking me which Convex backend should snack vote use for this first backed version.
6487902	6489745	We want to create a new one, right?
6489745	6492459	So, we're going to go with the recommended option.
6492459	6500634	All right, and now we have a new plan to upgrade the existing app from in-memory snack options to live Convex data.
6500634	6501110	Okay?
6501120	6509574	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.
6509574	6516175	And once it's done, we should be able to go to Convex and see a brand new project here automatically created.
6516175	6517849	So, I'm going to hit submit here.
6517849	6525354	All right, so it says it has created a fresh cloud project and synced the backend function successfully.
6525354	6529916	And now you see this cursor, it's testing out the UI.
6529916	6533354	And so, right now it's not running, so it should start it out.
6533354	6538710	And here it says the existing browser tab was sitting on the browser error, so it has restarted it.
6538720	6543879	And if we jump into Convex, you can see that we have a new project created.
6543879	6548756	Now, I did authenticate this account with Codex, so it knows that this is my account.
6548756	6553144	And so, if we click over here, we should see some initial stuff happening, right?
6553144	6556430	There's some data, functions, and it's not done yet, right?
6556440	6557816	It's still working.
6557816	6561470	And while it's working, we can see what has been done.
6561480	6562848	And it's actually typing it.
6562848	6563609	Look at that.
6563609	6564919	Key press input.
6564919	6566310	It's creating it.
6566320	6567646	It's testing it right here.
6567646	6569408	You can actually see it happening.
6569408	6573788	This snack was submitted through the browser and appeared from Convex.
6573788	6575430	I'm voting on it.
6575440	6578650	There is this testing all the flows, which is pretty cool.
6578650	6590884	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.
6590884	6592802	So, we can test it out ourselves.
6592802	6594713	And so, here's the app.
6594713	6597036	And now it's Convex here's the app.
6597036	6597750	And now it's Convex backed.
6597760	6601692	And so, now if we head to Convex, we should see the data.
6601692	6605310	So, as you can see, snack options, this has a vote of one.
6605320	6607884	This is the snack tools, vote one.
6607884	6611634	And if we increase the vote, it should be two, and it's automatic.
6611634	6613011	It's absolutely two, and it's automatic.
6613011	6613630	It's absolutely automatic.
6613640	6614744	Three, it's three.
6614744	6616643	It does not need to do anything.
6616643	6621150	And we can create a new snack option, let's say sushi, submit.
6621160	6623860	And if we come over here, we see sushi, zero votes.
6623860	6625312	Now it's winning.
6625312	6630561	And so, this is essentially the same app, except it's Convex backed.
6630561	6632675	And we also have functions.
6632675	6637767	And with Convex, you need to create functions to access your data.
6637767	6641296	It's not like with other systems where it's automatic.
6641296	6645870	Here you need list, you need submit, you need a vote, you need functions.
6645880	6652127	And so, the snack options table or document has three functions.
6652127	6657910	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.
6657920	6661079	>> Okay, so this was a fairly successful migration.
6661079	6666250	We went to no back end to a Convex back end very, very quickly.
6666250	6672334	Now that snack vote has real Convex data, we can make it feel more like a shared group app.
6672334	6681597	Instead of one global snackboard, users can create or join a simple voting room like Friday lunch or team snacks.
6681597	6688835	Each room should own its own snack options, votes, leaderboard, and winner state.
6688835	6696266	This keeps the app more interesting while teaching a clean back-end concept, scoped data.
6696266	6701400	We still do not need accounts, permissions, invites, or admin tools.
6701400	6704230	And here's the prompt that we're going to be using.
6704240	6709274	Upgrade snack vote so voting happens inside simple rooms.
6709274	6712236	And I'm going to run this in a plan mode.
6712236	6715070	All right, so it came back with a plan for us.
6715070	6718350	This is the room-based snack vote upgrade.
6718360	6723510	Upgrade the current Convex back app from one global snackboard to simple rooms.
6723520	6724842	Can I expand that?
6724842	6726310	Yes, implement that.
6726320	6730710	Now, as it's running, I am seeing an error message here.
6730720	6734430	Did you forget to run NPX Convex dev?
6734440	6740378	Okay, so let's see if it's able to catch that and solve it before the next prompt.
6740378	6741096	It is done.
6741096	6744221	So, it has implemented room-based snack vote.
6744221	6749167	This is what it changed, files, things, verification limits.
6749167	6750599	Okay, very important.
6750599	6752757	Limits is actually very, very useful.
6752757	6757719	No auth, ownership, invites, or duplicate vote guard yet.
6757719	6760168	And we'll fix some of these a little later.
6760168	6761703	Room selection, room codes.
6761703	6763162	Okay, so how does this work?
6763162	6764667	Let's go ahead and refresh this.
6764667	6769869	All right, so we can create or join a room, and there are some rooms over here.
6769869	6774452	So, let's say we type Friday lunch, and so now we've switched the room.
6774452	6776830	Okay, current room Friday lunch.
6776840	6779228	And now we can do the same thing.
6779228	6781124	We're now in in the scope.
6781124	6783476	It's all about scoping now, right?
6783476	6788884	And so this is a specific room, and I can say, I don't know, submit.
6788884	6790867	There we have it in this room.
6790867	6795250	And now if I switch a room, let's say I switch to launch ideas.
6795250	6796822	So now it's brand new.
6796822	6798825	There's nothing nothing there.
6798825	6802008	And I can say something like I don't know, tacos.
6802008	6803587	And now we have tacos here.
6803587	6806517	And if we go into Codex, we should see that.
6806517	6810830	So we have voting rooms here, and we have different ideas here.
6810840	6815684	And now if we go into snack options, we can see that they belong to a specific room.
6815684	6816710	We have the room IDs.
6816710	6821730	These are the same same room that we have a bunch of different room IDs there.
6821730	6827702	Probably some of them created by Codex as part of testing, like lunch ideas.
6827702	6829600	Oh, no, I created lunch ideas.
6829600	6833203	These ones were created by Codex, these three rooms.
6833203	6835035	And we can remove them.
6835035	6838020	I can select these, and we can delete these.
6838020	6842940	And if we go into functions, we can see that for snack options, it's the same pre-functions.
6842940	6848708	But for voting room, we have get, create, or join, bunch of other functions that we have.
6848708	6850771	And And so it pretty much did everything.
6850771	6858392	It created the functions, it created the schema, it even, you know, created some test data while it was testing.
6858392	6864121	We'll add one simple rule that makes the voting feel like a real product.
6864121	6870434	After all, a person should not be able to spam the same room with repeated votes.
6870434	6873589	And that is because we still do not have real authentication.
6873589	6879153	And so for this tutorial, a local or session-based voter identity is enough.
6879153	6882359	And that's what we're going to be doing right now.
6882359	6884069	And here's my next prompt.
6884069	6890947	We're going to upgrade snack votes, so each person can only have one active vote per room.
6890947	6892622	Jump into plan mode.
6892622	6893427	Run that.
6893427	6895027	So here's the plan.
6895027	6897163	One active vote per room.
6897163	6900270	Add a lightweight session-based voting rule.
6900280	6909392	Each browser session gets a session ID and Convex stores one active vote per room ID and session ID, right?
6909392	6911163	So, this needs to be unique.
6911163	6916091	So, if I voted in that room, my session ID was used to vote.
6916091	6917950	And so, this needs to be unique.
6917960	6922080	So, for that room, my session can only happen twice.
6922080	6926190	If there's a chance for a repeat, it's not going to count it.
6926200	6931470	Yeah, I can vote in other rooms, but per session per room can only happen once.
6931480	6932894	We're going to expand this.
6932894	6933470	Looks good.
6933480	6934672	And submit this.
6934672	6935790	So, it is done.
6935800	6939270	Implemented one active vote per room.
6939280	6940676	Okay, change this.
6940676	6941685	What changed?
6941685	6943900	And it added this get my vote.
6943900	6945488	Added votes with table.
6945488	6947645	So, let's go ahead and try this out.
6947645	6948566	Open this here.
6948566	6951968	So, let's say I go to another room, friend Friday lunch.
6951968	6954390	I switch that room and I have my burrito.
6954400	6955866	So, I'm going to vote for this.
6955866	6957956	I just voted and I can't vote again.
6957956	6958763	You see that?
6958763	6968953	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.
6968953	6974270	So, let me go ahead and delete all of these so that we can see which one is mine.
6974280	6975561	And so, now I can vote again.
6975561	6976673	You see it's back up.
6976673	6978507	It's it's it's uh reactive.
6978507	6980430	I'm going to hit vote.
6980440	6984028	And now you see room ID and session ID.
6984028	6988051	These two, if they can only appear once in this table.
6988051	6995604	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.
6995604	6997794	I'm in this room here, Friday lunch.
6997794	6999630	Friday lunch right there.
6999640	7004021	Now, if I switch rooms, let's so let's say I go to another room.
7004021	7006470	Let's say I go into Sunday brunch.
7006470	7008227	Now, I can vote, right?
7008227	7009454	I can vote for anything.
7009454	7010751	I can say tacos.
7010751	7011472	Submit.
7011472	7013121	I can vote here.
7013121	7015036	And let's say I create another one.
7015036	7016381	I I change my vote.
7016381	7022602	Yes, I can switch votes, but I cannot pad, you know, with multiple votes an item.
7022602	7025854	And so, if I go back here, now there are two options, right?
7025854	7032179	Two different rooms, same session ID, but I cannot vote in the same room more than once.
7032179	7034717	So, this works really, really nice.
7034717	7041382	And finally, we'll add a deadline, so each room has a moment when voting closes.
7041382	7044903	Before the deadline, people can submit and vote.
7044903	7051918	After the deadline, voting locks and the app shows the winner or a simple tie state.
7051918	7057308	This adds time-based product state without becoming a scheduling system.
7057308	7069310	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.
7069320	7071583	And here's the prompt that we're going to be using.
7071583	7074594	I'm going to switch into plan mode, run this.
7074594	7076936	Oh, it needs a product decision.
7076936	7082635	Okay, how should users set a room deadline in this small tutorial version?
7082635	7092765	Quick durations, okay, add simple buttons like 1 minute, 5 minutes, 15 minutes when creating opening a room, date time input, or fixed default.
7092765	7094630	Let's do quick durations.
7094640	7095673	That sounds good.
7095673	7096950	Let's implement this.
7096960	7098228	And it is complete.
7098228	7100486	Implemented simple voting deadlines.
7100486	7102178	This is what was changed.
7102178	7108413	Added quick deadline choices, no deadline, 1 minute, 5 minutes, 15 minutes.
7108413	7112225	All of this, and let's go ahead and see how this works.
7112225	7113841	All right, so here we are.
7113841	7119614	And let's go ahead and create a room, Friday lunch, and let's say it's 5 minutes.
7119614	7121831	Select 5 minutes, open the room.
7121831	7123464	This still says no deadline.
7123464	7124750	Let's try another room.
7124750	7126562	Let's say Sunday brunch.
7126562	7128409	I can select no deadline.
7128409	7129674	I can do 15 minutes.
7129674	7131333	Let's Let's 15 minutes.
7131333	7133079	See, it says no deadline.
7133079	7134258	Okay, that's a bug.
7134258	7135620	That's definitely a bug.
7135620	7137967	So, let's see if it's able to fix it.
7137967	7143870	That's the first bug that has happened to us as far as I that has happened to us as far as I remember.
7143880	7155327	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.
7155327	7158331	And we don't really need plan mode for this.
7158331	7161870	There's no, you know, clarifying questions here.
7161880	7163179	It's a simple bug.
7163179	7165695	And we don't really want it to clarify.
7165695	7167196	We we know what the bug is.
7167196	7168517	We just want it to fix it.
7168517	7171069	So, there's really no ambiguity there.
7171069	7174865	It's like It's like I'm not looking to negotiate with Codex.
7174865	7178390	I know this is a bug and I want it to fix it, right?
7178400	7179702	There's no other ways.
7179702	7181704	There's nothing else happening.
7181704	7189633	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.
7189633	7197638	Now, sometimes Codex would output something like this and it tries to go into plan mode.
7197638	7204299	And so, right now it thinks it's in plan mode, but it's it actually is not in plan mode.
7204299	7213007	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.
7213007	7221532	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.
7221532	7226670	You see, it says I can't edit files because this thread is in plan mode, but we're not in plan mode.
7226680	7231043	And so, the solution is to go into plan mode and type something.
7231043	7232150	Okay, fix it.
7232160	7235409	And then it's going to say something like, well, you know, I can't do it.
7235409	7236195	I'm in plan mode.
7236195	7237911	And then you can leave plan mode.
7237911	7239550	And now it understands it.
7239560	7241340	You see, now it's correct.
7241340	7248790	Fixed the bug where it's selecting a deadline and opening an existing no deadline room still leaves the room with no deadline.
7248800	7250140	So, we're going to submit this.
7250140	7250722	All right.
7250722	7260941	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.
7260941	7266736	So, let's go ahead and test this out ourselves to ensure that it does really work.
7266736	7272299	So, we have this and let's do Friday lunch and we said 15 minutes.
7272299	7273548	And now it shows it.
7273548	7277017	And let's say 1 minute room one, 1 minute.
7277017	7277989	There we go.
7277989	7278753	1 minute.
7278753	7284210	And let's try no deadline room two, select no deadline, open no deadline.
7284210	7284636	Okay.
7284636	7288526	So, this looks like this was finally fixed.
7288526	7303941	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.
7303941	7307430	And this will round up this specific app build.
7307440	7316377	And here's our prompt, prepare SnackVote for deployment on Vercel and verify it works with the Convex back-end, okay?
7316377	7319426	I'm just going to do it in plan mode, run that.
7319426	7321988	Here it's being very, very clever.
7321988	7332630	One important deployment decision remains, whether the Vercel app should use the existing Convex dev deployment or it should promote it to production, okay?
7332640	7337910	And this is really, really cool because this is something that I wanted to cover once this was done.
7337920	7344830	So, if we go into Convex and you click over here, you can see all your deployments, your different deployments.
7344840	7350070	So, so we we are currently under development deployment, under development cloud.
7350080	7354888	We can also have a production deployment, preview deployments, other deployments, stuff like that.
7354888	7364290	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.
7364290	7368710	Production deployment uses the production Convex.
7368720	7371785	Development deployment uses the development Convex.
7371785	7380262	And this is our plan prepare snack vote for a production result deploy connected to the Convex production backend.
7380262	7382002	We're going to hit submit.
7382002	7385277	And it's going to create a production.
7385277	7386974	In fact, they already did it, right?
7386974	7392865	We can switch to this and it's going to have a production environment here created for us.
7392865	7393417	All right.
7393417	7399508	So, it has deployed snack vote to Vercel and verified it against Convex production, okay?
7399508	7402942	So, this is the live URL, what we're seeing here.
7402942	7405719	Deployment URL and the Convex backend.
7405719	7412256	Okay, and if we go into Convex, you can see that it's currently pointing to the production URL here.
7412256	7414723	And we have everything here in production, right?
7414723	7419663	So, we have the dev instance pointing to the dev deployment in Convex.
7419663	7426068	And the production instance in Vercel pointing to the production instance here in Convex.
7426068	7428265	So, we have all the same functions.
7428265	7429800	We have all the same data.
7429800	7431078	Everything is there.
7431078	7436927	The data might be a little different, but the schema is exactly the same and it works, right?
7436927	7441590	So, we can create a room, whatever new room, 1 minute, open it.
7441600	7445163	And now 59 seconds, 58 seconds, looks good.
7445163	7448576	We can create another room, room three, no deadline.
7448576	7450050	And that has no deadline.
7450050	7451545	So, I'm currently in this room.
7451545	7453405	I can create a food option.
7453405	7454153	I can vote.
7454153	7455804	I can't vote anymore.
7455804	7457613	One active vote per room.
7457613	7459350	This is the leaderboard.
7459360	7461564	So, it looks really good.
7461564	7475622	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.
7475622	7484937	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?
7484937	7488870	So, this was a slightly more complex app.
7488880	7494422	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.
7494422	7509830	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.
7509840	7514022	Now, for this last app in the course, we're going to be building FlexHelp.
7514022	7526561	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.
7526561	7530403	The important thing is that we will still build it in controlled steps.
7530403	7533897	We're not going to ask Codex to build the whole marketplace at once.
7533897	7539250	We are going to architect the design, and build the UI, then add feature by feature.
7539250	7544123	And last but not least, we're going to be deploying the app, making it available to anyone.
7544123	7548757	As always, our first step will be creating the visual architecture.
7548757	7558480	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.
7558480	7562941	Now, here in Codex, we're going to click here, and we're going to create a brand new project.
7562941	7567948	Now, I like to start it from an existing folder, and I'm going to create a new folder.
7567948	7568590	FlexHelp.
7568600	7571089	I'm going to hit create, and I'm going to click open.
7571089	7573405	And that creates a brand new project.
7573405	7581586	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.
7581586	7592710	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.
7592720	7598354	And here's the prompt that I'm going to be using and I want to specify that we want to use ImageGen.
7598354	7601702	We're going to jump into plan mode and we're going to run this.
7601702	7604807	And here we have the Flex Help Visual Architecture.
7604807	7606349	And here's a better view.
7606349	7614655	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.
7614655	7617502	We also have the Convex and the Versel here.
7617502	7623953	On the customer side, we have browse services, get the service detail, and then send a booking request.
7623953	7627836	The helper side, we have the helper dashboard and the status updates.
7627836	7634583	And on the shared marketplace screens, we have explore the marketplace, my bookings, and booking details.
7634583	7639847	So right off the bat, this app is a bit more complex than the previous apps that we were building.
7639847	7647866	And that's really the goal, to finish off with a more complex, but also a more realistic, more production-ready app.
7647866	7649693	Next, we'll map the core entities.
7649693	7660784	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.
7660784	7662302	And here's our prompt.
7662302	7665029	We want to preface this with this ImageGen.
7665029	7667603	All right, and here's our entity architecture.
7667603	7672043	Okay, so we have the user, that could be a customer or a helper profile.
7672043	7679575	We have the booking here, booking status, service, category, review, and all of that backed with Convex data.
7679575	7685729	So at this point, we have a better idea of how the final app is going to look.
7685729	7690161	I see that we need a user entity and that could be a customer or a helper profile.
7690161	7696829	And I see that booking is super important because everybody needs to have access to booking, both customers and helpers.
7696829	7714550	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.
7714560	7724750	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.
7724750	7739670	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.
7739670	7745755	This keeps the technology choices tied to the product instead of starting with tools first.
7745755	7753489	And this is super important because we want to start with the blueprint before any code has been written.
7753489	7755267	And here's the prompt to do that.
7755267	7758060	Do not edit any files and spec everything.
7758060	7766264	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.
7766264	7767510	Going to run this here.
7767520	7769287	This is what it's suggesting.
7769287	7771175	The workspace is currently empty.
7771175	7781206	The simplest course-friendly stack is React, TypeScript, Convex for backend data, off, Tailwind for UI, and Vercel for hosting.
7781206	7784473	Okay, and this is exactly what we've been doing so far.
7784473	7787310	And and here it's listing some primary routes.
7787320	7791567	Services, bookings, customer bookings, helper, helper services.
7791567	7801432	Here we have the data flow, the auth recommendations, UI and component approach, Vercel deployment path, staged build plan, everything.
7801432	7801701	Okay?
7801701	7806417	So, I'm going to exit out because this was only a read-only plan mode.
7806417	7806666	Okay?
7806666	7811545	I don't want it to do anything just yet because that's what we're going to be doing in the next step.
7811545	7820859	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.
7820859	7829115	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.
7829115	7832550	Now, this first version does not need any back-end data.
7832560	7839058	The goal is to see how far Codex can get from the architecture alone to viable UI mock-ups.
7839058	7841553	And this is the prompt that I'm going to be using.
7841553	7847366	Build the first static FlexHelp UI design from the existing architecture and stack direction.
7847366	7849161	We're going to stay in the plan mode.
7849161	7851017	Going to go ahead and execute that.
7851017	7853110	And let's see how well it does.
7853120	7855212	And here's the plan that it came up with.
7855212	7860658	Okay, the goal is a polished visual prototype that matches the FlexHelp architecture.
7860658	7864317	Okay, and here it lists some details about the architecture.
7864317	7867463	And let's go ahead and run this prompt.
7867463	7869270	So, it finished working.
7869280	7872082	And let's go ahead and see what we have here.
7872082	7873891	Okay, so this is our app.
7873891	7876019	And this is kind of how it looks like.
7876019	7877661	Okay, book practical help.
7877661	7880011	And we have some active requests.
7880011	7882928	We have booking entry, helper dashboard.
7882928	7883979	We have this.
7883979	7885030	Look at this.
7885040	7886353	It even works.
7886353	7891590	Service detail, a small plumbing repair, helper dashboard shell.
7891600	7894270	And so, this UI doesn't look too bad.
7894280	7899151	But there's something that you need to know when you design UI with Codex.
7899151	7903872	They all look pretty much the same or at least very, very similar.
7903872	7910158	And that is because Codex is not really an expert when it comes to designing pages.
7910158	7914066	It's great for coding, for solving all kinds of problems.
7914066	7918950	But for actually designing stuff, it's not the most ideal tool.
7918960	7921893	There are a lot of other tools that do it a lot better.
7921893	7937608	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?
7937608	7941518	Now, when it comes to UI designs, there's lots of cool tools.
7941518	7949698	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.
7949698	7954495	It's a very very lightweight tool, and it works really great with Codex.
7954495	7960510	And so, if you head over to designer.flutterflow.io, you're going to be on this page here.
7960520	7967350	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?
7967360	7973011	Here's the desktop app, and what's nice about the desktop app is that you have this app integrations.
7973011	7980101	So, if you click over here, you can connect designer to external agents and IDEs.
7980101	7983202	So, Claude Code, Gemini CLI, and Codex.
7983202	7984718	And so, I have this set up.
7984718	7986767	So, all you need to do is click here.
7986767	7988134	Now it's installed.
7988134	7993755	And now, this app here is going to serve as an MCP server, okay?
7993755	8003540	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.
8003540	8006976	And if you want to set this up, you can simply ask Codex to do it.
8006976	8016948	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?
8016948	8032203	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.
8032203	8037070	They also have, you know, explore styles feature, or you can have an instant generation.
8037080	8040790	Now, what you don't want to do is you do not want to type this prompt directly.
8040800	8048630	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.
8048640	8056369	And this is the same workflow regardless of whether you're using this tool, Google Stage, or pretty much any other tool out there.
8056369	8060785	And so, we're going to go ahead and we're going to grab a prompt to do just that.
8060785	8062621	And here's a prompt that we can use.
8062621	8065885	Create a polished FlutterFlow designer concept for FlexHelp.
8065885	8071299	FlexHelp is a two-sided marketplace, and we are telling it what kind of screens to design.
8071299	8073185	We give it some design requirements.
8073185	8076415	We give give it some guardrails, stuff like that.
8076415	8085932	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.
8085932	8089480	So, I'm going to go ahead and run this, and here are the designs.
8089480	8092052	So, as you can see, they're all very different.
8092052	8102504	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?
8102504	8104262	So, this is what Codex did.
8104262	8109863	In my view, these designs are a lot more interesting than Codex's design.
8109863	8110150	Okay?
8110150	8112527	So, I don't know which one you guys like.
8112527	8114136	This is a classical one.
8114136	8115116	This is nice.
8115116	8116191	Let's take a look.
8116191	8118030	Let's go ahead and use this classical one.
8118030	8123984	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.
8123984	8126221	So, here we have seven pages that we need.
8126221	8127758	So, now we have all the pages.
8127758	8141627	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.
8141627	8150470	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.
8150480	8151654	And so, let's take a look.
8151654	8155245	So, this is called FlexHelp Marketplace, the name of the project here.
8155245	8158202	And so, now what we're going to do is we're going to go back to Codex.
8158202	8172750	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
8172760	8173440	right here.
8173440	8175815	And I have a prompt here to do just that.
8175815	8176990	So, here's the prompt.
8177000	8181905	Update the Flex sub static UI to match the approved FlutterFlow Designer reference.
8181905	8189021	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.
8189021	8196278	Use FlutterFlow Designer MCP and then project is because there are multiple projects.
8196278	8198197	We want to copy this project here.
8198197	8198486	This.
8198486	8202541	And we're going to go into plan mode just to make sure that everything is good.
8202541	8203596	And I'm going to run that.
8203596	8211732	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.
8211732	8218600	This is our agent, our client cuz Codex is acting as an MCP client connecting to this MCP server.
8218600	8221368	And as you can see, it's it's analyzing this page.
8221368	8224597	And you can see this little Codex icon here.
8224597	8236621	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.
8236621	8243612	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.
8243612	8243929	Okay?
8243929	8245774	So, let's see what it's doing.
8245774	8247830	So, now it came back with a plan.
8247840	8254356	Update the existing React static UI to visually follow the approved FlutterFlow Designer reference.
8254356	8259917	So, here it's it has five pages, but over here we actually have more.
8259917	8261511	We have seven pages.
8261511	8268205	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.
8268205	8272168	So, we want to make sure that it captures all the seven pages.
8272168	8278659	Ensure that it captures all the seven pages from FlutterFlow Designer project.
8278659	8279045	Okay?
8279045	8286854	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.
8286854	8291526	User profile, helper, request management, helper dashboard, etc. etc.
8291526	8293148	All of these make sense.
8293148	8299589	Okay, so it went ahead and it updated it and it's going to add static page components for all seven pages.
8299599	8300504	Okay, submit this.
8300504	8305517	All right, so it has implemented the seven page designer reference update.
8305517	8307557	Let's go ahead and see how it looks.
8307557	8310202	All right, so this looks a lot better in my opinion.
8310202	8312270	All right, we have settings.
8312270	8314908	We do have the CH customer home.
8314908	8316319	Do we even see that?
8316319	8317847	I don't even see that here.
8317847	8322051	But this customer home service details, click on book.
8322051	8324720	So this menu we need to kind of remove this.
8324720	8326300	So let me go ahead and sell it.
8326300	8328424	What are those abbreviations?
8328424	8329039	Let's see.
8329039	8330532	Do they need to be there?
8330532	8332117	Let's see what it says.
8332117	8337611	But it looks a lot cleaner than than the original UI, at least to my eyes.
8337611	8342541	And now we're doing a little bit of tweaking, clean-up plan.
8342541	8348047	Okay, they were placeholder text icons used to mimic the nav icon column.
8348047	8353112	So we need to remove that and we should probably remove any other placeholder icons.
8353112	8355163	But right now it looks fairly clean.
8355163	8357127	Static preview, what is that?
8357127	8359041	This this also needs to be removed.
8359041	8367399	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.
8367399	8373015	Pull pull the design elements and re-replace these placeholders with with the actual design.
8373015	8374629	All right, so it has fixed it.
8374639	8376083	Now it looks a lot better.
8376083	8378258	We still see some other static preview.
8378258	8378950	That's okay.
8378960	8383168	Let's see if they go away once we have real data being fed.
8383168	8388133	So once we're happy with the UI, we can start designing the backend.
8388133	8392318	Data model should match the screens that we actually have here.
8392318	8401292	And so for FlexHelp, the first schema to support service browsing, helper profiles, booking creation, and helper status updates.
8401292	8403544	Anything beyond that can wait.
8403544	8409190	And here's a prompt that we can use to connect our app to Convex, okay?
8409200	8412157	We're going to be using Convex for this app as well.
8412157	8417673	So, we have here connect let's help UI to live Convex service and helper data.
8417673	8420012	Let's go ahead and keep it in plan mode.
8420012	8421573	All right, so this is our plan.
8421573	8424110	This is the Convex read path plan.
8424120	8430717	Connect the customer facing marketplace UI to Convex for the first database back read path.
8430717	8433458	The repo currently has no Convex setup.
8433458	8436838	So, add Convex from from scratch, etc., etc.
8436838	8439030	And we have Convex here running.
8439030	8440609	We have these three projects.
8440609	8446967	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.
8446967	8452985	All right, so it has implemented the first Convex back read path for the customer marketplace.
8452985	8455030	And these are the files that has changed.
8455040	8456341	This is what's connected.
8456341	8462589	And if we jump into our Convex dashboard, we can see we have a brand new project here that wasn't there before.
8462589	8468818	And if we jump here, we should see that we have a deployment here on my own machine.
8468818	8473739	This is a local deployment that Convex is running on, right?
8473739	8476516	This is not on Convex, it's on my own machine.
8476516	8478649	And we also have a production, right?
8478649	8485165	So, with this deployment here, you go into data, we can see that we have categories, we have helper profiles.
8485165	8486548	We also have services.
8486548	8489216	And then we have a bunch of functions, right?
8489216	8493030	Marketplace list, and then we have seed, creating seed data.
8493040	8496789	Now, if you go into production, we may not see anything there, right?
8496789	8500346	There's nothing there because we haven't deployed this app to production.
8500346	8503510	There's no need for a production deployment.
8503520	8511922	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?
8511922	8513192	So, we have here Marcus.
8513192	8515976	If you go back here, we should see Marcus, right?
8515976	8517888	Helper profiles, there's Marcus.
8517888	8522455	And if I change Marcus, if I edit name and I change, let's say, Marcus, right?
8522455	8525910	And I go back here, now it's automatically Marcus E here.
8525920	8527188	Automatically updates.
8527188	8529397	If I change that to James, guess what?
8529397	8530563	Now it says James S.
8530563	8536019	So, as you can see, this is now linked to our local Convex instance on my machine.
8536019	8537542	Both of these are on my machine.
8537542	8544237	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?
8544237	8546767	The ability to book these services.
8546767	8548613	And I have a prompt here as well.
8548613	8551056	We're going to be using this prompt right here.
8551056	8554190	Okay, add the customer booking flow to FlexHelp.
8554200	8558109	Inspect all of this, and I'm going to set this to plan mode.
8558109	8559935	And let's go ahead and run that.
8559935	8560790	That's our plan.
8560800	8568291	We're going to be adding the first customer-side booking creation path on top of the existing Convex back service listing.
8568291	8569845	And there's some information there.
8569845	8571336	We're going to implement this plan.
8571336	8575810	All right, so it has implemented the customer booking creation path.
8575810	8577651	And it also tested it out.
8577651	8581298	As you can see, there's also a booking here as well.
8581298	8583350	So, let's go ahead and see if this works.
8583360	8585595	All right, so let's say I want to book James.
8585595	8586753	Click over here.
8586753	8591160	So, I can't quite pick anything here, but I can do request to book.
8591160	8592630	Send booking request.
8592640	8593905	And I need an address.
8593905	8596122	Okay, so let's say do, I don't know.
8596122	8598149	We need auto-complete here as well.
8598149	8599634	Fill in every field.
8599634	8600081	Okay.
8600081	8601870	Okay, so task, task.
8601880	8604390	Okay, this I cannot fill every field.
8604400	8608110	Okay, customer, schedule, say 10:00 a.m.
8608120	8613063	And this obviously needs to be, you know, like a calendar picker, that kind of thing.
8613063	8614996	Okay, and now we have the booking request.
8614996	8618160	And I can click on view bookings, and I see my bookings.
8618160	8622553	Okay, so this was done by the Codex while it was testing.
8622553	8629230	So, now if we jump into Codex, we should see on my local instance here, we should see bookings.
8629240	8631083	And we see two bookings, okay?
8631083	8631681	Right here.
8631681	8633596	So, the booking flow seems to work.
8633596	8639470	There are some rough edges here and there that we need to fix, but for the most part, it is coming together.
8639480	8644547	Now, once customers can create bookings, helpers need a place to see and manage them.
8644547	8651697	The helper dashboard should show incoming requests and make it obvious what action the helper can take next.
8651697	8656510	At the simplest level, the helper should be able to accept or decline a request.
8656520	8662901	After accepting, the helper should be able to move the job into progress and then mark it completed.
8662901	8667232	Those status changes are what turn the app into a workflow.
8667232	8671060	This is also a good place to show the power of live data.
8671060	8676506	When a status changes, the UI should update and the Convex row should change.
8676506	8679950	That gives us a real end-to-end marketplace loop.
8679960	8684291	Customer request, helper action, back end state, and UI update.
8684291	8686790	And this is the prompt that we're going to be using.
8686800	8692119	Add the helper dashboard workflow for viewing booking requests and updating booking status.
8692119	8697255	Okay, I'm going to switch into plan mode and we're going to go ahead and send this.
8697255	8703203	So, it's asking me that how should the helper workflow handle the existing requested booking status?
8703203	8705471	Keep requested, this is recommended.
8705471	8710544	Preserve existing created bookings, show it as pending in the UI, or rename to pending.
8710544	8713947	Change the stored initial status to pending and require a small data.
8713947	8715689	So, we don't want any migration.
8715689	8718402	We just want to go with the easiest option.
8718402	8723686	And then, how should the helper request visibility work before auth is added?
8723686	8724927	Helper selected.
8724927	8732310	This is add a simple static helper switcher filter, so each helper sees bookings for their Convex helper profile only.
8732320	8734675	Simplest UI and back end, but less realistic.
8734675	8736790	So, we want helper selected.
8736800	8738221	Okay, we're going to select that.
8738221	8739962	All right, there's the plan.
8739962	8744750	Add the first helper-facing workflow on top of existing convex booking creation pack.
8744760	8746032	We're going to submit this.
8746032	8747049	Here is our progress.
8747049	8751298	All right, so he just implemented the helper booking status workflow.
8751298	8752775	And these are the files that changed.
8752775	8753811	This is what it did.
8753811	8758148	So it updated it through pending, accepted, in progress, completed.
8758148	8761808	It viewed it under helper James created booking this.
8761808	8762720	So it did all that.
8762720	8763495	It did some tests.
8763495	8764727	Let's go ahead and open it.
8764727	8766315	And let's see what we can do.
8766315	8768911	So this is the helper booking status.
8768911	8772993	I'm going to helper dashboard have my incoming requests, right?
8772993	8776650	So I can accept it, I can start it, and I can complete it.
8776650	8777038	Okay?
8777038	8779398	So that's the piece that is working.
8779398	8780550	I can also cancel it.
8780560	8781954	And that is canceled.
8781954	8782884	And that's it.
8782884	8784108	I can't come back to it.
8784108	8785130	I can't do anything.
8785130	8787017	Here we have recent activity, right?
8787017	8788550	Completed, completed, canceled.
8788560	8791710	And this is the one that did 148 116.
8791720	8793950	This is the one that it has completed.
8793960	8795443	This seems to work, right?
8795443	8798081	And we have canceled, we have completed.
8798081	8801405	Even a simple marketplace has different responsibilities.
8801405	8804821	Customers create booking requests and view their own bookings.
8804821	8808990	Helpers manage requests that belong to them or are available to them.
8809000	8815022	Admin or system logic may handle category alteration or platform level controls later.
8815022	8818556	The key point is that these rules should not only live in the UI.
8818556	8825371	Back-end functions need to enforce ownership and permissions because the UI can always be bypassed.
8825371	8830770	This is where Codex needs to think carefully instead of just adding buttons.
8830770	8836750	And so now what we want to do is we want to add the roles off and the access boundary layer.
8836760	8838731	And here's the prompt to do that.
8838731	8845286	Add the first practical roles off and access boundary layer around the existing flex help workflows, okay?
8845286	8847816	So we're going to go definitely in the plan mode.
8847816	8850270	We're going to run this and see what it says.
8850280	8852001	And so it has a question for us.
8852001	8856767	Which identity approach should this plan should this step plan for?
8856767	8857945	Demo sessions.
8857945	8870974	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.
8870974	8877129	Let's go with Convex or how should customer helper roles be represented for or version one?
8877129	8878642	Role plus profile.
8878642	8879805	So what is this?
8879805	8885936	Each demo user has customer helper both and helpers linked to one helper profile for request.
8885936	8887090	Separate accounts.
8887090	8890405	Customer and helper are always separate demo users.
8890405	8893055	Simpler boundaries but less flexible.
8893055	8899241	And sometimes when I'm not sure but I want the system to come up with a really solid answer.
8899241	8900916	This is what I usually type.
8900916	8906294	For the second question, what's the most durable long-term option?
8906294	8908652	Okay, that's the key here, durable.
8908652	8910085	Now let's see what it says.
8910085	8913914	The most durable long-term option is role plus profile.
8913914	8914552	Perfect.
8914552	8915218	That's it.
8915218	8919561	And for the first question, choose demo sessions for the for this core step.
8919561	8922735	Okay, so let's go ahead with demo sessions, okay?
8922735	8926395	So do demo sessions and role plus profile.
8926395	8928992	Let's just go with the recommendations.
8928992	8929667	Expand it.
8929667	8934265	All right, so now you can see that Codex is testing everything, right?
8934265	8938962	It's testing on the UI in the browser and you see this cursor right here.
8938962	8946466	The browser flow now confirms a customer created book booking appears for the linked helper and can be moved into in progress.
8946466	8953003	All right, so it has finished and it has implemented the demo roles and access boundary layer over here, okay?
8953003	8955830	So marketplace browsing stays public.
8955840	8959971	Booking creation requires a customer or both demo user.
8959971	8965107	Customer booking status only shows bookings owned by the signed-in customer.
8965107	8973210	Helper request status updates require a helper or both demo user with a linked helper ID helper profile ID.
8973210	8978590	And so, remaining limitation, this is still tutorial demo auth, not production authentication.
8978600	8986392	Real Convex auth or Clerk can replace demo session issuance later while keeping the same role profile access model.
8986392	8990473	And so, this should give us some uh role separation, right?
8990473	8992515	Some kind of authentication on the backend.
8992515	8997518	And here, if we jump into Convex, you can see we now have users over here, right?
8997518	8999779	These are the users, and there's a role.
8999779	9004091	So, you can be either both, or you can be a helper, or you can be a customer.
9004091	9008966	And depending on which role you're you're in, you can do various operations.
9008966	9016146	Here we have sessions, we have various services, we also have functions that also handle these roles.
9016146	9024204	So, you can list demo users, you can start demo session, viewer list for helper, list for customer, etc., etc.
9024204	9029187	And these functions, they are meant to work with specific roles, right?
9029187	9032797	So, that authentic- -ation is is baked in into these functions.
9032797	9039510	Now, when something breaks, the wrong move is to immediately ask Codex to rewrite a whole section.
9039520	9048692	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.
9048692	9059291	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.
9059291	9064368	Observe the issue, diagnose it, patch it narrowly, and verify the fix.
9064368	9073950	And so, let's give it a prompt that will deal with this sort of issue regarding debugging, polish, verification, stuff like that.
9073960	9075907	We're going to be using this prompt over here.
9075907	9080430	Debug, polish, and verify the existing flex help product workflow.
9080440	9090310	Inspect the current app first, then identify this is smallest set of fixes and polish improvements needed to make the current workflow feel credible.
9090320	9092084	Let's jump into plan mode.
9092084	9100004	Right away, it tells us that I see a few concrete polish fix candidates already and it lists some here, okay?
9100004	9104038	And so, the build passes and both local servers are responding.
9104038	9108150	So, it's using an in-app browser now for a quick workflow probe.
9108160	9112983	So, the plan targets actual UI issues rather than guesses, okay?
9112983	9115163	So, let's wait to see what it finds.
9115163	9117705	And this is the plan that it came up with.
9117705	9124674	Tighten the existing customer helper Convex and demo app workflows without adding new product scope, okay?
9124674	9129679	So, it lists a bunch of things and we want to quickly scan assumptions.
9129679	9134372	No new marketplace features will be added, no payments, nothing, okay?
9134372	9137345	That stays and here's some key changes.
9137345	9139131	You can kind of scan through that.
9139131	9140522	Let's go ahead and submit this.
9140522	9145175	Right, so it is done and it has implemented the debug polish task.
9145175	9147818	And it actually fixed a lot of interesting things.
9147818	9155834	It fixed some placeholders, it did some testing, it switched to different accounts, actually cleaned up a lot of cool stuff.
9155834	9170424	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?
9170424	9171946	And I can switch a demo user.
9171946	9175870	Now, I'm signed in as the helper and now I'm signed in as both.
9175880	9180294	Customer access, choose a customer demo user to create a booking request.
9180294	9183870	So, it's coming along really, really nicely.
9183880	9186670	And the final build step is deployment.
9186680	9196180	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.
9196180	9199944	So, let's go ahead and grab this prompt and let's go ahead and paste it.
9199944	9207135	So, deploy the existing Flex app with Vercel and smoke test the connected Convex backend, okay?
9207135	9211587	We're going to jump into plan mode so that it can prepare everything, plan everything out.
9211587	9218230	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.
9218240	9220874	Use the Vercel Vercel plugin.
9220874	9230010	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?
9230010	9232003	That we want to use the Vercel plugin.
9232003	9236376	Which Convex environment should the deployed Vercel app use for the smoke test?
9236376	9237659	We want to use production.
9237659	9240354	And where should the front end be deployed?
9240354	9241710	New personal project.
9241720	9242240	Exactly.
9242240	9244060	This is a brand new project.
9244060	9245910	We already have a bunch of projects, right?
9245920	9248241	So, if we go over here, we have this project.
9248241	9250394	Actually, we should have used the existing project.
9250394	9253504	We already have this project, but I think it's going to create a new project.
9253504	9255292	Let's see if we can tell it.
9255292	9257077	I'm going to copy that.
9257077	9258900	See if we can use the existing project.
9258900	9260628	No need to create a new project.
9260628	9261503	And let me check.
9261503	9264182	So, this is actually plan mode, so we're okay.
9264182	9265834	Okay, implement this.
9265834	9267990	And here it's going to create a production.
9268000	9270654	So, if we go over here, remember we're using this.
9270654	9273088	We also have a production deployment set up.
9273088	9275480	So, it's going to be using the production deployment.
9275480	9280531	So, we should see data and tables and functions and all that good stuff as part of this deployment.
9280531	9284989	Production Convex is now seeded and responding with services and demo users.
9284989	9287482	So, if you go over here, we have everything now.
9287482	9288030	Look at this.
9288040	9289491	Sessions, services.
9289491	9290790	We have the data.
9290800	9304520	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?
9304520	9309407	So, we need to test things again because, you know, it's using new environments now.
9309407	9311015	All right, and it is done.
9311015	9312177	Deployed FlexHelp.
9312177	9313346	This is the URL.
9313346	9316264	This is the Vercel project deployment ID.
9316264	9318325	Everything is live now, okay?
9318325	9321644	And you can access it as well at this URL, okay?
9321644	9328582	So, we have customer home, and I'm signed in as one of these demo users, customer or helper, right?
9328582	9336574	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?
9336574	9337946	This is helper access, right?
9337946	9339325	Remember the roles, right?
9339325	9341096	It's it's being handled here.
9341096	9346145	And so, now as a customer, I want to book professional seasonal garden cleanup.
9346145	9354804	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.
9354804	9359699	Okay, so with booking request submitted, your request was saved, view my bookings.
9359699	9368121	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.
9368121	9371492	And I'm going to say accept or complete, it's completed.
9371492	9381597	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.
9381597	9383116	Okay, there we go, completed.
9383116	9384439	And here we see completed.
9384439	9385670	This one is completed.
9385680	9388486	Actually, this one, for Marcus, it has been completed.
9388486	9390289	And then there's some more requests here.
9390289	9391486	So, the flow is working.
9391486	9393310	The flow is working perfectly.
9393320	9405638	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.
9405638	9421950	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,
9421960	9422760	functionalities.
9422760	9432587	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.
9432587	9438056	And here they are, top five high impact, low effort next features I prioritize.
9438056	9443911	Functional marketplace search, booking detail view, customer cancel pending requests, etc., etc.
9443911	9460988	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.
9460988	9467515	And so that way I have a constantly evolving list of things that I can build in the future.
9467515	9473032	So I do not need to ask Codex all the time constantly, you know, you know, to to suggest new features.
9473032	9484253	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.
9484253	9495811	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.
9495811	9504233	This workflow, this main workflow works as expected, but of course, there's so many things that you can do to improve this app.
9504233	9521030	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
9521040	9522906	like to share you in some of the future videos.
9522906	9528132	And so I really hope that you enjoyed this mega Codex tutorial.
9528132	9543030	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
9543040	9543794	hopefully join.
9543794	9549591	There are lots of great people there and of course, support this channel, and support my work.
9549591	9557160	And so, like this video, leave a comment, and check out our amazing Patreon community.