React Admin Dashboard

A modern, responsive admin dashboard UI demo built with React, Tailwind CSS, and Framer Motion. This project showcases UI/UX design patterns and data visualization components using mock data.

ℹ️ Important Note

This is a UI demonstration project focused on showcasing design patterns and component architecture. All data displayed in the dashboard is static mock data, and no backend integration is implemented. The project serves as a visual template and UI component library.

🎯 Project Purpose

• Demonstrate modern UI/UX design patterns
• Showcase responsive dashboard layouts
• Present data visualization possibilities with mock data
• Provide reusable component architecture
• Serve as a starting point for full-stack dashboard implementations

✨ UI Components & Features

📊 Data Visualization (Mock Data)

• Charts and graphs using Recharts with hardcoded sample data
• Static KPI cards with example metrics
• Placeholder analytics dashboards
• Sample data visualization patterns

🎨 UI Elements

• Responsive navigation and layouts
• Interactive animations using Framer Motion
• Modern design with Tailwind CSS
• Lucide React icons integration
• Accessible component patterns

📱 Demo Pages

• Overview Dashboard (static metrics)
• Products Display (sample catalog)
• User Management UI
• Mock Analytics Views
• Settings Interface

🛠 Tech Stack

• React 18: Component architecture
• Tailwind CSS: Styling
• Framer Motion: Animations
• Recharts: Chart components
• React Router: Navigation
• Lucide React: Icons
• TypeScript: Type safety
• Vite: Build tool

📁 Project Structure

│
├── public/                                        # Static public files (images, favicon, etc.)
│  
│
├── src/
│   ├── components/                                # Reusable React components
│   │   ├── analytics/                             # Components for analytics dashboard
│   │   │   ├── AIPoweredInsights.jsx     
│   │   │   ├── ChannelPerformance.jsx             # Marketing channel performance chart
│   │   │   ├── CustomerSegmentation.jsx           # Customer segment analysis radar chart
│   │   │   ├── OverviewCards.jsx                  # Key performance indicator cards
│   │   │   ├── ProductPerformance.jsx             # Product sales and revenue comparison
│   │   │   ├── RevenueChart.jsx                   # Revenue tracking area chart
│   │   │   └── UserRetention.jsx                  # User retention line chart
│   │   │
│   │   ├── common/                                # Shared/generic components
│   │   │   ├── Header.jsx                         # Page header component
│   │   │   ├── Sidebar.jsx                        # Navigation sidebar
│   │   │   └── StatCard.jsx                       # Statistic card with icon and value
│   │   │
│   │   ├── orders/                                # Order-related components
│   │   │   ├── DailyOrders.jsx                    # Daily order volume line chart
│   │   │   ├── OrderDistribution.jsx              # Order status distribution pie chart
│   │   │   └── OrdersTable.jsx                    # Searchable orders table
│   │   │
│   │   ├── overview/                              # Dashboard overview components
│   │   │   ├── CategoryDistributionChart.jsx      # Sales by product category
│   │   │   ├── SalesChannelChart.jsx              # Sales channels performance
│   │   │   └── SalesOverviewChart.jsx             # Comprehensive sales overview
│   │   │
│   │   ├── products/                              # Product management components
│   │   │   ├── ProductsTable.jsx                  # Searchable product inventory table
│   │   │   └── SalesTrendChart.jsx                # Product sales trend line chart
│   │   │
│   │   ├── sales/                                 # Sales-related visualization components
│   │   │   ├── DailySalesTrend.jsx                # Daily sales bar chart
│   │   │   ├── SalesByCategoryChart.jsx           # Sales distribution by category
│   │   │   └── SalesOverviewChart.jsx             # Comprehensive sales analysis
│   │   │
│   │   ├── settings/                              # User settings and preferences
│   │   │   ├── ConnectedAccounts.jsx              # Social media account connections
│   │   │   ├── DangerZone.jsx                     # Account deletion option
│   │   │   ├── Notifications.jsx                  # Notification preferences
│   │   │   ├── Profile.jsx                        # User profile management
│   │   │   ├── Security.jsx                       # Security settings
│   │   │   ├── SettingSection.jsx                 # Reusable settings section wrapper
│   │   │   └── ToggleSwitch.jsx                   # Customizable toggle switch
│   │   │
│   │   └── users/                                 # User-related analytics components
│   │       ├── UserActivityHeatmap.jsx            # User activity time distribution
│   │       ├── UserDemographicsChart.jsx          # User age group distribution
│   │       ├── UserGrowthChart.jsx                # User acquisition over time
│   │       └── UsersTable.jsx                     # Searchable user management table
│   │
│   ├── pages/                                     # Page components
│   │   ├── AnalyticsPage.jsx                      # Comprehensive analytics dashboard
│   │   ├── OrdersPage.jsx                         # Orders management and tracking
│   │   ├── OverviewPage.jsx                       # Main dashboard overview
│   │   ├── ProductsPage.jsx                       # Product inventory and management
│   │   ├── SalesPage.jsx                          # Sales performance tracking
│   │   ├── SettingsPage.jsx                       # User account and app settings
│   │   └── UserPage.jsx                           # User management and analytics
│   │
│   ├── App.jsx                                    # Main application component and routing
│   ├── index.css                                  # Global CSS with Tailwind directives
│   ├── main.jsx                                   # React application entry point
│   └── index.html                                 # Alternative HTML entry point
│
├── .eslintrc.cjs                                  # ESLint configuration for code quality
├── .gitignore                                     # Git ignored files and directories
├── index.html                                     # Root HTML file
├── package.json                                   # Project dependencies and scripts
├── postcss.config.js                              # PostCSS configuration
├── tailwind.config.js                             # Tailwind CSS customization
└── vite.config.js                                 # Vite build tool configuration

🚀 Quick Start

1. Clone the repository:

   git clone https://github.com/6Glow/react-admin-dashboard.git
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

📊 Mock Data Structure

The project uses static data files for demonstration. Examples include:

// Sample sales data
export const salesData = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  // ... more mock data
];

// Sample user data
export const userData = [
  { id: 1, name: 'John Doe', role: 'Admin' },
  { id: 2, name: 'Jane Smith', role: 'User' },
  // ... more mock data
];

🎨 UI Components

Charts & Graphs

• All charts use predefined static data
• Visualization components are fully functional but display mock metrics
• Interactive elements work with hardcoded responses

Dashboard Metrics

• KPIs show example values
• Statistics are non-dynamic placeholders
• Trends and comparisons use sample data

Tables & Lists

• Display static entries
• Sorting and filtering work on mock datasets
• Pagination implemented with fixed data arrays

🔧 Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📋 Future Implementation Suggestions

To convert this UI demo into a full-featured application:

• Integrate a backend API
• Implement real authentication
• Add actual database connections
• Create real-time data updates
• Develop API services
• Add state management
• Implement error handling
• Add loading states

📄 License

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

🙏 Acknowledgments

• React

• Tailwind CSS

• Framer Motion

• Recharts

• Lucide Icons

• Vite