Build a To-Do App with Codex: Part 1

Hey y’all. Today we’re going to use agents to build a to-do list app. I have a rough idea what I want, but we’re going to work with Claude to figure out the rest.

You’ll notice I’m using the web UI for this. You can use Gemini or ChatGPT—I just have Claude open. For this exercise any of those agents work.

I want this to be fairly simple because I want to time-box it. I don’t know if it’ll take 30 minutes or two hours; I may have to split it up. But I want to go through the process because if you’re watching these videos, you probably want to make stuff. The artwork things are cool, but actually building software that does things is the goal.

This is the first time we’re going to build a piece of software, and I know you’ve seen a thousand to-do list apps. Everyone’s got opinions about them—now you can build your own.

I’ve got Claude open and I’m going to start talking to it because I have a high-level idea but I don’t know exactly what I want to build.

I’d like to build a to-do list application. Browser-based, TypeScript, probably local storage. I’d like dates on tasks. The user should be able to add and delete to-dos. I want it visually interesting—I’m thinking monochrome with strong typography. What other questions do I need to answer to start planning this?

At the beginning of these things I try to get the agent to ask me the questions we need to answer. If nothing else, it’s a useful brainstorming function.

One thing I haven’t told it yet is the outcome. Right now it’s trying to jump in and build an artifact in the browser. That’s no good—we can’t actually do anything with that. It’s an interesting toy, but what we want is a plan to hand off to an agent.

“I don’t want you to build it right now. I want you to figure out what other missing questions we have, and then we’ll create a plan to hand off to another agent to build. Do not actually build this application.”

Sometimes you have to specify that. This is actually one advantage of plan mode in the CLIs—it won’t just start building things.

Single HTML file, not React. Inline editing. Overdue tasks get a red dot. Responsive—works on mobile and desktop. Drag to reorder. Local storage for persistence. Monospace typography—Claude suggested JetBrains Mono, which is fine. I love IBM Plex for everything, but we’ll try JetBrains here.

I waved off categories, tags, recurring tasks, notifications and multi-device support. We’re going for the smallest thing that’s still interesting.

The great thing about working with agents is you can see an option, decide you don’t want it and move on—it’s not a big deal.

I’ll open Warp. ls—home directory. cd developer. ls—those are all my projects. mkdir to-do. Then I’m going to open Codex for this one.

We haven’t used Codex before. Codex is OpenAI’s coding agent CLI. It works basically the same way Claude Code does—you don’t have the cute alien guy, but it’s a really good tool. We’re on GPT-5.5.

I’m going to enter plan mode—shift-tab—and tell it we’re going to build this project, with the plan the other agent gave me.

“I’d like to build a to-do list app. I put together a preliminary plan with another agent. I’d like both a high-level plan with phases, and within each phase we’ll plan, build, live-test and iterate. The idea is a master plan with high-level phases, then plan each phase when we get to it. What questions do you have? What are we not thinking of?”

Then I paste in the plan we just put together.

I know everyone talks about Claude, but honestly for the value you get from the $20-a-month plan, you can probably build a lot more with Codex and GPT-5.5 than you can with Claude’s Opus 4.7 right now.

Codex tends to be more thorough—it asks fewer questions and does a little more on its own. You’ll get a feel for the differences as you use them.

One thing I like to do, especially on bigger plans, is ask the agent to review the plan as an architect. What are we not considering? Where are the weak points? How could this be simpler? Then incorporate those findings back into the plan.

Skills are basically saved prompts—you invoke them with a slash command. I don’t have an architect-plan-review skill on this computer yet, so I’ll have Codex create one.

“Before we get started, I’d like you to add a skill called architect-plan-review. It should review the plan as a UI architect. What are we not considering? Where are the weak points in this plan? How could it be simpler? Take those findings and incorporate them into an updated plan.”

That saves us a little time on each phase—we just invoke the skill.

Quick syntax note—Claude uses / to call skills; Codex uses $. Different CLI, same idea.

The other thing we need before we build is the Chrome DevTools MCP. MCPs give agents tools to do things. This one gives the agent eyes into your browser—you’ll see it open another Chrome window. It’s the one MCP you have to have for building web apps.

“Can we find and install the Chrome DevTools MCP globally?”

I already have it, so it’ll just confirm. If you don’t, you’ll have to restart your CLI after installing—Ctrl+C twice, then re-open. Be aware that conversation context isn’t restored on restart, so don’t do this mid-thought.

You can see Codex opens Chrome on its own and a banner appears—“Chrome is being controlled by automated test software.” That means Codex can drive it.

“Let’s move to phase 1A. Let’s start planning. What questions do you have?”

Codex has a lot of questions—more than I expected. Where should the add-task form sit, top or bottom of the list? On mobile, the bottom is easier to reach, but I don’t want a traditional form. Ideally there’s an always-present reserved space in the UI with muted “create task” text. When the user hits enter, the task appears above.

Don’t show create dates for now. Don’t worry about sample tasks—come up with something on your own or we’ll talk about it later. UI should feel spacious with large text. Start with JetBrains Mono. App title—just call it “To-Do” for now. No theme toggle—default to the system color scheme. No red accents yet; we’ll add an overdue indicator later. Minimum screen width 390—there aren’t many phones below that anymore.

It’s done, and honestly the result is kind of ugly. I think I regret going monospace—the thickness of the typeface is hard to read at large sizes. There’s a header I don’t love and a fade-with-line thing happening at the bottom that isn’t quite right.

“I’m not crazy about the typography. Let’s change from JetBrains Mono to a sans-serif. Also let’s hide the due dates for now. The cream background should be replaced with very high contrast—white on black.”

Actually—Plus Jakarta Sans. It’s geometric, it’ll look good at large sizes. Let’s switch to Plus Jakarta Sans.

It’s hard to know when to push on visuals versus keep building features. But the agent has the context of what it just did, and a lot of what you set here sets the pace for the rest of the work—so I usually fix the foundation early.

That looks much better. But let’s respect the system color scheme—I’d expect this to be light right now.

Also remove the giant “To-Do” header and the open-task count at the top. This is a generic to-do list app—we don’t need branding on it.

In the footer it’s using a border and a gradient for “create task.” Get rid of the gradient; the border should be a solid fill.

For the rows—I’d like each item to span the full width of the screen with no side padding, so the whole row is a selectable target. On desktop there’s a max-width set, so we’ll keep that contained, but on mobile each row goes edge-to-edge.

That’s a much better scaffold. We’re still in phase 1A—nothing functional yet—but this is the visual baseline.

“Should we plan the next phase?” Phase 1B is real tasks—input clears after a successful creation, stored to local storage. New tasks appear at the bottom, right above the composer.

I don’t think this one needs an architect review—it’s small enough to just go.

If this works—yep, hitting enter creates a task. Plus sign also creates one. Reload—still there. Nice.

Next, complete and delete. Use an X for delete and put it where the grip handles currently are; we’ll talk about drag handles in a future episode.

Refresh, and now we see X’s. Completing should probably have an animation, but for now we can add, complete and delete—and it persists.

We’ve got the basics working. I think this is a good stopping point. We’ll pick back up on this another time and keep working on our to-do list. Thanks for watching.