Development Setup

Prerequisites

Before you begin, ensure you have the following installed:

Required Software

Node.js & npm:

Node.js 18 or higher
npm 9 or higher

Check versions:

node --version
npm --version

Expo CLI:

npm install -g expo-cli

Git:

git --version

Platform-Specific Requirements

For iOS Development (Mac only):

macOS 12.0 or higher
Xcode 14 or higher
iOS Simulator
CocoaPods

Install Xcode from Mac App Store, then:

sudo gem install cocoapods

For Android Development:

Android Studio
Android SDK
Android Emulator or physical device
Java Development Kit (JDK) 11 or higher

Installation

1. Clone the Repository

git clone <repository_url>
cd caloriebeat-app

2. Install Dependencies

npm install

This installs all required packages including:

React Native & Expo
Supabase client
OpenAI SDK
Stripe SDK
RevenueCat
UI libraries

3. Environment Configuration

Create a .env file in the root directory:

# Supabase Configuration
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# OpenAI Configuration
OPENAI_API_KEY=sk-your_openai_api_key

# Stripe Configuration
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key

# RevenueCat Configuration
REVENUECAT_API_KEY_IOS=your_revenuecat_ios_key
REVENUECAT_API_KEY_ANDROID=your_revenuecat_android_key

# Environment
EXPO_PUBLIC_ENV=development

Getting API Keys:

Supabase:

Create project at supabase.com
Project Settings > API
Copy URL and anon key

OpenAI:

Sign up at platform.openai.com
API Keys > Create new secret key
Copy key (shown only once!)

Stripe:

Sign up at stripe.com
Developers > API keys
Copy publishable and secret keys

RevenueCat:

Sign up at revenuecat.com
Create project
API keys > Copy keys

4. Database Setup

Run Supabase migrations:

# Install Supabase CLI
npm install -g supabase
 
# Link to your project
supabase link --project-ref your-project-ref
 
# Run migrations
supabase db push

Or manually via Supabase Dashboard:

SQL Editor
Copy contents of supabase/migrations/*.sql
Run each migration

5. Configure OAuth (Optional)

Google Sign-In:

Google Cloud Console
Create OAuth 2.0 credentials
Add to Supabase: Authentication > Providers > Google

Apple Sign-In:

Apple Developer
Create Sign in with Apple key
Add to Supabase: Authentication > Providers > Apple

Running the App

Start Development Server

npm start

This opens Expo Dev Tools in your browser.

iOS Simulator

npm run ios

Or press i in the terminal after npm start.

Troubleshooting iOS:

# Clear CocoaPods cache
cd ios
pod deintegrate
pod install
cd ..
npm run ios

Android Emulator

npm run android

Or press a in the terminal after npm start.

Troubleshooting Android:

# Clear build cache
cd android
./gradlew clean
cd ..
npm run android

Physical Device

Install Expo Go app on your device
Scan QR code from npm start
App loads on your device

Development Commands

Linting

# Run ESLint
npm run lint
 
# Fix auto-fixable issues
npm run lint:fix

Type Checking

# Run TypeScript compiler
npx tsc
 
# Watch mode
npx tsc --watch

Testing

# Run unit tests
npm test
 
# Watch mode
npm test -- --watch
 
# Coverage report
npm test -- --coverage

Build

Development Build:

# iOS
eas build --profile development --platform ios
 
# Android
eas build --profile development --platform android

Production Build:

# iOS
eas build --profile production --platform ios
 
# Android
eas build --profile production --platform android

Reset Project

# Clear cache and reset
npm run reset-project
 
# Or manually:
rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install

Project Structure

caloriebeat-app/
├── app/                      # Expo Router app directory
│   ├── (auth)/              # Authentication screens
│   ├── (onboarding)/        # Onboarding flow
│   ├── (tabs)/              # Main app tabs
│   ├── _layout.tsx          # Root layout
│   └── index.tsx            # Landing page
├── components/              # React components
│   ├── ui/                  # Base UI components
│   ├── posts/               # Post components
│   └── charts/              # Chart components
├── services/                # Business logic
│   ├── FoodAnalysisService.ts
│   ├── WorkoutAnalysisService.ts
│   ├── HealthProfileService.ts
│   ├── SubscriptionService.ts
│   └── supabase.ts
├── contexts/                # React Context providers
│   ├── ThemeProvider.tsx
│   ├── OnboardingProvider.tsx
│   └── PaymentsProvider.tsx
├── types/                   # TypeScript type definitions
├── constants/               # App constants
├── utils/                   # Utility functions
├── assets/                  # Images, fonts, etc.
├── supabase/               # Database migrations
│   └── migrations/
├── .env                     # Environment variables
├── app.json                 # Expo configuration
├── package.json             # Dependencies
└── tsconfig.json            # TypeScript config

Development Workflow

Feature Development

Create Feature Branch
```
git checkout -b feature/new-feature
```
Develop & Test
- Write code
- Add tests
- Run linter
- Test on both platforms

Commit Changes

git add .
git commit -m "feat: add new feature"

Push & Create PR
```
git push origin feature/new-feature
```

Commit Convention

Follow Conventional Commits:

feat: New feature
fix: Bug fix
docs: Documentation
style: Formatting
refactor: Code refactoring
test: Tests
chore: Maintenance

Debugging

React Native Debugger

# Install
brew install --cask react-native-debugger
 
# Or download from GitHub releases

Expo Dev Tools

Access via browser after npm start:

View logs
Reload app
Open DevTools
Inspect network requests

VS Code Debugging

.vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Expo",
      "type": "reactnative",
      "request": "attach",
      "program": "${workspaceFolder}/.expo/launchReactNativeDevServer.js"
    }
  ]
}

Flipper

Install Flipper for advanced debugging:

Network inspector
Database inspector
Layout inspector
Crash reporter

Troubleshooting

Common Issues

Metro Bundler Issues:

npx expo start -c

Build Errors:

# Clean and rebuild
npm run reset-project
npm run ios  # or android

Dependency Issues:

rm -rf node_modules package-lock.json
npm install

iOS Simulator Not Opening:

# Ensure Xcode is installed
xcode-select --install
 
# Open simulator manually
open -a Simulator

Android Emulator Issues:

# List AVDs
emulator -list-avds
 
# Start specific AVD
emulator -avd Pixel_4_API_30