🏗️ Project Structure

This page explains in detail the architecture and code organization in ExpoPlate, helping you understand where to find each element and how everything fits together.

📂 Overview

├── app/
│   ├── (auth)/
│   │   ├── resetPassword.tsx
│   │   ├── sign-in.tsx
│   │   ├── sign-up.tsx
│   │   └── welcome.tsx
│   ├── (protected)/
│   │   ├── (tabs)/
│   │   │   ├── _layout.tsx
│   │   │   ├── ai.tsx
│   │   │   ├── index.tsx
│   │   │   ├── notifications.tsx
│   │   │   ├── offline.tsx
│   │   │   ├── payment.tsx
│   │   │   ├── premium.tsx
│   │   │   ├── profile.tsx
│   │   │   ├── settings.tsx
│   │   │   └── tasks.tsx
│   │   ├── _layout.tsx
│   │   ├── privacy-policy.tsx
│   │   └── terms-of-service.tsx
│   ├── onboarding/
│   │   ├── _layout.tsx
│   │   └── index.tsx
│   ├── _layout.tsx
│   ├── +not-found.tsx
│   └── index.tsx
├── assets/
│   ├── fonts/
│   │   ├── InstrumentSerif-Italic.ttf
│   │   └── InstrumentSerif-Regular.ttf
│   ├── icons/
│   │   ├── adaptive_icon.png
│   │   ├── icon_base.png
│   │   ├── icon_dark.png
│   │   └── icon_light.png
│   ├── logo/
│   │   ├── revenuecat.png
│   │   └── stripe.jpeg
│   ├── splashscreen/
│   │   ├── splashscreen_dark.png
│   │   └── splashscreen_light.png
│   └── icon.png
├── components/
│   ├── ai/
│   │   ├── AIThinkingLoader.tsx
│   │   ├── AutoResizingInput.tsx
│   │   ├── ChatHeader.tsx
│   │   ├── index.ts
│   │   ├── MessageActions.tsx
│   │   ├── MessageBubble.tsx
│   │   ├── PromptLabels.tsx
│   │   ├── ThinkingAnimation.tsx
│   │   └── TypewriterText.tsx
│   ├── auth/
│   │   ├── appleProviderButton.tsx
│   │   ├── EmailLoginForm.tsx
│   │   ├── EmailLoginToggle.tsx
│   │   ├── googleProviderButton.tsx
│   │   ├── index.ts
│   │   ├── Separator.tsx
│   │   └── SocialLoginButtons.tsx
│   ├── email/
│   │   └── buttonSendEmail.tsx
│   ├── layout/
│   │   └── LayoutWrapper.tsx
│   ├── notifications/
│   │   ├── DebugInfo.tsx
│   │   ├── DeviceInfoCard.tsx
│   │   ├── index.ts
│   │   ├── NotificationCenter.tsx
│   │   ├── NotificationHeader.tsx
│   │   ├── NotificationSettings.tsx
│   │   ├── PermissionStatusCard.tsx
│   │   ├── push.tsx
│   │   └── TestButtonsSection.tsx
│   ├── onboarding/
│   │   ├── index.ts
│   │   ├── NotificationSettings.tsx
│   │   ├── OnboardingFeatureCard.tsx
│   │   ├── OnboardingNavigationButtons.tsx
│   │   ├── OnboardingProgressBar.tsx
│   │   ├── OnboardingStep1.tsx
│   │   ├── OnboardingStep2.tsx
│   │   └── OnboardingStep3.tsx
│   ├── payment/
│   │   ├── index.ts
│   │   ├── PaymentButton.tsx
│   │   ├── PaymentSheet.tsx
│   │   ├── paywall.tsx
│   │   └── stripeButtonPay.tsx
│   ├── premium/
│   │   ├── index.ts
│   │   ├── PaywallScreen.tsx
│   │   ├── PremiumGate.tsx
│   │   ├── PremiumStatus.tsx
│   │   └── RestorePurchaseButton.tsx
│   ├── profile/
│   │   ├── EditFieldModal.tsx
│   │   ├── index.ts
│   │   ├── ProfileActionsSection.tsx
│   │   ├── ProfileEditSection.tsx
│   │   ├── ProfileHeaderSection.tsx
│   │   ├── ProfileInfoSection.tsx
│   │   └── ProfileStatusSection.tsx
│   ├── settings/
│   │   ├── AssistanceSection.tsx
│   │   ├── index.ts
│   │   ├── NotificationsSection.tsx
│   │   ├── PreferencesSection.tsx
│   │   ├── ProfileSection.tsx
│   │   ├── SettingsRow.tsx
│   │   ├── SettingsSection.tsx
│   │   └── SubscriptionSection.tsx
│   ├── tasks/
│   │   ├── CreateTaskForm.tsx
│   │   ├── EditTaskModal.tsx
│   │   ├── index.ts
│   │   ├── StatusBadges.tsx
│   │   ├── TaskCard.tsx
│   │   └── TaskList.tsx
│   └── ui/
│       ├── avatar.tsx
│       ├── badge.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── checkbox.tsx
│       ├── dialog.tsx
│       ├── dynamic-header.tsx
│       ├── header-menu.tsx
│       ├── header-title.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── ProgressBar.tsx
│       ├── select.tsx
│       ├── sidebar.tsx
│       ├── table.tsx
│       ├── tabs.tsx
│       ├── text.tsx
│       └── toggle.tsx
├── config/
│   ├── i18n.ts
│   ├── linking.ts
│   └── supabase.ts
├── constants/
│   ├── colors.ts
│   ├── emailTemplates.ts
│   ├── navigation.ts
│   ├── notifications.ts
│   ├── onboarding.ts
│   ├── promptData.ts
│   └── quickActions.ts
├── context/
│   ├── AuthContext.tsx
│   ├── RevenuCatContext.tsx
│   ├── SidebarContext.tsx
│   ├── StripeContext.tsx
│   └── ThemeContext.tsx
├── fetch/
│   ├── profile.ts
│   └── tasks.ts
├── hooks/
│   ├── useAIChat.ts
│   ├── useCache.ts
│   ├── useColorScheme.ts
│   ├── useIconColors.ts
│   ├── useImageUpload.ts
│   ├── useNetworkStatus.ts
│   ├── useNotifications.ts
│   ├── useOnboarding.ts
│   ├── usePremiumStatus.ts
│   ├── useProfile.ts
│   ├── useSounds.ts
│   ├── useTasks.ts
│   ├── useTheme.tsx
│   └── useTranslation.ts
├── icons/
│   └── index.tsx
├── lib/
│   ├── storage/
│   │   ├── index.ts
│   │   ├── supabase.ts
│   │   └── zustand.ts
│
├── queryClient.ts
└── utils.ts
├── locales/
│   ├── en.json
│   ├── es.json
│   ├── fr.json
│   └── pt.json
├── stores/
│   ├── offlineStore.ts
│   ├── onboardingStore.ts
│   ├── profileStore.ts
│   └── README.md
├── supabase/
│   ├── functions/
│   │   ├── ai-completion/
│   │   │   └── index.ts
│   │   ├── create-payment-intent/
│   │   │   └── index.ts
│   │   ├── create-stripe-checkout/
│   │   │   └── index.ts
│   │   ├── resend-email/
│   │   │   └── index.ts
│   │   ├── send-notifications/
│   │   │   └── index.ts
│   │   └── stripe-webhooks/
│   │       └── index.ts
│
├── migrations/
│   └── 20250202000000_init_supabase.sql
│
├── templates/
│   └── invite.html
│
└── config.toml

