## Technical Architecture

### Frontend Stack
- **Framework**: Nuxt 3 with Vue.js
- **Styling**: Tailwind CSS with custom components
- **UI Components**: Shadcn/ui components with Reka UI
- **Icons**: Lucide Vue Next
- **Charts**: Chart.js with Vue Chart.js wrapper

### Backend & Database
- **Runtime**: Nitro server with H3 handlers
- **Database**: MySQL with Drizzle ORM
- **Authentication**: Better Auth with session management
- **File Storage**: Local storage with configurable options

### AI & Machine Learning
- **AI SDK**: Vercel AI SDK with OpenAI integration
- **Chat Interface**: Real-time AI chat with streaming responses
- **Image Generation**: AI-powered image generation capabilities
- **Token Management**: Tiktoken for token counting and management

### Payment & Business
- **Payment Processing**: Stripe integration with webhooks
- **Subscription Management**: Automated billing and subscription handling
- **Affiliate System**: Built-in affiliate tracking and commission management
- **Analytics**: Plausible Analytics with privacy-focused tracking

### Development Tools
- **TypeScript**: Full TypeScript support with strict type checking
- **ESLint**: Code linting with Nuxt ESLint configuration
- **Internationalization**: Vue I18n with multiple language support
- **PWA**: Progressive Web App capabilities with Vite PWA
- **SEO**: Automatic sitemap generation and meta tag management

## API Endpoints

### Authentication
- `POST /api/auth/login` - User login
- `POST /api/auth/register` - User registration
- `POST /api/auth/logout` - User logout
- `GET /api/auth/session` - Get current session

### AI Features
- `POST /api/ai/chat` - AI chat completion
- `POST /api/ai/image` - AI image generation
- `GET /api/ai/models` - Available AI models

### Payments
- `POST /api/payments/create-session` - Create Stripe checkout session
- `POST /api/payments/webhook` - Stripe webhook handler
- `GET /api/payments/subscription` - Get subscription status

### User Management
- `GET /api/user/profile` - Get user profile
- `PUT /api/user/profile` - Update user profile
- `GET /api/user/usage` - Get usage statistics

## Configuration

### Environment Variables
- `NUXT_PUBLIC_BASE_URL` - Application base URL
- `OPENAI_FORMAT_API_KEY` - OpenAI API key
- `OPENAI_FORMAT_API_URL` - OpenAI API URL
- `NUXT_STRIPE_SECRET_KEY` - Stripe secret key
- `NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` - Stripe publishable key
- `IPINFO_TOKEN` - IP geolocation service token
- `NUXT_PUBLIC_PLAUSIBLE_DOMAIN` - Plausible analytics domain

### Database Configuration
The application uses Drizzle ORM with MySQL. Database configuration is located in `config/drizzle.config.ts`.

### Internationalization
Supports multiple languages (English, Chinese, Japanese) with Vue I18n. Configuration is in `i18n/config.ts`.

## Deployment

### Build Commands
- `npm run build` - Production build
- `npm run build:dev` - Development build
- `npm run build:prod` - Production build with production environment
- `npm run generate` - Static site generation

### Server Requirements
- Node.js 18+ 
- MySQL database
- SSL certificate for production
- Environment variables configured

### Performance Features
- Server-side rendering (SSR)
- Static site generation (SSG) support
- Image optimization
- Code splitting and lazy loading
- PWA capabilities with offline support