Feat: Add Recipe Cost & Savings Feature

[patrick-ouano]

Summary

Add recipe cost estimates and savings comparison feature to help users understand the financial benefits of cooking at home versus ordering takeout.

Changes

• API Prompt Update: Added estimatedCost and takeoutEquivalent fields to the recipe generation prompt with realistic USD pricing
• Recipe Interface: Extended the Recipe interface in both page.tsx and RecipeCard.tsx to include cost fields
• Cost Breakdown Button: Added a toggleable "💰 Cost Breakdown" button that displays:
  • 🛒 Grocery Cost
  • 🍔 Takeout Equivalent
  • ✅ You Save (with green highlighting)
• Copy Function: Updated to include cost/savings info in copied recipe text
• UI Enhancement: Placed Cost Breakdown button next to Detailed Instructions button for cleaner layout

Files Changed

• src/app/api/generate/route.ts - Updated AI prompt
• src/app/generate/page.tsx - Updated Recipe interface
• src/components/RecipeCard.tsx - Added cost breakdown UI and updated copy function
• src/components/InstructionsSection.tsx - Added additionalButtons prop for side-by-side button layout

Screenshots

Test Plan

• Run npm run dev
• Go to /generate and upload a food image
• Generate recipes and expand a recipe card
• Click "💰 Cost Breakdown" button - verify cost badges appear
• Verify savings badge has green styling
• Click "Copy" and paste - verify cost info is included
• Verify buttons appear side-by-side on desktop
• Test on mobile viewport - buttons should wrap gracefully

Capital One Challenge Relevance

"MealCraft helps users reduce food waste AND save money. By cooking with ingredients they already have, users avoid unnecessary grocery trips and expensive takeout. Each recipe shows the estimated cost vs. takeout equivalent, promoting financial literacy around food spending - one of the largest household expenses."

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
mealcraft	Ready	Preview, Comment	Jan 25, 2026 8:05am