`CLAUDE.md`

171 lines
# Claude AI Assistant - Angels Flowers Configuration

## Project Overview

- **Name**: Angel's Flowers
- **Description**: Premium Ecuadorian Flowers in East Los Angeles
- **Framework**: Next.js 14.0.4 + React 18.2.0
- **Styling**: Tailwind CSS 3.4.0
- **Language**: TypeScript 5.3.3
- **Path**: /root/Projects/angels-flowers

---

## AI Development Guidelines

### Code Conventions

1. **TypeScript**: Always use strict TypeScript. No `any` types unless absolutely necessary.
2. **Components**: Use functional components with React hooks.
3. **Naming**:
   - Components: PascalCase (e.g., `FlowerCard.tsx`)
   - Utilities: camelCase (e.g., `formatPrice.ts`)
   - Constants: UPPER_SNAKE_CASE
4. **Imports**: Use absolute imports with `@/` alias.
5. **Styling**: Use Tailwind CSS utility classes. Avoid inline styles.

### File Structure

```
angels-flowers/
├── app/                  # Next.js App Router pages
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Home page
│   ├── globals.css       # Global styles
│   ├── about/            # About page
│   ├── contact/          # Contact page
│   └── flowers/          # Flowers catalog
├── components/           # Reusable React components
├── public/               # Static assets
└── scripts/              # Build and automation scripts
```

---

## Testing Automation

### Running Tests

```bash
# Type checking
npm run build

# Linting
npm run lint
```

### Pre-Commit Checks

Before committing, always run:

```bash
npm run build && npm run lint
```

### Acceptance Criteria Validation

1. **TypeScript**: All files must pass `tsc --noEmit`
2. **ESLint**: No errors allowed, warnings should be addressed
3. **Build**: `next build` must complete successfully

---

## Deployment Process

### Local Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev
```

### Production Build

```bash
# Create production build
npm run build

# Start production server
npm run start
```

### Environment Variables

Copy `.env.local.example` to `.env.local` and configure:

```bash
cp .env.local.example .env.local
```

### PM2 Production Deployment

```bash
# Start with PM2
pm2 start npm --name "angels-flowers" -- start

# Monitor
pm2 monit angels-flowers

# View logs
pm2 logs angels-flowers
```

---

## Code Review Standards

### Pull Request Checklist

- [ ] TypeScript compiles without errors (`npm run build`)
- [ ] ESLint passes (`npm run lint`)
- [ ] No console.log statements in production code
- [ ] Components are properly typed
- [ ] Responsive design tested on mobile and desktop
- [ ] Accessibility: proper alt tags, ARIA labels where needed

### Commit Message Format

```
feat(scope): description
fix(scope): description
docs(scope): description
style(scope): description
refactor(scope): description
```

Examples:
- `feat(flowers): add flower detail page`
- `fix(contact): resolve form validation issue`
- `docs(readme): update installation instructions`

### Code Quality Rules

1. **No dead code**: Remove unused imports, variables, and functions
2. **DRY principle**: Extract repeated logic into utilities or components
3. **Single responsibility**: Each component/function should do one thing well
4. **Error handling**: Always handle potential errors gracefully
5. **Performance**: Use React.memo, useMemo, useCallback where appropriate

---

## Quick Reference

### Common Commands

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Create production build |
| `npm run start` | Start production server |
| `npm run lint` | Run ESLint |

### Key Files

- `app/layout.tsx` - Root layout with metadata
- `app/page.tsx` - Home page component
- `tailwind.config.js` - Tailwind CSS configuration
- `tsconfig.json` - TypeScript configuration