A comprehensive business intelligence dashboard built to demonstrate advanced frontend implementation patterns using React 19, Tailwind CSS v4, and Shadcn UI.
This project serves as a case study in building responsive, data-heavy interfaces with modern component composition techniques.
- Interactive Dashboard: KPI visualization, revenue tracking, and recent activity feeds.
- Data Visualization: Custom wrapper components for Recharts (Area, Bar, Pie, and Radar charts) that automatically adapt to theme colors.
- Advanced Data Tables: A robust Customer Management table featuring filtering, sorting, and dropdown actions.
- Theming System: Fully integrated Dark/Light mode toggling using a custom ThemeProvider.
- Responsive Layout: Collapsible Sidebar navigation and mobile-responsive design using use-mobile hooks.
Framework: React 19, Vite
Styling: Tailwind CSS v4, CLSX, Tailwind Merge
UI Library: Shadcn UI (Radix Primitives)
Charts: Recharts
Routing: React Router DOM v7
Icons: Lucide React
Case Study: Component Architecture | Shadcn
This codebase demonstrates specific architectural patterns:
abstracted Chart Configuration: Instead of repeating chart logic, the project uses utility functions (getChartConfigHoriz, getChartConfigVertic) to map data keys to theme CSS variables dynamically.
Compound Components: Heavy use of Shadcn's compound component pattern (e.g., Card, CardHeader, CardContent) to build consistent UI cards across Analytics and Dashboard pages.
Separation of Concerns: Data is strictly separated from presentation. All mock data resides in src/constants/, allowing the components to remain pure and reusable.