A modern, feature-rich CRM application built with React, Supabase, and AI-powered lead scoring. Streamline your sales pipeline with intelligent automation, beautiful analytics, and professional quote generation.
- Lead Management - Track and organize leads with AI-powered priority scoring
- Pipeline Visualization - Drag-and-drop Kanban board + table view
- Client Management - Manage closed-won clients with full contact history
- Meeting Scheduler - Schedule, edit, and track client meetings
- Activity Tracking - Automatic activity logging for all actions
- Notes & Reminders - Add detailed notes and set follow-up reminders
- Smart Lead Scoring - Automatic priority scoring (Hot/Warm/Cold) based on:
- Contact information completeness
- Lead source quality
- Engagement level (notes, interactions)
- Pipeline stage
- Visual Score Indicators - Color-coded badges with 🔥 Hot, ☀️ Warm, ❄️ Cold icons
- Real-time Dashboard with:
- Pipeline distribution bar chart
- Lead source pie chart
- 7-day growth trend area chart
- Key performance metrics
- Export to CSV - Download leads data for external analysis
- Visual Insights - Recharts-powered interactive charts
- In-App Quote Generator - Build itemized quotes with line items
- PDF Export - Generate professional PDF quotes with:
- Company branding
- Itemized pricing table
- Terms & conditions
- Automatic quote numbering
- Real-time Quote Preview - See totals as you build
- One-Click Email - Pre-filled professional email templates
- Google Calendar Integration - Add meetings to calendar with one click
- Automated Reminders - Never miss a follow-up with overdue alerts
- Light Theme - Professional, clean interface
- Responsive Design - Works on desktop, tablet, and mobile
- Smooth Animations - Framer Motion powered transitions
- Drag & Drop - Intuitive pipeline management
- Node.js 16+ and npm
- Supabase account (free tier works!)
- Clone the repository
git clone https://github.com/yourusername/crm-pro.git
cd crm-pro- Install dependencies
npm install- Set up Supabase
- Create a new project at supabase.com
- Get your Project URL and Anon Key from Project Settings → API
- Update
crm-system.jsxlines 66-67 with your credentials:
const supabase = createClient(
'YOUR_SUPABASE_URL', // Replace with your Project URL
'YOUR_SUPABASE_ANON_KEY' // Replace with your Anon Key
);- Create database tables
Run these SQL commands in your Supabase SQL Editor:
-- Leads table
CREATE TABLE leads (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users NOT NULL,
name TEXT NOT NULL,
company TEXT,
email TEXT NOT NULL,
phone TEXT,
source TEXT,
stage TEXT DEFAULT 'new',
notes JSONB DEFAULT '[]',
reminders JSONB DEFAULT '[]',
quote_items JSONB DEFAULT '[]',
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Meetings table
CREATE TABLE meetings (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users NOT NULL,
lead_id UUID REFERENCES leads(id) ON DELETE CASCADE,
title TEXT NOT NULL,
date_time TIMESTAMP WITH TIME ZONE NOT NULL,
notes TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Activities table
CREATE TABLE activities (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users NOT NULL,
lead_id UUID REFERENCES leads(id) ON DELETE SET NULL,
type TEXT NOT NULL,
message TEXT NOT NULL,
timestamp TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Enable Row Level Security
ALTER TABLE leads ENABLE ROW LEVEL SECURITY;
ALTER TABLE meetings ENABLE ROW LEVEL SECURITY;
ALTER TABLE activities ENABLE ROW LEVEL SECURITY;
-- Create policies
CREATE POLICY "Users can view their own leads" ON leads
FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert their own leads" ON leads
FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can update their own leads" ON leads
FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "Users can delete their own leads" ON leads
FOR DELETE USING (auth.uid() = user_id);
CREATE POLICY "Users can view their own meetings" ON meetings
FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert their own meetings" ON meetings
FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can update their own meetings" ON meetings
FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "Users can delete their own meetings" ON meetings
FOR DELETE USING (auth.uid() = user_id);
CREATE POLICY "Users can view their own activities" ON activities
FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert their own activities" ON activities
FOR INSERT WITH CHECK (auth.uid() = user_id);- Run the development server
npm run dev- Open your browser
Navigate to
http://localhost:5173
crm-pro/
├── src/
│ ├── main.jsx # React entry point
│ └── index.css # Tailwind CSS imports
├── crm-system.jsx # Main application code
├── index.html # HTML entry point
├── package.json # Dependencies
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS config
├── postcss.config.js # PostCSS config
├── .gitignore # Git ignore rules
└── README.md # This file
| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| Vite | Build tool & dev server |
| Supabase | Backend (Auth + Database) |
| Tailwind CSS | Styling |
| Framer Motion | Animations |
| Recharts | Data visualization |
| jsPDF & autoTable | PDF generation |
| @hello-pangea/dnd | Drag and drop |
| Lucide React | Icons |
The CRM automatically scores each lead (0-100) based on:
- ✅ Email provided: +10 points
- ✅ Phone provided: +10 points
- ✅ Company provided: +5 points
- ✅ Premium source (Referral/LinkedIn/Partner): +15 points
- ✅ Each note added: +5 points
- ✅ Qualified stage: +10 points
- ✅ Proposal stage: +20 points
Score Categories:
- 🔥 Hot (60-100): High priority, ready to close
- ☀️ Warm (30-59): Engaged, needs nurturing
- ❄️ Cold (0-29): Low engagement, long-term prospect
- Open any lead in edit mode
- Click "Quote Builder" tab
- Add line items (description, quantity, price)
- Save quote to lead
- Click PDF icon in leads table to generate professional quote
- PDF downloads automatically with branding and terms
- New Lead - Just added to system
- Qualified - Meets buying criteria
- Follow-up - Active conversation
- Proposal - Quote sent
- Closed Won - Deal closed! ✅
- Closed Lost - Opportunity lost
![Dashboard with analytics charts and activity feed]
![Sortable leads table with AI scoring and quick actions]
![Drag-and-drop Kanban board]
![In-app quote builder with PDF export]
- ✅ Row Level Security (RLS) enabled on all tables
- ✅ User data isolation (users only see their own data)
- ✅ Secure authentication via Supabase Auth
- ✅ Protected API routes
- ✅ No sensitive data in frontend
- Email campaign integration
- WhatsApp/SMS notifications
- Custom fields for leads
- Team collaboration features
- Mobile app (React Native)
- Advanced reporting & forecasting
- Multi-language support
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name
If you found this helpful, please consider giving it a ⭐!
Built with ❤️ for the sales community