Recipe Manager

Required Fields

• name (string): Display name of the recipe
• category (string): One of: Entree, Side, Soup, Dessert
• components (object): Ingredient lists grouped by component (array of objects)
• instructions (array): Step-by-step cooking instructions

Optional Fields

• notes (string or array): Additional tips or information
• images (array): URLs to recipe photos

Ingredient Object Structure

Required Fields (per ingredient)

• amount: Number or fraction string
  • Numbers: 2, 0.5, 1.5
  • Fractions: '1/2', '1/4', '1/3'
• unit: Unit of measurement
  • Volume: 'cup', 'tbsp', 'tsp'
  • Weight: 'oz', 'lb', 'g', 'kg'
  • Count: 'large', 'medium', 'small', 'cloves', 'whole'
  • Other: 'recipe', 'pinch', 'dash'
• ingredient: The ingredient name
  • Descriptive: 'all-purpose flour', 'cremini mushrooms'
  • Simple: 'carrots', 'garlic', 'olive oil'

Optional Fields (per ingredient)

• prep: Preparation instructions
  • Cutting: 'diced', 'minced', 'sliced', 'chopped'
  • State: 'softened', 'melted', 'room temperature'
  • Additional: 'divided', 'plus more to taste', 'Pinot Noir recommended'

Examples

// Simple ingredient
{ amount: 2, unit: 'cups', ingredient: 'flour' }

// With preparation
{ amount: 1, unit: 'large', ingredient: 'onion', prep: 'diced' }

// Fraction amount
{ amount: '1/4', unit: 'tsp', ingredient: 'salt' }

// Complex prep note
{ amount: 5, unit: 'large', ingredient: 'carrots', prep: 'peeled and sliced into large chunks' }

// Non-standard unit
{ amount: 1, unit: 'recipe', ingredient: 'mashed potatoes', prep: 'or serve with rice' }

Scaling Logic (New)

Much simpler with object format!

function scaleIngredient(ingredientObj, multiplier) {
    const scaledAmount = parseAmount(ingredientObj.amount) * multiplier;
    return {
        ...ingredientObj,
        amount: scaledAmount
    };
}

function parseAmount(amount) {
    if (typeof amount === 'number') return amount;
    if (amount.includes('/')) {
        const [num, den] = amount.split('/').map(Number);
        return num / den;
    }
    return parseFloat(amount);
}

Display Formatting

function formatIngredient(obj, orderCount = 1) {
    const scaledAmount = parseAmount(obj.amount) * orderCount;
    const prep = obj.prep ? `, ${obj.prep}` : '';
    return `${scaledAmount.toFixed(2)} ${obj.unit} ${obj.ingredient}${prep}`;
}

// Examples:
// { amount: 2, unit: 'cups', ingredient: 'flour' }
// → "2.00 cups flour"

// { amount: 1, unit: 'large', ingredient: 'onion', prep: 'diced' }
// → "1.00 large onion, diced"

// { amount: '1/4', unit: 'tsp', ingredient: 'salt', prep: 'plus more to taste' }
// → "0.25 tsp salt, plus more to taste"

Category Order

Recipes display in this category order:

1. Entree
2. Side
3. Soup
4. Dessert

Defined in /js/components/RecipeGrid.js:20

Notes Field Handling

The RecipeModal.js component handles notes in two formats:

1. String: Renders as single paragraph
2. Array: Renders each item as separate paragraph

// Single note