How to vibe codeAny.do

Prerequisites

• Node.jsfree

  Required runtime for running the Next.js frontend and build tooling.

• GitHubfree

  Version control and automated deployment trigger for your hosting provider.

• Anthropic API Keypay-as-you-go

  Powers the AI task breakdown and natural language parsing features.

AI coding tools

• Claude Code

  Agentic terminal coding assistant that can scaffold the database schema, API routes, and UI components across multiple files autonomously.

• Cursor

  AI-native code editor ideal for iterative UI polish, tailwind styling adjustments, and reviewing diffs on complex views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, better-auth, and connect to Turso SQLite database.

   Create a new Next.js 16 project configured with TypeScript, Tailwind CSS, and App Router. Set up better-auth for email/password authentication with a local SQLite adapter using Turso. Create a database schema with tables for 'users', 'lists', 'tasks' (fields: id, user_id, list_id, title, notes, due_date, is_completed, priority, category_tag, created_at), 'subtasks' (fields: id, task_id, title, is_completed), and 'boards' for Kanban workflows. Ensure all foreign keys have proper cascading deletes and indexes on user_id and due_date.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Core Task List & CRUD API Routes

   Build server actions and API endpoints for creating, updating, completing, and deleting tasks and lists.

   Implement robust Next.js Server Actions for task and list management. Create actions to create a list, fetch all lists and tasks for the authenticated user, update task status (toggle completion), edit task titles and notes, assign category tags, and delete items. Include input validation using Zod schemas for all mutations. Ensure proper revalidation of the dashboard path after each mutation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Daily Planner ('My Day') UI

   Build the daily planner view allowing users to curate and review tasks scheduled specifically for today.

   Create a responsive dashboard page representing the Any.do 'My Day' planner view. The UI should feature a prominent header displaying today's date, a quick-add task input bar supporting natural language scheduling hints, an active task checklist grouped by status, and a completed tasks accordion. Include keyboard shortcuts (e.g., 'N' to focus input, Enter to submit) and smooth animations when checking off tasks using Tailwind and framer-motion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Kanban Project Boards

   Build a multi-column Kanban board view for project management with drag-and-drop task status updates.

   Build a Kanban board view component in Next.js allowing users to organize tasks across custom status columns (e.g., 'To Do', 'In Progress', 'Done'). Implement drag-and-drop card reordering and column shifting. Ensure state updates optimistically on the client while persisting changes via server actions to the database. Add filters for priority and category tags.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Calendar & Reminders View

   Develop a calendar grid and time-based reminder notification scheduler.

   Create a calendar month and week grid view that visualizes tasks based on their 'due_date'. Allow users to click any day cell to instantly create a task scheduled for that date. Implement a lightweight client-side reminder checker that polls or checks due tasks against the current browser time, triggering browser Notification API alerts when an active task's reminder time is reached.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Task Breakdown & Natural Language Input

   Integrate Anthropic API to parse natural language strings into structured task metadata and automatically break down complex goals into subtasks.

   Integrate the Anthropic API (Claude Sonnet model) into the task creation workflow. When a user types a natural language phrase like 'Meeting with Sarah tomorrow at 3pm #work high priority', send a prompt to parse the text into structured JSON containing title, due_date ISO string, category_tag, and priority. Additionally, add an 'AI Break Down' button on task detail views that calls an API route to generate 3-5 actionable subtasks and automatically inserts them into the subtasks table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Any.do