NutriCalc ist ein fortschrittlicher Nährstoffrechner für Pflanzen (speziell Cannabis) als React SPA mit TypeScript, Vite, und Tailwind CSS. Die Anwendung bietet präzise Nährstoffberechnungen, AI-gestützte Beratung über Google Gemini API, und umfassende Dünger- und Wassermanagement-Features.
Loading actions...
NutriCalc ist ein fortschrittlicher Nährstoffrechner für Pflanzen (speziell Cannabis) als React SPA mit TypeScript, Vite, und Tailwind CSS. Die Anwendung bietet präzise Nährstoffberechnungen, AI-gestützte Beratung über Google Gemini API, und umfassende Dünger- und Wassermanagement-Features.
any types, proper interfacescomponents/, utilities in utils/, types in types/@/ prefix, group imports (React, libraries, local)src/
├── components/ # React components (tabs, UI elements)
├── contexts/ # React contexts (Theme, Toast, Water, DataPersistence)
├── hooks/ # Custom hooks (useApiKey, useAppSettings, etc.)
├── types/ # TypeScript type definitions
├── utils/ # Utility functions (calculateNutrients, etc.)
├── constants/ # Configuration constants and data
└── styles/ # CSS styles
docs/ # Project documentation
├── prd.md # Product Requirements Document
├── workflow-rules.md # Development workflow guidelines
└── feature-improvement-ideas.md
tests/ # Playwright e2e tests
xnotes/ # Development notes and planning
# Development
npm start # Start dev server (Vite) on port 3002
npm run build # Production build
npm run preview # Preview production build
# Testing
npm test # Run unit tests (Vitest)
npm run test:ui # Run tests with UI
npm run test:coverage # Test coverage report
npx playwright test # Run e2e tests
# Code Quality
npm run lint # ESLint check
npm run lint:fix # ESLint auto-fix
npm run format # Prettier formatting
npm run type-check # TypeScript type checking
# Project structure analysis
find src -name "*.tsx" -o -name "*.ts" | head -20
wc -l src/**/*.{ts,tsx}
# Find components without proper TypeScript types
grep -r "any\|unknown" src/ --include="*.ts" --include="*.tsx"
# Check for accessibility issues
grep -r "onClick.*div\|onClick.*span" src/ --include="*.tsx"
# Find hardcoded colors (should use design system)
grep -r "#[0-9a-fA-F]\{6\}\|rgb(\|rgba(" src/ --include="*.tsx" --include="*.css"
# Check for console.log statements (should be removed in production)
grep -r "console\." src/ --include="*.ts" --include="*.tsx"
# Create new component structure
mkdir src/components/NewComponent
cat > src/components/NewComponent/index.tsx << 'EOF'
import React from 'react';
import { NewComponentProps } from './types';
const NewComponent: React.FC<NewComponentProps> = ({
...props
}) => {
return (
<div className="new-component">
{/* Component content */}
</div>
);
};
export default NewComponent;
EOF
// Error boundary wrapper
const withErrorBoundary = (Component: React.ComponentType) => {
return (props: any) => (
<ErrorBoundary>
<Component {...props} />
</ErrorBoundary>
);
};
// Custom hook template
const useCustomHook = (dependency: any) => {
const [state, setState] = useState(null);
useEffect(() => {
// Effect logic
}, [dependency]);
return { state, setState };
};
// API error handling
const handleApiError = (error: Error, showToast: (msg: string) => void) => {
console.error('API Error:', error);
showToast(error.message || 'Ein Fehler ist aufgetreten');
};
package.json: Dependencies und Scriptsvite.config.js: Vite-Konfiguration (PWA, Server-Settings)tailwind.config.js: Tailwind CSS-Konfiguration (Dark Mode)tsconfig.json: TypeScript-Konfigurationeslint.config.js: ESLint-Regelnplaywright.config.ts: E2E-Test-KonfigurationUI Redesign: 6-phase plan zur Verbesserung von UX/Accessibility
constants/index.ts BASE_FERTILIZER_DATABASEcomponents/ foldernpm run type-check - no TypeScript errorsnpm run lint - no ESLint warnings/errorsnpm test - all tests passinggrep -r "console\." src/ - no console.log statementsnpm run build && ls -la dist/assets/# Bundle analysis
npm install --save-dev rollup-plugin-visualizer
# Add to vite.config.js for bundle analysis
# Check for large dependencies
npx depcheck --detailed
# Performance profiling in dev
npm start -- --profile
# Run specific test file
npm test -- Button.test.tsx
# Watch mode for development
npm test -- --watch
# Coverage report
npm run test:coverage
# E2E tests in headed mode
npx playwright test --headed
# Debug specific E2E test
npx playwright test --debug basic.spec.ts
npm run type-check für TypeScript issuesnode_modules and package-lock.json, reinstalltest-results/ folder für detailed error context# Detailed dependency tree
npm ls --depth=2
# Check for duplicate packages
npm ls --depth=0 | grep -E "WARN|ERROR"
# Bundle analysis
npm run build && npx vite-bundle-analyzer dist
# Type checking with verbose output
npx tsc --noEmit --pretty
# ESLint with specific rules
npx eslint src/ --ext .ts,.tsx --rule "no-console: error"
npm audit regularly, update dependenciesnpm test && npx playwright test)npm run type-check)npm run lint)npm audit)