A production-ready React dashboard application for HR performance management.
- 📊 KPI Cards - Visual metrics with growth indicators and mini charts
- 📈 Spending Analytics - Interactive charts for salary and tax tracking
- 📋 Project Management - Project table with progress tracking
- ✅ Task Completion - Visual task completion metrics
- 📱 Responsive Design - Mobile-first, fully responsive layout
- ♿ Accessible - WCAG compliant with ARIA labels and keyboard navigation
- 🎨 Modern UI - Clean, professional design with smooth animations
- React 19 - UI library
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- Recharts - Chart library
- Lucide React - Icons
- Phosphor Icons - Additional icons
marcohr/
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ └── ... # Feature components
├── data/ # Mock data and constants
├── constants/ # App-wide constants
├── utils/ # Utility functions
├── types.ts # TypeScript type definitions
└── ...
- Node.js 18+ or Bun
- npm, yarn, pnpm, or bun
# Install dependencies
npm install
# or with bun
bun install# Start development server
npm run dev
# or with bun
bun run devThe app will be available at http://localhost:3000
# Build for production
npm run build
# Preview production build
npm run previewCreate a .env file for environment-specific configuration:
VITE_API_URL=https://api.example.com
VITE_APP_NAME=MarcoHR- ✅ React.memo for component memoization
- ✅ useMemo for expensive calculations
- ✅ Lazy loading for images
- ✅ Code splitting ready (add React.lazy as needed)
- ✅ ARIA labels and roles
- ✅ Keyboard navigation support
- ✅ Focus management
- ✅ Screen reader friendly
- ✅ Semantic HTML
- ✅ Error boundaries for graceful error handling
- ✅ Loading states
- ✅ Empty states
- ✅ Image error fallbacks
- TypeScript for type safety
- ESLint for code linting
- Consistent code formatting
- Component composition
- Separation of concerns
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Private - All rights reserved