Enhance the Recipes.jsx component by integrating a nutrition estimation API to automatically calculate and display the nutritional values (calories, protein, fat, carbs, etc.) for each recipe.
The goal is to give users quick insight into the health value of a recipe without manual entry.
Requirements:
Integrate a free/open API such as:
Edamam Nutrition Analysis API
Nutritionix API
or any other community-friendly nutrition estimation API.
Fetch nutritional information based on recipe ingredients.
Display the results under each recipe card (e.g., small table or list showing key nutrients).
Handle loading and error states gracefully.
Cache responses locally to reduce repeated API calls.
Acceptance Criteria:
Each recipe dynamically shows basic nutrition facts.
API responses are handled asynchronously with clear loading indicators.
The UI remains responsive even when API data is loading.
Works with at least 5 example recipes.
Bonus (optional):
Add a “Show More Nutrition Info” toggle to expand/collapse additional details.
Format values nicely (e.g., 200 kcal, 12g protein, etc.).
Enhance the Recipes.jsx component by integrating a nutrition estimation API to automatically calculate and display the nutritional values (calories, protein, fat, carbs, etc.) for each recipe.
The goal is to give users quick insight into the health value of a recipe without manual entry.
Requirements:
Integrate a free/open API such as:
Edamam Nutrition Analysis API
Nutritionix API
or any other community-friendly nutrition estimation API.
Fetch nutritional information based on recipe ingredients.
Display the results under each recipe card (e.g., small table or list showing key nutrients).
Handle loading and error states gracefully.
Cache responses locally to reduce repeated API calls.
Acceptance Criteria:
Each recipe dynamically shows basic nutrition facts.
API responses are handled asynchronously with clear loading indicators.
The UI remains responsive even when API data is loading.
Works with at least 5 example recipes.
Bonus (optional):
Add a “Show More Nutrition Info” toggle to expand/collapse additional details.
Format values nicely (e.g., 200 kcal, 12g protein, etc.).