📁 Main Folders Detail

📱 `/app` - Expo Router Structure

The main application structure using Expo Router file-based routing.

app/
├── (auth)/                   # Authentication group
│   ├── resetPassword.tsx    # Password reset screen
│   ├── sign-in.tsx          # Sign in screen  
│   ├── sign-up.tsx          # Sign up screen
│   └── welcome.tsx          # Welcome screen
│
├── (protected)/             # Protected routes group
│   ├── (tabs)/              # Tab navigation
│   │   ├── _layout.tsx      # Tab layout configuration
│   │   ├── ai.tsx           # AI chat screen
│   │   ├── index.tsx        # Home screen
│   │   ├── notifications.tsx # Notifications screen
│   │   ├── offline.tsx      # Offline mode screen
│   │   ├── payment.tsx      # Payment screen
│   │   ├── premium.tsx      # Premium features screen
│   │   ├── profile.tsx      # Profile screen
│   │   ├── settings.tsx     # Settings screen
│   │   └── tasks.tsx        # Tasks screen
│   ├── _layout.tsx          # Protected layout
│   ├── privacy-policy.tsx   # Privacy policy
│   └── terms-of-service.tsx # Terms of service
│
├── onboarding/              # Onboarding flow
│   ├── _layout.tsx          # Onboarding layout
│   └── index.tsx            # Onboarding screens
│
├── _layout.tsx              # Root layout
├── +not-found.tsx           # 404 page
└── index.tsx                # App entry point

