Admin Dashboard

A modern, responsive React dashboard application built with Vite, featuring a beautiful UI with dark/light mode toggle and comprehensive analytics components.

🚀 Features

• Modern UI/UX: Clean, professional dashboard design with smooth animations
• Dark/Light Mode: Toggle between themes with persistent storage
• Responsive Design: Fully responsive layout that works on all devices
• Interactive Components:
  • Statistics grid with key metrics
  • Revenue charts using Recharts
  • Activity feed
  • Data tables
  • Search functionality
  • Notifications system
• Collapsible Sidebar: Responsive navigation with smooth transitions
• Real-time Updates: Dynamic data visualization

🛠️ Tech Stack

• Frontend: React 19.1.0
• Build Tool: Vite 7.0.4
• Styling: Tailwind CSS 4.1.11
• Icons: Lucide React
• Charts: Recharts 3.1.0
• Linting: ESLint

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd dashboard-practice

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🎨 Key Components

Header

• Search functionality with filters
• Dark/light mode toggle
• Notification system
• User profile section
• Responsive menu toggle

Sidebar

• Navigation menu
• Collapsible design
• Active page highlighting

Dashboard

• Statistics overview
• Revenue charts
• Activity feed
• Data tables
• Responsive grid layout

🌙 Theme System

The application features a sophisticated theme system with:

• Automatic theme persistence using localStorage
• Smooth transitions between themes
• Tailwind CSS dark mode integration
• Consistent theming across all components

📱 Responsive Design

The dashboard is fully responsive with:

• Mobile-first approach
• Collapsible sidebar for mobile devices
• Adaptive grid layouts
• Touch-friendly interactions

🔧 Customization

The project uses Tailwind CSS for styling, making it easy to customize:

• Colors and themes
• Layout and spacing
• Typography
• Component styling

Built with ❤️ using React and Tailwind CSS