How to vibe codeMeisterTask

Prerequisites

• Node.jsfree

  Required runtime for running Next.js and frontend package managers.

• GitHubfree

  Source control and repository hosting for your project codebase.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding the full-stack Kanban board and database schema end-to-end.

• Cursor

  Ideal for fine-tuning React drag-and-drop Kanban interactions and UI component styling.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and establish core data schemas for users, projects, Kanban sections, tasks, and notes.

   Scaffold a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Set up a Turso database client using libSQL with the following relational schema: users (id, email, name, password_hash), projects (id, owner_id, title, description, created_at), sections (id, project_id, title, position), tasks (id, section_id, project_id, title, description, due_date, priority, position, assigned_to), and notes (id, project_id, title, content, updated_at). Implement database connection pooling and migration scripts. Ensure clean separation of concerns between database access layer and server action handlers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Setup

   Integrate better-auth for secure user registration, session management, and login flows backed by the Turso user table.

   Integrate better-auth into the Next.js application to handle email/password authentication and session cookies. Create clean sign-in and sign-up UI pages with Tailwind CSS forms. Wire up middleware to protect dashboard routes and redirect unauthenticated requests. Implement a user profile header component displaying avatar initials and logout functionality. Verify that user sessions persist correctly across server action calls.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Kanban Board UI & Drag-and-Drop Workflow

   Build the core interactive Kanban board featuring columns, task cards, and smooth drag-and-drop repositioning using dnd-kit.

   Build a multi-column Kanban board interface in React using dnd-kit for drag-and-drop task management. Each project view should display dynamic sections (columns) such as 'To Do', 'In Progress', and 'Done'. Users must be able to drag task cards between columns and reorder them vertically within columns. When a drop occurs, trigger a server action that updates the task's section_id and position fields in the Turso database optimistically without full page reloads. Handle edge cases where concurrent updates might conflict by refreshing state gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Task Management Modals & Collaborative Notes

   Implement detailed task edit modals, checklist items, due date pickers, and a tabbed collaborative notes section for project documentation.

   Create a comprehensive task detail modal that opens when clicking any task card on the Kanban board. The modal must allow editing the task title, rich text description, priority level (Low, Medium, High), due date, and subtask checklists. Additionally, add a project-level 'Notes' tab featuring a split-pane markdown editor where users can write and save project documentation linked directly to the active project ID. Persist all changes immediately via Server Actions with loading spinners and toast notifications.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Meister AI Assistant Integration

   Integrate the Vercel AI SDK and Anthropic API to provide built-in AI prompts for summarizing task notes and brainstorming project tasks.

   Integrate the Vercel AI SDK with the Anthropic API to create a built-in 'Meister AI' assistant panel within project boards. Provide two key features: (1) 'Summarize Notes', which takes all markdown notes in the current project and generates an executive summary, and (2) 'Brainstorm Tasks', which accepts a natural language prompt from the user and automatically generates 3-5 structured Kanban task suggestions that can be added to the board with a single click. Ensure proper error handling, streaming responses for UI polish, and secure API key handling via environment variables.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Real-time Sync & Polish

   Add Pusher channels for real-time collaborative updates across browser sessions, polish UI states, and deploy to Vercel.

   Integrate Pusher channels into the Next.js project to enable real-time collaboration on Kanban boards. Whenever a user moves a card, creates a task, or updates notes, broadcast an event to all connected clients viewing the same project ID so their UI updates instantly without manual refreshing. Polish all loading states, add empty states for new projects, handle mobile responsiveness for Kanban column scrolling, and prepare the app for zero-config deployment on Vercel.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for MeisterTask