🎨 `/assets` - Static Resources

Contains all static resources for your application.

assets/
├── fonts/                   # Custom fonts
│   ├── InstrumentSerif-Italic.ttf
│   └── InstrumentSerif-Regular.ttf
│
├── icons/                   # App icons
│   ├── adaptive_icon.png    # Android adaptive icon
│   ├── icon_base.png        # Base icon
│   ├── icon_dark.png        # Dark theme icon
│   └── icon_light.png       # Light theme icon
│
├── logo/                    # Service logos
│   ├── revenuecat.png       # RevenueCat logo
│   └── stripe.jpeg          # Stripe logo
│
├── splashscreen/            # Splash screens
│   ├── splashscreen_dark.png
│   └── splashscreen_light.png
│
└── icon.png                 # Main app icon

🧩 `/components` - Reusable Components

Reusable components organized by categories and features.

components/
├── ai/                       # AI-related components
│   ├── AIThinkingLoader.tsx  # AI processing indicator
│   ├── AutoResizingInput.tsx # Dynamic height input
│   ├── ChatHeader.tsx        # Chat interface header
│   ├── MessageActions.tsx    # Message interaction buttons
│   ├── MessageBubble.tsx     # Chat message display
│   ├── PromptLabels.tsx      # Predefined prompts
│   ├── ThinkingAnimation.tsx # AI thinking animation
│   ├── TypewriterText.tsx    # Animated text reveal
│   └── index.ts              # Exports
│
├── auth/                     # Authentication components
│   ├── appleProviderButton.tsx    # Apple Sign In
│   ├── EmailLoginForm.tsx         # Email login form
│   ├── EmailLoginToggle.tsx       # Login/signup toggle
│   ├── googleProviderButton.tsx   # Google Sign In
│   ├── Separator.tsx              # Visual separator
│   ├── SocialLoginButtons.tsx     # Social login buttons
│   └── index.ts                   # Exports
│
├── email/                    # Email components
│   └── buttonSendEmail.tsx   # Email sending button
│
├── layout/                   # Layout components
│   └── LayoutWrapper.tsx     # Base layout wrapper
│
├── notifications/            # Notification components
│   ├── DebugInfo.tsx             # Debug information display
│   ├── DeviceInfoCard.tsx        # Device information card
│   ├── NotificationCenter.tsx    # Notification center
│   ├── NotificationHeader.tsx    # Notifications header
│   ├── NotificationSettings.tsx  # Settings interface
│   ├── PermissionStatusCard.tsx  # Permission status display
│   ├── push.tsx                  # Push notifications
│   ├── TestButtonsSection.tsx    # Testing utilities
│   └── index.ts                  # Exports
│
├── onboarding/               # Onboarding components
│   ├── NotificationSettings.tsx      # Permission requests
│   ├── OnboardingFeatureCard.tsx     # Feature showcase
│   ├── OnboardingNavigationButtons.tsx # Navigation
│   ├── OnboardingProgressBar.tsx     # Progress indicator
│   ├── OnboardingStep1.tsx           # Step 1 component
│   ├── OnboardingStep2.tsx           # Step 2 component
│   ├── OnboardingStep3.tsx           # Step 3 component
│   └── index.ts                      # Exports
│
├── payment/                  # Payment components
│   ├── PaymentButton.tsx     # Generic payment button
│   ├── PaymentSheet.tsx      # Payment form interface
│   ├── paywall.tsx           # Simple paywall
│   ├── stripeButtonPay.tsx   # Stripe payment button
│   └── index.ts              # Exports
│
├── premium/                  # Premium features
│   ├── PaywallScreen.tsx     # Complete paywall screen
│   ├── PremiumGate.tsx       # Content protection
│   ├── PremiumStatus.tsx     # Subscription status
│   ├── RestorePurchaseButton.tsx # Purchase restoration
│   └── index.ts              # Exports
│
├── profile/                  # Profile components
│   ├── EditFieldModal.tsx         # Field editing modal
│   ├── ProfileActionsSection.tsx  # Profile actions
│   ├── ProfileEditSection.tsx     # Edit interface
│   ├── ProfileHeaderSection.tsx   # Header with avatar
│   ├── ProfileInfoSection.tsx     # Information display
│   ├── ProfileStatusSection.tsx   # Account status
│   └── index.ts                   # Exports
│
├── settings/                 # Settings components
│   ├── AssistanceSection.tsx      # Help and support
│   ├── NotificationsSection.tsx   # Notification settings
│   ├── PreferencesSection.tsx     # App preferences
│   ├── ProfileSection.tsx         # Profile settings
│   ├── SettingsRow.tsx           # Individual setting item
│   ├── SettingsSection.tsx       # Settings container
│   ├── SubscriptionSection.tsx   # Subscription management
│   └── index.ts                  # Exports
│
├── tasks/                    # Task management
│   ├── CreateTaskForm.tsx    # Task creation form
│   ├── EditTaskModal.tsx     # Task editing modal
│   ├── StatusBadges.tsx      # Task status indicators
│   ├── TaskCard.tsx          # Individual task display
│   ├── TaskList.tsx          # Task collection
│   └── index.ts              # Exports
│
└── ui/                       # Base UI components
    ├── avatar.tsx            # User avatar component
    ├── badge.tsx             # Status badges
    ├── button.tsx            # Button component
    ├── card.tsx              # Card container
    ├── checkbox.tsx          # Checkbox input
    ├── dialog.tsx            # Modal dialogs
    ├── dynamic-header.tsx    # Context-aware header
    ├── header-menu.tsx       # Header menu
    ├── header-title.tsx      # Page title
    ├── input.tsx             # Text input
    ├── label.tsx             # Form labels
    ├── ProgressBar.tsx       # Progress indicator
    ├── select.tsx            # Dropdown selection
    ├── sidebar.tsx           # Navigation drawer
    ├── table.tsx             # Data table
    ├── tabs.tsx              # Tab navigation
    ├── text.tsx              # Typography
    └── toggle.tsx            # Switch component

