# How to Vibe Code Your Own Copper (and Stop Paying for It) > The CRM that lives in Google Workspace and your browser extension - Site: https://copper.com - Category: CRM & Productivity - Verdict: **Serious undertaking** (35/100 vibecodeable) - Estimated effort: 4-6 weeks of dedicated development and extension debugging ## Verdict Build a subset with a web dashboard, but the Chrome extension DOM injection and Google Workspace sync will require weeks of frustrating debugging. Copper's core value is not its CRUD database; it's the invisible friction reduction provided by its Chrome extension injecting directly into Gmail and Google Calendar, alongside real-time bi-directional Google API syncing. An AI coding agent can scaffold the Next.js CRM dashboard and SQLite database in an afternoon, but handling Google OAuth token refreshes, background webhook queues, and maintaining a resilient Manifest V3 extension sidebar that survives Gmail DOM updates will turn into a multi-week engineering ordeal. ### What you can't replicate - Google Workspace Recommended partner trust and ecosystem endorsement - Seamless un-breakable native embedding inside Gmail and Google Calendar web interfaces ## What it does Relationship-focused CRM purpose-built for service businesses and agencies with deep Google Workspace integration and a powerful Chrome extension. ### Core features - Contact and company management with custom fields - Visual drag-and-drop sales pipelines - Project management workflows for service delivery - Google Workspace sync (Gmail, Calendar, Drive) - Chrome extension side-panel injecting into third-party DOMs - Task and activity automation triggers - Custom reporting and activity feeds ## The business ### Pricing - Basic: $29/mo — Optimize processes with flexible pipelines and team collaboration features. - Professional: $69/mo — Scale your business with revenue tracking tools, workflows and bulk email. - Business: $134/mo — Elevate your business with customer nurture, custom analytics and unlimited usage. ### Funding $102M raised. Founded 2012. Team size: Unknown. ## The hard parts - Google OAuth verification and bi-directional background sync queues for Gmail and Calendar - Chrome extension Manifest V3 architecture injecting reliable UI into Gmail and LinkedIn DOMs - Multi-tenant relational database supporting customizable fields, dynamic pipelines, and complex permission hierarchies - Real-time state synchronization between the Chrome extension side panel and the web dashboard ## How to vibe code Copper ### Prerequisites - Node.js (free): Runtime environment for building the Next.js web application and Chrome extension bundle. - GitHub (free): Source control and deployment pipeline integration. - Google Cloud Console Account (free): Required to configure OAuth credentials and API scopes for Gmail, Calendar, and Drive integration. ### Recommended AI tools - Claude Code: Unmatched multi-file reasoning capabilities for orchestrating both a Next.js full-stack app and a Manifest V3 Chrome extension codebase simultaneously. - Cursor: Ideal for fine-tuning the UI components of the CRM dashboard and reviewing extension content script diffs. ### Stack - Frontend: Next.js with Tailwind CSS and shadcn/ui - Backend: Next.js App Router API Routes - Database: Turso (SQLite at the edge for low-latency personal data storage) - Auth: better-auth - Payments: none - Other: Chrome Extension Manifest V3, Google APIs Node Client ### Hosting - Cloudflare (Hosting the Next.js web application and API endpoints at the edge via Workers/Pages.): $0/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS and configure Turso with Drizzle ORM to establish core CRM models. ``` Create a new Next.js project using the App Router, TypeScript, and Tailwind CSS. Initialize Drizzle ORM configured for Turso (SQLite). Create database schemas for users, contacts (with custom fields), companies, sales_pipelines, pipeline_stages, deals, projects, tasks, and activity_feed. Set up relations and foreign keys correctly. Include migration scripts and a seed script with sample agency clients and sales stages. ``` 2. **Authentication & User Management** — Implement authentication using better-auth to secure the CRM dashboard and manage user sessions. ``` Install and configure better-auth in the Next.js application using Turso as the database adapter. Implement email/password signup and Google OAuth login to align with the workspace theme. Create protected layout wrappers for the dashboard routes (/dashboard), and build clean sign-in and sign-up pages using Tailwind CSS and shadcn/ui components. Handle session cookies and secure API route handlers against unauthenticated access. ``` 3. **CRM Core: Contacts & Visual Pipelines** — Build the core CRM views including contact management tables and drag-and-drop sales pipelines. ``` Build the core CRM interface inside the Next.js dashboard. Implement a contacts list view with filtering, search, and a detail drawer displaying timeline activities, notes, and associated deals. Create a visual drag-and-drop sales pipeline board (Kanban style using @dnd-kit) where deals can be moved across custom stages, updating deal values, win probabilities, and triggering activity logs automatically. ``` 4. **Project Management & Task Delivery** — Add post-sale project workflows and centralized task lists to bridge sales closures with client service delivery. ``` Develop a project management module in the dashboard allowing users to convert closed deals directly into active projects. Build a project workflow view with status columns, milestone tracking, file attachments, and a centralized task list view with due dates, assignees, and recurring task automation triggers. Ensure all tasks and project updates tie back to the parent contact and company records. ``` 5. **Google Workspace API Integration** — Implement Google OAuth and API background sync for Gmail, Google Calendar, and Google Drive. ``` Implement server-side integration with the Google Workspace APIs (Gmail, Calendar, Drive). Create OAuth token exchange flows allowing users to connect their Google accounts. Build background sync jobs that fetch recent email threads and calendar events associated with contact email addresses, storing them in an activity_feed table. Add endpoints to attach Google Drive files directly to CRM deal and contact records. ``` 6. **Chrome Extension Manifest V3 Development** — Build a companion Chrome extension that injects a sidebar into Gmail to display matching CRM contacts and deals. ``` Create a Chrome extension using Manifest V3 in a separate /extension directory within the repo. Configure a background service worker, a popup script, and a content script designed to inject a collapsible sidebar panel into Gmail (mail.google.com). The content script must parse the email address of the currently open message thread, query the Next.js backend API for matching CRM contact and deal data, and render a clean React-based sidebar allowing the user to create notes, log tasks, or add leads directly from their inbox. ``` 7. **Activity Feed & Polish** — Integrate global activity feeds, custom reporting widgets, and final UI error handling. ``` Build a global activity feed dashboard page showing a chronological timeline of all team actions, email logs, completed tasks, and stage changes across all contacts and deals. Add a reporting tab with charts (using Recharts) tracking total pipeline volume, win rates, and team activity counts. Perform a comprehensive code review, add error boundaries, ensure responsive design across all dashboard pages, and write README instructions for setting up Google OAuth redirect URIs and Chrome extension local loading. ``` ### Cost vs paying **Starting costs (one-time):** - Google Cloud Console Developer Verification (optional for personal use): $0 - AI Coding Assistant Subscription: $20 - Total: $20 one-time **Ongoing costs (monthly):** - Cloudflare & Turso Hobby Tiers: $0/mo - Total: $0/mo - Paying for the SaaS instead: $69/mo (Professional seat) - Build time: 45-60 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: Immediate (if built for personal workflow) ## Sources - [Copper Homepage & Features Context](https://copper.com) - [Copper Pricing Page](https://copper.com/pricing) - [Copper About Page](https://copper.com/about)