How to vibe codeBonsai

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js framework and build toolchain.

• GitHubfree

  Version control repository hosting and continuous deployment pipeline connection.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack database models, API routes, and complex dashboard UIs across multi-file structures.

• Cursor

  AI-native code editor ideal for reviewing diffs and making rapid iterative tweaks to complex form builders and kanban views.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth with Postgres via Neon, and establish core database models for users, clients, projects, tasks, time entries, and invoices.

   Scaffold a new Next.js 16 app with TypeScript, Tailwind CSS, and App Router. Set up better-auth connected to a Neon Postgres database using Drizzle ORM. Define database schemas for users, clients (name, email, company, address), projects (title, client_id, budget, status), tasks (title, status, due_date, project_id), time_entries (user_id, project_id, duration, billable, date), and invoices (invoice_number, client_id, total_amount, status, due_date). Create initial migration scripts and verify database connection.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02CRM & Client Management Dashboard

   Build the client management front office, enabling users to create, view, update, and delete client profiles along with a deal pipeline view.

   Create a dashboard layout with a sidebar navigation for 'Clients', 'Projects', 'Time', 'Invoices', and 'Settings'. Build the Clients page with a data table listing all clients, a modal form to add/edit client details, and a detail view showing associated projects and invoices. Implement Server Actions to handle CRUD operations on the clients table with Zod validation. Use shadcn/ui table, dialog, and form components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Project Management & Task Board

   Implement project creation, kanban task boards, and task status updates linked to specific clients.

   Build a Project Management view in Next.js. Create a projects list page and a dynamic project detail page (`/projects/[id]`). Inside the project detail view, implement a Kanban board with columns: 'To Do', 'In Progress', 'In Review', and 'Completed'. Allow users to create tasks, drag or move tasks between columns, assign them to phases, and set estimated hours. Store task states in the database via Server Actions and render real-time UI updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Billable Time Tracking & Timesheets

   Develop a live timer widget and manual time-entry ledger distinguishing between billable and non-billable hours.

   Build a Time Tracking module featuring an active timer widget in the app header (start, pause, stop) linked to selectable projects and tasks. Create a Timesheets page showing a weekly grid of logged hours, flagging entries as billable or non-billable. Implement backend logic to calculate total billable amounts per project based on hourly rate cards, storing entries in the time_entries table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Invoicing & Financial Ledger

   Create an invoice generator that aggregates unbilled time entries and expenses into clean, itemized invoices.

   Build an Invoicing module at `/invoices`. Allow users to create a new invoice by selecting a client, pulling in unbilled time entries and custom line items automatically. Calculate subtotal, taxes, and total amounts. Render a clean printable invoice layout with a PDF download option using client-side printing styles. Add status management ('Draft', 'Sent', 'Paid', 'Overdue') and Server Actions to update payment status.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Contracts, Proposals & Polish

   Add basic document generation templates for client proposals and contracts with signature placeholders.

   Implement a Documents module supporting Proposals and Contracts templates. Create a dynamic template editor where users can select standard contract templates (e.g., Freelance Service Agreement), populate client variables, and generate a shareable public link for client review and digital signature confirmation. Polish the application UI, add error boundaries, loading skeletons, and ensure responsive mobile formatting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Bonsai