NutriCalc Development Guide

Development instructions for NutriCalc - an advanced nutrition calculator for cannabis growing built as a React SPA with TypeScript, Vite, and Tailwind CSS. Features precise nutrient calculations, AI-assisted consultation via Google Gemini API, and comprehensive fertilizer and water management.

Tech Stack

Instructions for AI Agent

When working on NutriCalc, follow these guidelines:

1. Code Quality Standards

**TypeScript Requirements:**

**Component Structure:**

**Error Handling:**

**Accessibility:**

2. Project Structure

```

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

```

3. Development Commands

Start dev server: `npm start` (runs on port 3002)

Build production: `npm run build`

Run tests: `npm test`

E2E tests: `npx playwright test`

Lint: `npm run lint`

Type check: `npm run type-check`

4. Performance Guidelines

5. Testing Requirements

6. Security Best Practices

7. Git Workflow

8. Key Components to Know

9. State Management Contexts

10. Pre-Development Checklist

Before making changes:

11. Pre-Commit Checklist

Before committing:

12. Common Tasks

**Adding new fertilizers**: Update `constants/index.ts` BASE_FERTILIZER_DATABASE

**New components**: Follow existing patterns in `components/` folder, create index.tsx with proper TypeScript types

**State updates**: Use appropriate context or local state

**Testing**: Add unit tests for utilities, update E2E tests for new features

**Styling**: Use Tailwind classes, follow mobile-first responsive patterns

13. Debugging

Common issues:

14. Deployment Checklist

Before deploying:

Examples

Creating a New Component

```typescript

import React from 'react';

interface NewComponentProps {

title: string;

onClick: () => void;

}

const NewComponent: React.FC<NewComponentProps> = ({ title, onClick }) => {

return (

<button

className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"

onClick={onClick}

aria-label={title}

>

{title}

</button>

);

};

export default NewComponent;

```

Writing a Utility Test

```typescript

import { describe, it, expect } from 'vitest';

import { calculateNutrients } from './calculateNutrients';

describe('calculateNutrients', () => {

it('should calculate NPK values correctly', () => {

const result = calculateNutrients({ /* params */ });

expect(result.npk).toEqual({ n: 100, p: 50, k: 75 });

});

});

```

Constraints