How to vibe codeSalesforce

Prerequisites

• Node.jsfree

  Required runtime for running the Next.js full-stack development environment.

• GitHubfree

  Source code repository and deployment linkage for Vercel.

• Supabase Accountfree

  Hosted PostgreSQL database, realtime subscriptions, and authentication.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file full-stack features and executing end-to-end builds.

• Cursor

  Ideal AI-native code editor for reviewing granular UI diffs and rapid component styling.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Supabase PostgreSQL connection, and build out core relational schemas for Accounts, Contacts, Leads, and Opportunities.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Integrate Supabase as the primary database client. Write a comprehensive SQL migration script in supabase/migrations/001_initial_schema.sql that creates tables for 'accounts' (id, name, industry, owner_id), 'contacts' (id, account_id, first_name, last_name, email, phone), 'leads' (id, company, status, lead_source, converted_contact_id), and 'opportunities' (id, account_id, name, amount, stage, close_date). Include proper foreign key constraints, indexes on foreign keys, and updated_at trigger functions. Ensure all tables have Row Level Security (RLS) policies enabled.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Setup

   Implement user authentication using better-auth integrated with Supabase, establishing multi-tenant organization boundaries and user profile management.

   Set up better-auth in the Next.js application connecting to the Supabase PostgreSQL database. Implement email/password and GitHub OAuth sign-in flows. Create login and registration pages using Tailwind CSS and shadcn/ui components. Configure session management middleware to protect dashboard routes (/crm/*), ensuring users belong to a tenant organization upon registration. Add an organization switcher component in the sidebar navigation header.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03CRM Core Views: Contacts & Accounts Directory

   Build high-density data tables and detail views for managing Accounts and Contacts with search, sorting, and inline editing capabilities.

   Build a high-density data table component for Contacts and Accounts inside the CRM dashboard under app/(dashboard)/contacts and app/(dashboard)/accounts. Use TanStack Table or shadcn data table primitives supporting server-side sorting, pagination, and multi-column search filtering. Include a side-sheet drawer component for quick viewing and editing of contact properties without navigating away from the list view. Implement Server Actions for creating, updating, and deleting records with Zod validation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Sales Pipeline Kanban Board

   Construct a drag-and-drop Kanban board for managing Opportunities across custom sales stages (Prospecting, Qualification, Proposal, Closed Won, Closed Lost).

   Create a sales pipeline Kanban board view under app/(dashboard)/opportunities/pipeline. Use @hello-pangea/dnd or standard HTML5 drag-and-drop primitives to allow users to drag opportunity cards between pipeline stages (Prospecting, Qualification, Proposal, Negotiation, Closed Won, Closed Lost). When a card is dropped into a new column, trigger an optimistic UI update and a server action to persist the new stage and update expected revenue metrics in the header summary cards.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Activity Logging & Timeline Feed

   Implement an activity logging subsystem allowing users to log calls, emails, and meetings against Accounts, Contacts, and Opportunities with a chronological timeline.

   Build an activity logging subsystem for CRM records. Create an 'activities' table linked polymorphic-style to accounts, contacts, or opportunities (with entity_type and entity_id fields, type [call, email, meeting, note], subject, description, and due_date). On individual record detail pages, render an activity composer modal and a unified chronological activity timeline feed with filtering tabs for upcoming vs completed tasks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Agentforce AI Assistant Integration

   Integrate the Anthropic API to create an embedded AI assistant capable of summarizing customer history, scoring leads, and drafting follow-up emails.

   Implement an AI assistant drawer widget styled like Salesforce's Agentforce. Create an API route at app/api/agent/route.ts that accepts a context payload (account summary, recent activities, open opportunities) and uses the Anthropic API (Claude 3.5 Sonnet) to stream intelligent responses. Provide pre-built action buttons in the UI for 'Summarize Account Health', 'Draft Follow-up Email', and 'Score Lead Quality' that inject structured prompts and display formatted results directly within the CRM record view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Polish, Error Handling, and Deployment

   Add robust error boundaries, loading skeletons, toast notifications, and deploy the application to Vercel.

   Perform a comprehensive code review and polish pass across the application. Add loading.tsx skeleton screens for all dashboard routes, implement global error boundaries, and integrate toast notifications (sonner) for all Server Action mutation feedback. Ensure all environment variables (NEXT_PUBLIC_SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, ANTHROPIC_API_KEY) are documented in .env.example. Verify build output passes without TypeScript or ESLint errors.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Salesforce