Learning Space

Module 04

Vibe coding with Codex

Build a Kanban todo system
one Codex step at a time.

This module turns Codex practice into a real product build. You will use Flask for the backend, HTMX as the primary frontend library, SortableJS for drag-and-drop, and SQLite for persistence. The page is structured like a wizard so you can move from scaffold to ship without guessing the next prompt.

Open the wizard Open the manual

Reference split

Use two views: one for building, one for operating Codex well.

The wizard tells you what to build next. The reference page tells you how to use Codex, prompts, and commands around each step without losing control.

Build flow

Stay in this wizard while you implement

Use the eight build steps when you know the current stage and want the next concrete prompt, checks, and project targets.

Open the build steps
Reference

Open the Codex manual and commands page

Use the companion reference when you need prompt usage rules, CLI commands, slash commands, and a cleaner operating checklist.

MVP scope

Keep the first version useful, not overengineered.

Do not add auth, real-time sync, or a SPA build step in version one. The goal is a clean local product with crisp CRUD flows and persistent drag-and-drop.

01

Board shell

One board page with default lanes such as Backlog, In Progress, and Done.

02

Lane and task CRUD

Create lanes, create tasks, edit tasks, and delete tasks without leaving the board.

03

Order persistence

Every lane and task keeps a stable position value in SQLite so reloads are reliable.

04

Drag and drop

Users can reorder tasks in a lane and move tasks across lanes with minimal client JS.

05

Ready to hand off

Seed data, setup instructions, and a few tests make the project reusable after the first build.

Stack choice

Choose the stack that matches the job.

For a Flask-first product, the best primary frontend library here is HTMX: it keeps the app server-rendered, removes the need for a frontend build pipeline, and stays easy for Codex to iterate on. SortableJS is the small specialist piece for drag and drop.

Flask

Use Flask for routing, Jinja templates, simple CLI commands, and a tiny operational surface.

HTMX + SortableJS

HTMX handles fragment updates cleanly. SortableJS handles the one thing HTMX should not fake: drag-and-drop ordering.

SQLite

SQLite is enough for a single-user or local MVP, keeps setup friction low, and is perfect for early Codex-driven reps.

Wizard

Use the build sequence as your Codex conversation sequence.

Each step gives you a goal, concrete verification points, and a copy-ready prompt for Codex. Do not jump ahead until the current step actually runs.

Choose a build step

Step 01

Scaffold the project cleanly

Start by forcing structure. A calm project tree is worth more than a fancy first feature.

What this step should produce

  • A Flask app entry point, template folder, static folder, and instance folder.
  • A `requirements.txt` with Flask, HTMX-compatible flow, and test dependencies.
  • A placeholder board page that already runs locally.

What to verify

  • The app starts without a database yet.
  • The homepage route renders a visible board shell.
  • The structure is simple enough that you can explain every file.

Codex prompt

In this empty repo, scaffold an MVP kanban todo app using Flask, HTMX as the primary frontend library, SortableJS for drag-and-drop, and SQLite for persistence. Create a simple structure with app.py, db.py, schema.sql, templates/, static/, instance/, and requirements.txt. Keep the stack minimal, no React or frontend build step. First give me a short plan, then implement the skeleton and a placeholder board page that runs locally.

Project map

Give Codex a concrete target structure.

The tighter your file map and route contract are, the less thrash you will get during the build.

Suggested tree

Keep the repo obvious

app.py
db.py
schema.sql
requirements.txt
templates/
  base.html
  board.html
  partials/
    lane.html
    task_card.html
    task_form.html
static/
  board.css
  board.js
instance/
  kanban.sqlite3
Data and routes

Define the contract early

lanes(
  id, name, position, created_at
)

tasks(
  id, lane_id, title, description,
  priority, due_date, position,
  created_at, updated_at
)

GET  /
POST /lanes
POST /tasks
POST /tasks/<id>/edit
POST /tasks/<id>/delete
POST /tasks/reorder

Ship checks

Close with one integration prompt and one runbook.

Final prompt

Integration cleanup pass

Act as a senior full-stack engineer reviewing this Flask + HTMX + SQLite kanban app. Tighten the templates, remove duplication, make sure the SortableJS reorder logic is resilient, and keep the stack minimal. After changes, run the highest-value checks you can and summarize any remaining risks or tradeoffs.
Runbook

Commands worth standardizing

python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
flask --app app init-db
flask --app app seed-demo
flask --app app run --debug
pytest

Module close

Treat this as a repeatable product-build pattern, not a one-off demo.

Once the Kanban app works, replay the same wizard logic on another CRUD product and keep improving your Codex prompts from evidence.

Back to the homepage