Salesforce

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack web development frameworks.

• GitHubfree

  Source code repository hosting and version control integration.

• Cursor$20/mo

  AI-native code editor for building and refining the React frontend and backend components.

AI coding tools

• Cursor

  Best-in-class AI-native editor for iterative component design and reviewing code diffs.

• Claude Code

  Terminal agent capable of executing multi-file scaffolding, database migrations, and testing loops.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Supabase database tables for accounts, contacts, opportunities, and support tickets.

   Initialize a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Configure absolute imports and set up the directory structure for a personal CRM clone. Install Lucide React and setup shadcn/ui base components (Button, Input, Table, Dialog, DropdownMenu, Tabs, Card). Create a Supabase client configuration file using environment variables for URL and anon key. Define the initial PostgreSQL migration SQL file covering tables: 'accounts' (id, name, industry, website, created_at), 'contacts' (id, account_id foreign key, first_name, last_name, email, phone, title), 'opportunities' (id, account_id foreign key, name, stage enum ['Prospecting', 'Qualification', 'Proposal', 'Closed Won', 'Closed Lost'], amount, close_date), and 'tickets' (id, account_id foreign key, subject, status enum ['New', 'In Progress', 'Resolved'], priority). Ensure foreign keys have cascading deletes and proper index constraints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Multi-User Shell

   Implement Supabase Auth login/signup workflows and build the core dashboard application shell with a sidebar navigation layout.

   Implement Supabase Auth email/password authentication with login and signup pages in Next.js under the route group /(auth). Create a middleware to protect dashboard routes under /(dashboard) and redirect unauthenticated users to /login. Build a responsive layout component for /(dashboard) featuring a collapsible sidebar navigation with links to Home, Accounts, Contacts, Opportunities, and Support Tickets, alongside a top navbar displaying the logged-in user email and a logout action. Ensure user sessions persist correctly and server actions validate auth state using Supabase SSR helpers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Accounts & Contacts Management Module

   Build data tables and management views for accounts and contacts with full CRUD capabilities and search filtering.

   Create a data management module for Accounts and Contacts within the Next.js application. Under app/(dashboard)/accounts, build a page featuring a search input, pagination, and a shadcn data table displaying account names, industries, websites, and action buttons for editing and deletion. Implement a slide-over drawer or modal dialog for creating and updating accounts with Zod validation forms. Similarly, build app/(dashboard)/contacts supporting contact creation tied to parent accounts, rendering contact cards or table rows with direct email and phone action triggers. Write corresponding Supabase server actions for safe data insertion, updating, and deletion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Sales Pipeline Kanban Board

   Develop an interactive Kanban board for managing opportunities across sales stages with stage-progression actions.

   Build an interactive sales pipeline Kanban board view under app/(dashboard)/opportunities. Group opportunities dynamically into columns corresponding to stages: 'Prospecting', 'Qualification', 'Proposal', 'Closed Won', and 'Closed Lost'. Each column should display card items showing opportunity names, associated account names, and formatted monetary amounts, alongside column totals. Implement drag-and-drop or simple dropdown action triggers on cards allowing users to advance or regress stages instantly, updating the PostgreSQL database immediately via server actions and refreshing the UI state seamlessly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Support Ticketing & Activity Logging

   Add customer support ticketing views and activity timeline logging for tracking customer interactions.

   Implement a support ticketing system and activity timeline module. Under app/(dashboard)/tickets, create a list view of service tickets filtering by status ('New', 'In Progress', 'Resolved') and priority ('Low', 'Medium', 'High'), with a creation modal for new service requests. On individual Account detail pages (app/(dashboard)/accounts/[id]), add an activity timeline component allowing users to log calls, notes, and emails with timestamps, storing these entries in a new 'activities' table linked to accounts and displaying them in reverse chronological order.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Assistant Summarization & Polish

   Integrate an AI summary feature using an LLM API to generate account health overviews and activity summaries.

   Integrate an AI summarization feature into the Account detail view. Create an API route or server action that queries recent activities, open opportunities, and active support tickets for a given account, compiles them into a context prompt, and sends them to the OpenAI or Anthropic API. Display a 'Generate AI Summary' button on the account page that renders a structured executive briefing detailing account health, open deals, and key customer friction points inside a styled card component. Handle loading states, error boundaries, and environment key checks gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Salesforce