🚀 Vibe Coding Kit

You are building a HubSpot-like CRM application using Next.js 14, PostgreSQL, Prisma, Clerk, and shadcn/ui. Follow these specifications precisely: ## Core Requirements ### 1. Data Models (Prisma Schema) - **Contact**: firstName, lastName, email, phone, company (foreign key), createdAt, updatedAt - **Company**: name, website, industry, revenue, size, address, createdAt, updatedAt - **Deal**: title, value (decimal), stage (enum: Prospecting, Qualification, Proposal, Negotiation, Closed), company (FK), contact (FK), expectedCloseDate, createdAt, updatedAt - **Activity**: type (enum: Email, Call, Meeting, Note), description, contactId (FK), dealId (FK), relatedTo, createdAt, completedAt - **EmailLog**: subject, body, recipientEmail, status (enum: Sent, Bounced, Opened, Clicked), contactId (FK), sentAt, openedAt - **Meeting**: title, startTime, endTime, attendees (JSON), contactId (FK), dealId (FK), description, location, createdAt ### 2. Authentication & Authorization - Use Clerk for user authentication with role-based access control (Admin, Manager, User) - Implement user-level data isolation - Create middleware to protect all API routes and dashboard pages - Support team/organization management for multi-user teams ### 3. Core Features - **Contact Management**: Full CRUD with advanced search, filtering by company/stage, bulk actions - **Company Management**: Company profiles with associated contacts and deals - **Pipeline Management**: Kanban-style deal pipeline with drag-and-drop between stages - **Activity Tracking**: Log calls, emails, meetings, and notes against contacts/deals - **Email Integration**: Send emails via Resend, track opens/clicks, log delivery status - **Meeting Scheduler**: Calendar integration, send meeting invites, auto-add to activity log ### 4. Dashboard & Analytics - Sales metrics: Total deals, won vs lost, revenue forecast by stage - Activity summary: Recent activities, upcoming meetings, overdue tasks - Charts: Revenue by stage (bar), pipeline health (funnel), activity trends (line) - Use Recharts for all visualizations ### 5. Tech Stack Details - Framework: Next.js 14 with App Router - Database: PostgreSQL (Supabase) - ORM: Prisma with migrations - Authentication: Clerk - Email: Resend SDK - UI: shadcn/ui (Button, Card, Table, Modal, Form, Input, Select, Tabs, Dialog, Dropdown) - CSS: Tailwind CSS - State: React hooks (use client components where needed) - Validation: Zod for API routes and forms ### 6. Project Structure - /app: Next.js routes (auth, dashboard, contacts, companies, deals, activities, analytics) - /components: Reusable UI components (Navbar, Sidebar, KanbanBoard, ContactCard, etc.) - /lib: Database client, utilities, constants - /prisma: Schema and migrations - /public: Static assets ### 7. API Routes All API routes should be in /app/api with proper error handling and authentication: - POST /api/contacts (create), GET /api/contacts (list with pagination), GET /api/contacts/[id], PUT/DELETE - POST /api/companies, GET /api/companies, etc. - POST /api/deals, GET /api/deals, PATCH /api/deals/[id]/stage (for drag-drop) - POST /api/activities, GET /api/activities - POST /api/emails/send (via Resend), POST /api/emails/webhook (for open/click tracking) - POST /api/meetings, GET /api/meetings ### 8. Performance & Best Practices - Server components by default, use 'use client' sparingly - Implement proper error boundaries - Add loading skeletons for async data - Use Prisma select to avoid over-fetching - Implement pagination for lists (20 items per page) - Cache frequently accessed data - Add proper TypeScript types throughout ### 9. Styling & UX - Use Tailwind CSS with a cohesive color scheme (suggestion: purple/indigo for primary) - Implement consistent spacing, typography, and component patterns - Add subtle hover effects and transitions - Dark mode support (optional but recommended) - Mobile-responsive design ### 10. Deployment - Deploy frontend on Vercel - Host database on Supabase - Configure environment variables for Clerk, Resend API keys - Set up proper CORS policies When building, prioritize: Auth → Data models → CRUD APIs → Dashboard UI → Advanced features. Use this prompt as your system context for all coding decisions.