🌐 Live Demo: Todo App on Vercel
A modern, accessible todo application with advanced features for managing your todos:
- Todo Management: Add, edit, delete, and toggle completion status for todos
- Touch Gestures: Swipe right to complete, swipe left to delete, long press to edit todos
- Keyboard Support: Full keyboard navigation and accessibility (WCAG 2.2 AA compliant)
- Local Persistence: Automatic saving of todos to browser storage
- Responsive Design: Optimized for mobile and desktop devices
Built with Next.js 14, TypeScript, and Tailwind CSS, demonstrating modern web development best practices.
This project demonstrates groundbreaking agentic coding methodology - building complete, production-ready software through pure instruction-based collaboration with Claude Code. This Todo application showcases how complex applications can be developed with zero manual coding, where the human acts as architect/product manager and AI handles all implementation.
This project proves that sophisticated software can be built entirely through strategic instruction rather than traditional hand-coding. The methodology demonstrates:
- Pure AI Implementation: 100% AI-generated codebase following professional development practices
- Role-Based Collaboration: Human provides strategic direction, AI executes technical implementation
- Complete Development Lifecycle: From initial planning to production deployment via instruction
- Enterprise-Quality Standards: TDD, atomic commits, CI/CD, and architectural documentation maintained through AI instruction
- Defines requirements, features, and acceptance criteria
- Sets architectural direction and technical constraints
- Provides feedback on implementation and user experience
- Makes product decisions and priority calls
- Writes all code following TDD methodology
- Implements testing strategies and maintains test coverage
- Handles CI/CD pipeline configuration and deployment
- Creates comprehensive documentation and ADRs
- Manages code quality, linting, and type safety
- Strategic Planning: Human provides high-level feature requirements
- Technical Planning: AI breaks down into implementation tasks with TodoWrite
- Test-Driven Implementation: AI writes tests first, then implementation
- Quality Assurance: AI runs all validation, testing, and quality checks
- Documentation: AI maintains comprehensive project documentation
- Deployment: AI handles production deployment through instruction
- 100% AI-Generated Codebase: Every line of code written by Claude Code
- Professional Development Practices: TDD, atomic commits, CI/CD maintained throughout
- Complex Feature Implementation: Advanced functionality (drag-and-drop, accessibility, responsive design) built via instruction
- Production-Ready Quality: Live deployment with full testing and quality assurance
- Agentic Coding Mastery: Learn effective AI instruction patterns for complex software development
- Role Separation Strategy: Understand optimal human-AI collaboration for maximum productivity
- Instruction-Based Architecture: Experience building sophisticated applications through strategic direction
- Quality Through AI: Maintain enterprise standards using AI-driven development practices
- Scalable Methodology: Develop repeatable patterns for instruction-based software development
This project serves as a template and reference for:
- Effective AI Instruction Techniques: Proven patterns for complex software development
- Agentic Workflow Design: Role separation strategies for optimal human-AI collaboration
- Quality Assurance Through AI: Maintaining professional standards in AI-generated code
- Innovation in Software Development: Pushing boundaries of what's possible with current AI capabilities
Deep Dive: See Development Principles for the strategic philosophy behind instruction-only development, and Agentic Coding Framework for comprehensive methodology details.
- Node.js 22.x or higher
- npm 10.x or higher
- Claude Code Pro subscription
Complete setup instructions: See Installation Guide for Claude Code authentication, troubleshooting, and development environment setup.
Developer Environment Setup: First-time contributors should run ./scripts/setup-claude-settings.sh to configure
Claude Code settings via dotfiles. See Installation Guide for details.
# Clone and install
git clone https://github.com/mikiwiik/instructions-only-claude-coding.git
cd instructions-only-claude-coding
npm install
# Start development server
npm run devVisit http://localhost:3000 to see the application.
Development Commands: See Development Workflow for all available npm commands, quality checks, and testing scripts.
- Framework: Next.js 14 with App Router
- Language: TypeScript for type safety
- Styling: Tailwind CSS
- Testing: Jest + React Testing Library
- Development: Test-Driven Development (TDD)
- Code Quality: SonarCloud for automated analysis
- Mobile: Touch gestures with accessibility-first design (WCAG 2.2 AA compliant)
- Real-Time: Server-Sent Events (SSE) for live synchronization
- Deployment: Vercel with GitHub Actions CI/CD
Targeted Platforms: Mobile-first responsive design optimized for mobile breakpoints (< 640px) and desktop (≥ 640px), with edge-to-edge layouts on mobile and contained layouts on desktop.
Design Documentation:
- Layout & Spacing Reference - Complete visual and technical spacing reference
- Mobile UX Guidelines - Mobile-first design strategy and touch interactions
- Accessibility Requirements - WCAG 2.2 AA compliance guidelines
Current Workflow: Branch-based development with automated PR workflow. All features developed on separate branches with required approvals, automated merging, and continuous deployment.
See Development Workflow for complete branch strategy, PR requirements, and CI/CD details.
- 🚀 Installation Guide - Complete development environment setup
- 📦 Vercel Deployment Guide - Production deployment with Vercel
- 🔍 SonarCloud Setup - Code quality analysis integration
- 💡 SonarLint IDE Setup - Real-time code quality feedback in your IDE
- ⚙️ Development Workflow - Coding standards and practices
- 📊 Project Management - Issue tracking and planning
- 🏗️ Architecture Overview - Technical architecture and decisions
- 🏗️ Architecture Flow Diagram - Visual architecture flow with Mermaid diagrams
- 👤 User Flow Diagrams - Complete user interaction flows and UX documentation
- 📊 Development Workflow Diagram - Complete development process visualization
- docs/setup/ - Installation and deployment guides
- docs/development/ - Development workflow and project management (Overview)
- docs/architecture/ - Technical architecture and design decisions
- docs/diagrams/ - Visual diagrams for architecture and user flows
- docs/adr/ - Architecture Decision Records
- docs/guidelines/ - Process guidelines and standards
- CLAUDE.md - Essential 10-line framework for instruction-only development
Quick Start: Review installation guide, understand the development workflow, browse GitHub issues, and follow TDD with branch-based development.
Issue Management: Priority labels (🔴 critical → 🟢 low) and complexity labels (🟢 minimal → 🔴 epic) guide development planning. See project management guide.
Custom Slash Commands: The project includes custom slash commands (/work-on, /select-next-issue, /quick-wins,
/create-pr, /export-closed-issues) for enhanced workflow. Commands are defined in .claude/commands/.
- ✅ Add/Edit/Delete Todos: Complete todo management functionality
- ✅ Toggle Completion: Mark todos as complete/incomplete
- ✅ Touch Gestures: Swipe right to complete, swipe left to delete, long press to edit
- ✅ Real-Time Sync: Live updates across browser tabs and devices with SSE
- ✅ Accessibility First: WCAG 2.2 AA compliant with keyboard alternatives for all gestures
- ✅ Local Persistence: Browser localStorage for data persistence
- ✅ Responsive Design: Works on desktop and mobile devices
- ✅ Type Safety: Full TypeScript implementation
- ✅ Test Coverage: Comprehensive test suite
- ✅ CI/CD Pipeline: Automated testing and deployment
The application features Server-Sent Events (SSE) based real-time synchronization:
- Multi-Tab Sync: Changes instantly propagate across all open browser tabs
- Optimistic Updates: Immediate UI feedback with automatic rollback on errors
- Conflict Resolution: Last-write-wins strategy with server timestamps
- Connection Resilience: Automatic reconnection with exponential backoff
- Offline Support: Queued updates sync when connection is restored
See ADR-022: Real-Time Sync Architecture and ADR-023: Conflict Resolution for technical details.
This project demonstrates professional development practices:
- Issue-Driven Development: All features begin with GitHub issues
- Atomic Commits: Clear, focused commit history
- Code Quality: Automated linting, formatting, and testing
- Documentation: Comprehensive project documentation
- CI/CD: Automated quality assurance and deployment
- Project Issues: GitHub Issues
- Architecture Decisions: ADR Index
- Claude Code Documentation: Official Docs
- Development Guidelines: CLAUDE.md - 10 essential guiding principles for instruction-only development
🤖 100% AI-Generated Through Strategic Instruction - Pioneering agentic coding methodology where human strategy meets AI implementation. This entire codebase demonstrates the future of software development through instruction-only collaboration.