How to vibe codeHarvest

Prerequisites

• Node.jsfree

  Required runtime for Next.js and modern full-stack web development

• GitHubfree

  Version control and deployment pipeline for Vercel and Cloudflare

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding agent for scaffolding the database schema, API routes, and dashboard UI

• Cursor

  Ideal AI code editor for fine-tuning complex data tables, modal forms, and timesheet grid interactions

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, shadcn/ui, and better-auth, then define the core relational schema for clients, projects, tasks, time entries, and expenses using Turso.

   Create a new Next.js project using App Router, TypeScript, Tailwind CSS, and shadcn/ui. Configure better-auth with email/password authentication backed by a Turso SQLite database using Drizzle ORM. Set up the foundational database schema for a time-tracking application: tables for users, clients (id, name, currency, address), projects (id, client_id, name, code, budget_type, budget_hours, hourly_rate), tasks (id, name, default_billable), time_entries (id, user_id, project_id, task_id, date, hours, notes, billable, invoiced), and expenses (id, user_id, project_id, category, amount, notes, receipt_url, invoiced). Ensure all foreign key constraints, indexes, and timestamps are properly configured with migration scripts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Core Navigation & Organization Dashboard

   Build the foundational layout, navigation sidebar, and CRUD management screens for Clients, Projects, and Tasks.

   Build a responsive dashboard layout in Next.js using shadcn/ui sidebar, header, and card components. Create dedicated management pages for Clients, Projects, and Tasks with clean data tables, search filters, and modal creation/edit forms. Implement server actions to handle CRUD operations safely with Zod validation. Ensure projects allow configuring billing methods (Fixed Fee, Time & Materials, Non-Billable) and budget thresholds (Hours per month, Total fees). Add toast notifications for successful state changes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Timesheet & Live Timer Engine

   Implement the interactive daily/weekly timesheet grid and the persistent real-time running timer component.

   Build an interactive timesheet view supporting both daily and weekly grid layouts. Users should be able to select a client and project, assign a task, and log hours across days of the week with optional notes. Implement a global persistent timer widget in the header with a live counter, start/stop controls, and a quick-select project/task dropdown that automatically records a time entry when stopped. Store active timer state in local storage and sync with the database via server actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Expense Tracking & Receipt Uploads

   Build the expense logging interface with category management and receipt file attachments stored via object storage.

   Create an expense tracking module allowing users to log project-associated costs with fields for category, amount, date, notes, and whether the expense is billable and reimbursable. Integrate file upload handling for digital receipts (PNG/PDF) using Cloudflare R2 or UploadThing. Build an expense list view grouped by project with filter and export capabilities, plus a toggle indicating whether an expense has been attached to an invoice.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Reporting, Project Profitability & Budgets

   Develop analytics dashboards calculating project profitability, team utilization, and real-time budget consumption alerts.

   Build a reporting and analytics dashboard showing time reports, project profitability margins, and budget threshold tracking. Compute total billable hours versus non-billable hours, actual spend against project budgets, and visual progress bars that change color (green to yellow to red) as projects approach their hour or fee limits. Implement export utilities for CSV timesheet data and summary views filtered by client, project, or date range.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Invoicing & Payment Generation

   Implement automated invoice generation pulling unbilled time entries and expenses into professional client invoices.

   Build an invoicing module that allows users to select a client and date range to automatically compile unbilled time entries and billable expenses into a professional invoice layout. Include line item adjustments, tax calculations, and status tracking (Draft, Sent, Paid, Overdue). Integrate Stripe Checkout to enable online payment collection via webhook listeners that update invoice statuses automatically upon successful charge completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Harvest