A comprehensive food allergy management platform that helps individuals, families, and restaurants safely navigate food allergies through shareable digital cards, detailed allergen profiles, and restaurant safety information.

Dine is a cross-platform mobile application designed to make living with food allergies safer and easier. Whether you're managing your own allergies, caring for children with food restrictions, or running a restaurant that accommodates allergen-sensitive diners, Dine provides the tools you need.

• Shareable Allergy Cards: Create comprehensive digital cards with your allergen information, reactions, and safety protocols
• Emergency Cards: Store critical medical information, emergency contacts, doctors, and preferred hospitals
• EpiPen Tracking: Manage multiple EpiPens with instructions and usage tracking
• Travel Cards: Multi-language allergen translations and essential phrases for traveling abroad
• Public Web Profiles: Generate shareable profile URLs to communicate your allergies with others
• QR Code Sharing: Quick access to your allergy information

• Family Account Management: Parents can create and manage allergy profiles for their children
• Multiple Family Members: Track allergies for all family members in one place
• School & Events Cards: Create specialized cards for schools, camps, and events
• Guardian Controls: Manage your children's allergen information and emergency contacts
• Centralized Management: One account to manage the whole family's allergy needs

• Restaurant Profiles: Create detailed profiles showcasing your allergen accommodation capabilities
• Menu Management: Document allergens in menu items with detailed ingredient information
• Kitchen Protocols: Share safety procedures and cross-contamination prevention measures
• Dietary Options: Highlight gluten-free, vegan, vegetarian, and other dietary accommodations
• Public Web Profiles: Shareable restaurant profiles for allergen-conscious diners to review
• Staff Management: Coordinate allergen information across your team
• Community Engagement: Discussion threads for customer feedback and questions

• React Native: 0.81.5 - Cross-platform mobile framework
• Expo: ~54.0.22 - Development platform and build tools
• TypeScript: ~5.9.2 - Type-safe development
• Expo Router: ~6.0.14 - File-based routing and navigation
• React: 19.1.0 - UI library

• Supabase: ^2.80.0 - Backend-as-a-Service
  • PostgreSQL database with multi-schema architecture
  • Real-time subscriptions
  • Built-in authentication
  • Storage buckets for images and media
  • Server-side RPC functions

• React Context API: Primary application state (18 context providers)
• TanStack React Query: ^5.90.12 - Server state management and caching

• Luxon: ^3.7.2 - Date and time handling
• React Native Gesture Handler: ~2.28.0 - Touch interactions
• React Native Reanimated: ~4.1.1 - Animations
• Expo Image Picker: ^17.0.8 - Photo selection and upload
• AsyncStorage: ^2.2.0 - Local data persistence

• ESLint: ^9.25.0 - Code linting
• Supabase CLI: ^2.65.8 - Database migrations and management

/dineapp
├── /app                      # Expo Router pages (file-based routing)
│   ├── /(auth)              # Authentication and onboarding flows
│   ├── /(tabs)              # Main tabbed interface
│   ├── /emergency           # Emergency card screens
│   ├── /epipen              # EpiPen management screens
│   ├── /travel              # Travel card screens
│   └── /profile             # Profile management
├── /components              # Reusable React components
│   └── /ui                  # 79+ custom UI components
├── /contexts                # React Context providers (18 providers)
├── /lib                     # Library code and utilities
│   ├── /supabase            # Database models and queries (79 models)
│   │   ├── /core            # User profiles and cards
│   │   ├── /restaurant      # Restaurant and menu data
│   │   ├── /allergies       # Allergen and reaction data
│   │   ├── /emergency       # Emergency contact info
│   │   ├── /family          # Family management
│   │   ├── /travel          # Travel cards and phrases
│   │   ├── /web_profiles    # Public shareable profiles
│   │   └── /threads         # Community discussions
│   └── /storage             # File upload handlers
├── /hooks                   # Custom React hooks
├── /constants               # App configuration and data
├── /utils                   # Utility functions
├── /types                   # TypeScript type definitions
└── /supabase                # Backend configuration
    ├── /migrations          # Database migrations
    ├── /functions           # Server functions
    └── /sql                 # RPC definitions

Dine uses a multi-schema PostgreSQL database through Supabase with 10 organized schemas:

• core: User profiles and card management
• restaurant: Restaurant profiles, menus, and allergen data
• allergies: Allergen types, reactions, symptoms, and safety rules
• emergency: Emergency cards, contacts, doctors, and hospitals
• epipen: EpiPen tracking and instructions
• family: Family groups and member relationships
• travel: Travel cards, multi-language phrases, and translations
• web_profiles: Public shareable user and restaurant profiles
• threads: Community discussion posts, comments, and reactions
• swe: School/Work/Events card management

Dine tracks comprehensive allergen information including:

Major Allergens: Dairy, Eggs, Fish, Shellfish, Tree Nuts, Peanuts, Wheat, Soy, Sesame

Common Allergens: Corn, Coconut, Mustard, Gluten, Caffeine, Sulfites, and 15+ more

Each allergen can be tracked with:

• Severity levels (severe, moderate, mild)
• Reaction symptoms
• Safety protocols
• Cross-contamination handling

• Node.js 18+ installed
• npm or yarn package manager
• Expo CLI (installed automatically)
• iOS Simulator (for macOS) or Android Emulator

