# 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 with Turbopack (opens at http://localhost:3000)
- `npm run build` - Build for production
- `npm start` - Start production server
- `npm run lint` - Run ESLint

## Architecture Overview

This is a Next.js 15 App Router application with TypeScript, implementing a shoe detection camera app with the following structure:

### Core Architecture
- **Frontend**: Next.js with App Router, React 19, TypeScript
- **Styling**: Tailwind CSS v4 with shadcn/ui components (New York style)
- **State Management**: React hooks with local storage for persistence
- **UI Components**: Radix UI primitives with custom variants

### Key Features
- **Camera Integration**: WebRTC camera access with device selection and localStorage persistence
- **Shoe Detection**: Simulated ML classification (currently returns random shoes from database)
- **History System**: Local storage-based history with sidebar navigation
- **Responsive UI**: Mobile-first design with overlay controls

### File Structure
- `app/` - Next.js App Router pages and layouts
- `components/` - React components including shadcn/ui components
- `lib/` - Business logic and utilities:
  - `shoe-database.ts` - Static shoe data with type definitions
  - `ml-classification.ts` - Mock ML detection logic
  - `history-storage.ts` - Local storage management
  - `utils.ts` - Utility functions (cn helper)

### Component Architecture
- Uses shadcn/ui component library with Radix UI primitives
- Component variants managed with `class-variance-authority`
- Icons from `lucide-react`
- Custom components: `ShoeResultsPopup`, `HistorySidebar`

### State Management Patterns
- Camera state managed in main page component
- Local storage for device preferences and history
- Popup and sidebar state via boolean flags
- No external state management library used

### Configuration
- TypeScript with strict mode and ES2017 target
- ESLint with Next.js and TypeScript rules
- Path aliases configured: `@/*` maps to project root
- Turbopack enabled for faster development