- Interactive Dashboard: Real-time data visualization with animated charts and metrics
- Responsive Design: Works seamlessly on all device sizes
- Dark Mode Support: Toggle between light and dark themes
- Keyboard Shortcuts: Enhance productivity with keyboard shortcuts
- Rich Animations: Smooth transitions and micro-interactions using Framer Motion
- Interactive Charts: Customizable charts with hover tooltips and drill-down functionality
- Advanced Data Filtering: Filter data by date range, categories, and search terms
- Accessible UI: WCAG compliant design with proper ARIA attributes
- PWA Support: Progressive Web App features for offline capabilities.
- Clone the repository
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser
- / - Focus search input
- N - Add new widget
- T - Toggle theme (light/dark)
- R - Refresh dashboard data
- Next.js: React framework for production
- Tailwind CSS: Utility-first CSS framework
- Framer Motion: Animation library
- Recharts: Composable charting library
- Headless UI: Unstyled, accessible UI components
- KPI Cards: Show key performance indicators with trend indicators
- Revenue Chart: Visualize revenue trends with targets and comparisons
- Channel Distribution: Donut chart showing revenue distribution by channel
- Products Table: Interactive table with sorting and filtering capabilities
Developed as part of a frontend hackathon to showcase modern UI/UX techniques and best practices.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.