CTK Advisors
Back to Blog

Building a Todo App with Claude

Practical insights from building a production-ready application using AI assistance - from concept to deployment in an afternoon.

·3 min read·CTK Advisors Team
developmentaiclaudenext.js

We built a todo app using Claude. Here's what actually worked.

Why This App

Not just another todo app. This is a testbed:

  • Template for rapid AI-assisted development
  • Platform for experimenting with AI-driven features
  • Proof that you can build production-ready apps in an afternoon
  • Foundation for more complex applications

Built with every bell and whistle:

  • Full CI pipeline
  • Security scanning
  • Performance monitoring
  • Test coverage
  • PWA support

All of it. In an afternoon. With AI doing the heavy lifting.

The Setup

Claude Desktop + MCP tools. That's it. No IDE, no traditional development environment needed. Just focused conversations with an AI that can read, write, and modify code.

What Worked

Direct, iterative conversations:

  • "Make it simpler"
  • "Try a different approach"
  • "That's too complex, let's strip it back"
  • "Show me what you're thinking"

When Claude went off track or got stuck in a loop:

  • Stop the current thread
  • Reframe the problem
  • Start fresh with clearer constraints

What We Built

A brutalist todo app. Not because it's trendy, but because it forced clear decisions:

Check out the live app at todoornottodo.org.

  • Monochrome
  • Sharp edges
  • No decorative elements
  • Function over form

Tech stack stayed modern:

  • Next.js 15.1.3
  • React 19
  • TypeScript
  • TailwindCSS 3.4

Security and performance weren't optional:

  • OWASP checks
  • Lighthouse monitoring
  • PWA support
  • Automated testing

The Process

Real example of building the drag-and-drop feature:

  1. Us: "Add drag-and-drop for todos"
  2. Claude: Suggests complex solution with react-dnd
  3. Us: "Too heavy. What else?"
  4. Claude: Proposes @atlaskit/pragmatic-drag-and-drop
  5. Us: "Better. Show me"
  6. Claude: Implements clean solution

When it worked: Direct requests, clear constraints, quick iteration. When it didn't: Vague goals, no pushback on complexity, letting patterns repeat.

The Workflow

  1. State what you want
  2. Let Claude code it
  3. Review the output
  4. Say "no" to complexity
  5. Iterate until simple

The key: You're the architect, Claude's the implementer. Stay in your lane.

Real Talk

Things we learned:

You don't need to be technical to build with AI. But you need to be:

  • Clear about what you want
  • Willing to say no
  • Ready to restart when stuck
  • Focused on simplicity

Claude can write complex code. Your job is to prevent it.

Where This Goes

The todo app is just the beginning:

  • Add AI task categorization
  • Implement smart scheduling
  • Build team collaboration features
  • Add natural language processing

But the real value? The template it provides:

  • Production-ready in hours, not weeks
  • Every modern dev practice included
  • Ready for feature expansion
  • Pattern for future AI-assisted projects

We're open-sourcing this. Not because the code is special, but because the process is.

What's Next

This is part one of our AI development series. Coming up:

  • Building a full-stack app with AI
  • Using Claude for code review and refactoring
  • AI-driven testing strategies
  • Scaling applications with AI assistance
  • Security considerations in AI-assisted development

Want to build something similar? Get in touch. We'll show you how.

Notes

The tools used:

  • Claude Desktop
  • MCP tools for file operations
  • That's it

The skills needed:

  • Clear communication
  • Design decisiveness
  • Willingness to restart
  • Focus on simplicity

Everything else? Claude handled it. (including this post)

Stay tuned. We're just getting started with AI-driven development.

Share this post