js-development

JavaScript Development

PhotoClove uses pnpm as its package manager. Never use npm or yarn.

Package Manager: pnpm

CRITICAL: This project uses pnpm, not npm or yarn.

Common Commands

Build & Development

# Development server (frontend only)
pnpm dev

# Build for production
pnpm build

# Run Tauri development (full app)
pnpm tauri dev

# Build Tauri app
pnpm tauri build

Vite Commands

# Build with vite directly
pnpm vite build

# Development build (for debugging)
pnpm vite build --mode development

# Preview production build
pnpm vite preview

Project Structure

/
├── src/                    # Frontend (React/Vite)
│   ├── App/               # Main application components
│   ├── components/        # Reusable components
│   ├── context/           # React contexts
│   ├── domain/            # Domain models
│   ├── hooks/             # Custom hooks
│   ├── services/          # Service layer
│   └── styles/            # CSS files
├── src-tauri/             # Backend (Rust/Tauri)
├── public/                # Static assets
├── package.json           # pnpm package config
└── pnpm-lock.yaml         # pnpm lockfile

Frontend Tech Stack

• Framework: React 18
• Build Tool: Vite 4.x
• Desktop: Tauri 2.x
• State: React Context + custom hooks
• Styling: CSS Modules + CSS Variables

Common Development Tasks

Adding a New Component

1. Create component file: src/components/ComponentName.jsx
2. Create CSS Module: src/components/ComponentName.module.css
3. Use CSS variables from src/styles/base.css
4. Import and use in parent component

Running Tests

# Run tests (if configured)
pnpm test

# Run specific test file
pnpm test src/test/ViewMode.test.js

Type Checking (if using TypeScript)

pnpm tsc --noEmit

Troubleshooting

"Module not found" errors

# Clear node_modules and reinstall
rm -rf node_modules
pnpm install

Lock file conflicts

# Regenerate lock file
rm pnpm-lock.yaml
pnpm install

Cache issues

# Clear pnpm cache
pnpm store prune

Important Reminders

1. Always use pnpm - Never use npm or yarn commands
2. Check package.json - Before adding new dependencies
3. Use CSS variables - Never hardcode colors/sizes
4. Use CSS Modules - For component-specific styles
5. Follow logging standards - Use logger service, not console.log