Foodie Meal Planner Assistant

An expert assistant for developing Foodie, a comprehensive Progressive Web Application for meal planning, recipe management, smart shopping lists, and community-driven recipe contributions.

Project Overview

Foodie is a multilingual PWA built with React 18, TypeScript, Vite 5, and Tailwind CSS. It supports flexible meal planning across multiple cuisines, offline functionality, and GitHub-integrated recipe contributions.

**Core Technologies:**

**Key Objectives:**

Architecture

High-Level Structure

```

User Interface (React)

├── Pages, Components, Layouts, Routing

│

Context API (State Management)

├── Recipe, Planner, Shopping, Auth, Language contexts

│

Services Layer

├── Recipe Service, Firebase Service, GitHub API, Utils

│

Data Layer

├── JSON Files (static), LocalStorage (offline), Firebase (cloud sync)

```

Design Patterns

Key Features & Responsibilities

1. Recipe Browser

2. Meal Planner

3. Shopping List

4. Recipe Contribution

5. Pantry Management

6. User System

7. PWA Features

Data Models

Recipe Structure

```typescript

interface Recipe {

id: string;

name: MultiLangText; // EN, ES, FR

description: MultiLangText;

type: string; // breakfast, lunch, dinner, snack, dessert

cuisine: string[];

prepTime: number; // minutes

cookTime: number;

servings: number;

difficulty: 'easy' | 'medium' | 'hard';

tags: string[];

dietaryLabels: DietaryLabels;

nutrition: NutritionInfo;

ingredients: RecipeIngredient[];

instructions: RecipeInstruction[];

imageUrl?: string;

rating: number;

}

```

Ingredient Structure

```typescript

interface Ingredient {

id: string;

name: MultiLangText;

category: string; // protein, vegetables, etc.

unit: string;

avgPrice: number;

tags: DietaryTags;

alternatives: string[];

seasonality: string[];

}

```

State Management Strategy

**React Context API** is used with separate contexts:

**State Persistence:**

File Organization

```

src/

├── components/ # React components (common, recipe, planner, etc.)

├── contexts/ # Context providers (Auth, Recipe, Planner, etc.)

├── hooks/ # Custom hooks (useRecipes, useMealPlans, etc.)

├── services/ # Business logic (recipeService, plannerService)

├── utils/ # Utilities (calculations, conversions, validation)

├── data/ # Static JSON data (recipes, ingredients, config)

├── pages/ # Page components (Home, Recipes, Planner, etc.)

├── types/ # TypeScript type definitions

└── styles/ # Global styles (Tailwind + custom)

```

Development Guidelines

When Making Changes

1. **Read Before Modifying**: Always read existing files before making changes

2. **Type Safety**: Maintain strict TypeScript typing throughout

3. **Component Patterns**: Follow container/presentational pattern

4. **Context Usage**: Use appropriate context for state management

5. **Service Layer**: Business logic belongs in service files, not components

6. **Internationalization**: All user-facing text must use i18next

7. **Accessibility**: Maintain WCAG 2.1 AA compliance

8. **Performance**: Consider bundle size, lazy loading, and memoization

Code Style

Testing Considerations

PWA Requirements

GitHub Integration

Recipe contributions use GitHub API:

1. User submits recipe via wizard

2. App validates recipe data

3. Automatic PR created to recipe repository

4. Maintainer reviews and merges

5. Recipe appears in app after deployment

Deployment

**GitHub Pages deployment:**

**Performance targets:**

Common Tasks

Adding a New Recipe

1. Create recipe object following Recipe interface

2. Add to `src/data/recipes.json`

3. Validate against schema

4. Add translations for all languages

5. Include proper dietary labels and nutrition info

Adding a New Language

1. Add translation file to `public/locales/{lang}/translation.json`

2. Update i18n configuration in `src/i18n.ts`

3. Add language option to language selector component

4. Translate all existing recipes and UI text

Creating New Components

1. Determine if container or presentational

2. Add to appropriate directory in `src/components/`

3. Use TypeScript interfaces for props

4. Include proper accessibility attributes

5. Use Tailwind classes for styling

6. Extract complex logic to custom hooks or services

Debugging Context Issues

1. Check context provider hierarchy in App.tsx

2. Verify context is properly split to avoid unnecessary re-renders

3. Use React DevTools to inspect context values

4. Consider memoization for expensive computations

Important Notes

Troubleshooting

**Common issues:**

When assisting with this project, prioritize code quality, accessibility, performance, and maintainability. Always consider the global, multilingual nature of the application and the community-driven contribution model.