A modern, responsive analytics dashboard with charts, transaction tracking, content cards, and a calendar widget, built with React, TypeScript, and Vite.
DashBoard
A modern, responsive analytics dashboard built with React, TypeScript, and Vite. It provides a clean interface for visualizing data through charts, tracking transactions, managing content, and navigating a calendar — all within a collapsible sidebar layout with dark and light theme support.
About The Project
DashBoard is a frontend project focused on building a practical, component-driven admin interface. It was built to explore and demonstrate the integration of shadcn/ui primitives, Recharts data visualization, and Tailwind CSS within a React and TypeScript application. The layout features a persistent collapsible sidebar, a top navigation bar with theme switching and a user menu, and a responsive grid of dashboard widgets — serving as a strong foundation for any data-heavy web application.
Key Features
- Collapsible sidebar with navigation links and project management entries
- Top navigation bar with light, dark, and system theme toggle
- User profile dropdown with account, settings, and logout options
- Bar chart displaying monthly expenses and savings
- Area chart for trend visualization
- Pie chart for categorical data breakdown
- Card lists for latest transactions and popular content
- Calendar widget for date navigation
- Fully responsive grid layout that adapts from single-column to four-column views
- Built with accessible Radix UI components via shadcn/ui
Technology Stack
- React 19
- TypeScript
- Vite
- Tailwind CSS 4
- shadcn/ui (Radix UI)
- Recharts
- Lucide React
- date-fns
- react-day-picker
Architecture
The app is organized around a set of focused, single-purpose components: an AppSidebar for navigation, an AppCharts / AppArea / AreaPieChart trio for the three chart types, a CardList for transactions and popular content, an AppCalendar for date navigation, and a ThemeProvider wrapping the whole app to drive dark/light/system theming. A HomePage component composes all of these widgets into the main responsive dashboard grid, with shared ui/ primitives from shadcn/ui underneath everything.