# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/claude-code) when working with this codebase.

## Project Overview

LINE Order App - A mobile-first web application for restaurant ordering, built with Vue 3 + TypeScript + LIFF (LINE Front-end Framework).

## Tech Stack

- **Framework**: Vue 3 (Composition API) + TypeScript
- **Build Tool**: Vite 5
- **State Management**: Pinia 2
- **Router**: Vue Router 4
- **UI Components**: Vant 4
- **HTTP Client**: Axios
- **WebSocket**: Socket.IO Client
- **i18n**: vue-i18n 9 (ja, en, zh-Hans, zh-Hant)
- **LINE SDK**: @line/liff

## Common Commands

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Architecture

The app supports four business modes:

1. **Customer Mode** - C-end ordering interface (LINE/mobile browser)
2. **POS Mode** - Staff tablet interface for table/order management
3. **Owner Mode** - Mobile management dashboard for shop owners
4. **Platform Mode** - Aggregated homepage with shop listings and LBS

## Key Directories

- `src/api/` - API interface definitions
- `src/components/` - Reusable Vue components
- `src/composables/` - Vue composition functions (hooks)
- `src/config/` - Global configuration
- `src/locale/` - i18n language packs (ja, en, zh-Hans, zh-Hant)
- `src/router/` - Route definitions
- `src/store/` - Pinia state management
- `src/utils/` - Utility functions
- `src/views/` - Page components organized by feature

## Internationalization (i18n)

All user-facing text must use i18n. Language files are in `src/locale/`:
- `ja.json` - Japanese (default)
- `en.json` - English
- `zh-Hans.json` - Simplified Chinese
- `zh-Hant.json` - Traditional Chinese

When adding new text:
1. Add the key-value pair to all four language files
2. Use `$t('key')` in templates or `t('key')` in setup scripts

## Coding Conventions

- Use Composition API with `<script setup lang="ts">`
- Use Vant 4 components for UI (auto-imported)
- Follow existing file naming: kebab-case for files, PascalCase for components
- Keep components focused and reusable
- Use TypeScript for type safety

## Environment Variables

Located in `.env.development` and `.env.production`:
- `VITE_API_URL` - Backend API URL
- `VITE_WS_URL` - WebSocket URL
- `VITE_LIFF_ID` - LINE LIFF ID
- `VITE_TENANT_ID` - Tenant ID