Technical Architecture

Tech Stack

Frontend

React Native with Expo

Cross-platform mobile development
Hot reloading for fast development
OTA updates for instant fixes
Native performance

TypeScript

Strict mode enabled
Type-safe development
Better IDE support
Reduced runtime errors

File-Based Routing

expo-router for navigation
Automatic route generation
Type-safe navigation
Deep linking support

State Management

Context API for global state
React hooks for local state
Optimized re-rendering
Predictable state updates

Backend

Supabase

PostgreSQL database
Real-time subscriptions
Authentication service
File storage
Edge functions

Database Features

Row-Level Security (RLS)
Real-time data sync
Automatic API generation
Database migrations

AI & APIs

OpenAI Vision API

GPT-4 Vision for photo analysis
Food recognition and analysis
Workout detection
Nutritional data extraction

Nutritional APIs

USDA FoodData Central
Nutritionix database
Custom nutrition data
Food composition tables

Exercise APIs

Exercise database
Calorie burn calculations
MET (Metabolic Equivalent) values
Workout recommendations

Payments

Stripe Integration

Secure payment processing
Subscription management
Invoice generation
Webhook handling

RevenueCat

Cross-platform subscriptions
Receipt validation
Analytics and insights
A/B testing support

In-App Purchases

iOS StoreKit integration
Android Billing Library
Subscription restoration
Purchase verification

UI/UX

Component Library

Custom design system
Reusable components
Theme-aware styling
Accessibility support

Chart Visualization

react-native-chart-kit
Smooth animations
Touch interactions
Custom styling

Theme System

Dark mode support
Light mode support
System preference detection
Instant theme switching

Responsive Design

Adaptive layouts
Device size handling
Tablet optimization
Orientation support

Architecture Patterns

Service Layer

All business logic is abstracted into service modules:

FoodAnalysisService.ts

AI-powered food recognition
Nutritional data extraction
Portion size estimation
Database food lookup

WorkoutAnalysisService.ts

Exercise recognition from photos
Calorie burn calculation
Workout duration tracking
Exercise database integration

HealthProfileService.ts

User health metrics
BMI calculations
Calorie target computation
Goal tracking logic

SubscriptionService.ts

Payment processing
Subscription state management
Usage tracking
API limit enforcement

UserEntriesService.ts

Food log management
Workout log management
Entry CRUD operations
Data aggregation

supabase.ts

Database operations
Authentication
Real-time subscriptions
File uploads

Context Providers

ThemeProvider

Theme state management
Dark/Light/System modes
Theme persistence
Theme switching logic

OnboardingProvider

Onboarding flow state
Step navigation
Data collection
Validation logic

PaymentsProvider

Subscription state
Payment methods
Purchase handling
Receipt validation

AuthProvider

Authentication state
User session management
Token refresh
Logout handling

Component Structure

Atomic Design Principles

Atoms: Basic UI elements (buttons, inputs)
Molecules: Simple component groups (cards, forms)
Organisms: Complex UI sections (headers, lists)
Templates: Page layouts
Pages: Complete screens

Type-Safe Props

TypeScript interfaces for all props
Prop validation
Default props
Optional vs. required props

Theme-Aware Styling

StyleSheet API
Dynamic color resolution
Responsive sizing
Platform-specific styles

File Structure

app/
├── (auth)/                     # Authentication screens
│   ├── login.tsx
│   └── _layout.tsx
├── (onboarding)/              # Onboarding flow
│   ├── step-1.tsx
│   ├── step-2.tsx
│   └── ...
├── (tabs)/                    # Main app tabs
│   ├── index.tsx              # Home feed
│   ├── analytics.tsx          # Analytics
│   ├── add-post/             # Add post screens
│   │   ├── food.tsx
│   │   └── workout.tsx
│   ├── profile.tsx           # Profile
│   └── _layout.tsx
├── services/                 # Business logic
│   ├── FoodAnalysisService.ts
│   ├── WorkoutAnalysisService.ts
│   ├── HealthProfileService.ts
│   ├── SubscriptionService.ts
│   └── supabase.ts
├── components/               # Reusable components
│   ├── ui/                  # UI components
│   ├── posts/               # Post components
│   └── charts/              # Chart components
├── contexts/                # Context providers
│   ├── ThemeProvider.tsx
│   ├── OnboardingProvider.tsx
│   └── PaymentsProvider.tsx
├── types/                   # TypeScript types
├── constants/               # App constants
└── utils/                   # Utility functions

Data Flow

Authentication Flow

User opens app
Check for existing session
If no session, show login
User authenticates via OAuth
Create/fetch user profile
Redirect to onboarding or main app

Photo Analysis Flow

User takes photo
Upload to Supabase storage
Send to OpenAI Vision API
Parse AI response
Extract nutritional/workout data
Display results to user
Save to database on confirmation

Real-Time Sync Flow

User creates/updates entry
Save to local state immediately
Sync to Supabase in background
Subscribe to real-time changes
Update UI on remote changes
Conflict resolution if needed

Performance Optimizations

Image Handling

Compression before upload
Lazy loading
Image caching
Progressive loading

Data Fetching

Pagination for lists
Query result caching
Optimistic updates
Background sync

Rendering

React.memo for expensive components
useMemo/useCallback hooks
FlatList for long lists
Virtual scrolling

Security Measures

Authentication

Secure token storage
Token refresh mechanism
Session timeout
Multi-device support

Data Protection

Row-Level Security (RLS)
Encrypted data at rest
TLS/SSL in transit
Input validation

API Security

Rate limiting
Request authentication
CORS policies
SQL injection prevention

Testing Strategy

Unit Tests

Service layer functions
Utility functions
Component logic
State management

Integration Tests

API integration
Database operations
Authentication flow
Payment processing

E2E Tests

User workflows
Navigation flows
Form submissions
Critical paths

💳 Subscriptions 🏗️ Architecture Patterns