# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Commands

- `npm run dev` - Start development server on http://localhost:3000
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint for code quality

## Architecture Overview

This is **Markatty-UI**, a modern e-commerce platform built with Next.js 15 and React 19. The codebase follows a feature-oriented architecture pattern.

### Core Structure

- **Pages Router**: Using Next.js pages directory (`src/pages/`) for routing
- **Feature-Based Organization**: Each page domain has its own feature directory under `src/features/`
- **Component Separation**: Base UI components in `src/components/`, feature-specific UI in `src/features/`
- **Mock Data**: Currently uses mock data from `src/lib/products-data.js` and API placeholders

### Key Directories

```
src/
├── components/           # Reusable base components
│   ├── cart/            # Cart-related building blocks
│   ├── layout/          # Header, footer, navigation
│   ├── shared/          # Common presentational components
│   └── ui/              # Primitive UI components (Radix-based)
├── features/            # Feature-oriented components by page domain
│   ├── homePage/        # Home page components
│   ├── allProductsPage/ # Product listing components
│   ├── productPage/     # Individual product page
│   ├── cartPage/        # Shopping cart components
│   ├── checkoutPage/    # Checkout flow components
│   └── ...
├── lib/                 # Utilities, hooks, mock data
└── pages/               # Next.js routes
```

### Route → Feature Mapping

- `/home` → `src/features/homePage/components/`
- `/allProducts` → `src/features/allProductsPage/components/`
- `/product/[id]` → `src/features/productPage/components/`
- `/cart` → `src/features/cartPage/components/`
- `/checkout` → `src/features/checkoutPage/components/`
- `/compare` → `src/features/comparePage/components/`
- `/account` → `src/features/accountPage/components/`
- `/wishList` → `src/features/wishListPage/components/`

## Technology Stack

- **Framework**: Next.js 15.3.4 with Pages Router
- **React**: Version 19.0.0
- **Styling**: Tailwind CSS 4.1.11
- **UI Components**: Radix UI primitives, Headless UI
- **Forms**: React Hook Form with Zod validation
- **Icons**: FontAwesome and Lucide React
- **Animation**: Framer Motion
- **Internationalization**: i18next

## Development Patterns

### Component Organization
- Base reusable components go in `src/components/`
- Feature-specific components go in `src/features/[featureName]/components/`
- UI primitives (inputs, buttons, etc.) go in `src/components/ui/`

### State Management
- Cart state is managed via `useCart` hook in `src/lib/useCart.js`
- Currently uses mock data - API integration points are marked with comments

### Data Layer
- Product data: `src/lib/products-data.js` (mock data)
- API routes: `src/pages/api/` (placeholder implementations)
- Cart hook: `src/lib/useCart.js` (includes API integration patterns)

## API Integration Notes

The application is currently using mock data with API integration patterns already established:

- Cart operations in `useCart` hook have commented API calls ready for backend integration
- API routes exist in `src/pages/api/` as placeholders
- Replace mock data imports with actual API calls when backend is available

## Important Files

- `src/lib/useCart.js` - Cart state management with API integration patterns
- `src/lib/products-data.js` - Mock product and category data
- `src/components/ui/` - Radix-based UI primitives
- `src/features/*/components/` - Feature-specific component implementations