71 lines
3.4 KiB
Markdown
71 lines
3.4 KiB
Markdown
# 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.
|