💼 Pocket CRM

A zero-login, local-first sales CRM web app that runs entirely in your browser. No backend, no authentication, no external APIs — just pure client-side magic with IndexedDB persistence.

🌐 Live Demo

Preview URL: https://skill-deploy-0upah6o69k-agent-skill-vercel.vercel.app

Claim URL: https://vercel.com/claim-deployment?code=7e2b2570-4aed-4d66-841d-e6ac558e4e26
(Transfer to your Vercel account)

✨ Features

Lead Management

• Complete lead profiles: Name, company, role, email, phone, source, tags, stage, value, notes
• Customizable stages: New → Contacted → Qualified → Proposal → Won → Lost
• Tagging system: Organize leads with custom tags
• Pipeline value tracking: Track total and won deal values

Views

• 📊 Dashboard: Follow-up reminders (overdue, today, upcoming) + recent activity + stats
• 📋 Kanban Board: Drag-and-drop leads between stages
• 📑 Table View: Sortable columns, inline stage editing, responsive cards on mobile
• 👤 Lead Detail: Full lead view with activity log

Activity Logging

• Track interactions: Email, Call, Meeting, Note, Task
• Outcome tracking: Positive, Neutral, Negative, No Response
• Next steps: Record follow-up actions
• Activity history: Chronological timeline per lead

Follow-up Management

• Next follow-up dates: Set and track follow-ups
• Dashboard buckets: Overdue (red), Today (orange), Upcoming (blue)
• Visual alerts: Overdue follow-ups highlighted in table view

Search & Filters

• Full-text search: Name, company, email, phone
• Stage filter: Filter by pipeline stage
• Source filter: Filter by lead source
• Tag filter: Multi-select tag filtering
• Persistent UI: Filters apply across all views

Data Export

• JSON backup: Full database export for backup/migration
• CSV export: Leads table for spreadsheets/reporting
• JSON import: Restore from backup file

Mobile-First Design

• Responsive layouts: Touch-friendly from 320px to desktop
• Adaptive views: Card layouts on mobile, tables on desktop
• Sticky headers: Easy navigation on all screens

🛠️ Tech Stack

• Framework: Vite + React + TypeScript
• Styling: Tailwind CSS (mobile-first responsive)
• Data: IndexedDB for persistent storage
• No backend: Runs entirely client-side
• No auth: Zero-login experience

🚀 Getting Started

Option 1: Use the Live App

Just visit the preview URL above — your data is stored in your browser's IndexedDB.

Option 2: Run Locally

# Clone the repository
git clone https://github.com/agent-cortex/pocket-crm.git
cd pocket-crm

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:5173

Option 3: Deploy Your Own

# Build for production
npm run build

# Preview production build
npm run preview

# Deploy to Vercel
vercel

📱 Usage Guide

Creating Your First Lead

1. Click Dashboard → + New Lead
2. Fill in lead details (name and company required)
3. Set a follow-up date to track your next action
4. Add tags for organization (e.g., "Hot Lead", "Enterprise")

Using the Kanban Board

1. Switch to Kanban view
2. Drag leads between stage columns
3. Click any lead to view full details

Logging Activities

1. Open a lead detail page
2. Click + Log Activity
3. Choose activity type (Email, Call, Meeting, etc.)
4. Record outcome and next steps
5. Activities appear in chronological order

Managing Follow-ups

The Dashboard shows three buckets:

• Overdue (red): Past-due follow-ups — action needed
• Today (orange): Follow-ups due today
• Upcoming (blue): Future follow-ups scheduled

Search & Filter

Use the search bar and filters to find leads:

• Search: Type name, company, email, or phone
• Stage: Select a pipeline stage
• Source: Filter by lead source
• Tags: Click tags to toggle filter

Exporting Data

Backup (JSON):

• Click 📥 JSON to download full database
• Restore by clicking 📤 Import and selecting your backup file

Report (CSV):

• Click 📊 CSV to download leads as spreadsheet
• Open in Excel, Google Sheets, or any spreadsheet app

🔒 Privacy & Security

• 100% local-first: All data stored in your browser's IndexedDB
• No server: No data transmission, no tracking, no analytics
• No authentication: No passwords, accounts, or sign-ups
• Your browser, your data: Completely private and offline-capable

🎨 Customization

The app uses Tailwind CSS for styling. To customize:

1. Edit tailwind.config.js for theme changes
2. Modify stage colors in components (search for stageColors)
3. Add custom fields to src/types.ts and forms

🐛 Known Limitations

• Browser-specific: Data is tied to the browser/device you use
• No cloud sync: Use JSON export/import to transfer data between devices
• IndexedDB limits: Browser storage quotas apply (typically 50MB-1GB)

📦 Data Structure

interface Lead {
  id: string
  name: string
  company: string
  role: string
  email: string
  phone: string
  source: string
  tags: string[]
  stage: 'New' | 'Contacted' | 'Qualified' | 'Proposal' | 'Won' | 'Lost'
  value: number
  notes: string
  nextFollowUp: string | null // ISO date
  createdAt: string
  updatedAt: string
}

interface Activity {
  id: string
  leadId: string
  date: string // ISO date
  type: 'Email' | 'Call' | 'Meeting' | 'Note' | 'Task'
  outcome: 'Positive' | 'Neutral' | 'Negative' | 'No Response'
  notes: string
  nextStep: string
  createdAt: string
}

🤝 Contributing

This is a personal project, but feel free to fork and customize for your needs!

📄 License

MIT — use it however you like!

🙏 Credits

Built with ❤️ using:

• React
• Vite
• Tailwind CSS
• IndexedDB

---

Start managing your leads today — zero setup required! 🚀