monorepo-tamagui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Monorepo using Tamagui

使用Tamagui的Monorepo开发

Expert developer guidelines for building cross-platform applications with TypeScript, React, Next.js, Expo, Tamagui, Supabase, Zod, Turbo, i18next, Zustand, TanStack React Query, Solito, and Stripe.

面向资深开发者的跨平台应用构建指南，涵盖TypeScript、React、Next.js、Expo、Tamagui、Supabase、Zod、Turbo、i18next、Zustand、TanStack React Query、Solito和Stripe。

Code Style and Structure

代码风格与结构

Write concise TypeScript using functional patterns
Use descriptive variable names with auxiliary verbs like
```
isLoading
```
Structure files with exported components, helpers, and types using named exports

使用函数式模式编写简洁的TypeScript代码
使用带有辅助动词的描述性变量名，如
```
isLoading
```
采用命名导出的方式组织文件，包含导出的组件、工具函数和类型

TypeScript and Validation

TypeScript与验证

Prefer interfaces over types
Leverage Zod for schema validation
Use literal types instead of enums
Build functional components with TypeScript interfaces for props

优先使用接口（interfaces）而非类型别名（types）
利用Zod进行 schema 验证
使用字面量类型替代枚举（enums）
结合TypeScript接口为函数式组件定义props

UI and Styling

UI与样式

Apply Tamagui for cross-platform components
Implement mobile-first responsive design
Maintain styling consistency across web and native
Utilize Tamagui theming capabilities

使用Tamagui构建跨平台组件
采用移动端优先的响应式设计
保持Web与原生平台的样式一致性
利用Tamagui的主题定制能力

State Management

状态管理

Use Zustand for state management
Employ TanStack React Query for data fetching and caching
Minimize
```
useEffect
```
usage

使用Zustand进行状态管理
采用TanStack React Query进行数据获取与缓存
尽量减少
```
useEffect
```
的使用

Internationalization

国际化

Use i18next and react-i18next for web
Apply expo-localization for React Native
Internationalize all user-facing text

Web端使用i18next和react-i18next
React Native端使用expo-localization
对所有用户可见文本进行国际化处理

Error Handling

错误处理

Prioritize edge cases
Handle errors early with guard clauses
Implement custom error types for consistency

优先考虑边缘情况
使用守卫语句尽早处理错误
实现自定义错误类型以保持一致性

Performance Optimization

性能优化

Optimize both web and native platforms
Use dynamic imports in Next.js
Implement lazy loading
Optimize images with proper formats

同时优化Web与原生平台性能
在Next.js中使用动态导入
实现懒加载
使用合适的格式优化图片

Monorepo Structure

Monorepo结构

Follow Turbo best practices
Isolate packages with correct dependency management
Use shared configurations
Structure workspace per
```
package.json
```

遵循Turbo最佳实践
通过正确的依赖管理隔离各个包
使用共享配置
按照
```
package.json
```
组织工作区结构

Cross-Platform Development

跨平台开发

Use Solito for navigation
Create
```
.native.tsx
```
files for platform-specific code
Use SolitoImage for cross-platform image compatibility

使用Solito进行导航管理
创建
```
.native.tsx
```
文件编写平台专属代码
使用SolitoImage实现跨平台图片兼容性

Stripe Integration

Stripe集成

Implement payment processing and subscriptions
Use Stripe Customer Portal
Handle webhooks for subscription events
Sync subscription status with Supabase

实现支付处理与订阅功能
使用Stripe客户门户
处理订阅事件的Webhooks
将订阅状态与Supabase同步