# CODEBUDDY.md This file provides guidance to CodeBuddy when working with code in this repository.

## Commands

| Command | Description |
|---------|-------------|
| `npm run dev` | Start dev server with Turbopack (fast refresh) |
| `npm run build` | Production build |
| `npm run start` | Run production server |
| `npm run lint` | ESLint check |
| `npm run type-check` | TypeScript type checking without emit |
| `npm run format` | Format code with Prettier |

## Architecture

### Tech Stack
- **Framework**: Next.js 15 with App Router, React 19
- **State**: Zustand for client state
- **Styling**: Tailwind CSS with HSL CSS variables (dark mode by default)
- **UI Components**: Custom components built on Radix UI primitives
- **Animations**: Framer Motion
- **Form Validation**: Zod
- **Media Processing**: Sharp (images), FFmpeg (video/audio)

### Directory Structure

```
src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Auth routes group (login, register)
│   ├── (dashboard)/       # Dashboard routes with Sidebar layout
│   │   ├── tools/         # Tool pages (image-compress, video-frames, audio-compress)
│   │   └── layout.tsx     # Dashboard layout with Sidebar
│   ├── api/               # API routes
│   │   ├── upload/        # File upload endpoint
│   │   └── process/       # Processing endpoints per tool type
│   ├── globals.css        # Global styles with CSS variables
│   └── layout.tsx         # Root layout (Header + Footer)
├── components/
│   ├── ui/                # Base UI primitives (button, card, input, etc.)
│   ├── tools/             # Tool-specific components (FileUploader, ConfigPanel, ProgressBar, ResultPreview)
│   └── layout/            # Layout components (Header, Footer, Sidebar)
├── lib/
│   ├── api.ts             # API client functions
│   └── utils.ts           # Utility functions (cn, formatFileSize, etc.)
├── store/
│   ├── authStore.ts       # Auth state
│   └── uploadStore.ts     # File upload and processing state
└── types/
    └── index.ts           # TypeScript types (UploadedFile, ProcessedFile, configs, etc.)
```

### Key Patterns

**Route Groups**: Uses `(auth)` and `(dashboard)` route groups. Dashboard routes share a layout with `Sidebar` component.

**Tool Pages Pattern**: Each tool (image-compress, video-frames, audio-compress) follows the same pattern:
1. Uses `FileUploader` for drag-drop file input
2. Uses `ConfigPanel` for tool-specific configuration options
3. Uses `ProgressBar` to show processing status
4. Uses `ResultPreview` to display processed files
5. State managed via `useUploadStore` Zustand store

**API Routes**: API routes under `app/api/` use Node.js runtime. Each processing endpoint validates input and returns JSON responses. Currently mock implementations - production would use Sharp/FFmpeg and cloud storage.

**State Management**: Zustand stores in `store/` directory. `uploadStore` manages file list, processing status and progress. `authStore` manages user authentication state.

**Styling**: Uses `cn()` utility from `lib/utils.ts` for Tailwind class merging. Theme colors defined as CSS variables in `globals.css`. Component styling uses HSL color functions like `hsl(var(--primary))`.

**Type Definitions**: All shared types in `types/index.ts`. Includes file types, processing configs, API responses, and user types.