How to vibe codeSkedPal

Prerequisites

• Node.jsfree

  Required runtime for building the Next.js full-stack web application.

• GitHubfree

  Source control and deployment pipeline for your codebase.

• 

  Google Cloud Consolefree

  Required to configure OAuth credentials and Calendar API webhooks for testing calendar sync.

AI coding tools

• Claude Code

  Best-in-class CLI agent for scaffolding complex full-stack apps, managing multi-file changes, and iterating on algorithmic logic.

• Cursor

  Ideal IDE fork for reviewing diffs, inspecting calendar UI components, and refining frontend state management.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize a Next.js project with Tailwind CSS, configure Turso database with Drizzle ORM, and set up better-auth for single-user authentication.

   Initialize a new Next.js project using TypeScript and Tailwind CSS. Configure Drizzle ORM to connect to Turso (SQLite). Create database schemas for users, tasks (with fields for title, estimated duration, deadline, priority, parent_id for nested lists, status, and scheduled flag), time_maps (json rules for working hours and category windows), and calendar_events (external event cache with start/end times and source identifiers). Set up better-auth for local credential authentication so a single user can log in safely. Verify the database migrations apply correctly and build a clean landing dashboard skeleton using shadcn/ui components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Nested Task Management and Time Budgeting UI

   Build the task hierarchy view, prioritization board, and time-mapping configuration interface.

   Build a responsive dashboard in Next.js featuring a sidebar navigation, a hierarchical task list supporting infinite nesting (parent-child task relationships with collapsible subtasks inline), and a Prioritization Board view where tasks can be reordered by relative priority. Create a 'Time Maps' settings page where users can define weekly working hours windows (e.g., Monday 9am-5pm) and allocate specific time zones or categories (Deep Work, Admin, Personal). Store these settings in the Turso database with proper validation rules using Zod.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03External Calendar Integration (Google Calendar API)

   Implement OAuth connection flow and API sync to pull external calendar events into the local cache.

   Implement Google Calendar API integration. Create an OAuth flow route to connect a user's Google account and securely store refresh tokens in the database. Write a background sync service using Next.js route handlers that fetches calendar events for a 60-day window, handles pagination and timezone conversions, and upserts them into the local calendar_events table. Set up a webhook subscription endpoint to receive instant notifications from Google Calendar when events change, updating the local cache accordingly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04The Core Scheduling Engine (Constraint-Satisfaction Solver)

   Develop the deterministic scheduling algorithm that auto-blocks tasks into available calendar slots according to Time Maps and deadlines.

   Write a robust server-side scheduling engine in TypeScript that implements interval scheduling and constraint satisfaction. The algorithm must: 1. Read uncompleted tasks sorted by priority and deadline. 2. Fetch all existing calendar events and user Time Maps for the planning window (e.g., 21 to 60 days). 3. Compute available free slots within allowed Time Map windows that do not collide with existing calendar events. 4. Fragment tasks into chunks matching their estimated durations if necessary. 5. Assign tasks to optimal free slots, respecting deadlines and priorities. 6. Output a set of scheduled time blocks and persist them to the database. Handle edge cases where tasks cannot fit before their deadlines and flag them as overdue or unschedulable.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Calendar UI Grid and Drag-and-Drop Rescheduling

   Create an interactive calendar view rendering both fixed external events and auto-scheduled task blocks, with manual override support.

   Build an interactive calendar grid view (day, week, and month views) using React and Tailwind CSS that renders both synced external calendar events (read-only) and auto-scheduled task blocks (editable/draggable). Implement click-to-reschedule and drag-and-drop actions that update the task block's scheduled start and end times in the database. When a manual override or external calendar conflict occurs, trigger a lightweight re-optimization pass of the scheduling engine for the affected day to ensure downstream tasks adjust cleanly without overlapping.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Natural Language Task Parsing and Status Tracker Polish

   Integrate LLM-based task parsing for quick entry and add the Status Tracker analytics dashboard.

   Integrate the Vercel AI SDK with Anthropic API to provide a natural language task creation input bar. When a user types a phrase like 'Review Q3 budget for 2 hours before Friday', parse it into structured JSON fields (title: 'Review Q3 budget', duration_minutes: 120, deadline: [next Friday ISO string], priority: 'high') and save it to the database, automatically triggering the scheduler. Finally, build a 'Status Tracker' analytics page showing metrics on completed tasks versus planned tasks, time spent per category, and schedule adherence over the past week.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SkedPal