Feat/detailed instructions button

[Eric-Zhang-Developer]

Summary

Adds a new feature that allows users to expand basic recipe instructions into detailed, beginner-friendly step-by-step guides with timing, temperatures, visual cues, and tips.

Changes

New Files

• src/app/api/expand-instructions/route.ts: New API endpoint that calls Gemini to expand basic instructions
• src/app/api/expand-instructions/__tests__/route.test.ts: Comprehensive test suite (28 tests)
• src/components/InstructionsSection.tsx: Extracted component for instructions display + expansion

Modified Files

• src/components/RecipeCard.tsx: Refactored to use InstructionsSection, state lifted for persistence

How It Works

1. User generates recipes from a fridge photo (existing flow)
2. User expands a recipe card and clicks "Detailed Instructions"
3. Frontend calls /api/expand-instructions with recipe name, ingredients, and basic instructions
4. Gemini returns expanded, beginner-friendly steps
5. Instructions replace the basic ones in the UI

Technical Notes

• State lifted to RecipeCard so detailed instructions persist across collapse/expand
• New endpoint is text-only (no image), 30s timeout vs 60s for image endpoint
• Reuses cleanJsonResponse and extractJson helpers from generate route
• Test coverage mirrors existing /api/generate test patterns

Test Plan

• Unit tests pass (28 new tests, 74 total)
• Manual test: Generate recipes → Expand card → Click "Detailed Instructions" → Verify expanded steps appear
• Manual test: Collapse and re-expand card → Detailed instructions persist
• Manual test: Error handling (disconnect network, verify error message)

Screenshots

Before

After

Issues

• Closes Feat: Add "Detailed Instructions" API Expansion Feature #35

[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 6:15am