• Features
• Tech Stack
• Quick Start
• Installation
• Deployment
• Theme System
• Responsive Design
• Configuration
• Performance
• Contributing
• License

• Dashboard Overview: Real-time revenue, orders, customers, and product analytics
• Order Management: Complete order tracking with status updates (Pending → Processing → Shipped → Delivered)
• Customer Management: Customer profiles, VIP status tracking, purchase history, and location data
• Employee Management: Staff organization, department tracking, salary management, and role assignments
• Product Management: Inventory control, stock monitoring, category organization, and sales analytics
• Analytics Dashboard: Comprehensive business insights with interactive charts and KPI tracking

• Dynamic Theming: 6 professionally designed color palettes with real-time preview
  • Ocean Blue, Forest Green, Sunset Orange, Royal Purple, Rose Pink, Emerald
• Dark/Light Mode: Complete theme switching with smooth transitions
• Smart Notifications: Real-time alerts for orders, stock levels, reviews, payments, and new customers
• Shopping Cart: Integrated cart functionality with checkout process
• Rich Text Editor: Advanced document creation with formatting, templates, and export options
• Calendar Integration: Event management, scheduling, and team coordination
• Kanban Board: Drag-and-drop task management with priority levels and team assignments

• Lightning Fast: Vite-powered development with hot module replacement
• Mobile-First: Responsive design that works flawlessly on all devices
• State Management: Efficient Zustand store with persistence
• Advanced Search: Global search across products, orders, and customers
• Interactive Charts: Beautiful data visualizations with Recharts
• Smooth Animations: Micro-interactions and transitions for enhanced UX
• Accessibility: ARIA labels, keyboard navigation, and screen reader support

• React 19 - Latest React with concurrent features
• JavaScript (ES6+) - Modern JavaScript with latest features
• React Router DOM - Client-side routing with nested routes

• Tailwind CSS 3.4 - Utility-first CSS framework
• Lucide React - Beautiful, customizable icons
• Custom CSS Variables - Dynamic theming system
• Google Fonts (Inter) - Professional typography

• Zustand - Lightweight state management
• React Hot Toast - Elegant notifications
• LocalStorage Persistence - Settings and preferences storage

• Recharts - Composable charting library
• Interactive Dashboards - Real-time data visualization
• Responsive Charts - Mobile-optimized chart displays

• Vite 5.0 - Next-generation frontend tooling
• ESLint - Code quality and consistency
• PostCSS - CSS processing and optimization
• Autoprefixer - Automatic vendor prefixing

• React Big Calendar - Full-featured calendar component
• @hello-pangea/dnd - Beautiful drag-and-drop
• Moment.js - Date manipulation and formatting

Get up and running in less than 2 minutes:

# Clone the repository
git clone https://github.com/yourusername/ecommercehub-admin.git

# Navigate to project directory
cd ecommercehub-admin

# Install dependencies
npm install

# Start development server
npm run dev

# Open your browser to http://localhost:5173

• Node.js 18+
• npm 9+ or yarn 1.22+
• Modern web browser (Chrome, Firefox, Safari, Edge)

1. Clone the Repository

   git clone https://github.com/yourusername/ecommercehub-admin.git
   cd ecommercehub-admin

2. Install Dependencies

   npm install
   # or
   yarn install

3. Start Development Server

   npm run dev
   # or
   yarn dev

4. Build for Production

   npm run build
   # or
   yarn build

5. Preview Production Build

   npm run preview
   # or
   yarn preview

# Install Vercel CLI
npm install -g vercel

# Login to your Vercel account
vercel login

# Deploy to production
vercel --prod

1. Push your code to GitHub
2. Visit vercel.com and sign in
3. Click "New Project" and import your repository
4. Vercel automatically detects Vite configuration
5. Click "Deploy" - your site will be live in minutes!

# Unix/Mac/Linux
chmod +x deploy.sh
./deploy.sh

# Windows
deploy.bat

The application works out-of-the-box without environment variables. For customization:

# Optional: Create .env file for custom configuration
VITE_APP_TITLE="Your Store Admin"
VITE_API_URL="https://your-api.com"
VITE_ANALYTICS_ID="your-analytics-id"

1. Click the sun/moon icon in the top-right header
2. Choose between Light and Dark modes
3. Select from 6 color palettes
4. Changes apply instantly across the entire application

/* Add custom theme in src/index.css */
:root {
  --color-primary: #your-color;
  --color-secondary: #your-secondary;
  --color-accent: #your-accent;
}

• Mobile: 320px - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px - 1439px
• Large Desktop: 1440px+

• Collapsible sidebar navigation
• Touch-friendly buttons and interactions
• Optimized table layouts with horizontal scroll
• Responsive charts and graphs
• Mobile-optimized dropdowns and modals

• First Load: < 3 seconds on 3G
• Subsequent Loads: < 1 second
• Bundle Size: 316KB gzipped
• Lighthouse Mobile Score: 90+

1. Create component in src/pages/
2. Add route in src/App.jsx
3. Add navigation item in src/components/Layout/Sidebar.jsx

Update the store in src/store/useStore.js:

// Add new data section
newDataSection: [
  { id: 1, name: 'Example', value: 'data' }
],

// Add new actions
addNewItem: (item) => set((state) => ({
  newDataSection: [...state.newDataSection, item]
})),

All components are modular and located in:

• src/components/ - Reusable UI components
• src/pages/ - Page-level components
• src/components/Layout/ - Layout components

Replace mock data with real API calls:

// Example API integration
const fetchOrders = async () => {
  const response = await fetch('/api/orders');
  const orders = await response.json();
  setOrdersData(orders);
};

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run tests: npm run test (if available)
5. Commit changes: git commit -m 'Add amazing feature'
6. Push to branch: git push origin feature/amazing-feature
7. Open a Pull Request

• Follow the existing code style
• Add comments for complex logic
• Update documentation for new features
• Test on multiple browsers and devices
• Ensure responsive design principles

• Use the GitHub issue tracker
• Include browser and device information
• Provide steps to reproduce
• Include screenshots if applicable

This project is licensed under the MIT License - see the LICENSE file for details.