How to vibe codefolk

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack Next.js application.

• GitHubfree

  Repository hosting and continuous deployment integration.

• Supabase Accountfree

  Managed PostgreSQL database, vector storage, and native authentication infrastructure.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex full-stack schemas, data tables, and background worker logic.

• Cursor

  Ideal for fine-tuning dense React data grids, Kanban boards, and complex Tailwind UI component layouts.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS and design the core relational database schema for contacts, companies, deals, pipelines, and interactions.

   Scaffold a new Next.js 16 application using App Router, TypeScript, and Tailwind CSS. Configure Supabase as the database client. Write a comprehensive migration script and Prisma or Drizzle/Supabase schema for a CRM: tables for users, workspaces, contacts (with fields like name, email, company_id, status, avatar), companies, pipelines, deal_stages, deals, and interactions (type, content, timestamp). Ensure proper foreign keys and index definitions on foreign keys and email fields. Add basic validation using Zod for all record mutations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Setup

   Implement authentication using better-auth with Supabase, establishing multi-user workspace memberships and access boundaries.

   Integrate better-auth into the Next.js application using Supabase as the persistent adapter. Implement email/password and Google OAuth login flows. Create an onboarding screen where new users create a workspace, and automatically assign them as workspace admins. Implement workspace middleware to restrict database queries to the active user's workspace ID, enforcing multi-tenancy rules across all server actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Notion-Style Contact Grid & Pipeline Kanban

   Build an interactive data table with inline editing, custom sorting, filtering, and a synchronized Kanban board for sales pipelines.

   Build a responsive CRM dashboard layout featuring two main views: a spreadsheet-like data grid for contacts using TanStack Table, and a drag-and-drop Kanban board for deals across pipeline stages using @dnd-kit. The data grid must support inline cell editing, column sorting, pagination, and multi-select filtering. Wire up server actions to update contact fields and move deals between stages instantaneously with optimistic UI updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Waterfall Enrichment & Integration Mock

   Implement a modular backend service that simulates or integrates external waterfall data enrichment for missing contact properties.

   Create a backend service module in Next.js that executes a waterfall enrichment workflow for a given contact email or domain. The service should sequentially query a mock or live provider API (e.g., Clearbit or Apollo style endpoints), handle rate-limiting and timeouts gracefully, fall back to secondary providers when a field is missing, and update the contact record in Supabase with newly discovered job titles, social profiles, and company sizes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Sales Assistants & Background Workers

   Set up background jobs via Inngest to parse interaction history and generate automated recap briefs and follow-up suggestions.

   Integrate Inngest and the Anthropic/OpenAI API to build background AI sales assistants. Create a background workflow that triggers daily or upon new interaction logs: it scans recent contact interactions, calls the LLM to generate a structured relationship recap and follow-up recommendation, and saves the generated summary back to the contact record. Display these insights inside a dedicated slide-over panel on the contact detail view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Email Campaigns & Sequence Automation

   Build an outreach module enabling users to create email templates, schedule bulk campaigns, and track open/reply events.

   Build an email outreach and campaign management module. Create database tables for email_templates, campaigns, and campaign_recipients. Implement a campaign creation wizard that allows users to select a group of contacts, draft personalized emails using template variables (e.g., {{firstName}}, {{company}}), and schedule delivery. Integrate with Resend API to dispatch emails asynchronously via background workers and track delivery status webhooks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Chrome Extension Lead Capture Shell

   Develop a lightweight browser extension companion to extract profile details from web pages and sync them back to the CRM API.

   Develop a Chrome Extension (Manifest V3) with a popup UI and content scripts targeted at LinkedIn profiles. The content script should parse basic DOM elements (name, headline, current company) when a user clicks a floating 'Import to CRM' button injected onto the page. Use background service workers to securely transmit the extracted payload via authenticated fetch requests to your Next.js CRM API endpoint, creating a new contact record instantly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for folk