Fruit Letter Counter Guidelines

Development guidelines for the fruit-letter-counter React application. This skill helps maintain consistent code quality and style across the project.

Project Overview

This is a React application that counts letters in fruit names. The codebase follows modern React patterns with functional components, hooks, and Tailwind CSS for styling.

Build and Development Commands

When working on this project, use these commands:

1. **Install dependencies**: Run `npm install` before starting work

2. **Development server**: Use `npm start` to run the app locally

3. **Production build**: Run `npm run build` to create optimized build

4. **Testing**:

- Run all tests with `npm test`

- Run specific test with `npm test -- -t "testName"`

5. **Linting**:

- Check code with `npm run lint`

- Auto-fix issues with `npm run lint -- --fix`

Code Style Requirements

React Component Patterns

Import Organization

Structure imports in this order:

1. React imports

2. Third-party library imports

3. Component imports

4. Utility/helper imports

Example:

```javascript

import React, { useState, useEffect } from 'react';

import axios from 'axios';

import FruitDisplay from './components/FruitDisplay';

import { calculateLetters } from './utils/helpers';

```

Naming Conventions

Follow these strict naming patterns:

Formatting Standards

Styling Approach

Example:

```javascript

<div className="flex items-center justify-center p-4 bg-gray-100 rounded-lg">

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

Count Letters

</button>

</div>

```

Error Handling

Example:

```javascript

try {

const result = await processfruitData(input);

setResult(result);

} catch (error) {

console.error('Error processing fruit:', error);

setError('Failed to process fruit data');

}

```

Implementation Steps

When modifying or extending this project:

1. **Read existing code** to understand current patterns and structure

2. **Check tests** to understand expected behavior

3. **Follow naming conventions** strictly for all new code

4. **Use Tailwind classes** for all styling needs

5. **Group imports** according to the specified order

6. **Add error handling** for any async operations

7. **Run linter** with `npm run lint -- --fix` before committing

8. **Run tests** with `npm test` to verify changes

9. **Build project** with `npm run build` to ensure no build errors

Important Notes