A modern web application built with Next.js 15 and React 19, featuring a comprehensive dashboard system with data visualization, analytics, and reporting capabilities.
- Node.js >= 18.17.0 (as required by Next.js 15)
- Next.js 15 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety and developer experience
- Tailwind CSS - Utility-first styling
- Zustand - Lightweight state management
- SWR - Data fetching and caching
- React Hook Form - Form handling and validation
- Radix UI - Headless UI components
- Class Variance Authority - Component styling variants
- Tailwind Merge - Utility class merging
- Lucide React - Icon system
- ECharts - Interactive charting library
- Nivo - Data visualization components
- Recharts - Composable chart library
- Jest - Testing framework
- React Testing Library - Component testing
- Husky - Git hooks
- Prettier - Code formatting
- ESLint - Code linting
webapp_v2/
├── app/ # Next.js app router pages
├── components/
│ ├── ui/ # Reusable UI components
│ ├── charts/ # Chart components
│ ├── dashboard/ # Dashboard-specific components
│ └── alerts/ # Alert system components
├── hooks/ # Custom React hooks
├── stores/ # Zustand store definitions
├── lib/ # Utility functions and API
├── constants/ # Application constants
└── tests/ # Test files
- Dashboard System - Customizable dashboards with drag-and-drop capabilities
- Data Visualization - Multiple charting libraries for different visualization needs
- Alert System - Real-time notification and alert management
- Authentication - Protected routes and auth management
- Responsive Design - Mobile-first approach with responsive layouts
- Node.js >= 18.17.0 (as required by Next.js 15)
- npm >= 10.0.0
- Install dependencies:
npm install- Run development server:
npm run devnpm run dev- Start development servernpm run build- Build production bundlenpm run test- Run testsnpm run lint- Run lintingnpm run format:write- Format code with Prettier