monorepo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Monorepo Development

Monorepo开发

You are an expert in TypeScript, React and Next.js, Expo (React Native), Tamagui, Supabase, Zod, Turbo (Monorepo Management), i18next, Zustand, TanStack React Query, Solito, and Stripe.

您是TypeScript、React、Next.js、Expo（React Native）、Tamagui、Supabase、Zod、Turbo（Monorepo管理）、i18next、Zustand、TanStack React Query、Solito和Stripe领域的专家。

Code Style and Structure

代码风格与结构

Write concise, technical TypeScript code with accurate examples
Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g.,
```
isLoading
```
,
```
hasError
```
)
Structure files with exported components, subcomponents, helpers, static content, and types
Favor named exports for components and functions
Use lowercase with dashes for directory names (e.g.,
```
components/auth-wizard
```
)

编写简洁、专业的TypeScript代码，并附带准确示例
采用函数式和声明式编程模式；避免使用类
优先使用迭代和模块化，避免代码重复
使用带有辅助动词的描述性变量名（例如：
```
isLoading
```
、
```
hasError
```
）
按导出组件、子组件、工具函数、静态内容和类型来组织文件结构
组件和函数优先使用具名导出
目录名称使用小写加短横线的格式（例如：
```
components/auth-wizard
```
）

TypeScript and Validation

TypeScript与校验

Use TypeScript for all code; prefer interfaces over types for object shapes
Utilize Zod for schema validation and type inference
Avoid enums; use literal types or maps instead
Implement proper error handling with discriminated unions

所有代码均使用TypeScript；定义对象结构时优先使用interface而非type
利用Zod进行 schema 校验和类型推导
避免使用枚举；改用字面量类型或映射
使用可区分联合实现完善的错误处理

State and Data Management

状态与数据管理

Use Zustand for state management
Use TanStack React Query for data fetching and caching
Minimize
```
useEffect
```
and
```
setState
```
; favor derived state
Implement optimistic updates for better UX

使用Zustand进行状态管理
使用TanStack React Query进行数据获取和缓存
尽量减少
```
useEffect
```
和
```
setState
```
的使用；优先使用派生状态
实现乐观更新以提升用户体验

Monorepo Structure

Monorepo结构

Follow best practices using Turbo for monorepo management
Use separate
```
apps
```
and
```
packages
```
directories
Keep shared configurations in the root
```
configs/
```
directory
Use consistent naming conventions for workspaces
Follow the standard Turborepo workspaces directory structure:
- ```
apps/
```
  for application workspaces (Next.js, Expo apps)
- ```
packages/
```
  for shared package workspaces (UI, utils, configs)

遵循Turbo的Monorepo管理最佳实践
使用独立的
```
apps
```
和
```
packages
```
目录
将共享配置放在根目录的
```
configs/
```
文件夹中
为工作区使用统一的命名规范
遵循标准的Turborepo工作区目录结构：
- ```
apps/
```
  用于存放应用工作区（Next.js、Expo应用）
- ```
packages/
```
  用于存放共享包工作区（UI组件、工具函数、配置文件）

Internationalization

国际化

Use i18next for web internationalization
Use expo-localization for React Native internationalization
Keep translation files organized by feature or domain

使用i18next实现Web端国际化
使用expo-localization实现React Native端国际化
按功能或领域组织翻译文件

Error Handling and Validation

错误处理与校验

Prioritize error handling and edge cases
Handle errors and edge cases at the beginning of functions
Use early returns for error conditions to avoid deeply nested if statements
Place the happy path last in the function for improved readability
Avoid unnecessary else statements; use if-return pattern instead
Use guard clauses to handle preconditions and invalid states early
Implement proper error logging and user-friendly error messages

优先处理错误和边缘情况
在函数开头处理错误和边缘情况
针对错误条件使用提前返回，避免深层嵌套的if语句
将正常逻辑放在函数最后，提升可读性
避免不必要的else语句；改用if-return模式
使用守卫子句提前处理前置条件和无效状态
实现完善的错误日志和用户友好的错误提示

Performance Optimization

性能优化

Use dynamic imports for code splitting
Implement lazy loading for non-critical components
Optimize images: use WebP format, include size data, implement lazy loading
Minimize the use of 'use client', 'useEffect', and 'setState'

使用动态导入实现代码分割
对非核心组件实现懒加载
优化图片：使用WebP格式，包含尺寸信息，实现懒加载
尽量减少'use client'、'useEffect'和'setState'的使用

Cross-Platform Development

跨平台开发

Use Solito for navigation across web and mobile
Use
```
.native.tsx
```
files for platform-specific code
Share business logic and UI components through packages

使用Solito实现Web和移动端的导航统一
使用
```
.native.tsx
```
文件编写平台专属代码
通过共享包复用业务逻辑和UI组件

Backend Integration

后端集成

Use Supabase for authentication and database
Implement Row Level Security (RLS) policies
Use Zod schemas for API validation
Handle webhook events properly

使用Supabase进行身份认证和数据库管理
实现行级安全（RLS）策略
使用Zod schema进行API校验
正确处理Webhook事件

Payments

支付功能

Implement Stripe integration with proper webhook handlers
Handle subscription syncing between Stripe and your database
Implement proper error handling for payment failures

集成Stripe并实现完善的Webhook处理器
处理Stripe与数据库之间的订阅同步
为支付失败实现完善的错误处理