⚙️ `/config` - Configuration Files

Application configuration and setup files.

config/
├── i18n.ts                   # Internationalization setup
├── linking.ts                # Deep linking configuration
└── supabase.ts               # Supabase client configuration

📊 `/constants` - App Constants

Global constants and configuration values.

constants/
├── colors.ts                 # Color palette and theme colors
├── emailTemplates.ts         # Email template constants
├── navigation.ts             # Navigation constants
├── notifications.ts          # Notification constants
├── onboarding.ts             # Onboarding constants
├── promptData.ts             # AI prompt templates and data
└── quickActions.ts           # Quick action constants

🔗 `/context` - React Context Providers

Context providers for global state management.

context/
├── AuthContext.tsx           # Authentication state
├── RevenuCatContext.tsx      # Subscription management
├── SidebarContext.tsx        # Sidebar state
├── StripeContext.tsx         # Payment context
└── ThemeContext.tsx          # Theme and dark mode

📡 `/fetch` - API Layer

API service functions and data fetching logic.

fetch/
├── profile.ts                # Profile API operations
└── tasks.ts                  # Task management API

🎣 `/hooks` - Custom React Hooks

Custom hooks for reusable logic and state management.

hooks/
├── useAIChat.ts              # AI chat functionality
├── useCache.ts               # Caching utilities
├── useColorScheme.ts         # System color scheme
├── useIconColors.ts          # Dynamic icon colors
├── useImageUpload.ts         # Image upload functionality
├── useNetworkStatus.ts       # Network connectivity
├── useNotifications.ts       # Push notifications
├── useOnboarding.ts          # Onboarding flow
├── usePremiumStatus.ts       # Premium subscription status
├── useProfile.ts             # Profile management
├── useSounds.ts              # Sound effects
├── useTasks.ts               # Task management
├── useTheme.tsx              # Theme management
└── useTranslation.ts         # Internationalization

