Skip to content

Recipes.jsx : Nutrition Estimation Integration (Open API) #81

@venisha-kalola

Description

@venisha-kalola

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.).

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions