CTK Advisors
AboutServicesBlogContact
Back to Blog

Navigation

  • Home
  • About
  • Services
  • Blog
  • Contact

Projects

  • Brutalist Todo
  • Shellbridge
  • Seekarc
  • Elevate Learning KB

Connect

  • Email
  • LinkedIn
  • GitHub

Legal

  • Privacy Policy
  • Terms of Service
© 2026 CTK Advisors. All rights reserved.
    1. Blog
    2. Building a Todo App with Claude
    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.

    January 7, 2025·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"
  1. "Show me what you're thinking"
  2. 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