Monorepo Development

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.

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

• 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

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

Monorepo Structure

• 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)

Internationalization

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

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

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'

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

Backend Integration

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

Payments

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