🎨 `/icons` - Icon Components

Centralized icon components and utilities.

icons/
└── index.tsx                 # Icon library with all app icons

🔧 `/lib` - Utility Libraries

Core utility functions and libraries.

lib/
├── storage/                 # Storage utilities
│   ├── index.ts             # Main storage interface
│   ├── supabase.ts          # Supabase storage utilities
│   └── zustand.ts           # Zustand storage configuration
│
├── queryClient.ts
└── utils.ts

🌍 `/locales` - Internationalization

Translation files for multi-language support.

locales/
├── en.json
├── es.json
├── fr.json
└── pt.json

📦 `/stores` - Zustand State Management

Global state stores using Zustand.

stores/
├── offlineStore.ts          # Offline data management
├── onboardingStore.ts       # Onboarding flow state
├── profileStore.ts          # User profile state
└── README.md                # Store documentation

🗄️ `/supabase` - Backend Configuration

Supabase backend configuration, functions, and database migrations.

supabase/
├── functions/               # Edge functions
│   ├── ai-completion/       # AI completion function
│   │   └── index.ts
│   ├── create-payment-intent/ # Payment intent creation
│   │   └── index.ts
│   ├── create-stripe-checkout/
│   │   └── index.ts
│   ├── resend-email/
│   │   └── index.ts
│   ├── send-notifications/
│   │   └── index.ts
│   └── stripe-webhooks/
│       └── index.ts
│
├── migrations/
│   └── 20250202000000_init_supabase.sql
│
├── templates/
│   └── invite.html
│
└── config.toml

📝 `/types` - TypeScript Definitions

Comprehensive TypeScript type definitions for the entire application.

types/
├── ai.d.ts                  # AI chat types
├── auth.d.ts                # Authentication types
├── hooks.d.ts               # Hook types
├── index.ts                 # Type exports
├── navigation.d.ts          # Navigation types
├── onboarding.d.ts          # Onboarding types
├── payment.d.ts             # Payment and subscription types
├── profile.d.ts             # User profile types
├── revenuecat.d.ts          # RevenueCat types
├── settings.d.ts            # Settings types
├── stores.d.ts              # Store types
├── tasks.d.ts               # Task management types
├── theme.d.ts               # Theme types
└── ui.d.ts                  # UI component types

🛠️ `/utils` - Utility Functions

Helper functions and utilities used throughout the application.

utils/
├── clearSession.ts          # Session cleanup utilities
└── functionNavigations.ts   # Navigation helper functions

🏛️ Architecture Principles

ExpoPlate follows clean architecture principles with clear separation of concerns:

📱 Presentation Layer

Components: Reusable UI components with clear props interfaces
Screens: Route components that compose multiple components
Hooks: Custom hooks for component logic and state management

💼 Business Logic Layer

Stores: Global state management with Zustand
Context: React context for specific domains (auth, theme, etc.)
Custom Hooks: Encapsulated business logic and API interactions

🔌 Data Layer

Fetch: API service functions for data operations
Supabase: Backend-as-a-Service configuration and functions
Storage: Local storage utilities (MMKV, Secure Store)

🎨 Presentation Patterns

