Diet Planner App

A React Native mobile application that helps users plan their meals with AI-powered food recommendations and nutritional tracking.

Features

🏠 Home Screen

• Personalized Greeting: Welcome message with user's name
• Nutritional Metrics: Real-time tracking of calories, protein, and carbs
• Daily/Weekly Toggle: Switch between daily and weekly meal views
• Meal Cards: Visual representation of breakfast, lunch, snacks, and dinner
• AI Recommendations: Button to access AI-powered food suggestions

📊 Stats Screen

• Progress Chart: Visual representation of nutritional progress over time
• Nutritional Stats: Detailed breakdown of calories, protein, carbs, and fat
• Grid/Compact View: Toggle between different display modes
• Real-time Updates: Stats update automatically as meals are added

🤖 AI Food Recommendations

• Category-based Filtering: Browse recommendations by meal type (breakfast, lunch, dinner, snacks)
• Nutritional Information: Each recommendation includes detailed nutritional data
• Easy Integration: One-tap to add recommended foods to your meal plan
• Smart Suggestions: AI-powered recommendations based on nutritional goals
• Fallback Mode: Works offline with pre-configured recommendations when AI is unavailable

Technical Stack

• React Native: Cross-platform mobile development
• Expo: Development platform and tools
• TypeScript: Type-safe development
• React Context: State management for meal planning
• React Native Chart Kit: Data visualization
• Expo Vector Icons: Icon library
• Google Gemini AI: AI-powered food recommendations (optional)

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• iOS Simulator (for iOS development) or Android Emulator (for Android development)

Getting Started

1. Install Dependencies

npm install

2. Configure Environment Variables

Copy the example environment file and configure it:

cp .env.example .env

Edit .env and add your configuration:

# Google Gemini API Key (optional - AI features will use fallback if not provided)
GEMINI_API_KEY=your_api_key_here

Environment Variables

Variable	Required	Description	Where to Get It
GEMINI_API_KEY	No	Google Gemini AI API key for personalized food recommendations	Google AI Studio

Note: The GEMINI_API_KEY is optional. If not provided:

• The app will work in offline mode
• AI-powered recommendations will be replaced with pre-configured fallback recommendations
• All other features (meal tracking, stats, charts) will work normally

3. Start the Development Server

npx expo start

This will start the Expo development server. You can then:

• Press i to open iOS Simulator
• Press a to open Android Emulator
• Scan the QR code with Expo Go app on your physical device

4. Run Tests

npm test

Project Structure

Diet-Planner/
├── src/                        # All source code
│   ├── app/                    # Expo Router app directory
│   ├── components/             # Reusable UI components
│   ├── contexts/               # React Context providers
│   ├── types/                  # TypeScript type definitions
│   ├── utils/                  # Utility functions
│   ├── hooks/                  # Custom React hooks
│   ├── constants/              # App constants
│   └── App.tsx                 # Root component
├── assets/                     # Images and fonts
├── spec/                       # Documentation
│   ├── project.md
│   ├── requirements.md
│   └── implementations.md
└── __tests__/                  # Test files

Path aliases are configured for cleaner imports:

• @/components/* → src/components/*
• @/contexts/* → src/contexts/*
• @/types/* → src/types/*
• @/utils/* → src/utils/*
• @/hooks/* → src/hooks/*
• @/constants/* → src/constants/*
• @/app/* → src/app/*

Development

Running on iOS

npx expo start --ios

Running on Android

npx expo start --android

Building for Production

# Install EAS CLI
npm install -g eas-cli

# Login to Expo
eas login

# Configure build
eas build:configure

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

Features Status

• Project setup with Expo and TypeScript
• Environment variable configuration
• Path aliases and project structure
• Core data models and types
• State management (MealPlanContext, UserProfileContext)
• Home screen with meal cards
• Stats screen with charts
• AI integration with Google Gemini
• User profile and onboarding
• Offline mode with fallback recommendations

Contributing

This project follows a structured implementation plan. See spec/implementations.md for the detailed task breakdown.

License

MIT

Acknowledgments

• Built with Expo
• AI powered by Google Gemini
• Charts by React Native Chart Kit