How to vibe codeDocusign

Prerequisites

• Node.jsfree

  Runtime environment for Next.js full-stack development

• GitHubfree

  Source control and automated deployment pipeline

• Resendfree tier (3k emails/mo)

  Transactional email delivery for signing notifications

AI coding tools

• Claude Code

  Autonomous agent capable of building full-stack Next.js features and wiring complex PDF canvas interactions across multiple files.

• Cursor

  Ideal for fine-tuning the drag-and-drop signature canvas and React PDF rendering components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, Shadcn UI, better-auth, and Neon Postgres connection via Drizzle ORM.

   Initialize a new Next.js 16 project with Tailwind CSS, TypeScript, and App Router. Set up Drizzle ORM configured with Neon serverless Postgres. Create database schemas for Users, Envelopes (id, title, status, creator_id, original_pdf_url, completed_pdf_url, created_at), Recipients (id, envelope_id, email, name, status, token, role, order), EnvelopeFields (id, envelope_id, recipient_id, type, page_number, x, y, width, height, value), and AuditLogs (id, envelope_id, action, ip_address, timestamp, details). Ensure proper foreign key constraints and indexes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Dashboard Layout

   Implement authentication using better-auth and build the main user dashboard to list envelopes and statuses.

   Integrate better-auth in Next.js supporting email/password authentication. Create a responsive dashboard layout with a sidebar (Dashboard, Templates, History) and a main content area displaying a table of user envelopes with status badges (Draft, Sent, Completed, Voided) and a 'New Envelope' action button.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03PDF Upload & Field Placement Canvas

   Build the document preparation screen allowing users to upload a PDF, preview pages, and drag-and-drop signature/date fields.

   Build a document preparation page in Next.js using react-pdf to render uploaded PDF pages on an HTML5 canvas or SVG layer. Implement a drag-and-drop sidebar with field types (Signature, Initials, Date, Text). Allow users to place fields onto specific PDF pages, storing their absolute coordinate offsets (page, x, y, width, height) relative to the PDF page dimensions in state, and save them to the database via server actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Recipient Invitation & Email Dispatch

   Configure envelope sending logic with recipient details and trigger automated email notifications via Resend.

   Create an envelope send flow that takes recipient emails and names, assigns them to placed fields, updates the envelope status to 'Sent', generates a secure unique cryptographic token per recipient, and uses the Resend API to send an email invitation containing a secure signing link (e.g., /sign/[token]).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Secure Signing Experience & Canvas Drawing

   Develop the external signing view where recipients can review the PDF and draw or type their signature.

   Build a secure public signing page accessible at /sign/[token] that verifies the recipient token and loads the PDF document. Render interactive form fields over the PDF pages where assigned recipients can click to open a modal for drawing their signature (using HTML5 canvas) or typing it. Validate that all required fields are filled before allowing submission.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06PDF Flattening & Audit Trail Generation

   Process the completed signing action by baking signatures into the PDF using pdf-lib and recording an immutable audit log.

   Implement a server action triggered upon final signing completion that uses `pdf-lib` to programmatically draw the signature images and text data onto the exact coordinate locations of the original PDF. Flatten the PDF annotations, upload the final signed PDF to secure storage, update the envelope status to 'Completed', and write an immutable entry to the AuditLogs table recording the recipient email, IP address, user agent, and ISO timestamp.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Docusign