1. Clone the repository

   git clone <repository-url>
   cd dineapp

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   EXPO_PUBLIC_SUPABASE_URL=your_supabase_project_url
   EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Start the development server

   npx expo start

5. Run the app

   • Press i for iOS simulator
   • Press a for Android emulator
   • Scan QR code with Expo Go app for physical device testing

This project uses Expo Router for navigation. Routes are automatically generated from the file structure in the /app directory.

# Start development server
npx expo start

# Start with cache cleared
npx expo start -c

# Run on specific platform
npx expo run:ios
npx expo run:android

# Link to Supabase project
npx supabase link --project-ref your-project-ref

# Run migrations
npx supabase db push

# Generate TypeScript types
npx supabase gen types typescript --local > types/supabase.ts

TypeScript types for the database are auto-generated from the Supabase schema. Run type generation after any database changes.

Dine supports four account types:

1. Just Me: Individual users managing their own allergies
2. Parent: Family accounts for managing children's allergy profiles
3. Restaurant: Restaurant staff creating allergen-safe menus
4. Store: Vendor accounts for product management (future feature)

• iOS (iPhone and iPad)
• Android
• Web (Progressive Web App)

Dine includes comprehensive end-to-end testing using Detox for both iOS and Android platforms. The test suite covers all major user flows and features.

Test Suites (6 comprehensive test files):

• Authentication (e2e/auth.test.ts): Login, registration, password reset, account types, session persistence
• User Onboarding (e2e/onboarding.test.ts): Multi-step allergy profile setup, symptom selection, severity levels
• Family Accounts (e2e/family.test.ts): Family member management, profile switching, permissions
• Card Management (e2e/cards.test.ts): Allergy cards, emergency cards, EpiPen tracking, travel cards, school/work cards, QR codes
• Restaurant Features (e2e/restaurant.test.ts): Restaurant profiles, menu management, cross-contamination protocols
• Search & Filtering (e2e/search.test.ts): Restaurant search, allergen filtering, dietary options, food search
• Settings & Profile (e2e/settings.test.ts): Profile management, notifications, privacy, feedback

Total Coverage:

• 100+ test cases across all major features
• Visual regression testing with screenshots
• Both iOS and Android platform testing

Prerequisites:

• iOS: Xcode installed (macOS only)
• Android: Android Studio with SDK installed
• Detox CLI: Automatically installed with dependencies

Setup:

# Install dependencies (includes Detox)
npm install

# Build the app for testing (iOS)
npm run build:e2e:ios

# Build the app for testing (Android)
npm run build:e2e:android

Run Tests:

# Run iOS tests
npm run test:e2e:ios

# Run Android tests
npm run test:e2e:android

# Run both platforms
npm run test:e2e

# Run in headless mode (for CI)
npm run test:e2e:headless

Available Test Scripts:

• test:e2e:ios - Run iOS tests with simulator visible
• test:e2e:ios:release - Run iOS tests in release mode
• test:e2e:android - Run Android tests with emulator visible
• test:e2e:android:release - Run Android tests in release mode
• build:e2e:ios - Build iOS app for testing
• build:e2e:android - Build Android app for testing

Tests automatically run on GitHub Actions for:

• All pull requests to main
• Direct pushes to main branch
• Manual workflow dispatch

GitHub Actions Workflow:

• Runs tests on both iOS (macOS runner) and Android platforms
• Uploads test results and screenshots as artifacts
• Posts test results as PR comments
• Fails PR if tests don't pass

View Test Results:

1. Navigate to the "Actions" tab in GitHub
2. Select the workflow run
3. Download test artifacts (screenshots, reports)
4. View test summary in PR comments

Test Helpers (e2e/helpers/):

• matchers.ts - Custom Detox matchers and utility functions
• testData.ts - Test data factories for generating test data
• supabaseHelper.ts - Database setup and cleanup utilities

Configuration:

• .detoxrc.js - Detox configuration for iOS and Android
• e2e/jest.config.js - Jest configuration for test runner
• e2e/tsconfig.json - TypeScript configuration for tests
• e2e/setup.ts - Global test setup and teardown

1. Create a new test file in e2e/ directory with .test.ts extension

2. Import test helpers:

   import { device, element, by, expect as detoxExpect } from 'detox';
   import TestHelpers from './helpers/matchers';
   import TestDataFactory from './helpers/testData';

3. Use helper functions for common operations:

   // Tap elements
   await TestHelpers.tapElement('button-id');
   
   // Type text
   await TestHelpers.typeText('input-id', 'text');
   
   // Verify visibility
   await TestHelpers.expectVisible('element-id');
   
   // Take screenshots
   await TestHelpers.takeScreenshot('screen-name');

4. Run your new tests:

   npm run test:e2e:ios

View test output:

# Run with verbose output
npx detox test --configuration ios.sim.debug --loglevel verbose

Record test videos:

# Enable video recording in Detox
npx detox test --record-videos all

Keep simulator/emulator open:

# Don't cleanup after tests
npx detox test --cleanup=false

Test specific file:

npx detox test e2e/auth.test.ts --configuration ios.sim.debug

• Add testID props to React Native components for reliable element selection
• Keep tests isolated and independent
• Clean up test data after each test run
• Update visual regression snapshots when UI changes intentionally
• Run tests locally before pushing to ensure they pass

• Expo Documentation
• React Native Documentation
• Supabase Documentation
• Expo Router Documentation
• Detox Documentation