{"slug": "building-a-full-stack-app-with-ai-pair-programming", "title": "Building a full-stack app with AI pair programming", "summary": "A developer used Cursor and Claude 3.5 Sonnet to build a full-stack Task Tracker app in under an hour, finding that providing a .cursorrules file and using iterative prompting with vertical slices reduced debugging time from 45 minutes to 2 minutes when the AI hit a wall. The key to success was maintaining shared context and being prescriptive about architecture, such as refactoring a client hook into a separate Client Component.", "body_md": "# Building a full-stack app with AI pair programming\n\nReal AI pair programming is about maintaining a shared state between your brain and the LLM. If you don't feed the AI the right context, you'll spend four hours debugging a hallucinated library version that hasn't existed since 2022.\n\nI tried building a simple Task Tracker last Tuesday. I used [Cursor](/en/tags/cursor/) (which is basically VS Code on steroids) and Claude 3.5 Sonnet. The goal was to move from a blank folder to a deployed app in under an hour.\n\n### Setting up the workspace for context\n\nThe biggest mistake beginners make is starting a chat without providing a roadmap. If you just say \"Build me a task app,\" the AI will guess your tech stack. It might give you Tailwind CSS when you wanted Bootstrap, or use an outdated Next.js API route structure.\n\nFirst, create a `.cursorrules`\n\nfile (or a project-level instruction file) in your root directory. This forces the AI to stick to your specific stack.\n\n```\n// .cursorrules\nYou are an expert Full-stack TypeScript developer.\nTech Stack: \n- Frontend: Next.js 14 (App Router), Tailwind CSS, Shadcn UI\n- Backend: Supabase (Auth and Database)\n- State Management: Zustand\n\nCoding Style:\n- Use functional components and arrow functions.\n- Strictly use TypeScript interfaces; avoid 'any'.\n- Implement error handling for all async calls using try/catch blocks.\n- Keep components small and modular.\n```\n\nWith this file in place, the AI stops guessing. It knows exactly which version of Next.js to use.\n\n### The \"Iterative Prompting\" loop\n\nDon't ask for the whole app at once. You'll get generic, buggy code. Instead, build in \"vertical slices.\"\n\n**Step 1: The Schema**\n\nI started by defining the data. I didn't write the SQL; I asked the AI to generate the Supabase migration script.\n\n`Prompt: Based on the .cursorrules, generate a SQL migration for a 'tasks' table. I need id (uuid), created_at, title (text), is_completed (boolean), and user_id (uuid referencing auth.users).`\n\n**Step 2: The Logic**\n\nOnce the DB was live, I needed the fetch logic. Instead of writing the function, I highlighted the empty `page.tsx`\n\nfile and used the \"Composer\" feature (Cmd+I in Cursor) to generate the server component.\n\n``` js\n// This is what the AI generated after I provided the Supabase schema\nimport { createClient } from '@/utils/supabase/server';\n\nexport default async function TasksPage() {\n const supabase = createClient();\n const { data: tasks, error } = await supabase.from('tasks').select('*');\n\n if (error) return Error loading tasks: {error.message}
;\n\n return (\n \n
My Tasks
\n
\n {tasks?.map(task => (\n - \n {task.title}\n
\n ))}\n
\n