How to vibe codeMotion

Prerequisites

• Node.jsfree

  Required runtime for building the full-stack web application.

• GitHubfree

  Source control and deployment pipeline connection.

• Anthropic API keyPay-as-you-go

  Powers the workspace assistant, chat, and doc-to-task extraction.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex full-stack apps and debugging logic loops.

• Cursor

  Ideal AI-native editor for hands-on UI tweaking and reviewing component diffs.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js full-stack application, configure Tailwind CSS, set up better-auth with Neon Postgres, and create core relational data models.

   Scrape together a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure better-auth to connect to a Neon serverless Postgres database. Create Drizzle ORM schema definitions for users, workspaces, projects, tasks (with priority, estimated duration, hard due dates, and do dates), calendar_events, and documents. Include migrations and ensure strict TypeScript safety across all database queries. Implement a clean layout shell with a sidebar navigation bar mapping to Calendar, Tasks, Projects, and Docs views.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Calendar Interface & External Sync Service

   Build an interactive week/day calendar view and implement webhook handlers and API client wrappers for syncing external calendar providers.

   Build a responsive week and day calendar view component using React. Implement a backend service route capable of connecting to Google Calendar and Microsoft Graph APIs using OAuth2. Store access tokens securely, fetch external events using incremental sync tokens (syncToken), and persist them to the database. Render both external meetings and internal task blocks directly onto the interactive calendar grid with drag-and-drop support.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Constraint-Satisfaction Time-Blocking Engine

   Develop the algorithmic scheduler that automatically allocates task time blocks around fixed calendar meetings based on user priorities and deadlines.

   Implement a deterministic scheduling algorithm in TypeScript that handles automatic time-blocking. The engine must take a user's unassigned tasks (with priority levels, estimated durations, and deadlines), respect working hour boundaries, avoid overlaps with existing calendar events fetched in Step 2, and place task chunks into open slots. Build an auto-re-optimization trigger that runs whenever a calendar event changes or a task duration is updated, recalculating future slots without creating infinite loops.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Task Planner & Doc-to-Task Extractor

   Integrate the Vercel AI SDK and Anthropic API to parse unstructured text notes, documents, and prompts into structured task records.

   Integrate the Vercel AI SDK and Anthropic Claude Sonnet to power an AI document assistant and task parser. Build a rich-text document editor where users can write wikis or meeting notes. Add an action button that triggers an LLM call to extract action items, estimated durations, and target deadlines from the text, returning a structured JSON payload that automatically creates linked task rows in the database and triggers the scheduler engine.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Project Management & Gantt Chart Views

   Build relational project tracking pages featuring multi-stage kanban boards and auto-scheduled timeline charts.

   Build a Project Management module with a Gantt chart visualization view. Implement project creation forms where describing a project generates phased tasks and dependencies via AI. Render tasks on a timeline canvas showing start dates, completion milestones, and critical path bottlenecks. Ensure status changes update task execution states and automatically notify the time-blocking scheduling engine.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Workspace AI Chat & Polish

   Create a unified conversational side panel that queries user documents, tasks, and calendar history with inline citations.

   Build a workspace-aware AI chat sidebar using the Vercel AI SDK useChat hook. Implement a retrieval pipeline that queries user documents, active project lists, and calendar histories from the Neon database to provide context to the LLM. Ensure responses include source citations linking directly back to the referenced documents or tasks. Polish the application interface with loading states, error boundaries, and toast notifications.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Motion