// Component structure example
const ProfileScreen = () => {
  // 1. Hooks and state
  const { profile, loading, updateProfile } = useProfile();
  const navigation = useNavigation();
  
  // 2. Event handlers
  const handleSave = useCallback(async (data) => {
    await updateProfile(data);
    navigation.goBack();
  }, [updateProfile, navigation]);
  
  // 3. Render logic
  if (loading) return <LoadingSpinner />;
  
  return (
    <ProfileEditForm 
      profile={profile} 
      onSave={handleSave} 
    />
  );
};

🔄 Data Flow

┌─────────────────┐    ┌──────────────┐    ┌─────────────┐    ┌─────────────┐
│ Screen/Component│───▶│ Custom Hook  │───▶│ API Service │───▶│ Supabase    │
└─────────────────┘    └──────────────┘    └─────────────┘    └─────────────┘
          ▲                     │                                      │
          │                     ▼                                      │
          │              ┌─────────────┐                               │
          └──────────────│ Zustand Store│◀──────────────────────────────┘
                         └─────────────┘

📋 Naming Conventions

Files and Folders

Components: PascalCase (Button.tsx, LoginForm.tsx)
Hooks: camelCase with use prefix (useAuth.ts, useApi.ts)
Services: camelCase (profileService.ts, taskService.ts)
Utilities: camelCase (formatDate.ts, validation.ts)
Folders: camelCase (components, hooks, stores)

Variables and Functions

Variables: camelCase (isLoading, userProfile)
Constants: SCREAMING_SNAKE_CASE (API_BASE_URL, MAX_RETRY_ATTEMPTS)
Functions: camelCase (handleLogin, formatCurrency)
Components: PascalCase (LoginScreen, CustomButton)

TypeScript Types

Interfaces: PascalCase (User, ApiResponse)
Types: PascalCase (TaskStatus, NavigationRoute)
Enums: PascalCase (AuthStatus, PaymentStatus)

🎯 Best Practices

Import Organization

// 1. External libraries
import React from 'react';
import { View, Text } from 'react-native';
 
// 2. Internal project imports
import { Button } from '../../components/ui';
import { useAuth } from '../../hooks/useAuth';
import { colors } from '../../constants/colors';
 
// 3. Type imports
import type { LoginScreenProps } from './types';

Centralized Exports

// components/ui/index.ts
export { Button } from './button';
export { Input } from './input';
export { Card } from './card';
export { Dialog } from './dialog';
 
// Usage
import { Button, Input, Card } from '../components/ui';

Component Structure

// Standard component structure
const TaskCard: React.FC<TaskCardProps> = ({ 
  task, 
  onToggleComplete, 
  onEdit, 
  onDelete 
}) => {
  // 1. Hooks and state
  const [isEditing, setIsEditing] = useState(false);
  const { user } = useAuth();
  
  // 2. Event handlers
  const handleEdit = useCallback(() => {
    setIsEditing(true);
  }, []);
  
  // 3. Effects
  useEffect(() => {
    // Component effects
  }, []);
  
  // 4. Render logic
  return (
    <Card className="p-4 mb-2">
      {/* Component JSX */}
    </Card>
  );
};

🚀 Next Steps

Now that you understand the structure:

🔐 Authentication - User management and security
🎨 Design System - Colors and theming
🎯 Icons System - Icon color management
📚 Basic Example - Getting started examples

💡 Pro Tip

This structure is designed to be scalable and maintainable. Feel free to adapt it according to your specific project needs while maintaining the core architectural principles!

📂 Overview

📁 Main Folders Detail

📱 /app - Expo Router Structure

🎨 /assets - Static Resources

🧩 /components - Reusable Components

⚙️ /config - Configuration Files

📊 /constants - App Constants

🔗 /context - React Context Providers

📡 /fetch - API Layer

🎣 /hooks - Custom React Hooks

🎨 /icons - Icon Components

🔧 /lib - Utility Libraries

🌍 /locales - Internationalization

📦 /stores - Zustand State Management

🗄️ /supabase - Backend Configuration

📝 /types - TypeScript Definitions

🛠️ /utils - Utility Functions