ModernCRM - React Dashboard

A modern, professional CRM dashboard built with React, TypeScript, and shadcn/ui components.

🚀 Features

• Modern Design: Clean, professional UI with shadcn/ui components
• Responsive Layout: Works on desktop, tablet, and mobile devices
• Dark Mode: Toggle between light and dark themes
• Customer Management: Complete customer table with search and filtering
• Dashboard Analytics: Key metrics and performance indicators
• Professional Navigation: Sidebar with 12+ CRM sections
• Modern Technology Stack: React 18, TypeScript, Vite, TailwindCSS

🛠️ Technology Stack

• Frontend: React 18 with TypeScript
• Build Tool: Vite
• Styling: TailwindCSS + shadcn/ui
• Icons: Lucide React
• Routing: React Router DOM
• UI Components: shadcn/ui (Radix UI primitives)

📦 Installation

1. Clone the repository

   cd moderncrm

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Build for production

   npm run build

🎨 shadcn/ui Components Used

• ✅ Cards - Dashboard metrics and content containers
• ✅ Tables - Customer data display with sorting
• ✅ Buttons - Various styles and sizes
• ✅ Inputs - Search and form fields
• ✅ Dropdown Menus - Navigation and action menus
• ✅ Avatars - User profile images
• ✅ Badges - Status indicators
• ✅ Labels - Form labels and text
• ✅ Navigation - Sidebar and routing

📱 Pages & Features

Dashboard (/)

• Revenue and performance metrics
• Recent activity feed
• Task management
• Upcoming meetings calendar

Customers (/customers)

• Complete customer table
• Search and filter functionality
• Customer status badges
• Action menus for each customer
• Summary statistics

Additional Pages (Ready for Development)

• Companies, Deals, Tasks
• Calendar, Calls, Emails
• Goals, Analytics, Reports
• Settings

🎯 Development

The application is running at http://localhost:5173/

Project Structure

src/
├── components/
│   ├── ui/          # shadcn/ui components
│   └── layout/      # Layout components
├── pages/           # Page components
├── lib/             # Utilities
└── App.tsx          # Main app with routing

Key Features Implemented

1. Professional Layout with responsive sidebar and header
2. Modern theming with CSS variables and dark mode
3. Complete customer management with search and actions
4. Dashboard analytics with key performance indicators
5. Mobile-responsive design that works on all devices

🌟 Live Demo

The CRM includes:

• Professional branding and layout
• Real customer data with search
• Interactive components and dropdowns
• Modern SaaS appearance
• Dark/light mode toggle

Perfect for showcasing modern React development with shadcn/ui!