Monorepo using Tamagui

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.

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 and Validation

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

UI and Styling

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

State Management

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

Internationalization

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

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

Monorepo Structure

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

Cross-Platform Development

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

Stripe Integration

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