start	end	text
0	5400	In this video, we're going to do a comprehensive Codex tutorial. I want to show you not just what
5400	12580	Codex is, but how to actually use it as a serious app building agent. We'll start with the foundations,
13040	20600	how Codex works, how the Mac app and the CLI fit together, how to choose models and thinking modes,
20780	27760	how threads and context work, and how to use tools like the browser, terminal files, and external
27760	34560	systems. Then we'll turn that foundation into a real workflow. We'll use Codex to plan, architect,
35160	42760	design, implement, debug, and ultimately deploy a production-ready app from scratch. By the end,
42820	48480	you should understand the full Codex workflow well enough to take your app idea, break it into
48480	54720	manageable steps, and use Codex to build it with much more confidence. Now, when you Google for
54720	62940	Codex, you're going to land on this website here. And here you can learn more about Codex and you can
62940	68840	also download the app. Now, as you can see, it says here, download for macOS. That is because I have
68840	75000	macOS. If you're running Windows, you're going to have a button that says download for Windows. So
75000	80920	it does support macOS and Windows. And when you scroll down, you can see the main screenshot
80920	84980	that kind of gives you a general overview,
85200	89280	general idea of what this app looks like, okay?
89300	90560	And you can kind of scroll down,
90660	92060	you can learn more about it,
92160	95760	or we can jump into my Codex instance here
95760	97140	and I can give you a quick overview.
97300	98600	So on the left-hand side,
99020	101120	we have things like starting a new chat,
101460	103880	search, various plugins, automations.
103880	109320	Just below that, we have our main organization, right?
109320	111840	And this is where you can organize your projects.
112220	112380	Okay.
112920	126420	And the idea here is that anytime you have a project, you want to click here and you want to actually either start it from scratch or you use an existing folder because these are not organized just logically.
126420	130720	They're actually linked to folders on your disk.
131000	131320	Okay.
131420	136280	And so everything that you see here represents actual folders.
136280	139980	Now, inside of these folders, we have some items here.
140080	143840	Now, these are not files, and they do not represent anything on the disk.
144220	146700	These are actually conversations, right?
146760	152600	And you can think of them as, you know, similar to what you may have in chat GPT, okay?
152680	158020	So if you're working on this project, you can create a new conversation simply by, you know,
158100	162940	clicking here or pressing Command and telling it what you want to happen.
162940	168220	Now, in the center pane over here, this is where you're going to be communicating, right?
168300	172580	So if we scroll back up, this was my initial prompt here.
172640	178420	I want to build a very, very simple web app that arranges items as a Trello Kanban board
178420	179360	style, et cetera.
179500	181980	And then I have this interaction here, right?
182020	182940	It does something.
183560	186480	I ask it to do something else, et cetera, et cetera.
186820	191700	Now, just below that is where you're going to be entering your prompt, okay?
191700	197520	So you're going to be selecting the model, the different reasoning, and we're going to be covering all that.
197620	199640	But this is the main text box for the model.
200180	206920	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.
207200	210620	And a lot of people are not really using it.
210800	214380	And you need to understand to leverage this whole app experience.
214380	221940	right? So right here, we have this little card that displays a little bit of information about
221940	227780	this specific conversation, right? So we have branch details, we have some artifacts, right?
227820	234080	And these are the data that happened as a result of this convo. And so if I go to another
234080	239340	conversation, we might have different artifacts, right? And you can think of an artifact as a
239340	243020	side effect of your conversation.
243440	246740	So if you've created the readme file, you're going to see it here.
246800	249320	If you did a web search, you're going to see it here.
249440	254680	Now, one of the more interesting things happens when you click this button and open the right
254680	255280	hand pane.
255520	257960	And here you can see all kinds of interesting things.
258200	263940	So for instance, if I click this button, I can have a side chat or I can have a browser.
263940	269980	Now, the browser feature is actually very, very powerful because I can simply open this up here.
270400	277680	And as I'm developing this app, it's going to give me a URL that I can open here in this browser.
277680	286080	And that will allow me quick iteration because I'll be able to see exactly how the app looks as I'm developing it.
286160	290940	And we're going to be doing all of that in more detail a little bit later in this tutorial.
293940	295900	First, let's talk about Codex.
296240	303100	The easiest way to understand Codex is that it starts from the same basic idea as ChatGPT,
303100	306640	but it is connected to your actual working environment.
306980	313500	So instead of only answering questions, it can inspect files, edit code, run commands,
314020	319420	use the browser, test the app, and help move a project forward.
319620	321160	The difference matters a lot.
321160	328560	ChatGPT is great when I want an explanation, a rewrite, a brainstorm, or a quick answer.
328840	333220	Codex is what I use when I want work to happen inside a real project.
333640	341580	It can do many of the same reasoning tasks as ChatGPT, but it can also act on the project directly.
342240	347020	That is why I keep ChatGPT mostly for pure informational questions,
347020	354600	and I keep codecs for work threads so my project context stays focused and clean.
354880	356980	There are two main ways to use codecs.
357280	362300	The first is through the CLI, which is best when you already live in the terminal
362300	370280	and want to run quick repo tasks, scripts, lightweight edits, or developer-style iterations.
370720	376220	The second is the Mac app, which is usually better for visual app building work.
376220	392060	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.
392720	398320	And that is why I highly prefer to use the Mac app, and that is what I recommend you use as well.
398320	418740	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.
418740	428700	Once those pieces make sense, Codex stops feeling like a chat box and starts feeling like an app-building environment.
428940	432920	The project pane is where you open or switch between projects.
433540	437980	The thread area is where the conversation and task history live.
438720	445080	The file change view shows what Codex wants to edit before those changes are accepted.
445080	451180	The terminal output shows commands, builds, errors, and verification steps.
451480	455620	The browser preview is where you can inspect the running app visually.
456420	461160	Together, these pieces make Codex feel less like a chatbot
461160	464080	and more like a working development environment.
464720	466520	Permission flow is also important.
467220	472080	Codex should never feel like a black box that silently changes everything.
472080	477660	everything. As soon as it finishes running commands, editing files, or taking an action
477660	483760	that matters, you can always inspect what it's doing, approve the right actions, and
483760	485820	keep control over the project.
488412	492412	The next thing to understand is that Codex is not just one fixed experience.
493412	499412	There are a few workflow decisions you make each time you use it, and the first one is which model to use.
499412	507092	use. In practice, I usually default to the latest strongest model unless I have a clear reason not to,
507732	514932	because most app building tasks benefit from better reasoning. Here's a rough guide to picking
514932	522532	the correct model for your specific task. So for architecture, backend design, multi-step
522532	529592	implementation, difficult debugging, or final review passes, I want a stronger model, such as
529592	540612	GPT 5.5. For small copy tweaks, simple UI polish, short refactors, or low-risk tasks, a faster,
540872	548192	a lighter model can be a better tool. And here's where you can use an older model, or a mini or a
548192	555232	nano version of the current latest model. For example, if I'm asking Codex to rename a button,
555812	562852	tighten some copy, or adjust spacing on one component, I do not need to overthink the model
562852	569912	choice. But if I'm asking Codex to design the convex schema, think through permissions,
570532	577252	restructure several files, or debug a problem that spans front-end and back-end code,
577252	581352	That is where I want the strongest model available.
582132	590332	The more expensive the mistake, the more I want to slow down and use the better reasoning setup.
593032	596512	The next important decision is the reasoning mode.
597072	605472	This controls how much time and effort Codex spends thinking through the task before and during the work.
605472	612812	This decision is a little more nuanced than model choice because every reasoning mode has a place.
613172	618992	Low thinking is useful for quick, obvious tasks where the risk is small.
619512	626292	Medium is good for normal app building work, first pass UI implementation,
627152	631212	straightforward debugging, and routine feature work.
631212	634592	High is what I use when the decision is more expensive.
634592	643092	architecture, convex, data model design, authentication, permissions, hard bugs,
643772	650872	multi-file changes, and the final review. My default for serious app building work
650872	658552	is usually a strong model with high thinking because that gives me the best balance between
658552	666012	speed and quality. But the practical lesson is simple. Match the model and thinking mode
666012	674292	to the risk of the decision. If the task is small and reversible, keep it fast. If the task affects
674292	681112	the structure of the app, slow the model down and let it reason. Now, as you're working on your
681112	688052	project and you're in this conversation view, you can enter your prompts here and just below
688052	694432	you can select various things. Now, first of all, you have your context window here, right? Here,
694532	701952	you can see how much of the context you have used. Now, Kodak says that it automatically compacts
701952	708792	its context. And yeah, you can do that, but over time, it's not going to be as effective. And so
708792	714872	you always want to be starting new conversations anytime you're working on something new that
714872	722832	requires a context switch. Next, we have here the all-important model selector. So if I click over
722832	730332	here, I have it automatically set to GPT 5.5, which is the newest model as of the time of recording
730332	736732	this video. You can also switch it to some of the older models as well, but I see no reason to do
736732	744492	that because this model has been very, very capable. We also have things like speed, standard versus fast,
744872	750932	Fast is one and a half times faster, but it also uses more of your usage.
751352	755572	Okay, so depending on which plan you're at, you may want to stay on standard.
755692	760392	I mostly keep it on standard unless, you know, I'm in a hurry and I want to switch it on fast.
760892	762732	Next, we have intelligence, right?
762812	764312	Now, this is very, very important.
764912	767532	By default, I keep this on high.
767532	776052	I found that to be a good balance between speed and quality, because as you go towards lower
776052	782352	intelligence, the model is going to be faster, but you're going to be giving up quality, right?
782372	786912	You're going to be giving up intelligence. On the other hand, as you go into higher and higher
786912	792392	intelligence, the model is going to be slower, but it's going to be thinking more, right? It's
792392	799532	kind of like a person, right? You can ask a person a question and that person may think more,
799992	805532	think through something longer, right? You know how people say, let me sleep on it,
805532	811892	or let me think it over, right? The longer you think, the more you figure something out,
812352	819352	and the higher chance you're going to arrive at the correct answer, at least for you. You're
819352	825452	going to think through all the possibilities. Whereas the first answer might be wrong and
825452	830752	usually is because you haven't thought everything through. And it's the exact same thing here,
830852	835392	right? If you set something too low and you're working through something fairly complex,
835852	841912	well, the model is not going to think it through. It's going to give you an answer that, well,
841912	848652	it's an answer, but it might not be the ideal answer. Okay. On the other hand, with extra high,
848652	856732	you know, the model is going to think longer, but it may not be necessary in a lot of situations.
856732	864332	And so I typically keep it on high, sometimes medium, very rarely low, and also very rarely
864332	870012	extra high, unless I'm working through something that the model has trouble with high. You know,
870072	875732	the situations where extra high really proven itself over high, it hasn't been that many. And
875732	880472	And so for the most part, I keep it on high, sometimes I also switch it back to medium.
880472	886172	And as you start to use Codex more and more, and as you begin building more and more apps
886172	892232	with it, you'll be able to better judge which thinking mode to select.
892232	899652	Now, before we go deeper into the workflow, I want to quickly talk about pricing and plans,
899652	903252	because this is one of the first practical questions people have with Codex.
903252	907552	For most people learning codex, the important question is not what is the most expensive
907552	908552	plan.
908552	912252	The question is what do I actually need for the kind of work I'm doing.
912252	916692	If you're learning, testing prompts, and building smaller projects, you can usually
916692	921172	start with the normal ChatGPT plan access available to you.
921172	926492	If you're doing heavier app builds, longer agent runs, team workflows, or professional
926492	932412	coding work, then plan limits, credits, and business options start to matter more.
932412	936352	Now, here I am on OpenAI's Codex pricing page.
936412	943212	And if you scroll down, you can see the prices that are available at the time of filming this video, right?
943272	949112	So we have the free plan, and this allows you to explore Codex capabilities and quick coding tasks.
949112	955252	We have the go plan, which is $8 a month, and you can use Codex for lightweight coding tasks.
955412	960052	We have the plus plan, which is fairly popular, $20 a month.
960052	965592	And here you can finally start to actually do something meaningful, right?
965712	967052	Something like, you know, building...
967412	969492	Something like, you know, building a part of an app or building some scripts.
969752	974612	And they say this can power a few focused coding sessions each week.
974812	976572	Next, we have the Pro plan, right?
976572	982992	And so here you can choose whether you want the 5X or the 20X higher rate limits than plus.
983112	984872	And this is $100 a month.
984932	988172	I'm actually using the ProPlan 20X.
988432	990592	Okay, so I'm paying 200 bucks a month.
990892	997132	And at this level, I am at a point where I pretty much never reach any limits.
997392	1003552	And that means I can build, you know, multiple projects at once and use codecs for all kinds
1003552	1006432	of tasks and still not reach limits.
1006432	1014252	And so during the time when I'm, you know, building heavy apps and doing some serious work, I may get close, right?
1014292	1016372	But I never really get to the limit.
1016452	1019552	You need to decide which plan is right for you.
1019632	1023372	Now, from what I understand, Plus Plan is very, very popular.
1023592	1028872	And so what I would do is I would obviously, you know, try the free plan, try to see how that goes.
1028992	1036332	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 of this plan.
1036332	1039492	And so the next logical step is to try out the plus plan.
1039572	1041772	The plus plan is where a lot of people start.
1042112	1047772	And it gives you a reference point as to, you know, the amount of work that you're doing.
1047872	1051392	How much can this plan actually cover the amount of work you're doing?
1051412	1056272	Because the fact of the matter is there are people that work on very heavy projects.
1056592	1059312	And, you know, they work on big repos, right?
1059372	1060752	Lots and lots of code base.
1061032	1063632	They run out of their plan very, very quickly.
1063632	1068292	But if you're working on the smaller projects, you're not using the fast mode.
1068432	1072312	So for instance, you're not coming here and you're changing, you're not changing speed
1072312	1075352	because I'm using the fast mode from time to time.
1075352	1077852	And that, you know, increases the usage as well.
1077952	1081852	So if you're on standard and you're using maybe medium often, right?
1081892	1086332	You're not really using high that much and you're almost never using extra high.
1086552	1089792	You can get a lot of mileage out of this plus plan.
1089792	1095952	And when this plus plan starts to run out, you know, you're starting to notice some tight limits,
1096172	1102172	you may want to switch to a higher plan, okay, such as the Pro, 5X, or 20X. Now, you can also
1102172	1107392	ask Codex to help you choose the right Codex plan for your specific use case. For instance,
1107472	1112932	you can use this prompt here, help me choose the right Codex plan for my use case, okay,
1113032	1118472	use only current official OpenAI pricing and help center information. And I'm going to go ahead and
1118472	1123612	run this and see what it says. Right. And this is what we got back. As of this day,
1123732	1130412	ChatGPT plans that include codecs. Okay. So this is the practical read. Free, try codecs on quick
1130412	1137012	tasks, go lightweight coding tasks, plus a few focused coding sessions each week. Okay. And this
1137012	1142152	is exactly what I just told you from that official page. And so if you scroll down, you can see how
1142152	1148232	codecs usage and credits work. You can learn, you can read this. Best fit for your use case. Okay.
1148232	1154332	for learning codex and building small to medium apps, chat GPT plus is the sensible default. If
1154332	1159492	your current plan is plus, I would not upgrade until you actually hit codex limits often enough
1159492	1165192	that the friction matters. Okay, when heavier or business plans make sense, what to verify live
1165192	1171432	before deciding. And so a sensible thing to do would be to try codex plus and see if that's
1171432	1176432	enough for your specific use case. If you're not a heavy codex user, if you just want to experiment,
1176432	1181192	it should be more than enough. And then you can decide whether you want to upgrade to the higher
1181192	1189172	tier plans. Now, before we move into the app building workflow, I want to take a moment to
1189172	1194152	talk about some of the things Codex does that can greatly increase your productivity. These are
1194152	1202292	features I use all the time across different projects. Skills, plugins, automations, and MCP,
1202292	1209872	along with its tools and connectors. The best way to think about all that is skills tell Codex how
1209872	1219072	to do a workflow, plugins package capabilities, automations let work happen later, and MCP tools
1219072	1226152	and connectors give Codex controlled access to outside systems. Once those pieces make sense,
1226152	1231152	Codex feels less like a code editor and more like a project agent.
1231152	1237152	First, let's talk about one of my favorite features that I use pretty much all the time – skills.
1237152	1242152	Skills are reusable instructions for how Codex should do a workflow.
1242152	1245152	They're not external tools by themselves.
1245152	1252152	They're more like local playbooks that tell Codex the style, process, output format,
1252152	1256912	format and validation steps for a specific kind of work.
1256912	1264492	For example, this course uses skills for explainers, notion editing, video timelines, and other
1264492	1267212	repeatable production tasks.
1267212	1273192	Instead of explaining the same rules every time, I can point Codex to the skill and it
1273192	1278632	knows the house style, the workflow, and the mistakes to avoid.
1278632	1285472	The rule is simple. Anything that gets used over and over again becomes a skill. That matters
1285472	1290712	because a lot of real work is not just about getting an answer. It's about getting an answer
1290712	1298072	in the right format, following the right process, and producing something consistent with the rest
1298072	1303712	of the project. All right, so here I am in my Codex instance here, and I want to show you some
1303712	1308552	things that you can do with skills. So I have here a conversation for an app that I was building.
1308632	1314712	And if I press the forward slash, you can see that I have many options here, right?
1314732	1316072	I can do many, many things.
1316712	1320072	And as you can see for skills, I have lots and lots of skills.
1320192	1322352	I have tons and tons of skills over there.
1322592	1327632	And skills allow me to package a repeatable process.
1328172	1331072	You can think of it as a function that does something.
1331152	1333972	It gets some input and it produces an output.
1333972	1338232	And the goal is to produce consistent output as you've done before.
1338632	1342672	And so as an example, let's say if I'm working in this convoy here, right?
1343132	1345972	And I asked the model to do something for me.
1345972	1348772	So here I have, I want to build a very simple web app
1348772	1351972	that arranges items as a Trello Kanban board style.
1351972	1353752	Okay. And it comes up with this.
1353752	1356692	Now, right here, I can package that as a skill.
1356692	1359052	Now, what do I want to package as a skill?
1359052	1362532	Well, I want to package, for instance, maybe creating the architecture.
1362892	1368032	So I can say something like package the architecture step
1368032	1376632	as a skill, and then I just give it a name of the skill, sample art stack, okay? And that's going to
1376632	1384932	create a repeatable skill that will allow me to generate an architecture for any kind of project
1384932	1390212	that I may be working in the future. I'm going to go ahead and jump into the plan mode in case the
1390212	1395392	model wants to confirm something or clarify something, and I'm going to go ahead and execute
1395392	1401552	this and let's see what happens now it came back to me and it wants me to answer a question
1402352	1408752	should the sample arch stack package this as a general architecture planning skill or specifically
1408752	1415472	as the kanban trello architecture right so we want it to be general app architecture so i'm
1415472	1421152	going to go ahead and save this and now it came back with a plan okay create the reusable codex
1421152	1428692	skill named samplearchstack under wherever it's storing those skills, the skill will guide codecs
1428692	1433872	through the architecture step for simple app ideas. And it's going to package that step into
1433872	1439892	a reusable process. All right. And now it tells me that I created the skill at it contains skill.md
1439892	1447112	and then agents forward slash openai.yaml. Validation passed, et cetera, et cetera. And now
1447112	1447412	would I
1447412	1453172	And now what I can do is I can enter a prompt and I can say use this skill for a brand new
1453172	1460232	project management app. And it should use this skill to create an architecture stack
1460232	1465072	for this kind of app. So it wants to know for the brand new project management app,
1465152	1469552	what should the version one data model support? We're just going to do local only. And here it
1469552	1474772	came back with a plan. Brand new local only project management app architecture, right?
1474812	1479672	That's the purpose of the skill. Okay. We're going to expand this and it's coming up with
1479672	1486752	this architecture, right? App shape, data state model, component architecture, test plan, et cetera,
1486752	1491352	etc. And we can say yes, and it's going to go ahead and implement all that. And so this is
1491352	1497172	actually a fairly valuable skill, because that is exactly what you want to be doing in those
1497172	1501172	initial stages when you're building an app, as you're going to see a little bit later.
1501832	1509232	But by having the skill, we do not need to explain all of that over and over again. So as you're
1509232	1515892	building more and more apps, you can simply reuse this skill from now on. Now, before moving further,
1515892	1522372	I also want to explain a few terms that can sound similar at first, plugins, automations,
1522512	1529532	and MCP. They all expand what Codex can do, but they are not the same thing. Plugins are
1529532	1537332	package capabilities or workflows that make Codex better at a specific kind of work. For example,
1537532	1544872	a Notion plugin can help Codex read and update Notion pages. A Vercel plugin can help with
1544872	1551712	deploys on project settings, a Hyperframes plugin can help create explainers, and browser
1551712	1557332	or document tools can help Codex inspect apps or work with files.
1558012	1560792	The simple way to think about plugins is this.
1561272	1566712	They give Codex a more specialized tool set for a specific job.
1567512	1573832	Codex still needs the right context and the right instruction, but the plugin gives it
1573832	1581812	a cleaner way to operate inside that workflow. Automations are different. A plugin gives Codex
1581812	1590752	a capability, but an automation gives Codex a time-based job or follow-up behavior. That might
1590752	1598792	be a reminder, a recurring check, a scheduled review, or a request to come back to a thread
1598792	1606892	later and continue the work. This is useful because not every task needs to happen immediately.
1607312	1614232	Sometimes you may want Codex to check something again tomorrow, remind you to review an outline,
1614632	1622092	monitor whether a deployment is still working, or wake this thread back up when you need it to
1622092	1629472	continue. Automations turn Codex from a one-time assistant into something that can help manage
1629472	1636332	longer running work. The important distinction is simple. Plugins are about what Codex can do,
1636952	1643752	and automations are about when Codex should do it. All right, so here I am back in Codex,
1643872	1647552	and I want to show you how plugins work, right? So if you click over here on plugins,
1647552	1650812	you can see all the plugins that you have here, okay?
1650972	1654212	And so it tells you that make Codex work your way.
1654472	1655612	And if you scroll down,
1655692	1657572	you can see all the different plugins, right?
1657592	1658812	So you can click on the plugin
1658812	1660932	and you can learn more about it, right?
1660972	1662532	So for instance, this spreadsheets
1662532	1666132	allows you to create and edit spreadsheet files, right?
1666492	1669072	You can use this plugin to create a spreadsheet
1669072	1672092	to analyze this company's financial, et cetera, et cetera,
1672212	1672472	right?
1673012	1676252	Create, edit, inspect, render, verify, and export
1676252	1683392	Excel, SX, CSV, and TSV spreadsheets locally. Use spreadsheets when the durable output or target is
1683392	1689652	a spreadsheet, workbook, etc., etc. So this includes the skill, right? So you can think of package
1689652	1699012	as kind of an umbrella that includes a skill, but it also gives codecs an ability to connect
1699012	1704572	to external systems, right? It's kind of this higher level structure, okay? Whereas the skill
1704572	1707652	is a very, very specific thing.
1708072	1709792	It's a specific piece of instruction,
1709932	1711492	essentially a specific prompt.
1711712	1715652	A plugin is this umbrella that contains a skill, right?
1715692	1716612	So you can have that.
1716692	1719412	One plugin that I use all the time is Notion.
1719512	1720812	So if we click over here,
1720912	1723212	you can see that this actually includes
1723212	1724992	a lot more interesting things, right?
1725612	1728732	Notion workflows for specs, research, meetings,
1729272	1730992	and knowledge capture, right?
1730992	1732812	So you can specify this,
1733212	1734512	and then you can give it a prompt.
1734572	1739852	And if you scroll down, you can see that it includes the Notion app, the knowledge capture.
1740012	1740932	These are skills.
1741172	1742152	This is an app.
1742632	1746632	Okay, so this allows it to connect to an external system, right?
1746632	1752012	So if I click over here, I can manage this in ChatGPT as well because it's an external app.
1752252	1754592	And this right here, these are skills, right?
1754632	1758432	I can open that, and that's going to open this skill right here, right?
1758532	1761492	This is how the skill is actually stored.
1761492	1766552	And I can also turn it off or turn it on, depending on if I want that skill enabled or not.
1766632	1769212	Now, this is a plugin that I use all the time, right?
1769312	1777072	I use Notion for my planning, for, you know, writing stuff, scheduling, stuff like that.
1777112	1780372	It's the brain of my workflow, essentially.
1780712	1783872	And then I installed this pre-built Notion plugin.
1784612	1791392	And the first time I ran it, it authenticated against my Notion workspace, right?
1791392	1798132	connected to my Notion account. And from then on, I can simply say, hey, use this Notion spec to do
1798132	1805412	this or to do that, or edit this document, edit that document. And it's able to go out and edit
1805412	1812732	the right documents and essentially make Notion an extension of codecs. That's kind of the purpose
1812732	1819312	of a skill, to make something an extension of codecs. And that's the main idea with all of this.
1819312	1823092	Another really cool one is, for instance, Google Calendar is another one.
1823092	1827592	Instead of connecting to Notion, or in addition to connecting to Notion,
1827892	1829752	you can also connect to Google Calendar.
1829752	1831732	I personally do not use Google Calendar.
1831732	1834852	I use Notion, so I do not have this skill set up.
1835232	1839332	Another really useful skill that you're definitely going to be using
1839332	1841432	if you're building apps is Vercel.
1841432	1847412	Vercel or maybe something like Netlify for deploying your apps.
1847412	1855172	right? I use Vercel when demoing apps. And by having this package installed, it can figure out
1855172	1860692	how to deploy, how to check deployment, how to do everything without me needing to actually
1860692	1866292	understand how all of that works, without me needing to go to Vercel and read their docs and
1866292	1873012	understand how to deploy and all of that. I simply install this skill and then I click here and now
1873012	1879412	can say you know vercel ordered this repo for vercel deployment risk or vercel which vercel
1879412	1886772	tools will fit this app at best or vercel deployed this app right and if you scroll down you can see
1886772	1891812	that this has this app and then it has all of these skills all of these different skills look
1891812	1898292	at this it has a son a ton of skills vercel cli vercel agent all of these and obviously these
1898292	1905412	skills are not just for deploying, because we also have payments, we have best practices,
1905412	1913412	we have all of these other ones. These skills essentially map to different parts of our cell,
1913412	1918612	to different features of our cell. We're not just talking about deploying your app,
1918612	1924292	because this could be just a skill, deployment. This could be one skill that I may need. I may
1924292	1927412	not need all of these other skills, but why not?
1929012	1935092	out which skill it needs to consult, you know, according to the prompt that I give it. So it
1935092	1940012	doesn't, you know, it's not a big deal to have all of these enabled if I'm using Vercel. And like I
1940012	1946972	this allows me to basically bring Vercel into my Codex workflow. That's the beauty of these plugins.
1947372	1951892	And that's the same idea with all of these plugins. You're essentially bringing an external
1951892	1958592	system and letting Codex manage it for you. Now, automations work very, very differently.
1959252	1964972	So if you click on automations here, you can see that automations, they allow you to automate work
1964972	1967252	by setting up scheduled chats.
1967552	1969052	Okay, and you can learn more here.
1969252	1971112	Now, if you click on any of these automations,
1971232	1974052	you can see exactly how they're going to be working.
1974152	1975352	So if I click on something like
1975352	1978972	summarize yesterday's Git activity for standup,
1979452	1982272	you can see that it wants to create an automation for me.
1982392	1984912	Okay, and what exactly is it trying to do?
1984912	1988532	Well, it's essentially trying to create a conversation
1988532	1990812	that will be repeatable.
1991092	1992912	Okay, so it creates this automation.
1993092	1994332	This is the name of the automation.
1994972	2001092	right? This is the prompt. This right here is the prompt. And the prompt is summarize yesterday's
2001092	2006172	Git activity for standup, grounding rules, et cetera, et cetera. We can select a work tree.
2006172	2014152	We can select a project here. And then we can select the time where it's going to run over and
2014152	2020132	over again, right? So with this kind of automation, you may want to run it on weekdays at 9 a.m.
2020132	2027772	but you can also select it, make it hourly, daily, weekly, etc., etc. And you can also change the time,
2027972	2034032	obviously. Now, here you can change the model, and here you can change the reasoning level. Now,
2034092	2038592	with this kind of automation, you don't really need a high reasoning. Medium is going to be just
2038592	2043732	fine. And after you're done, you can simply click create, and now you're going to have an automation
2043732	2049552	that will run every weekday at 9 a.m. running this prompt.
2049692	2051552	And remember, this is a special prompt.
2051732	2054352	Here, you're asking it to consult Git activity.
2054812	2061652	And so the idea is you may have Git connected via a plugin or something else,
2062072	2064752	and it's going to connect to your Git environment
2064752	2066972	and then figure something out for you.
2066992	2070052	And that's going to run every weekday at 9 a.m., right?
2070052	2078232	So instead of you needing to jump into Codex first thing weekday morning and execute this
2078232	2082112	prompt manually, you can create an automation to do just that.
2082192	2084512	If you scroll down, you can see some other automations here.
2084732	2087852	You have incidents, you have code quality, right?
2087932	2092212	Maybe you want to run a code quality check every 24 hours.
2092352	2095692	Well, you can click here daily at 9 a.m., right?
2095692	2104332	scan recent commits since the last run or last 24 hours for likely bugs and propose minimal fixes.
2104672	2112892	That's another very, very useful automation. Repo maintenance. You have here growth and
2112892	2120332	exploration. Click here. From recent PRs and reviews suggest next skills to deepen. This is
2120332	2125852	great, right? So automations, they could be used for pretty much anything, right? And they are,
2125992	2129512	you know, it doesn't really matter what kind of niche you're in. You don't need to be in software
2129512	2135332	development or project management or anything like that. You can be a writer, right? You want
2135332	2139812	a status. You're writing maybe a thousand words every day. You know, you can have an automation
2139812	2146372	that checks for spelling, grammar errors that you may have done, and then it may suggest some fixes
2146372	2150672	this. And also another automation that gives you more ideas, you know, to break through writer's
2150672	2158672	block. And that can run every morning at 9 or 10 a.m. Okay. And so automations are very, very useful
2158672	2165712	if you need some kind of a repeatable structure in your workflow. And I want to talk a little bit
2165712	2173812	about MCP. So MCP or model context protocol is very, very important. Okay. So if you press
2173812	2178692	command comma or you go into settings over here, you're going to be on this screen. And if you
2178692	2185472	choose MCP servers, you're going to see all your MCP servers that you have here configured. And you
2185472	2192072	can also see whether they're enabled or not. Now, an MCP server is basically a server. It's a remote
2192072	2198632	system that your codex instance can connect to. So as you can see, I have a bunch of MCP servers here
2198632	2200732	that do all kinds of interesting things.
2200832	2204572	For instance, I have here a Stitch MCP server configured.
2205012	2207472	I have here a Superbase MCP server.
2208032	2211272	I also have, you know, Flutter Flow Designer, Flowbase,
2211372	2214612	a bunch of apps that support MCP.
2215012	2216752	And when you connect to them,
2216992	2219732	Codex is acting like an MCP client.
2219732	2223092	So you have that same client-server paradigm.
2223452	2225672	Now, why would you want to use an MCP server
2225672	2228692	to connect to something like Superbase or something else?
2229092	2231052	Well, the reason is very simple.
2231612	2235172	You want Codex to do all the administration,
2235432	2237152	all the work for you, right?
2237232	2240612	So if you're building an app using something like Superbase,
2240672	2243552	and we're gonna touch upon that a little bit later
2243552	2247412	in the video, you can set up Superbase yourself.
2247572	2248752	You can configure all of that.
2248812	2251312	That takes time, but it's very, very doable.
2251312	2258152	or you can simply configure a Superbase MCP server in your Codex instance.
2258772	2267032	And that will allow Codex to use that MCP server to essentially manage this remote server,
2267312	2269732	this tool, this app for you.
2270152	2272832	And as you're going to see a little bit later in this tutorial,
2273072	2277512	this is very, very helpful to us because it saves a lot of time
2277672	2281172	and it enables things that we couldn't really do before.
2281312	2289272	because now Codex understands one piece, and via MCP, it can get more context and create a much
2289272	2295872	more robust app for you, or a tool for you, or anything else, a system, if you will, because now
2295872	2301452	it can connect to other remote systems and essentially consult that data with the data we
2301452	2308192	already have, such as the code or things it has been working on, and figure out a unified solution.
2308192	2310752	And this is extremely helpful to us, okay?
2311192	2313952	And so there's a couple of ways that you can add a server.
2314092	2316592	You can click here and you can fill all of this manually.
2317152	2322632	Or you can simply tell Codex, set up and activate a Superbase MCP server.
2322692	2324212	And it's going to figure out how to do that.
2324252	2325272	It's going to search for it.
2325312	2326612	It's going to figure out the specs.
2327072	2328572	And it's going to set it up for you.
2328592	2330472	And the same thing for all of these other ones.
2330732	2334892	Now, after setting up the MCP server, you can simply tell Codex to use it.
2334892	2345472	So I can say something like, use the Superbase MCP server to query data or check how many tables we have or pretty much anything else.
2345472	2352952	And it's going to go ahead and connect to your Superbase instance in this example via the configured MCP server.
2354555	2360335	server. Now that we have laid the foundation and before we start building the real app,
2360855	2367155	let's talk about the ideal codex workflow. What is the best way to approach it? Before we begin
2367155	2372295	building our app, you want to establish the workflow that you're going to use again and again.
2372875	2381375	The loop is simple. Inspect, plan, edit, verify, and report. That sounds basic, but it is the
2381375	2388355	difference between using Codex as a random code generator and using Codex as a controlled build
2388355	2395915	partner. The mistake a lot of people make is that they jump straight to build this app or fix this
2395915	2402875	problem without giving the agent a clean process. That can work for small tasks,
2402875	2409355	but it breaks down quickly on real projects. For a serious build, you want Codex to understand the
2409355	2418315	repo first, explain the plan, make a focus change, verify the result, and then report back in a way
2418315	2425195	that you can review. A good Codex prompt is not just a request, it is a small project brief.
2425195	2431115	The better the prompt is, the easier it is for Codex to understand the current state,
2431115	2437035	choose the right amount of work, and verify the result. The basic structure is simple.
2437035	2445435	Explain the goal, give the relevant context, define what should change, define what should not change,
2445435	2451115	and tell Codex how to verify the work. If the task is risky or unclear,
2451115	2458155	ask Codex to inspect first and make a plan before editing. For instance, instead of saying
2458155	2465995	build the app, I would say inspect the project first, do not edit yet, identify the existing
2465995	2473035	structure, propose the smallest first version, list the files you expect to touch, and explain
2473035	2480715	how you will verify. That gives Codex a much cleaner job. For implementation prompts, I want
2480715	2488315	the request to be specific enough that Codex can act, but not so over-specify that I accidentally
2488315	2495435	force the wrong solution. I usually describe the outcome I want, the constraints I care about,
2495435	2502235	and the checks that need to pass. Then Codex can use the actual project context to choose the
2502235	2508075	cleanest path. As part of this workflow, I want to introduce you to one of the most important Codex
2508075	2516975	features. Plan mode. Plan mode is a superpower that I use for 80 to 90% of my prompts. There are
2516975	2524375	two main benefits to using the plan mode. First, it's a form of brainstorming where the model
2524375	2531535	cannot change or alter your files. Second, it's a way for the model to clarify your requests
2531535	2538055	by asking follow-up questions. This is especially useful when the request is under specified.
2538075	2543875	If I say build the booking flow, there are a lot of hidden decisions inside that request.
2544495	2546295	What fields does the form need?
2546755	2549095	What status should the booking start with?
2549515	2552195	Where should the booking appear for the helper?
2552795	2555295	What should happen after submission?
2555655	2562375	Plan mode gives Codex a chance to surface those questions before it edits the app.
2562495	2565195	I also use plan mode as a quality filter.
2565195	2573655	If the plan is vague, too large, or misses something important, I know the implementation will probably be messy.
2573855	2582335	If the plan is specific, scope, and easy to verify, then the actual coding step becomes much safer.
2582575	2588275	So you want to use plan mode initially while brainstorming, and also as you enhance your app,
2588275	2594975	because it gives the model a chance to ask follow-up questions to ensure there's no misunderstanding.
2595535	2600935	Now, if you're working with an existing repo, the first step should always be to inspect.
2601595	2609415	Codex should understand the files, the app structure, the current state, and the goal before changing anything.
2609775	2614295	Then it should plan the work in a way that is small enough to review,
2614295	2621255	Only then, once Codex is fully in sync with your goals, should it make the actual edits
2621255	2622615	and write code.
2622615	2627975	Once the code is written, it should verify the code with the browser, terminal, using
2627975	2630255	tests or the build output.
2630255	2636595	And finally, it should report what changed and what still needs attention.
2636595	2638635	Verification is the part I want to emphasize.
2638635	2643435	A task is not finished just because Codex wrote code.
2643435	2646255	For UI work, I want to see the browser.
2646255	2652595	For backend work, I want to see the function call, the dashboard row, or the test results.
2652595	2658315	For deployment work, I want the live URL and a real smoke test.
2658315	2663775	That habit keeps the workflow grounded in evidence instead of trusting that the code
2663775	2665675	is probably fine.
2665675	2670915	Additionally, you always want to break big tasks into smaller ones.
2670915	2676155	Instead of asking Codex to build the whole marketplace as one prompt, you want to ask
2676155	2683575	it to plan the app, build the first UI shell, wire one initial database-backed version,
2683575	2688155	add the booking flow, add the helper dashboard, and so on.
2688155	2693675	Each step has a clear target and a clear way to check whether it worked.
2693675	2698915	A good Codex task should usually fit into one reviewable outcome.
2698915	2702975	Create the first static marketplace homepage is reviewable.
2702975	2707975	Wire service listings from Convex is reviewable.
2707975	2713295	Add booking creation and verify the booking row appears is reviewable.
2713295	2719475	Build the whole app is not reviewable because there are too many decisions happening at
2719475	2720475	once.
2720475	2723775	So the workflow is not just a technical process.
2723775	2726995	It is also a way to stay in control.
2726995	2733435	We let Codex do meaningful work, but we keep the work divided into chunks where we can
2733435	2740215	understand the change, approve the direction, and catch problems before they spread.
2740215	2745355	And so here I am back in Codex, and you can enable plan mode by pressing Shift-Tab, and
2745355	2746855	here you have plan mode.
2746855	2749415	Or you can click here and toggle this.
2749415	2754015	I typically just use Shift-Tab because it's a lot easier and it's a lot faster.
2754015	2757675	And then whenever I'm in plan mode, I can start brainstorming.
2757675	2763315	And not only that, it's useful because Codex will not make changes whenever it's in plan
2763315	2764315	mode.
2764315	2769255	And it also gives Codex to come back to you with follow-up, clarifying questions.
2769255	2775615	And I find that super, super helpful because we always want to make sure that Codex knows
2775615	2778835	exactly what it's doing.
2778835	2783495	The last thing that we want is for Codex to assume something.
2783495	2785495	We never wanted to assume anything.
2785495	2788915	We always want to make sure that we are on the same page.
2788915	2793655	And so let's say I have a convo here going and I want to build an architecture.
2793655	2797935	I want to build some kind of an intricate architecture.
2797935	2801615	And I want to make sure that we built out an architecture.
2801615	2807155	I may not know exactly how far I want to go, exactly all the details, but I want to make
2807155	2809895	sure that Codex is on the same page.
2809895	2822475	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.
2822595	2825435	Ensure it is fast and robust.
2826495	2833155	I'm here in plan mode, and typically with this kind of prompt, it's not clear what I want.
2833275	2834555	I don't even know what I want.
2834675	2840075	I want Codex to figure it out, but I want Codex to come back to me and confirm with me. And so,
2840175	2844815	if we execute this prompt, hopefully it's going to ask me some follow-up questions. Let's see.
2844815	2851515	And so as expected, Codex came back with a question, which cross-platform strategy should
2851515	2857275	the architecture optimize for? And there are two questions, okay? Do we want shared core native
2857275	2863295	shells? And you can click here and you can get a little detail. Use shared TypeScript domain logic
2863295	2870395	with separate Expo mobile, et cetera. Do we want a one universal app or do we want web-first
2870395	2877035	wrappers, right? Because I asked for a cross-platform product, but there's many ways of
2877035	2882555	doing it, and there's many trade-offs with each approach. And so it came back to me,
2882715	2888835	and it wants to clarify one universal app, this or that. So I'm going to say this one. I'm going to
2888835	2894455	go with recommended. And now it wants to know what should the app support for data and reliability.
2894455	2901355	offline first cloud sync cloud only real time or local only and you can click and you can hover
2901355	2908375	over the little i to get more details users can work can work offline then sync across devices
2908375	2914255	cloud only simpler shared back and with live updates but weaker offline behavior now here
2914255	2920435	you can also tell codex something else you can say well i want this this this this right or you
2920435	2925975	can press escape and you can ask Codex to explain the question. I can say something like this,
2926335	2933255	explain the last question in simple terms. Okay. I don't need to answer it right away. I can get
2933255	2937915	Codex to kind of walk me through it. Right. Explain the last question. Let's see what it says.
2937915	2945275	I was asking two choices. How should data work? My recommendation, shared code and native shells
2945275	2950715	plus offline first cloud sync if you want this to become a serious app so it tells you these things
2950715	2957515	and so you don't need to pick it pick a choice or tell it something else you can close that and you
2957515	2965195	can ask codex to clarify and now what we can do is ask me those questions again you can do that
2965195	2968875	or you can simply answer it here it doesn't matter so if you do that it's going to come back with
2968875	2973595	that questionnaire again and here are the questions i'm going to say this and now i want to say this
2973595	2977075	because I understood what it was asking me.
2977175	2977755	Got it.
2977815	2978955	Your choices are,
2979075	2981035	that means the architecture should prioritize
2981035	2983435	a shared TypeScript app,
2983555	2985795	a brain used by this, this, this, this.
2985935	2986475	And that's good.
2986535	2988255	And now I can exit the plan mode
2988255	2989955	and I can say, go ahead and do it.
2990115	2991555	Go and implement this.
2991755	2993735	Something like this or something more specific.
2993955	2996975	And so plan mode is something that I use all the time.
2997215	3000055	And you should definitely make it an integral part
3000055	3002375	of your workflow as well.
3003595	3008715	Now I want to talk to you about some advanced Codex workflow techniques.
3008715	3013155	These are the little tips and tricks that I use all the time and will greatly help you when using
3013155	3019295	Codex to build apps and solve problems. One thing I do all the time is asking Codex to create a
3019295	3025175	handoff before I start a new thread. This is useful when a thread has gotten long, when the context
3025175	3030395	has been compacted, or when I want to move from planning into implementation with a cleaner
3030395	3036775	workspace. A good handoff is not a vague summary. I want the current state, the files that changed,
3036875	3043695	the commands that were run, what still needs to happen, and any risks or open decisions. That way,
3043775	3049675	the next codex thread can pick up the work without rereading the entire conversation or repeating
3049675	3055995	mistakes. There are two main reasons that you may want to do that. The first reason is that after a
3055995	3063135	while, this conversation here, it starts to degrade. As you keep typing new prompts and as the model
3063135	3070755	answers, the convo starts to degrade. Now, Codex tells you that it automatically compacts its
3070755	3077775	context. And that is true. You do not need to start a new convo every time. It does automatically
3077775	3084395	compact it. But you're going to notice that as your conversations get long and you keep asking
3084395	3090455	questions and it keeps answering, quality of the responses will degrade. And moreover, you know,
3090535	3095675	your conversation is going to get fairly long and that might, you know, degrade the performance of
3095675	3102255	the app itself. And that right there is a good use case to create a brand new convo using the
3102255	3108455	handoff as the starting point. Another really, really good reason to create a new convo with a
3108455	3114615	handle is when you're trying to solve a problem, but the model is not getting you the solution that
3114615	3119115	you want. And so if you're trying to solve a particular problem and you've prompted the model
3119115	3124175	a couple of ways and it's trying, it's giving you answers, but those answers are not ideal.
3124395	3129075	It doesn't give you the right algorithm. It doesn't give you the right solution. There is a high chance
3129075	3134095	that each additional prompt is not going to get you closer to a solution. So when you experience
3134095	3138895	something like that, the best thing that you can do would be starting over by creating a new
3138895	3144915	conversation and giving the model a handoff with the things that it has done and the things that
3144915	3150415	are not working and where you are right now and selling the model as part of that handoff prompt
3150415	3156855	to work on a different solution. And because AI can be fairly random in some ways, creating a new
3156855	3161975	conversation usually gives you a different solution. That solution might actually work.
3161975	3168975	Now, there are various ways to create this handoff prompt that's going to give you a handoff for a new conversation.
3169275	3173435	One of the simplest ways would be by typing something like this.
3173515	3179835	Okay, this is a very, very simple prompt that still delivers a fairly high quality handoff.
3180015	3186535	Okay, so you can type create a detailed handoff prompt that I can use for a new Codex Convo.
3186775	3191795	Okay, so let's go ahead and send this and see what answer we get.
3191795	3197835	And this is the response we got. I want to design a fast, robust, cross-platform project management
3197835	3202755	app. So it's essentially summarizing everything that has happened in the convo, right? This is
3202755	3207875	the context. This is the product direction. This is the architecture preference. Please produce a
3207875	3213315	detailed architecture plan covering all this important, right? Also some constraints. And so
3213315	3218975	what you can do is you can copy that and then you can go ahead and create a brand new convo. For
3218975	3224255	instance, you can click here and you can simply paste it. Okay, well, you want to delete that,
3224355	3229375	you want to delete like the top, you want to delete that. And when you paste it, that's going
3229375	3235475	to create a conversation and the model can simply continue where the other conversation ended. That
3235475	3242455	is one way to do it. Another way to do it is by giving it a more detailed handoff prompt. So let's
3242455	3247995	go back here and let's go ahead and give it a slightly different prompt. Create a clean handle
3247995	3254515	for a new codex thread. Include all of this. Do not make any changes. So this prompt is slightly
3254515	3259555	more detailed, and you can bet that it's going to give you a higher quality handoff. Okay, so let's
3259555	3266215	go ahead and run this, and then we can compare the two handoffs and see which one is more detailed.
3266535	3273175	Now take a look at this handoff right here. Look at how much more detail this handoff versus this
3273175	3278395	handoff right here. Now, this handoff would definitely work, but this handoff would work
3278395	3283495	even better. It's going to result in a higher quality conversation. Okay, so given an option,
3283715	3289455	you can certainly use a prompt such as this, but it's a lot better to use something like this
3289455	3294035	that's more detailed and it's going to save you a lot of time in the long run.
3295544	3300424	save you a lot of time in the long run. The next practical habit is using Git as a
3300424	3305764	checkpoint system. Before I let Codex do meaningful work, I want to know whether the current state
3305764	3312644	is clean. After each milestone, I want a diff that is small enough to review and explain. That is what
3312644	3319444	keeps an agentic workflow from turning into one giant mystery edit. The useful trick is to make
3319444	3325204	Codex summarize the diff in plain English. I do not only want to know what files change, I want to
3325204	3331124	know why they changed, whether each change belongs to the task, and whether anything looks unrelated
3331124	3338104	before I accept it or move on. So when you are working in Codex, you do not want to be just
3338104	3345004	creating edits without recording what the edit is all about. And in software development, you want
3345004	3352304	to be using a source control system such as Git. We have here a convo where we were building an app
3352304	3359524	and in this particular instance, we did not use Git. And so I do not know, I have no way to check
3359524	3366344	which changes were made where. I have no way to revert the changes. I have no way to see what the
3366344	3373504	actual change represents. And if working in bigger teams, I do not know who was the person responsible
3373504	3378624	for the change. Now, in this convo, we have another problem. The current working directory
3378624	3384304	is missing. So in this case, what we can do is we can take a handoff prompt and we can create a
3384304	3391084	brand new project, insert that handoff prompt, start a new convo, and then enable git and set
3391084	3395444	up so that we have git control. So I'm going to go over here. I'm just going to do start from scratch.
3395504	3401444	I'm going to paste this handoff prompt to start a brand new convo. And I'm going to preface it
3401444	3410444	by selling it to create a git repository. Create a git repo if it doesn't exist and do an initial
3410444	3416964	commit with the code. So I'm going to run that. And the idea is we are going to initialize git
3416964	3423004	if needed and then commit the current code as is. All right. So what it did was it initialized a git
3423004	3429484	repo in this directory and made an initial commit, initial architecture plan here. Okay. The workspace
3429484	3434404	was empty when inspected. There was nothing there. We just created a brand new project and it
3434404	3440044	essentially created an architecture. And so at this point we have here a git repo, which means that
3440044	3445404	each additional change will be automatically tracked. So for instance, I can say something like
3445404	3453964	make the smallest possible change a route that displays hello world. Okay, let's go ahead and run
3453964	3459724	that. So it now created this index.html. We're going to open it and it says hello world. And so
3459724	3467544	now what we can do is we can say check the git status. And obviously this file is not going to
3467544	3473804	be in our Git, right? You see, this is not tracked, an untracked file. And so what we want is we want
3473804	3481064	to commit index.html as initial commit, because in Git, you can have files that are tracked and also
3481064	3485564	files that are not tracked. The files that are not tracked are the files you don't really care about,
3485624	3491964	right? You don't really need to store them in Git. These could be like media files or generated files,
3491964	3497784	code generated files that can always be regenerated. But for your actual code, you always
3497784	3503524	want to be tracking them, right? So we have this commit, and now this file is going to be tracked,
3503664	3508924	and it's going to be committed as well. Okay, so now it says committed as initial commit, right?
3508984	3515064	We have this, it's now on main, which is a type of branch. And so now we go into changes, you can see
3515064	3520024	that we can select the branch here. And as you can see here, it says no file changes yet. And that is
3520024	3526684	because we have not made any changes since tracking that file. So what I'm going to do now is that make
3526684	3533764	index.html output hello, James. That has updated. And now it says hello, James. And now what we can
3533764	3540564	do is we can commit it. Commit index.html. And now if you type give me git status, it's going to tell
3540564	3546104	you that it hasn't been committed, right? It's modified. It's tracked, but it hasn't been committed.
3546104	3548664	Okay, it has been modified and uncommitted, right?
3549124	3551544	You see this M, which means this has been modified.
3551724	3555024	So we're going to do commit index.html.
3555304	3558764	And it will also generate a default message.
3558964	3560164	Here it has committed it.
3560324	3562604	We can click here and we can select review.
3562964	3566584	And you can select the type of change you want to see.
3566664	3570524	You can see on stage, stage, branch, or last turn.
3570764	3574504	And when you click on last turn, you can see what was changed.
3574504	3580024	because we are using source control. We can see the stuff that was changed. As you can see,
3580504	3586124	this is the one line that was changed. Red means it was deleted, and green means it was inserted.
3586384	3590904	So this was deleted, and this was inserted. We basically changed the message that it says from
3590904	3598004	hello world to hello James. And so Git is very, very important. If you're working on any kind of
3598004	3603924	project, anything beyond something super simple, you want to create a repo, and you want to
3603924	3612724	implement source control into your workflow. One advanced trick that becomes more useful
3612724	3619064	as projects get bigger is working with Git worktrees. A worktree is a separate working copy
3619064	3625064	of the same repo connected to a different branch. The practical benefit is that you can keep one
3625064	3631904	version of the app stable while trying a risky feature, UI direction, or refactor somewhere else.
3631904	3634104	This matters a lot with agentic coding.
3634504	3639684	If you want to try two approaches in parallel or keep a clean version ready for recording
3639684	3645024	while another codex thread keeps building, a worktree gives you that separation.
3645384	3649964	Now, what's nice about worktrees is that they give you parallelism.
3650204	3654964	So if you are working on multiple features in your app, maybe you're using subagents
3654964	3662704	or something else, it's important that no two processes work on the same file at the same time
3662704	3668104	because that's going to create corruption. And so what you typically end up doing is you create a
3668104	3674004	work tree for a specific feature and you work on that work tree. And when you're done, you merge
3674004	3679844	the changes back onto your main tree. Now, that doesn't mean you can only create one work tree.
3679844	3690544	You can create multiple work trees, as many as you want, and you can also work on the same feature because after one work tree is done, it's going to merge to main.
3690944	3693884	And if there's a conflict, it's going to resolve that conflict.
3694044	3702024	And then another work tree, when it is done, it's going to also merge into your main branch where your development is happening.
3702164	3709244	And if there's a conflict because they ended up working on the same feature, it will also resolve that conflict so that there's no corruption.
3709244	3712484	Now, this is a feature I use all the time in big projects.
3712724	3715104	Now, let's say I'm working on this app over here.
3715204	3719764	You can ask Codex to work in main without creating any work trees.
3719964	3724664	Or I can ask it to create a new work tree while it makes changes.
3724904	3727084	So let's continue what we were doing.
3727204	3731684	So let's say I want to change this index.html, and I wanted to say something else.
3731764	3737584	So I'm going to go ahead and tell it, make index.html output hello planet.
3737584	3741504	But this time, we want to make sure that it works in a different work tree.
3741824	3747764	So what I'm going to do is I'm going to say work in a new work tree and then merge cleanup
3747764	3749064	after you're done.
3749344	3751464	Okay, so we're going to go ahead and run this.
3751684	3755344	And now it's not going to modify the file on our main branch.
3755544	3760884	It's going to branch out, do the work, and then come back and merge the changes back
3760884	3761064	in.
3761204	3764064	And so as you can see here, there's more stuff happening.
3764064	3767384	I'll make this in a separate Git work tree, commit there,
3767604	3769824	fast forward merge changes to main,
3769924	3772164	and then remove the work tree and delete the branch.
3772464	3775544	And that's exactly what it did, except it did it very, very...
3776804	3784024	you know, a very small change. But you saw it doing all that. And before you know it, it did all that,
3784264	3789444	made the change, merged everything back, and deleted the worktree. And so that was a very,
3789444	3795484	very small change. Now, another thing that you can do is you can click here and you can fork this
3795484	3802364	whole convo in a separate work tree, right? So if I click over here, that will fork it into a separate
3802364	3808204	work tree. And here you can see we're working in a separate work tree here, okay? So now as we're
3808204	3814504	doing work, we need to constantly tell Codex, hey, you know, create a new work tree, clean up,
3814504	3815744	and do all this when you're done.
3815904	3818924	We can continue working and then merge our changes.
3819204	3821124	So for instance, I can say something like
3821124	3823164	to say hello USA.
3823604	3824564	I can simply do that.
3824684	3826844	I don't need to tell it to work in a separate work tree
3826844	3829144	because we are isolated here.
3829244	3830404	Okay, so here's the file.
3830524	3831344	We can open it.
3831464	3832584	Hello USA here.
3832684	3833404	And so at this point,
3833404	3835884	we have merged the work tree change into main
3835884	3838304	and cleaned up the temporary work tree, right?
3838404	3839984	Index now displays hello USA
3839984	3842844	and we no longer have this temporary work tree.
3842844	3847244	We've done everything that we needed to do separate from the main branch, and then we merged.
3847404	3852964	And as far as we are concerned, this convo is now finished because it's tied to the old work tree,
3853104	3855264	but we've did everything we needed to do.
3855404	3856844	We've updated the files.
3856944	3858624	We've merged back into main.
3858944	3862724	And so now we can start a brand new convo to work on a different feature.
3862824	3866024	And so this is really nice for feature isolation.
3866284	3869604	Create a new work tree, work there, merge back into main,
3869604	3873524	and then simply click here to archive this conversation.
3876404	3882724	Another advanced trick is using sub-agents for parallel work. The idea is not to throw a whole
3882724	3887924	project at a bunch of agents and hope it works. The useful version is much more controlled.
3887924	3893524	One agent explores the codebase, another works on a clearly bounded part of the UI,
3893524	3899044	another checks tests or reviews the results. The key is ownership. If you use sub-agents,
3899044	3904404	You want each one to have a specific job, clear file area, and a clear output.
3904564	3909084	That keeps the work parallel without turning it into a merge mess.
3909404	3914484	Sub-agents are best when the tasks are independent enough to run side by side,
3914724	3917844	but still simple enough to integrate at the end.
3917924	3923644	Now, sub-agents is another really cool feature that will help speed up your workflows.
3923644	3932344	And this is something that I use all the time, especially in big repos, in big code bases to do multiple tasks in parallel.
3932624	3932804	All right.
3932844	3935984	So here I have a very, very simple Kanban app.
3936224	3938344	If I click over here, I have this.
3938524	3939704	I can drag and drop.
3939824	3942004	I can create new tasks, et cetera, et cetera.
3942244	3949384	And so what I want to know is if I'm going to be building more and more features, complex stuff, new functionality,
3949384	3953504	I want to use subagents to help me kind of make sense of it.
3953504	3958604	and help me build it in the most efficient way possible. And so I'm going to paste this prompt
3958604	3964084	here, plan how to split this feature across subagents, right? Do not edit files yet, recommend.
3964444	3970684	We're going to jump into plan mode, preface this with the feature, add two party apps such as
3970684	3976684	make.com, Zapier, et cetera. And so I'm going to leave it at this, and I'm going to go ahead and
3976684	3981684	run this. And so let's go ahead and run this. And here we have the plan. The safest split
3981684	3986724	is for the main thread to own architecture, shared data contracts. Subagents can work on
3986724	3994364	isolated feature areas inside index.html, but they must not all edit the same broad sections at once.
3994624	3999564	Okay, so we have main thread responsibilities, and then we have subagent delegation,
3999764	4005744	integration settings, integration data model, webhook event dispatcher. So I'm going to copy
4005744	4010924	this plan, and then I'm going to preface it by telling it spawn subagents right away to help
4010924	4015984	design the third-party API functionality. Let's go ahead and run this. Right away, it's telling me
4015984	4021864	I'll spawn the four focused subagents and keep the main thread responsible for the final. So as you
4021864	4026984	can see, it's spawning them. And each subagent gets a prompt. It's basically like me creating
4026984	4031804	a new conversation. You're a subagent one, integration. You're a subagent two, integration
4031804	4037004	data model. You're a subagent three. And they're working independently. And here it tells you all
4037004	4042244	four sub-agents are running. While they work, I'll inspect the current partial edit. And you can see
4042244	4047144	these background agents here. Okay, so they're working in parallel. They're working on their own
4047144	4051864	thing. They own different pieces of the app. And they're kind of working. And when they're done,
4051944	4057524	they come back to this main agent, right, this convo here, and tell it what happened, right?
4057524	4062184	They come back with a result. And so now it says the persistent sub-agent returned a cleaner data
4062184	4067264	shape. And here you can actually click on any one of these and see what's happening. You can click
4067264	4072364	here. You can come back. You can click on this one and see what it's doing. So this one is finished.
4072564	4077564	Some are finished. How about this one? This one is also finished. And so that's how it works. And
4077564	4082244	when they finish, they come back and then it decides what to do later. Maybe it's going to
4082244	4086484	respawn them. Maybe it's going to spawn something else. Maybe it's done. They did what they needed
4086484	4092044	to do. They finished their isolated task and their services are no longer needed. And again,
4092044	4097464	sub-agents is something that I use all the time. I use it all the time, especially in big repos,
4097604	4104464	because they help speed up the work by isolating different areas, different responsibility clusters
4104464	4108224	to different agents. And that's a huge productivity boost.
4110924	4116844	Now, in this section, we're going to bring all of the previous sections together by giving Codex
4116844	4123624	project instructions in an agents.md file. This is where you can write down the rules you want
4123624	4130024	Codex to follow every time it works in a specific repo. Which commands to run, which folders matter,
4130244	4137044	which patterns to preserve, how to verify changes, and when to use work trees for subagents. This is
4137044	4142644	useful because you do not want to repeat the same project rules in every prompt. If this project
4142644	4149484	should always run a specific check, use a specific design system, avoid certain files, create work
4149484	4156084	trees for risky experiments, or split large tasks into sub-agents, those instructions belong in
4156084	4163984	agents.md. It turns your preferences into reusable project context. And here's a prompt that you can
4163984	4170544	use which is going to draft agents.md for this project. Do not write the file yet. Include the
4170544	4175484	project purpose, the main folders, work tree, subagents, stuff like that. So we're going to
4175484	4181904	jump into plan mode. We're going to go ahead and run that. And here's the draft for this agents.md
4181904	4188464	tailored to the current project, right? Project purpose, main folders, verification steps after
4188464	4195064	changes. Serve the app locally, coding and design patterns to preserve. When codecs should use a
4195064	4200944	work tree. Use a separate work tree when these happen. When codecs should use subagents. Use
4200944	4206644	subagents when work can be split into clearly separate ownership areas such as these. What
4206644	4211884	codecs should avoid changing without asking? All of this. Now, the beautiful thing about this
4211884	4220504	agents.md file is that you no longer have to worry about asking codecs to spawn subagents
4220504	4226744	or create separate work trees, it will be automatic. It's like saving you from typing
4226744	4232564	those prompts every single time. So if you want to add a feature, well, you don't need to tell it,
4232644	4237824	hey, create a new work tree or make sure you spawn sub-agents. It's going to be automatic.
4238104	4244584	And so at this point, you want to review this proposal here and you want to save this as agents.md.
4244584	4247444	So I'm going to say save it as agents.
4247664	4250344	So now it's saved it as agents.md.
4250464	4254224	You can click here and you can see the whole file right here.
4254384	4255544	And this file will...
4255544	4261984	will be used only for this specific project. They're based on a repo. So now for my next prompt,
4262084	4268424	if it's a simple change, it's not going to create a work tree probably. And it will also not spawn
4268424	4274184	subagents. But if it's a more complex change, it should probably create a work tree and maybe even
4274184	4279384	spawn subagents. So let's go ahead and see if this works. So now let's go ahead and ask it,
4279384	4289304	make a simple change that changes the title for the main index.html to Awesome Kanban app.
4289544	4294784	Okay, I'm going to go ahead and run it directly. So now the title is Awesome Kanban app. Okay,
4294784	4314684	But if we ask it something more complex, right, 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 subagents to figure it out and implement the changes in its own work tree.
4314684	4322064	So let's see if this works. Add a robust API functionality for handling outgoing API calls
4322064	4327924	and incoming webhooks. Okay, I'm going to jump into plan mode to see if it has any questions for
4327924	4334104	me. See how it says agents.md explicitly says not to add a backend or proxy without asking.
4334424	4339884	Okay, so it did consult this. So we're going to add a backend. We're going to create tasks.
4339884	4346304	And let's see if it's going to create a work tree automatically and maybe even use subagents.
4346544	4350984	Another question, should the new backend become the source of truth for Kanban tasks?
4351204	4355784	Yes. Let's just go with recommended. Okay. We're going to expand this plan and we're going to see
4355784	4363184	if it's going to be using a work tree or subagents for any of these things. Okay. So I do not see
4363184	4368864	it's going to be using subagents. Update. So before we run it, let's ask it, do you plan
4368864	4374844	on using a work tree for sub-agents for this task. There you go. Yes, for implementation,
4375244	4381024	I'd use a work tree because this changes the project from a static-only app into a node
4381024	4386844	server app with API routes and persistent states. I'd also use sub-agents, but only for bounded
4386844	4391644	design review tasks. And so it's telling you right there that it will be using a work tree,
4391644	4396584	and it will be using sub-agents. And you can bet that this would never happen if we didn't
4396584	4403624	have this agents.md file. And so agents.md is super important. It's going to save you a lot of time
4403624	4410184	because it basically codifies repeatable tasks. So you never have to re-prompt the same thing
4410184	4418264	over and over again. Now, before we build real apps, there is one security habit you want to
4418264	4423144	establish early. Codex can help inspect configuration, but we should be careful with
4423144	4428984	secrets. An environment variable might be safe and public, like a front-end URL, or it might be
4428984	4435524	private, like an API key or deploy token. These should not be casually pasted into a prompt or
4435524	4441664	committed into the repo. The other important thing is that local config and deployment config are not
4441664	4447924	the same thing. A local.n file helps the app run on my machine, but Vercel does not automatically
4447924	4453804	copy that file into production. For a deployed app, the required variables need to exist in the
4453804	4459644	deployment environment too. So the right workflow is to ask codecs to identify what variables are
4459644	4466204	needed, classify them as public or private, and then advise you where each one needs to be configured.
4466444	4472644	Now let's say we're building on this app and we are adding external services. So one of those
4472644	4478344	services might be something like OpenAI, or another service could be OpenRouter. Well,
4478724	4484004	every time we connect to external services, we need to connect them using an API key,
4484204	4490444	and those API keys are needed for those services to track how much usage we have so that they can
4490444	4496564	bill us accordingly. And so in your app, you need to be storing those API keys because when you're
4496564	4501504	going to be making those requests, regardless whether that's an API token or some kind of
4501504	4506524	deployment token or pretty much anything else, you need to be very, very careful how you are
4506524	4513064	storing them. And so in this app, let's say we want to use OpenAI here. So I'm going to say
4513064	4521944	API stack and use the following key. And let's say we give it a sample API key. Sample API key
4521944	4527824	as a sample. We're going to jump into plan mode. We're going to select this API stack only. We're
4527824	4533344	going to be doing native fetch. All right, so it went ahead and created our first API stack here.
4533524	4538864	And right here, it mentions this file where it stores this key. And so if you want to use a real
4538864	4543984	key, you never want to paste it in chat. What you want to do is you want to open this file and modify
4543984	4547964	it directly. So that's what we're going to do. We're going to open this in the editor here,
4548144	4552844	and I'm going to paste this key right here. And this right here is my actual key. And so now
4552844	4560964	I have an open AI, I have an API stack, and I have a real key in this file here, okay? And now what I
4560964	4567664	need to do is I need to run a check and ensure that we are storing the keys the right way, and, you
4567664	4572124	know, they're going to be deployed correctly and all that. And so I have this prompt to do just that,
4572184	4576624	and it says here, inspect this project for environment variables and deployment config. Do
4576624	4581164	not print secret values, and then tell me all of these things. So we're going to run this. So now
4581164	4586664	it's telling us that environment inspection, required environment variables, required only
4586664	4592124	for post, open API front-end variables, right? We don't have any public because, you know, sometimes
4592124	4597144	your app can have both private keys and public keys, right? So if you're using something like
4597144	4603144	Superbase, Superbase has an Anon key or a secret key, or they call it something else now. And the
4603144	4608864	idea is the public key can be made available, but it has very, very strict permissions. Whereas
4608864	4615024	something like your OpenAI API key or your OpenRouter API key or something of that sort
4615024	4621024	needs to be very, very secret, right? Because with that key, you can make a lot of calls and
4621024	4626924	do a lot of things. And so here it says we have a private key. OpenAI key is private and must stay
4626924	4632824	server-side. It is used here, needed locally. Hosted service config, Vercel or another node
4632824	4638404	capable host configured as a private server environment variables, port, etc, etc. Okay,
4638544	4643884	that end of example is currently on track. So what we have, safest next step before deploying,
4644004	4649144	replace it with only this, only configure the real key in the deployment provider's private
4649144	4656624	environment variable settings. Okay, so I want to store the key locally for testing, and I want to
4656624	4663464	ensure that it will be deployed also later. And so we want that key locally so that we can test,
4663564	4669244	but we also want it to deploy. And that means we need to create a couple of files, one for local
4669244	4674424	settings and one for deployment settings. And it's telling us which is the wrong file for local
4674424	4680264	secret because examples are usually committed. So let's say we're doing a Vercel deploy. We're
4680264	4685724	going to switch that. And there we have it. Store the real key locally in an untrack, right? We need
4685724	4691064	to make sure that this is never committed to git it needs to be untracked so we're going to expand
4691064	4698544	this submit this do not use public these are not public keys replace dot end of example with
4698544	4704784	create dot end okay so it's it's going to be creating this dot end the secret is now ignored
4704784	4711784	in dot end and then i'm updating readme and agents to make the local and recel setup unambiguous
4711784	4715584	And that way we have the local key stored for local testing.
4715784	4717484	It's never going to be committed into Git.
4717944	4724204	And then we'll be able to send that key, also deploy that key onto Vercel because Vercel
4724204	4725484	is going to be running our app.
4725544	4727044	It needs access to that key as well.
4727104	4728004	It needs to be secret.
4728224	4731184	Okay, implemented the local Vercel key setup.
4731344	4736284	And so in this point, we've made the secret key management and not just secret key, any
4736284	4738724	kind of key management as part of our workflow.
4738724	4743684	and we can be assured that we have the key for local stuff and we're also going to be deploying
4743684	4750714	the key correctly for production stuff regardless of what kind of host you are using
4754414	4760434	to be writing code for the core stuff. But a lot of things that your app will be doing will be done
4760434	4765074	by existing code. You're not going to be building your app from scratch, right? You're going to be
4765074	4771194	using existing libraries, existing frameworks, stuff like that. And those are called dependencies.
4771434	4777054	And that is because your app depends on them to function. Without those things, your app will not
4777054	4783914	function. And you need to ensure that you have a process for managing these dependencies. And I
4783914	4789474	have here a prompt that you can use that will help you. Inspect this project before adding any
4789474	4794554	dependencies. Do not install anything yet. Tell me all of this. And so let's go ahead and run this
4794554	4800034	prompt. Right. And this is what it came back with. Dependency project inspection. Framework and
4800034	4805434	package manager. Framework non-detected. This appears to be a plain static JavaScript app
4805434	4811634	served by a custom node server. Now, of course, this will definitely not be the case when it
4811634	4817054	comes to your real apps. You're going to be using some kind of framework, something that will make
4817054	4822934	your app behave like a real app. Here, we just have a very, very plain app. Package manager,
4822934	4827754	non-detected, no, none of this. And of course, when you're going to be building your app,
4827794	4832434	you're going to be having all this as well. Available scripts, no NPM scripts exist because
4832434	4837954	there's no package manager, because there's no package.json. Current documented run command,
4838074	4843294	we just have this very, very basic. Definitely not the case when it comes to production apps.
4843534	4849934	OpenAI local and run command. So we have this. Relevant install dependencies. So we do have some
4849934	4857354	basic node built-ins. All of these OpenAI calls native fetch. Okay, so it's native. It's not using
4857354	4863654	the OpenAI SDK, which would have been a dependency. Can the task be completed without adding a package?
4863874	4869774	Yes, for the current OpenAI API stack and local serving, the project already calls OpenAI via
4869774	4875674	native fetch. If a new package is recommended, no package is recommended right now. A package could
4875674	4884094	be recommended later. If we use Express, Fastify, we start using the official SDK.env. Files likely
4884094	4891014	to change if preceding, right? API behavior, openA calls, frontend, et cetera, et cetera.
4891514	4896474	And so dependencies are important and you want to limit your dependencies. You don't want the system
4896474	4903174	to just add dependencies blindly. And so this is going to be super useful as you're building your
4903174	4908834	app so that you can streamline it. Because as I was just building this simple app, Codex asked me
4908834	4915154	whether I want to use OpenAI SDK or native fetch. And you always want to err on the side of native
4915154	4920374	stuff. If you can avoid a dependency or an SDK, that would be the right move. And that's exactly
4920374	4924974	what I did here. I just used native, right? I could have used an SDK, but I decided I'm just
4924974	4930274	going to keep it as simple as possible. And that's really the goal here. And this prompt and making
4930274	4936094	this part of your workflow is going to enable you to keep your app streamlined so that you have less
4936094	4942514	dependencies, less chance for something to go wrong, less bloat, etc., etc. So definitely add
4942514	4948574	this to your app building workflow and ensure that Codex knows about it by making this a part
4948574	4958114	of your agent's MD for a separate step. Now that the Codex foundation is clear, we are going to
4958114	4965414	start with something intentionally small. The first app is called HabitCard, and it is a tiny
4965414	4973074	habit tracker where users can add habits, check them all for the day, and see a simple streak or
4973074	4980294	count. This is a great starter project because the result is visual, easy to check, and small enough
4980294	4988254	that every step stays clear. Codex can plan the app, build the UI, show us the file changes,
4988714	4996254	open the browser, polish the result, and get the front end ready to deploy without also introducing
4996254	5004254	backend complexity. HabitCard gives us the core app building pieces without much product complexity.
5004254	5013274	a form, a list, a daily check-in state, simple feedback, and later local storage persistence.
5013614	5020074	It does not need authentication, payments, APIs, or a real database at first.
5020254	5027994	This first app is about getting comfortable with the full Codex loop on something we can understand immediately.
5027994	5037994	Now, here in Codex, 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.
5038574	5044014	So I'm going to click on Use an Existing Folder, and I have here a folder prepared called Demo.
5044094	5051454	So I'm going to open this here, and now we have a new project that has been associated with a specific folder.
5051734	5056754	And here we can start a brand new conversation for the app that we are building.
5056754	5063014	Now, anytime I start building a brand new app, I always want to create a visual architecture.
5063274	5072714	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.
5072774	5078554	And we can actually use Codex to create that visual architecture for us.
5078654	5083274	Now, I have here a prepared prompt that creates this visual architecture.
5083274	5092314	And we want to ensure that we use the built-in image generation that we have in Codex as well as ChatGPT to do it.
5092794	5097034	So I'm going to press forward slash, and I'm going to search for image gen.
5097274	5101314	Okay, and then we can say something like use image gen for the following.
5101614	5105894	And I'm going to go jump into plan mode, and I'm going to go ahead and execute this.
5105994	5109894	Okay, and it came back with a habit card architecture diagram.
5109894	5115314	And here it says create one raster infographic using this.
5115414	5116614	So everything looks good.
5116734	5119454	There's some diagram content, visual direction.
5119594	5120854	It's a wide composition.
5120854	5121454	Looks good.
5121974	5124094	We're going to say, yes, implement this.
5124434	5124634	Okay.
5124734	5126194	And that is our habit card.
5126294	5127974	That is our visual interface.
5127974	5132234	And right away, I can see what this app is all about, right?
5132254	5133314	We have add habit.
5133594	5135034	We have habit list.
5135394	5136794	We have today check-in.
5137074	5139214	And we have a streak count.
5139214	5145074	then we have an empty state we have local storage later and we have the Vercel deploy and so this is
5145074	5153534	a very very simplified visual architecture but it is very very important I want to see right away
5153534	5160074	what I'm dealing with what I'm working with how many pages you know how complex is the app how
5160074	5166014	simple is the app I see that this is not going to be you know a very complex app it's going to be a
5166014	5172534	fairly simple app, but we do have some interesting bits here, right? This empty state, we have some
5172534	5179234	local storage, we have a Vercel deploy, and so it's a fairly simple app, but still a fairly workable
5179234	5183694	app. Now, the next thing that I like to do is create the entity architecture, and this is where
5183694	5189994	we're going to be mapping the small set of entities behind the app. So even though the first version
5189994	5198034	is front-end only, it is useful to name the habit, the daily check-in, and the street count summary
5198034	5204874	before we add a local storage later. And this right here is the entity diagram. And I'm just
5204874	5211814	going to say use image gen for below. I'm going to go ahead and run that. And I can run it directly.
5211974	5217694	I don't really need to run it in plan mode because it's just generating a diagram. I'm not asking it
5217694	5225554	a complex, ambiguous coding question or giving it an ambiguous coding instruction.
5225914	5230714	And here is our NTC architecture. And unlike the visual architecture that we...
5230834	5236774	generated previously, here we're actually seeing the entities that will later become the actual
5236774	5243534	storage schema. Okay, so we have the habit, we have a habit check-in, we have a streak summary,
5243534	5246634	and then local storage as the backend.
5246774	5248914	So no backend, everything is stored locally
5248914	5249934	with local storage.
5250374	5252534	And this is also very, very useful
5252534	5256254	because unlike the visual diagram here,
5256254	5258874	I wanna see the actual schema.
5258874	5262074	I wanna see what kind of elements
5262074	5265074	or what kind of tables we might need
5265074	5268534	to translate this app schema into.
5269074	5271254	And as you can see, this is fairly simple.
5271734	5273214	Habit, habit check-in.
5273534	5279834	streak summary, we have these three main functions here, these three main features that were
5279834	5285874	translated into entities. Okay. And then we have, and for each entity, we have things like name,
5285974	5291774	created at date, completed count. Now at this point, we have both the visual architecture as
5291774	5295714	well as the entity architecture. And this is something that I like to do for pretty much
5295714	5301614	every single app that I build, because I want to get an idea of what I'm really dealing with,
5301614	5308654	right i want to have an understanding of the the scope of the app and right now i can see exactly
5308654	5314974	where we are i can see that this is a fairly simple app i can see the entities i i see the app
5314974	5320014	building i see the future of the app i see the app coming together now the next thing that we want
5320014	5328654	to do is we want to use the plan mode to ask codex what stack makes sense for this first app
5328654	5335794	The important part is that Codex should recommend the simplest path before it edits any files.
5335994	5339474	And as you might have guessed, we are going to be doing this in plan mode.
5339574	5339914	All right.
5339954	5341854	And here's the prompt that we're going to be using.
5341854	5343634	Do not edit files yet.
5343794	5348694	Inspect the current project and recommend the simplest stack for HabitCard, right?
5349234	5351634	And we ask him what it should come back with.
5351694	5356554	And we're going to press Shift-Tab to enable the plan mode, of course, because we want
5356554	5364474	it to come back to us if it needs to and ask any clarifying questions. We needed to clarify
5364474	5370594	everything before we go deeper into the building the app. Okay, I'm going to go ahead and execute
5370594	5376774	this. And let's see what it comes back with. And in this case, it did not come back with any
5376774	5383314	clarifying questions. Okay, so it's writing a plan. And the recommended front end stack is going to be
5383314	5390474	React TypeScript, right? It wants to use Tailwind CSS for fast, simple styling. This is testing
5390474	5397594	library, no React router. It's a simple single screen app, no global state library, okay?
5398174	5402874	Backend decision. No backend is needed for the first version, right? And that's what we told it.
5402874	5408754	We set bias toward a front-end only implementation first. And then it's also going to use browser
5408754	5413874	verification. Okay, open the app in the browser, verify all this. Okay, so let's go ahead and
5413874	5420354	run this. All right, so it worked for about 10 minutes, and it has implemented the habit card
5420354	5425574	as a front-end only React TypeScript app. This is where it is, and this is what it did, right?
5425614	5433134	It built the app shell and UI, habit logic, local storage, components for adding form, for the ad
5433134	5440734	form list card and empty state tests for app flow logic and storage and verification passed nine
5440734	5448094	tests production build succeeded and it also gave us a dev server that is running the app and so this
5448094	5454494	dev server is running on my machine right now and this allows us to quickly test things without
5454494	5459614	needing to deploy and test there and on the right hand side we have this card that is always available
5459614	5467694	and it shows us things like artifacts, background terminal, and basically things that were created
5467694	5473214	as part of this conversation. Okay, so we have the images that were generated. We have the index.html
5473214	5478534	for the app. We have the background terminal that is running here. And so I can click here,
5478634	5484194	and that's going to go ahead and go to the server that's running our app. So let's do that. And
5484194	5489014	that's going to go ahead and open. It's also going to open the browser right here in the right-hand
5489014	5494414	pane. Now, before we had no right hand pane, but if you click here, you can see that it opens up
5494414	5498934	here, right there. Another thing that you can do is you can open the browser directly. This is the
5498934	5505354	front page here, and I can add a habit, habit one. I can click here, and we have a habit here. I can
5505354	5512494	add another habit, habit two, or maybe gym, and that's creating these habits here. So I can check
5512494	5518434	it off, and that is done. Check it off. And so it's a very, very simple app, and if you want to see the
5518434	5525334	actual files that were created as part of this, you can simply right-click here and open in Finder.
5525474	5531174	And this is the React app that was created for this here. Once the UI works, we'll add a small
5531174	5537854	persistence step with local storage. Habits and today's check-ins can persist after refresh,
5538054	5545174	so the app starts to feel real without introducing a backend yet. And this is the prompt that we're
5545174	5551174	going to be using. Upgrade habit card. So habits in today's check-ins persist with local storage.
5551294	5556574	I'm going to jump into the plan mode here just in case. And I'm going to go ahead and run this.
5556874	5561374	Now it's actually telling us that inspection shows that habit card already implements the
5561374	5568294	requested front-end only local storage persistence. Okay. So no file edits are needed for this upgrade.
5568294	5573974	So we must have done this in one of the previous prompts. But if we hadn't done this,
5573974	5578294	then we would run this prompt. But still, let's go ahead and run it. And now it tells us that
5578294	5585574	persistence works through this storage using these keys and a lot of other details here. Okay,
5585594	5592054	so we can reload this. And now we have something called local storage. And what this means is that
5592054	5598494	this app does not have a backend, but this stuff is going to be stored on my browser. Okay, so
5598494	5603874	if I'm using this instance, it's going to be stored on this browser. If I run it in a different
5603874	5609594	browser, then it's not going to have the data. So whatever I do in that new browser is going to have
5609594	5616734	fresh data. And so this is a way to create, you know, storage just for testing mail. I mean, you
5616734	5621754	can use this in production as well for certain apps, for certain situations. It does have its
5621754	5627734	place, but it's very, very limiting compared to something like Superbase or something of that
5627734	5634354	sort. And so we can delete all this. We can do all that. We can start. And if I copy this,
5634494	5638874	run this app, and I load this app, there's nothing there because I'm using a brand new
5638874	5646014	browser instance. And I can create, I can do, I can check off, I can do this, I can do all that.
5646394	5652694	But if I go back to Codex, there's nothing here, right? It's not syncing. It's not using my account
5652694	5655734	and it's not using a unified backend
5655734	5659794	so that no matter which browser I use,
5660234	5663174	it will still store the data and keep track of everything.
5663314	5664514	That is not happening.
5664774	5668274	Now, once the app works locally, it's time to deploy it.
5668434	5670194	Even though HabitCard is simple,
5670634	5674354	this is the first moment where Codex helps move something
5674354	5677954	from local code to a real-life URL.
5677954	5681194	And so Codex can do the whole deployment process.
5681194	5687334	It can run the local checks, prepare the projects, connect or create the Vercel project,
5687834	5692814	deploy the frontend, and then verify that the live page actually loads.
5693094	5696974	And additionally, you want that first deployment to feel very concrete.
5697274	5699794	We're not just writing code and hoping it works.
5700334	5704334	We're taking a small app, shipping it, opening the deployed URL,
5704794	5709374	and checking the result like we would with a real project.
5709374	5715534	And here is my Vercel deployment prompt. Prepare HabitCard for deployment on Vercel
5715534	5722834	and verify it works as a small front-end only app. So at this point, we are just preparing it
5722834	5729614	for deployment. We're not yet deploying it, but still, this is an important step because this will
5729614	5735754	ensure that once we do deploy it, that it will work without any issues. I'm going to go jump
5735754	5741674	into the plan mode. And remember, we do have that Versal plugin enabled, and so it should
5741674	5743714	use it automatically with no issues.
5744652	5746392	I'm going to go ahead and execute this.
5746392	5750452	All right, so it went ahead and created a Vercel deployment plan.
5750452	5756552	HabitCard is already suitable for a front-end only Vercel deployment.
5756552	5757992	And this is what it's going to do.
5757992	5760672	And here is the deployment implementation.
5760672	5761952	Keep the app front-end only.
5761952	5768272	Do not add convex, which is a backend, APIs, auth database, server functions, or external
5768272	5769272	services.
5769272	5770692	None of that.
5770692	5776252	And local storage persistence is expected to be local to each browser and deployment
5776252	5777252	origin.
5777252	5779932	Data will not sync across devices or URLs.
5779932	5783112	Okay, let's go ahead and implement this plan.
5783112	5788992	three minutes later, it tells us that deployed HabitCard to resell and verified it live. Okay,
5789052	5796232	so this is the live URL. We can click here, and that's going to open our HabitCard app running
5796232	5802672	on the web, right? Accessible to everybody. And this, again, uses local storage. Okay,
5802812	5807832	so we can do that over here. And of course, you know, it's not going to be available in another
5807832	5814392	instance because it's all stored locally. And so at this point, we designed, architected, built,
5814912	5823772	tested, and then deployed a very, very simple web app that uses local storage as our backend. And
5823772	5829272	this proved the whole cycle for us. Now, in the next several modules, we're going to be doing the
5829272	5837272	same, but with more complex apps, slowly adding things like authentication, backend, and other
5837272	5842212	important components that you need for a real production app.
5845392	5850712	The second app we'll be building will be a mini team voting app where people submit
5850712	5853932	lunch or snack ideas and vote on the winner.
5854032	5858872	It's a bit more complex with more features, but still fairly simple overall.
5858932	5866932	SnackVote has a submit option form, a snack option list, vote buttons, a live leaderboard
5867272	5873192	and a winner card. This app will serve as a bridge between a simple front-end and the larger
5873192	5878552	marketplace app we'll build right after this. Instead of jumping straight into complex entities
5878552	5885432	such as customers, bookings, and permissions, we can first learn the backend pattern on a much
5885432	5892792	smaller app. SnackVote only needs snack options and votes. Someone can submit an option, other
5892792	5898872	people can vote, and the leaderboard updates as the vote counts change. That gives us enough
5898872	5905352	structure to understand live backend data without making the product itself hard to follow.
5905352	5911752	As always, in this first step, we'll be mapping the SnackVote interface visually. The app should
5911752	5918232	be simple enough to understand immediately. Create or join a voting room, submit a Snack
5918232	5926452	option, vote once, watch the leaderboard update, and see a deadline-driven winner state. Now here
5926452	5931712	in Codex, we're going to come here and we're going to create a new project from an existing folder.
5931832	5935812	We're going to click over here. Here, we're going to create a new folder. I'm going to type
5935812	5942472	snack vote, and we're going to click open. And now we have a brand new project configured here in
5942472	5947932	Codex. And here's our prompt for the visual architecture. We want a preface that we want
5947932	5953652	to use this image and we're going to jump into plan mode and execute this. That looks good. We're
5953652	5958992	going to go ahead and expand that. Go ahead and implement that. And here's our snack vote visual
5958992	5965172	architecture. And look at this beautiful diagram. So you can create or join a room. In the current
5965172	5971852	room, you're going to be seeing this members and the time left. You have here a snack list. You
5971852	5978732	have your voting buttons, you have a live leaderboard, and you have a closed winner state
5978732	5987232	with some voting deadlines here, here as well. And then we also have our Vercel deploy. And so
5987232	5993752	this looks like a fairly fun app with a lot of things going on. And so I can't wait to implement
5993752	5998792	this. And we're also going to be adding more and more features as we go along. Next, I want to go
5998792	6006012	ahead and create an entity diagram, an entity architecture diagram. So here's our prompt. We're
6006012	6011092	going to do this, and we're going to go ahead and execute that. And here's our entity diagram.
6011512	6017712	Okay, so a room contains multiple snack options and has one voting session, right? We have the
6017712	6024052	voting room, many snack options, and many votes, right? We have here some winner logic, the winner
6024052	6031332	logic snack option with the highest vote count when now is greater than or equal to closes at
6031332	6038372	right so after the deadline we have here a legend and here we have a sample kind of workflow a
6038372	6044852	pipeline build the ui first connect the to convex later convex is going to be our back end and we
6044852	6052852	are going to be leveraging things like real-time updates persistence and live vote counts and so
6052852	6059912	So now that we've generated a visual architecture diagram, as well as our entity diagram, the
6059912	6065092	next thing that we want to do is we want to ask Codex for some stack recommendations,
6065692	6068952	because there are lots of ways that we can build out this app.
6069092	6072892	And we want Codex to tell us the best options for this specific app.
6073152	6074812	Here's the prompt that we're going to be using.
6074812	6077152	And I'm going to switch into plan mode here.
6077352	6080312	And it's telling us, do not edit files yet.
6080312	6086172	inspect the current project and recommend the simplest stack for Snackville. And here's the
6086172	6090792	plan that it came back with. Here we have the stack recommendation. We're going to be using React,
6091332	6098032	TypeScript, Tailwind. And here it says back and later convex with TypeScript server functions and
6098032	6104712	generated client types. And so for the most part, this is very, very similar, if not the exact same
6104712	6110792	architecture stack that we use for the first app, except we're going to be adding more and more
6110792	6118392	features and also connecting a backend for the first time in this tutorial. Now here, instead
6118392	6124072	of clicking submit, I'm going to give it another prompt, and this prompt is going to start building
6124072	6131752	the app, writing the code. And here's the prompt, implement the first working SnackVote UI without
6131752	6138532	a database or persistence. Inspect the current project first, then build the smallest useful
6138532	6145712	SnackVote UI. And there's some verification steps as well. And we also explicitly tell it to not use
6145712	6152832	Convex, local storage, or an API, nothing of that. Just keep it to these specs right here. And we also
6152832	6158072	have some verification. So I'm going to go ahead and run this in plan mode in case it wants to ask
6158072	6162932	me something. So it doesn't have any questions for us. And that is because in this specific
6162932	6169392	conversation, we already fleshed out, you know, things like the architecture, the stack, and all
6169392	6175092	of that stuff. And so it kind of knows what it needs to do to build out this app. So we're going
6175092	6180172	to say, yes, implement this, because this is the step where we actually want the code written.
6180352	6186532	All right, so this has completed. And it says here, implemented the first working UI only snack
6186532	6194332	vote app here, created all of this, what works, verification completed, still needs attention
6194332	6199592	later. Okay, all of these things. And we'll talk about that a little bit later. And so now we have
6199592	6205472	a web preview. So we can click on open. And that's going to go ahead and open it right here in our
6205472	6211812	built in browser here. This is our app right here. And so we have snack and lunch options, we can
6211812	6218972	create, we can submit an option, add sample snacks, click here, and we have these snack options here
6218972	6224212	with some votes here. Leaderboard, right? So this is where...
6224752	6226352	Winner state, current winner,
6226552	6228512	leader, spicy ramen bowls.
6229092	6231312	And so if I vote on falafel wraps,
6232332	6233392	six, right?
6233492	6234412	So now it's six.
6234512	6235472	I can keep voting.
6235992	6238112	And that's a problem right away.
6238112	6244012	and it's in memory and one person can vote multiple times, which is an issue. We're going
6244012	6249832	to fix that a little bit later, but I can also add a snack or let's say sushi. I don't know,
6249972	6255792	sushi. Add this and we have sushi and I can also vote on that. So it's a big, big issue. But
6255792	6261832	for the most part, the logic works, the UI works. Now, once the snack vote UI exists,
6261832	6267372	we're going to replace the mock snack data with real convex data. And for those of you that are
6267372	6274432	not familiar, Convex is a backend that we're going to be using in this tutorial. It's an awesome
6274432	6279992	backend, super fast. And if you want to learn more information, I actually did a dedicated video on
6279992	6287632	it that you can find right there. And so once we add Convex, our app will stop being a static
6287632	6293972	interface and start behaving like a real database-backed product. And the path is very, very
6293972	6301412	simple codex, creates the convex schema, adds a query, adds mutations, connects it to the UI,
6301912	6308772	and then we verify the result in both the browser and the convex dashboard. And so when we submit
6308772	6315132	an option in the app, it should be written back to convex. When we look inside the convex dashboard,
6315612	6322612	that snack option should be there. And when someone votes, the UI should update live so that
6322612	6328372	we can see the front end and back end working together instead of treating the back end like
6328372	6334772	a black box. And when you head over to convex.dev, you can learn more about this back end. And this
6334772	6341852	is a great, great back end. It's very, very fast. And it works really great with agents, right? So
6341852	6346812	the back end building blocks for your agents. Okay. So I'm going to go ahead and log into my
6346812	6351512	free account. I'm using the free plan. I'm not paying for anything. And this is also an open
6351512	6355632	source backend, so you can also self-host it if you want. So I'm going to go ahead and log in.
6355832	6361012	All right, so here I am logged in, and as you can see, I have here two projects. Now, our app is
6361012	6366752	going to automatically create a brand new project for its data, for its functions, for everything.
6367012	6371992	And here, back in Codex, we're going to paste a new prompt that looks something like this.
6372152	6379492	Upgrade snack vote, so snack options and votes are stored in convex instead of local in-memory
6379492	6385092	state. Now, if I press Command, comma, and go to MCP servers, you can see that I do not have the
6385092	6391392	convex MCP server. And that is because we're not going to be connecting to convex via MCP. We're
6391392	6396932	actually going to be connecting to it using a much simpler method, and that is the CLI, which stands
6396932	6403492	for Command Line Interface. And actually, before I run this prompt, we are going to check to make
6403492	6412012	sure that we have a connection. Can you first check that we have the Convex CLI installed?
6412432	6418312	And if not, do install it. I'm going to go ahead and run it. Now, I already have Convex CLI installed,
6418552	6424732	but you can just tell Codex to install it. It's that easy. And so it's telling me that NPX,
6424732	6431252	which is a package manager, could fetch Convex temporarily, but the project does not have it
6431252	6438052	installed. I'm installing Convex into the project now as a dev dependency. Convex is installed
6438052	6444512	locally now. I'll verify the CLI results. And so you don't need to read lots and lots of
6444512	6449292	documentation, figure out how to connect to it. You just tell Codex that you want to connect to it.
6449572	6455752	It's that easy. So Convex CLI is installed locally in the project now. So now we can paste the
6455752	6462112	prompt, upgrade SnackVote. So SnackOptions and votes are stored in Convex instead of local in
6462112	6467412	memory state. So I'm going to go ahead and do this. And let's go into plan mode, see if it wants to
6467412	6472972	ask me something or clarify something. And so it's telling me one material setup choice is still
6472972	6479072	open. There is no existing Convex folder. So this app is not linked to a Convex deployment yet. And
6479072	6484392	that is correct. And that's what we want to do next. And now it's asking me which Convex backend
6484392	6490332	should SnackVault use for this first backed version. We want to create a new one, right? So
6490332	6495232	we're going to go with the recommended option. All right. And now we have a new plan to upgrade
6495232	6501772	the existing app from in-memory SnackOptions to live convex data. Okay. So it's going to do
6501772	6507632	everything. And it's going to essentially configure the backend to be convex, set up the schema,
6508292	6514032	set up the data, everything. And once it's done, we should be able to go to convex and see a brand
6514032	6518952	new project here automatically created. So I'm going to hit submit here. All right. So it says
6518952	6526712	it has created a fresh cloud project and synced the backend function successfully. And now you
6526712	6533272	see this cursor, it's testing out the UI. And so right now it's not running, so it should start it
6533272	6538092	out. And here it says the existing browser tab was sitting on the browser error. So it has restarted
6538092	6544692	it. And if we jump into Convex, you can see that we have a new project created. Now, I did
6544692	6550152	authenticate this account with Codex, so it knows that this is my account. And so if we click over
6550152	6555592	here, we should see some initial stuff happening, right? There's some data, functions, and it's not
6555592	6561652	done yet, right? It's still working. And while it's working, we can see what has been done. And
6561652	6567492	it's actually typing it. Look at that. Key press input. It's creating it. It's testing it right
6567492	6572312	here. You can actually see it happening. The snack was submitted through the browser and appeared
6572312	6578612	from Convex. I am voting on it. There it is. It's testing all the flows, which is pretty cool.
6578832	6584872	All right. Now it's telling us implemented the Convex-backed snack vote upgrade, changed all
6584872	6591992	of this. What changed? Verification, edge cases handled, and it is running. So we can test it
6591992	6599572	ourselves. And so here's the app. And now it's convex backed. And so now if we head to convex,
6599912	6605912	we should see the data. So as you can see, snack options, this has a vote of one. This is this
6605912	6611852	nachos. Vote one. And if we increase the vote, it should be two. And it's automatic. It's
6611852	6618092	absolutely automatic. Three, it's three. It does not need to do anything. And we can create a new
6618092	6624592	snack option, let's say sushi, submit. And if we come over here, we see sushi, zero votes. Now it's
6624592	6631932	winning. And so this is essentially the same app, except it's convex-backed. And we also have
6631932	6638572	functions. And with convex, you need to create functions to access your data. It's not like
6638572	6644172	with other systems where it's automatic. Here you need list, you need submit, you need a vote,
6644172	6653092	you need functions. And so the snack options table or document has three functions. No files,
6653212	6658392	no schedules, and there's some logs here so that you can see things are happening. Okay, so this
6658392	6666052	was a fairly successful migration. We went to no backend to a convex backend very, very quickly.
6666372	6672292	Now that SnackVault has real convex data, we can make it feel more like a shared group app.
6672292	6679372	Instead of one global snack board, users can create or join a simple voting room like Friday
6679372	6687152	lunch or team snacks. Each room should own its own snack options, votes, leaderboard,
6687572	6693852	and winner's state. This keeps the app more interesting while teaching a clean backend
6693852	6701652	concept, scoped data. We still do not need accounts, permissions, invites, or admin tools.
6701652	6704112	And here's the prompt that we're going to be using.
6704352	6709732	Upgrade snack vote so voting happens inside simple rooms.
6709932	6712532	And I'm going to run this in a plan mode.
6712532	6715212	All right, so it came back with a plan for us.
6715292	6718232	This is the room-based snack vote upgrade.
6718232	6723312	Upgrade the current ConvexBack app from one global snack board to simple rooms.
6723592	6724812	Going to expand that.
6725052	6726292	Yes, implement that.
6726412	6730112	So as it's running, I am seeing an error message here.
6730712	6734192	Did you forget to run npx convex dev?
6734512	6740312	Okay, so let's see if it's able to catch that and solve it before the next prompt.
6740352	6741152	It is done.
6741372	6744012	So it has implemented room-based snack.
6744012	6745532	Whoa, this is what it changed.
6745532	6752432	files, things, verification, limits. Okay, very important. Limits is actually very, very useful.
6753032	6759892	No auth ownership invites or duplicate vote guard yet. And we'll fix some of these a little later.
6760232	6764672	Room selection, room codes. Okay, so how does this work? Let's go ahead and refresh this.
6764672	6770872	All right, so we can create or join a room. And there are some rooms over here. So let's say we
6770872	6777432	type Friday lunch. And so now we've switched the room. Okay. Current room, Friday lunch. And now
6777432	6784532	we can do the same thing. We're now in the scope. It's all about scoping now, right? And so this is
6784532	6791152	a specific room. And I can say, I don't know, submit. There we have it in this room. And now
6791152	6797412	if I switch a room, let's say I switch to lunch ideas. So now it's brand new. There's nothing,
6797412	6803552	nothing there. And I can say something like, I don't know, tacos. And now we have tacos here.
6803612	6809252	And if we go into Codex, we should see that. So we have voting rooms here, and we have different
6809252	6815632	ideas here. And now if we go into snack options, we can see that they belong to a specific room.
6815632	6820152	We have the room IDs. These are the same, same room, then we have a bunch of different
6820152	6827352	room IDs there. Probably some of them created by Codex as part of testing, like lunch ideas,
6827412	6832612	Oh no, I created lunch ideas. These ones were created by Codex, these three rooms.
6833192	6839492	And we can remove them. I can select these and we can delete these. And if we go into functions,
6839732	6845192	we can see that for snack options, the same three functions, but for voting room, we have get,
6845332	6850612	create or join, a bunch of other functions that we have. And so it pretty much did everything.
6850612	6857832	It created the functions, it created the schema, it even created some test data while it was
6857832	6858312	tested.
6858612	6863452	We'll add one simple rule that makes the voting feel like a real product.
6864092	6870272	After all, a person should not be able to spam the same room with repeated votes.
6870612	6873372	And that is because we still do not have real authentication.
6873852	6879572	And so for this tutorial, a local or session-based voter identity is enough.
6879572	6885132	and that's what we're going to be doing right now. And here's my next prompt. We're going to
6885132	6892372	upgrade SnackVotes so each person can only have one active vote per room. Jump into plan mode,
6892832	6900092	run that. So here's the plan, one active vote per room. Add a lightweight session-based voting room.
6900092	6908472	Each browser session gets a session ID, and Convex stores one active vote per room ID and
6908472	6915852	session ID, right? So this needs to be unique. So if I voted in that room, my session ID was used to
6915852	6922612	vote. And so this needs to be unique. So for that room, my session can only happen twice. If there
6922612	6929112	is a chance for a repeat, it's not going to count it. Yeah, I can vote in other rooms, but per session,
6929272	6935352	per room can only happen once. We're going to expand this, looks good, and submit this. So it
6935352	6943032	done implemented one active vote per room okay change this what changed and it added this get
6943032	6949672	my vote added votes with table so let's go ahead and try this out open this here so let's say i go
6949672	6955192	to another room friend friday lunch i switch to that room and i have my burrito so i'm gonna vote
6955192	6961512	for this i just voted and i can't vote again you see that i can't vote again because if i go to
6961512	6970472	convex and I go into data and I go into votes, I should see a session ID with ROM ID. So let me go
6970472	6975612	ahead and delete all of these so that we can see which one is mine. And so now I can vote again.
6975612	6983792	You see it's back up. It's reactive. I'm going to hit vote. And now you see ROM ID and session ID.
6983992	6990652	These two, they can only appear once in this table. And so obviously now it knows that my
6990652	6995652	session ID and I'm trying to vote for this one and that's not going to work because I'm in this room.
6995872	7003372	I'm in this room here, Friday lunch, Friday lunch right there. Now, if I switch rooms, let's say I go
7003372	7009592	to another room. Let's say I go into Sunday brunch. Now I can vote, right? I can vote for anything. I
7009592	7016252	can say tacos, submit. I can vote here and let's say I create another one. I can change my vote.
7016252	7022832	So I can switch votes, but I cannot pad with multiple votes an item.
7023172	7025752	And so if I go back here, now there are two options, right?
7025872	7031972	Two different rooms, same session ID, but I cannot vote in the same room more than once.
7032152	7034612	So this works really, really nice.
7034952	7041232	And finally, we'll add a deadline so each room has a moment when voting closes.
7041892	7044732	Before the deadline, people can submit and vote.
7044732	7051772	After the deadline, voting locks and the app shows the winner or a simple tie state.
7051952	7057292	This adds time-based product state without becoming a scheduling system.
7057452	7069012	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.
7069332	7071572	And here's the prompt that we're going to be using.
7071572	7073772	I'm going to switch into plan mode.
7074112	7074752	Run this.
7074912	7076812	Oh, it needs a product decision.
7077012	7082152	Okay, how should users set a room deadline in this small tutorial version?
7082732	7083792	Quick durations.
7084372	7087932	Okay, add simple buttons like 1 minute, 5 minute, 15 minute.
7088152	7089932	When creating opening a room.
7090292	7092832	Daytime input or fixed default.
7093012	7094352	Let's do quick durations.
7094712	7095512	That sounds good.
7095612	7096852	Let's implement this.
7097052	7098272	And it is complete.
7098432	7100612	Implemented simple voting deadlines.
7100612	7102092	This is what was changed.
7102612	7104672	Added quick deadline choices.
7104852	7108312	No deadline, one minute, five minutes, 15 minutes.
7108472	7109412	All of this.
7109652	7112132	And let's go ahead and see how this works.
7112432	7112812	All right.
7112872	7113912	So here we are.
7114092	7117112	And let's go ahead and create the room, Friday lunch.
7117412	7119252	And let's say it's five minutes.
7119452	7120632	Select five minutes.
7121072	7121692	Open the room.
7121892	7123392	This still says no deadline.
7123532	7124532	Let's try another room.
7124612	7126712	Let's say Sunday brunch.
7126972	7128332	I can select no deadline.
7128532	7129752	I can do 15 minutes.
7129752	7131072	Let's try 15 minutes.
7131532	7132932	See, it says no deadline.
7133092	7134072	Okay, that's a bug.
7134272	7135532	That's definitely a bug.
7135652	7137632	So let's see if it's able to fix it.
7137672	7143132	That's the first bug that has happened to us, as far as I remember.
7143892	7150832	And so we're going to say, create it, tried creating a room and selecting a deadline,
7150832	7152832	but it ended up creating...
7155448	7162308	And we don't really need plan mode for this. There's no clarifying questions here. It's a
7162308	7168348	simple bug. And we don't really want it to clarify. We know what the bug is. We just wanted to fix
7168348	7175148	it so there's really no ambiguity there it's like it's like i'm not looking to negotiate with codex
7175148	7180908	i know this is a bug and i wanted to fix it right there's no other ways there's nothing else
7180908	7186028	happening unless i'm wrong and in that case it's going to tell me that i'm wrong that it works but
7186028	7193948	there's no other paths here as far as i'm concerned now sometimes codex would output something like
7193948	7202488	this and it tries to go into plan mode. And so right now it thinks it's in plan mode, but it's,
7202648	7208488	it actually is not in plan mode. And so if I say something like do it, it's going to complain that,
7208648	7214908	that I did not leave the plan mode while I'm not in the plan mode. So this is a bug that I have
7214908	7222008	been experiencing from time to time. And it's annoying, but it's, it's easily fixable. You see,
7222008	7226288	it says I can't edit files because this thread is in plan mode, but we're not in plan mode.
7226768	7232908	And so the solution is to go into plan mode and type something. Okay, fix it. And then it's going
7232908	7237648	to say something like, well, you know, I can't do it. I'm in plan mode. And then you can leave plan
7237648	7243368	mode. Now it understands it. You see, now it's correct. Fix the bug where it's selecting a
7243368	7248708	deadline and opening an existing no deadline room still leaves the room with no deadline.
7248708	7253988	So we're going to submit this. All right. So it looks like it fixed it. And here it says in the
7253988	7260648	browser, I created a no deadline room, reopened it with 15 minutes, and it showed open plus closes in,
7260788	7266408	et cetera. So let's go ahead and test this out ourselves to ensure that it does really work.
7266528	7273608	So we have this and let's do Friday lunch. And we said 15 minutes. And now it shows it.
7273608	7280568	and let's say one minute. Room one, one minute. There we go. One minute. And let's try no deadline.
7280788	7288248	Room two, select no deadline, open no deadline. Okay, so this looks like this was finally fixed.
7288248	7296448	Now, once SnackVote has rooms, session-based voting, and a deadline, we are ready to deploy
7296448	7303248	the front-end app with Vercel and verify that the deployed app points to the right backend
7303248	7309808	environment. And this will round up this specific app build. And here's our prompt, prepare snack
7309808	7317448	mode for deployment on Vercel and verify it works with the convex backend. Okay, I'm just going to do
7317448	7324028	it in plan mode, run that. Here it's being very, very clever. One important deployment decision
7324028	7330988	remains whether the Vercel app should use the existing Convex dev deployment or it should
7330988	7335388	promote it to production. Okay and this is really really cool because this is something that I
7335388	7341468	wanted to cover once this was done. So if we go into Convex and you click over here you can see
7341468	7347548	all your deployments, your different deployments. So we are currently on the development deployment,
7347548	7353228	on the development cloud. We can also have a production deployment, preview deployments,
7353228	7359168	other deployments, stuff like that. So ideally, once we deploy it with Vercel, we wanted to use
7359168	7363688	the production convex, and that's what we're going to select, because this makes sense.
7363868	7371188	Production deployment uses the production convex. Development deployment uses the development
7371188	7378768	convex. This is our plan, prepare, snack vote for a production Vercel deploy connected to the convex
7378768	7385688	production backend. We're going to hit submit, and it's going to create a production. In fact,
7385748	7391268	they already did it, right? We can switch to this, and it's going to have a production environment
7391268	7397688	here created for us. All right, so it has deployed SnackVote to Vercel and verified it against
7397688	7404048	convex production, okay? So this is the live URL, what we're seeing here, deployment URL,
7404048	7405688	and the convex backend.
7406128	7407548	And if we go into convex,
7408328	7410308	you can see that it's currently pointing
7410308	7412328	to the production URL here.
7412388	7414068	And we have everything here in production.
7414328	7416468	So we have the dev instance
7416468	7419508	pointing to the dev deployment in convex
7419508	7422508	and the production instance in Vercel
7422508	7426088	pointing to the production instance here in convex.
7426368	7428148	So we have all the same functions.
7428148	7429868	We have all the same data.
7429968	7430928	Everything is there.
7431128	7432808	The data might be a little different,
7432808	7439908	but the schema is exactly the same and it works, right? So we can create a room, whatever, new room,
7440128	7446688	one minute, open it. And now 59 seconds, 58 seconds looks good. We can create another room,
7446928	7452428	room three, no deadline. And that has no deadline. So I'm currently in this room. I can create
7452428	7459168	a food option. I can vote. I can't vote anymore. One active vote per room. This is the leaderboard.
7459168	7488308	So it looks really good. 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 running. So for local deployment, we have the local, the dev convex deployment. And for the production, we're cell deployment, we're using the production convex deployment. Okay, so this was a slightly more complex app.
7488308	7494568	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.
7494648	7499248	It's going to bring a lot of these things that we've been talking about so far together.
7499588	7506728	And also, we're going to be introducing some new functionality, new features, and a lot of really cool things.
7509548	7513808	Now, for this last app in the course, we're going to be building FlexHelp.
7513808	7520228	And this is where we take the workflow from the first two smaller apps and apply it to a more realistic product.
7520488	7526528	A two-sided marketplace where helpers offer fixer services and customers book them.
7526748	7530388	The important thing is that we will still build it in controlled steps.
7530588	7534028	We're not going to ask Codex to build the whole marketplace at once.
7534168	7538808	We are going to architect it, design it, build the UI, then add feature by feature.
7538808	7543968	feature. And last but not least, we're going to be deploying the app, making it available to anyone.
7544268	7550348	As always, our first step will be creating the visual architecture. This gives us the shape of
7550348	7556788	the product, the customer flow, the helper flow, the main screens, and the path from browsing a
7556788	7562048	service to booking help. Now, here in Codex, we're going to click here and we're going to create a
7562048	7566848	brand new project. Now, I like to start it from an existing folder, and I'm going to create a new
7566848	7572988	folder. Flex help. I'm going to hit create and I'm going to click open and that creates a brand new
7572988	7578008	project. Now the first thing that we're going to be doing is we're going to be building a visual
7578008	7583128	architecture. The same thing that we did for the previous two apps and this is important because
7583128	7588608	this gives us the shape of the product, the customer flow, the helper flow, the main screens
7588608	7594288	and the path from browsing a service to booking help. And here's the prompt that I'm going to be
7594288	7600808	using. And I want to specify that we want to use image gen. We're going to jump into plan mode and
7600808	7606368	we're going to run this. And here we have the Flex Help Visual Architecture. And here's a better view.
7606648	7611588	And so here we have the customer, we have the shared marketplace screens, and we have the helper,
7611768	7617448	which are the two sides of this marketplace. We also have the convex and the versell here.
7617448	7623408	On the customer side, we have browse services, get the service detail, and then send a booking
7623408	7628608	request. The helper side, we have the helper dashboard and the status updates. And on the
7628608	7633368	shared marketplace screens, we have explore the marketplace, buy bookings, and...
7635408	7640268	bat, this app is a bit more complex than the previous apps that we were building. And that's
7640268	7647788	really the goal to finish off with a more complex, but also a more realistic, more production-ready
7647788	7653328	app. Next, we'll map the core entities. And this is where the product becomes more tangible,
7653588	7659768	because we can actually see the real objects in the app before Codex starts writing the schema
7659768	7666448	or code. And here's our prompt. We want to preface this with this image. All right, and here's our
7666448	7672168	entity architecture. Okay, so we have the user that could be a customer or a helper profile.
7672168	7677588	We have the booking here, booking status, service, category, review, and all of that
7677588	7679908	backed with convex data.
7680148	7685528	So at this point, we have a better idea of how the final app is going to look.
7685628	7690168	I see that we need a user entity, and that could be a customer or a helper profile.
7690268	7694648	And I see that booking is super important because everybody needs to have access to
7694648	7699048	booking, both customers and helpers, booking status, service, category.
7699048	7705728	And so right away, I see that this is a fairly sophisticated app, but I can see that it's not
7705728	7712628	a super complex or like a super complicated app that has a ton of different entities,
7712848	7718688	has lots of things happening. But still, as we are developing this app, we might be adding
7718688	7724328	various entities. And so that will increase the complexity as the development continues.
7724328	7730688	Now, the next step is before we start actually building the app is we want to ask Codex to
7730688	7738608	recommend the simplest stack for FlexHelp based on what we need to build, based on what we've
7738608	7745448	told it so far. This keeps the technology choices tied to the product instead of starting with tools
7745448	7751508	first. And this is super important because we want to start with the blueprint before
7751508	7757608	any code has been written. And here's the prompt to do that. Do not edit any files and spec
7757608	7762408	everything. And I'm going to be running this in plan mode so that I can decide whether I want to
7762408	7767548	accept its recommendations or just leave it in the conversation. I'm going to run this here.
7767648	7772848	This is what it's suggesting. The workspace is currently empty. The simplest course-friendly
7772848	7781208	stack is React, TypeScript, Convex for backend data, auth, Tailwind for UI, and Resell for hosting.
7781208	7784488	And this is exactly what we've been doing so far.
7784728	7787148	And here it's listing some primary routes.
7787428	7791548	Services, bookings, customer bookings, helper, helper services.
7791948	7794668	Here we have the data flow, the auth recommendations,
7795008	7796948	UI and component approach,
7797228	7801388	verse cell deployment path, stage build plan, everything.
7801648	7806648	So I'm going to exit out because this was only a read-only plan mode.
7806808	7808888	I don't want it to do anything just yet
7808888	7811588	because that's what we're going to be doing in the next step.
7811688	7815568	Now, from the visual architecture, the entity map, and the stack recommendation,
7815928	7821008	we have a pretty good idea of how the Flex Help app is evolving.
7821328	7825648	The next thing that we want to do is we want to get Codex to take a first pass
7825648	7829168	at turning that plan into a static product UI.
7829628	7832468	Now, this first version does not need any backend data.
7832468	7839328	The goal is to see how far Codex can get from the architecture alone to viable UI mockups.
7839688	7841328	And this is the prompt that I'm going to be using.
7841488	7847428	Build the first static FlexHelp UI design from the existing architecture and stack direction.
7847748	7849308	We're going to stay in the plan mode.
7849568	7851008	I'm going to go ahead and execute that.
7851248	7852868	And let's see how well it does.
7853168	7855188	And here's the plan that it came up with.
7855268	7860848	Okay, the goal is a polished visual prototype that matches the FlexHelp architecture.
7860848	7863808	Okay, and here it lists some details about the architecture.
7864248	7867248	And let's go ahead and run this prompt.
7867408	7868988	So it finished working.
7869448	7872068	And let's go ahead and see what we have here.
7872188	7873848	Okay, so this is our app.
7874008	7875888	And this is kind of how it looks like.
7876028	7877588	Okay, book practical help.
7877748	7880128	And we have some active requests.
7880368	7882668	We have booking entry, helper dashboard.
7883228	7884108	We have this.
7884428	7884968	Look at this.
7885088	7885988	It even works.
7886328	7890828	Service detail, a small plumbing repair, helper dashboard.
7890848	7896968	shell. And so this UI doesn't look too bad, but there is something that you need to know when you
7896968	7904488	design UI with Codex. They all look pretty much the same, or at least very, very similar. And that
7904488	7911708	is because Codex is not really an expert when it comes to designing pages. It's great for coding,
7911968	7917988	for solving all kinds of problems, but for actually designing stuff, it's not the most
7917988	7923708	ideal tool. There are a lot of other tools that do it a lot better. And so during this specific
7923708	7930208	app build, I want to bring in another tool and show you how we can have a more specialized tool,
7930388	7936868	actually design the UI, and then bring that UI back into Codex and get Codex to kind of implement
7936868	7943068	it. Okay. Now, when it comes to UI designs, there's lots of cool tools. There's Google Stitch,
7943068	7948528	there's Figma, and there's also a tool that I really like to use, and it is called Flutter
7948528	7954828	Flow Designer. It's a very, very lightweight tool, and it works really great with Codex.
7955068	7961488	And so if you head over to designer.flutterflow.io, you're going to be on this page here. And you can
7961488	7966748	use the web app version here, but what I really like to do is I like to use their desktop app,
7966748	7972028	okay? Here's the desktop app. And what's nice about the desktop app is that you have this
7972028	7979928	tab integrations. So if you click over here, you can connect designer to external agents and IDE.
7980368	7986328	So Claude Code, Gemini CLA, and Codex. And so I have this setup. So all you need to do is click
7986328	7994188	here. Now it's installed. And now this app here is going to serve as an MCP server. Okay. Because
7994188	8001688	if I go to Codex here and I press command comma, and I go into MCP servers, I also have this
8001688	8006768	Flutterflow Designer configured here. And if you want to set this up, you can simply ask Codex to
8006768	8012028	do it. It's going to research, it's going to figure out, and it's going to eventually set it up for you
8012028	8017868	so that you can have this Flutterflow Designer as one of your MCP servers here. Okay, so now that we
8017868	8024028	have this set up, what we want to do is we want to go into this Designer, and we want to click on
8024028	8029628	New Design. And here you can enter a prompt, ask you to design any kind of app UI for you, whether
8029628	8035708	it is a mobile app or desktop app. They also have, you know, explore styles feature, or you can have
8035708	8040748	an instant generation. Now, what you don't want to do is you do not want to type this prompt directly.
8040748	8046868	You want to ask Codex to generate a prompt for you, since it knows a lot more about the app,
8047008	8052508	that you can input here. And this is the same workflow regardless of whether you're using this
8052508	8058708	tool, Google Stitch, or pretty much any other tool out there. And so we're going to go ahead and we're
8058708	8063548	going to grab a prompt to do just that. And here's a prompt that we can use. Create a polished
8063548	8069708	Waterflow Designer concept for FlexHelp. FlexHelp is a two-sided marketplace, and we are telling it
8069708	8075428	what kind of screens to design. We give it some design requirements. We give it some guardrails,
8075648	8079908	stuff like that. And so we're going to input this prompt, and here we're going to stay on
8079908	8085328	Explore Styles, and that way we can have different styles show up, and we can decide which one we
8085328	8090488	like better. So I'm going to go ahead and run this. And here are the designs. So as you can see,
8090548	8096888	they're all very different. We have this, we have this, we have this, we have these ones. So,
8097028	8103088	and you got to admit that in my view, these look a lot better than what Codex did, right? So this
8103088	8110528	is what Codex did. In my view, these designs are a lot more interesting than Codex's design. Okay,
8110528	8112408	So I don't know which one you guys like.
8112628	8113368	This is a classic.
8113368	8117408	one you guys like this is a classical one this is nice let's take a look let's go ahead and use this
8117408	8122368	classical one so i'm gonna say use this style and it's gonna use the sound that is gonna generate
8122368	8127808	all the pages that we need so here we have seven pages that we need so now we have all the pages
8127808	8135948	Here we have customer home, we have service details, really nice page, booking request form, customer booking status.
8136188	8141648	We even have a map, helper dashboard, helper request management, and a user profile.
8141788	8150528	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.
8150608	8151708	And so let's take a look.
8151788	8155348	So this is called Flex Help Marketplace, the name of the project here.
8155348	8158468	And so now what we're going to do is we're going to go back to Codex.
8158728	8160868	We're going to close out this section here.
8161048	8165648	And we're going to give it a prompt that's going to ask it to connect to Flutter Flow Designer.
8166008	8173508	Look at that specific project and grab those designs and bake them into our app right here.
8173708	8175968	And I have a prompt here to do just that.
8176088	8176968	So here's the prompt.
8177048	8181748	Update the FlexSelf Static UI to match the approved Flutter Flow Designer reference.
8181748	8188988	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.
8189168	8198628	Use Flutterflow Designer MCP, and then project is, because there are multiple projects, so we want to copy this project here, this.
8198848	8203628	And we're going to go into plan mode just to make sure that everything is good, and I'm going to run that.
8203628	8211688	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.
8211748	8218588	This is our agent, our client, because Codex is acting as an MCP client connecting to this MCP
8218588	8224568	server. And as you can see, it's analyzing this page. And you can see this little Codex icon here.
8224708	8229808	And you can see it says here, one active agent. It's studying the designs. And then it's going
8229808	8237868	to pull the designs back here and build an actual UI using those designs. And the goal here is to
8237868	8243768	ensure that it builds a pixel perfect, or at least as close as possible to what we see here.
8244008	8249548	Okay, so let's see what it's doing. So now it came back with a plan. Update the existing React
8249548	8255728	static UI to visually follow the approved Flutter Flow Designer reference. So here it has
8255728	8263468	five pages, but over here we actually have more. We have seven pages. So I don't know if it missed
8263468	8270768	it or that it wasn't part of the prompt or some mix-up. So we want to make sure that it captures
8270768	8278588	all the seven pages. Ensure that it captures all the seven pages from Flutter Flow Designer project.
8278928	8284728	Okay, and still in the plan mode, just to make sure we get this right, because our app ideally
8284728	8290768	should have all of these pages. User profile helper, request management helper dashboard,
8290768	8296528	etc etc all of these make sense okay so it went ahead and it updated it and it's going to add
8296528	8302448	static page components for all seven pages okay submit this all right so it has implemented the
8302448	8308768	seven page designer reference update let's go ahead and see how it looks all right so this looks
8308768	8316048	a lot better in my opinion right we have settings we do have this ch customer home do we even see
8316048	8323228	that? I don't even see that here. But this customer home service details, click on book. So this menu,
8323368	8328828	we need to kind of remove this. So let me go ahead and sell it. What are those abbreviations? Let's
8328828	8336308	see. They need to be there and see what it says. But it looks a lot cleaner than the original UI,
8336548	8343388	at least to my eyes. And now we're doing a little bit of tweaking, cleanup plan. Okay. They were
8343388	8350468	placeholder text icons used to mimic the nav icon column. So we need to remove that and we should
8350468	8356008	probably remove any other placeholder icons. But right now it looks fairly clean. Static preview,
8356128	8362448	what is that? This also needs to be removed. So we're going to actually tell it, check for any
8362448	8369108	placeholders and see if you can match what it should be on the design. Pull the design elements
8369108	8373168	and replace these placeholders with the actual design.
8373448	8374708	All right, so let's fix it.
8374768	8375868	Now it looks a lot better.
8375968	8378268	We still see some other static preview.
8378368	8378908	That's okay.
8379068	8383148	Let's see if they go away once we have real data being fed.
8383288	8385228	So once we're happy with the UI,
8385528	8388128	we can start designing the backend.
8388128	8390588	Data model should match the screens
8390588	8392068	that we actually have here.
8392508	8393648	And so for FlexHelp,
8393868	8396848	the first schema should support service browsing,
8397028	8398908	helper profiles, booking creation,
8399108	8406068	and helper status updates anything beyond that can wait and here's a prompt that we can use
8406068	8412868	to connect our app to convex okay we're going to be using convex for this app as well so we have
8412868	8419828	here connect flex hill ui to live convex service and helper data let's go ahead and keep it in plan
8419828	8425508	mode all right so this is our plan this is the convex read path plan connect the customer facing
8425508	8432268	marketplace UI to convex for the first database-backed read path. The repo currently has
8432268	8439108	no convex setup to add convex from scratch, et cetera, et cetera. And we have convex here running.
8439248	8444628	We have these three projects, one that was created for the other app that we did. And so we're going
8444628	8450888	to be creating another project for this app as well. So it has implemented the first convex-backed
8450888	8455668	read path for the customer marketplace. And these are the files that has changed. This is what's
8455668	8461608	connected. And if we jump into our Convex dashboard, we can see we have a brand new project here that
8461608	8468068	wasn't there before. And if we jump here, we should see that we have a deployment here on my
8468068	8475348	own machine. This is a local deployment that Convex is running on, right? This is not on Convex. It's
8475348	8480988	on my own machine. And we also have a production, right? So with this deployment here, you go into
8480988	8487288	data, we can see that we have categories, we have helper profiles, we also have services, and then
8487288	8492928	we have a bunch of functions, right? Marketplace list, and then we have seed, creating seed data.
8493168	8497828	Now, if you go into production, we may not see anything there, right? There's nothing there
8497828	8503748	because we haven't deployed this app to production. There's no need for a production deployment. Now,
8503748	8510068	if you jump back to Codex and we refresh the app, this is now data that it's pulling from my local
8510068	8515788	convex deployment. Okay, so we have here Marcus. If we go back here, we should see Marcus, right?
8515868	8521528	Helper profiles, there's Marcus. And if I change Marcus, if I edit name and I change, let's say,
8521628	8526568	Marcus, right? And I go back here, now it's automatically Marcus E here. It automatically
8526568	8532268	updates. If I change that to James, guess what? Now it says James S. So as you can see, this is
8532268	8537868	now linked to our local Convex instance on my machine. Both of these are on my machine. Now,
8537888	8542748	the next thing that I want to do is I want to build out the booking flow because that's the key
8542748	8548668	in this app, right? The ability to book these services. And I have a prompt here as well.
8548888	8554008	We're going to be using this prompt right here. Okay. Add the customer booking flow to FlexHelp,
8554288	8559808	inspect all of this, and I'm going to set this to plan mode. And let's go ahead and run that.
8559808	8565168	That's our plan. We're going to be adding the first customer site booking creation path on top
8565168	8570448	of the existing convex back service listing. And there's some information there. We're going to
8570448	8575508	implement this plan. All right. So it has implemented the customer booking creation path.
8575728	8582388	And it also tested it out. As you can see, there's also a booking here as well. So let's go ahead and
8582388	8587968	see if this works. All right. So let's say I want to book James. Click over here. So I can't quite
8587968	8593348	pick anything here, but I can do request to book, send booking request, and I need an
8596168	8602908	We need autocomplete here as well. Fill in every field. Okay. So task, task. Okay. This I cannot
8602908	8610328	fill. Every fill. Okay. Customer schedule at 10 a.m. And this obviously needs to be, you know,
8610348	8615408	like a calendar picker, that kind of thing. Okay. And now we have the booking request. And I can
8615408	8621948	click on view bookings and I see my bookings. Okay. So this was done by the Codex while it was
8621948	8628428	testing. So now if we jump into Codex, we should see on my local instance here, we should see
8628428	8634088	bookings. And we see two bookings. Okay, right here. So the booking flow seems to work. There
8634088	8638808	are some rough edges here and there that we need to fix. But for the most part, it is coming
8638808	8644508	together. Now, once customers can create bookings, helpers need a place to see and manage them.
8644968	8650788	The helper dashboard should show incoming requests and make it obvious what action the helper can
8650788	8656328	take next. At the simplest level, the helper should be able to accept or decline a request.
8656328	8662708	After accepting, the helper should be able to move the job into progress and then mark it completed.
8663068	8667268	Those status changes are what turn the app into a workflow.
8667608	8671088	This is also a good place to show the power of live data.
8671348	8676428	When a status changes, the UI should update and the convex row should change.
8676588	8679868	That gives us a real end-to-end marketplace loop.
8680068	8684288	Customer request, helper action, back-end stay, and UI update.
8684288	8689048	And this is the prompt that we're going to be using. Add the helper dashboard workflow for
8689048	8694948	viewing booking requests and updating booking status. Okay, I'm going to switch into plan mode,
8695148	8700548	and we're going to go ahead and send this. So it's asking me that how should the helper workflow
8700548	8706008	handle the existing requested booking status? Keep requested. This is recommended. Preserve
8706008	8711488	existing created bookings. Show it as pending in the UI or rename to pending. Change the stored
8711488	8716928	initial status to pending and requires more data. So we don't want any migration. We just want to
8716928	8722928	go with the easiest option. And then how should the helper request visibility work before auth
8722928	8729328	is added? Helper selected. This is add a simple static helper switcher filter so each helper sees
8729328	8734828	bookings for their convex helper profile only. Simplest UI and backend, but less realistic. So
8734828	8740228	we want helper selected. Okay, we're going to select that. All right, there's the plan. Add the
8740228	8745148	first helper-facing workflow on top of existing convex booking creation path. We're going to
8745148	8750828	submit this. Here's our progress. All right, so we just implemented the helper booking status
8750828	8755508	workflow. These are the files that changed. This is what it did. So it updated it through pending,
8755828	8762228	accepted, in progress, completed. It viewed it under helper James, created booking this. So it
8762228	8767088	did all that. It did some tests. Let's go ahead and open it, and let's see what we can do. So this
8767088	8773328	is the helper booking status. By going to helper dashboard, have my incoming requests, right? So I
8773328	8779328	can accept it, I can start it, and I can complete it, okay? So that's the piece that is working. I
8779328	8784688	can also cancel it, and that is canceled, and that's it. I can't come back to it. I can't do
8784688	8789508	anything. Here we have recent activity, right? Completed, completed, canceled. And this is the
8789508	8796108	one that did, 148.116. This is the one that it has completed. This seems to work, right? And we have
8796108	8801308	canceled, we have completed. Even a simple marketplace has different responsibilities.
8801548	8807008	Customers create booking requests and view their own bookings. Helpers manage requests that belong
8807008	8813728	to them or are available to them. Admin or system logic may handle category moderation or platform
8813728	8819408	level controls later. The key point is that these rules should not only live in the UI. Backend
8819408	8825728	functions need to enforce ownership and permissions because the UI can always be bypassed.
8825728	8831888	This is where Codex needs to think carefully instead of just adding buttons. And so now what
8831888	8837488	we want to do is we want to add the roles, auth, and the access boundary layer. And here's the
8837488	8843648	prompt to do that. Add the first practical roles, auth, and access boundary layer around the existing
8843648	8848528	FlexHelp workflows. Okay? So we're going to go definitely in the plan mode. We're going to run
8848528	8854208	this and see what it says. And so it has a question for us. Which identity approach should this plan,
8854208	8861768	should this step plan for demo sessions add convex back demo users and or convex
8861768	8867288	or add real convex or sign and sign up more production shape but larger and
8867288	8871548	currently beta or this clerk use third-party auth provider let's go with
8871548	8876828	convex or how should customer helper roles be represented for version one
8876828	8882768	role plus profile so what is this each demo user has customer helper both and
8882768	8888188	and helpers linked to one helper profile for requests. Separate accounts. Customer and helper
8888188	8895488	are always separate demo users. Simpler boundaries, but less flexible. And sometimes when I'm not sure,
8895688	8900888	but I want the system to come up with a really solid answer, this is what I usually type. For
8900888	8908228	the second question, what's the most durable long-term option? Okay, that's the key here,
8908228	8914188	durable. And let's see what it says. The most durable long-term option is role plus profile.
8914268	8919948	Perfect. That's it. And for the first question, choose demo sessions for this course step. Okay,
8920008	8927348	so let's go ahead with demo sessions. Okay, so do demo sessions and role plus profile. Let's just
8927348	8933628	go with the recommendations. Expand it. All right, so now you can see that Codex is testing everything,
8933628	8939588	right? It's testing on the UI in the browser. And you see this cursor right here. The browser
8939588	8945148	flow now confirms a customer created booking appears for the linked helper and can be moved
8945148	8950668	into in progress. All right. So it has finished and it has implemented the demo roles and access
8950668	8957428	boundary layer over here. Okay. So marketplace browsing stays public. Booking creation requires
8957428	8964348	a customer or both demo user. Customer booking status only shows bookings owned by the signed
8964348	8971128	in customer. Helper request status updates require a helper or both demo user with a linked helper
8971128	8977828	profile ID. And so remaining limitation, this is still tutorial demo auth, not production
8977828	8983828	authentication. Real convex auth or clerk can replace demo session issuance later while keeping
8983828	8990948	the same role profile access model. And so this should give us some role separation, right? Some
8990948	8996028	kind of authentication on the backend. And here, if we jump into Convex, you can see we now have
8996028	9001768	users over here, right? These are the users and there's a role. So you can be either both or you
9001768	9007208	can be a helper or you can be a customer. And depending on which role you're in, you can do
9007208	9014968	various operations. Here we have sessions, we have various services, we also have functions that also
9014968	9021748	handle these roles. So you can list demo users, you can start demo session, viewer, list for helper,
9021748	9029028	list for customer, etc. And these functions, they are meant to work with specific roles,
9029168	9034988	so that authentication is baked in into these functions. Now, when something breaks, the wrong
9034988	9041148	move is to immediately ask Codex to rewrite a whole section. The better move is to give it the
9041148	9048008	error, ask it to inspect the relevant files, and make it explain the likely cause before changing
9048008	9054008	anything. That debugging loop is the same whether the problem is a browser error, a build failure,
9054288	9061668	a convex function error, or a UI state that does not make sense. Observe the issue, diagnose it,
9061668	9069028	patch it narrowly and verify the fix. And so let's give it a prompt that will deal with this
9069028	9073368	sort of issue regarding debugging, polish, verification, stuff.
9073368	9078248	stuff like that. We're going to be using this prompt over here. Debug, polish, and verify the
9078248	9084348	existing FlexHelp product workflow. Inspect the current app first, then identify the smallest set
9084348	9091108	of fixes and polish improvements needed to make the current workflow feel credible. Let's jump
9091108	9097968	into plan mode. Right away, it tells us that I see a few concrete polish fixed candidates already,
9097968	9104088	and it lists them here. Okay. And so the build passes and both local servers are responding.
9104368	9110308	So it's using an in-app browser now for a quick workflow probe. So the plan targets actual UI
9110308	9116348	issues rather than guesses. Okay, so let's wait to see what it finds. And this is the plan that
9116348	9122768	it came up with. Tighten the existing customer, helper, convex, and demo OAuth workflows without
9122768	9128928	adding new product scope. Okay, so it lists a bunch of things. And we want to quickly scan
9128928	9135108	assumptions. No new marketplace features will be added, no payments, nothing. Okay, that stays.
9135108	9140608	and here are some key changes. You can kind of scan through that. Let's go ahead and submit this.
9140748	9146908	Right. So it is done and it has implemented the debug polish pass and it actually fixed a lot of
9146908	9152668	interesting things. It fixed some placeholders. It did some testing. It switched to different
9152668	9158468	accounts. Actually cleaned up a lot of cool stuff. So if we take a look here, we can see that we can
9158468	9164608	book. We can request a book. We can describe the task. We can fill all of this out, send,
9164608	9170768	at the preferred date. And now it's showing in that I'm signed in as the customer, right? And
9170768	9175748	I can switch a demo user. Now I'm signed in as the helper, and now I'm signed in as both.
9175988	9181688	Customer access, choose a customer demo user to create a booking request. So it's coming along
9181688	9189088	really, really nicely. And the final build step is deployment. The app is not done until the front
9189088	9195388	and is live connected to the intended convex backend and smoke tested through the real product
9195388	9200788	workflow. So let's go ahead and grab this prompt and let's go ahead and paste it. So deploy the
9200788	9207628	existing FlexHelp app with Vercel and smoke test the connected convex backend. Okay, we're going to
9207628	9212228	jump into plan mode so that it can prepare everything, plan everything out. One thing that
9212228	9216468	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
9216468	9223388	it uses the Vercel package. Choose the Vercel plugin. And I'm going to press Command-Enter
9223388	9229808	so that it steers the conversation because we want the model to ensure that it catches that,
9229888	9234608	right? That we want to use the Vercel plugin. Which convex environment should the deployed
9234608	9239468	Vercel app use for the smoke test? We want to use production. And where should the front end
9239468	9245028	be deployed? New personal project. Exactly. This is a brand new project. We already have a bunch
9245028	9249748	of projects, right? So if we go over here, we have this project. Actually, we should have used the
9249748	9253388	existing project. We already have this project, but I think it's going to create a new project.
9253748	9258808	Let's see if we can sell it. I'm going to copy that. See if we can use the existing project.
9258908	9263828	No need to create a new project. And let me check. So this is actually plan mode. So we're okay.
9263828	9269228	Okay. Implement this. And here it's going to create a production. So if we go over here,
9269408	9273888	remember we're using this. We also have a production deployment setup. So it's going
9273888	9278328	to be using the production deployment. So we should see data and tables and functions and all
9278328	9283228	that good stuff as part of this deployment. Production convex is now seated and responding
9283228	9287948	with services and demo users. So if we go over here, we have everything now. Look at this.
9288168	9292748	Sessions, services, we have the data. All right, so it looks like it has deployed it,
9292968	9298068	and now it's doing a couple of smoke tests to make sure that everything works in production,
9298068	9304628	because now it's in production and it's also using the production convex deployment, right?
9304688	9309488	So we need to test things again because, you know, it's using new environments now.
9309708	9315108	All right, and it is done. Deployed Flex Help. This is the URL. This is the Resolve Project
9315108	9322108	deployment ID. Everything is live now, okay? And you can access it as well at this URL, okay? So
9322108	9328508	we have customer home and I am signed in as one of these demo users, customer or helper, right?
9328548	9334088	I can go into helper dashboard and let's say I go and I sign in as a customer and I go into
9334088	9339028	customer home, but I can't click here, right? This is helper access, right? Remember the roles,
9339028	9345248	right? It's being handled here. And so now as a customer, I want to book professional seasonal
9345248	9351508	garden cleanup. I'm going to book this request to book. I'm going to fill all of this out, 10 a.m.,
9351508	9357188	two hours, it's fixed, address, send booking. Okay, so we've booking requests submitted,
9357308	9362528	your request was saved, view my bookings. So we have all of these pending. And so now I'm going
9362528	9368188	to log in as Marcus. And Marcus is going to go into helper dashboard. And now he sees the booking.
9368188	9373548	And I'm going to say accept are complete. It's completed. And now if I come back as Anders again,
9373748	9381428	and I go into customers home, booking request for maybe summary right here, customer booking status.
9381508	9386008	Okay, there we go. Completed. And here we see completed. This one is completed. Actually,
9386188	9390268	this one from Marcus, it has been completed. And then there are some more requests here.
9390368	9395228	So the flow is working. The flow is working perfectly. Of course, there are so many other
9395228	9401728	things that we can do. We can use real OAuth. We can change the page. We can update things.
9401868	9409168	But right now, the core of the app works perfectly. And just as a little bonus, when you reach this
9409168	9414488	stage. There's more things that you can do, but one thing that, you know, right away that you can
9414488	9421828	ask Codex to do would be something like suggest top five high impact, low effort features,
9422108	9427148	functionalities. And I'm going to switch into plan mode. And we want to see if there's some
9427148	9433448	high impact features that we can add that do not require a lot of effort. And here they are,
9433448	9439848	top five high impact, low effort next features I'd prioritize. Functional marketplace search,
9440048	9445208	booking detail view, customer cancel pending request, et cetera, et cetera. And if you don't
9445208	9453088	want to implement these right now, what I'd like to do is save this list as dots to do MD as a
9453088	9462068	markdown file and prioritize each item on a scale of one to five, one being urgent. And so that way
9462068	9467368	I have a constantly evolving list of things that I can build in the future.
9467548	9473248	So I do not need to ask Codex all the time, constantly, you know, to suggest new features.
9473508	9478028	And I'm going to say submit, and that's going to go create this docs directory as well.
9478468	9484148	And this to do MD, which is the file that I usually keep to store new features.
9484428	9486528	And now we can open this file and take a look.
9486588	9488828	So this is priority one, two, three, four, five.
9488828	9495988	So now we have an app that is live, that is on the internet, that we have built, that works.
9496128	9499948	This workflow, this main workflow works as expected.
9500068	9504328	But of course, there's so many things that you can do to improve this app.
9504548	9510328	And in some of the later videos, I'm going to be showing you some more advanced Codex techniques
9510328	9515428	that you can use to make your apps even better and more robust.
9515428	9520468	because I've been using Codex for a while now, and I have some advanced tips and tricks that
9520468	9525368	I'd like to share you in some of the future videos. And so I really hope that you enjoyed
9525368	9532648	this mega Codex tutorial. Now, if you want to go ahead and build this app or modify this app or
9532648	9538508	whatnot, I'm going to be leaving all my prompts, every single prompt that I use to build this app
9538508	9544328	inside of our amazing Patreon community. And you can check it out and hopefully join. There are
9544328	9549908	lots of great people there. And of course, support this channel and support my work. And so
9549908	9555008	like this video, leave a comment, and check out our amazing Patreon community.