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:

Uses FileUploader for drag-drop file input
Uses ConfigPanel for tool-specific configuration options
Uses ProgressBar to show processing status
Uses ResultPreview to display processed files
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.

3.4 KiB Raw Blame History