Build a recipe finder that allows users to search for recipes by ingredients, cuisine type, or dietary restrictions. Display recipe details including ingredients, instructions, and cooking time.

Project Checklist

• Create a search interface for recipe queries
• Integrate with a recipe API (e.g., Spoonacular, Edamam)
• Display recipe cards with images, title, and key information
• Create a detailed recipe view with ingredients list and instructions
• Add filtering by cuisine, dietary restrictions, or meal type
• Implement responsive design for mobile and desktop

Bonus Project Checklist Items

• Add favorite recipes functionality with localStorage
• Implement meal planning with calendar view
• Add shopping list generation from selected recipes
• Create recipe comparison feature
• Add nutritional information display
• Implement recipe sharing via URL or social media

Inspiration (Any companies/libraries similar)

• AllRecipes
• Food Network
• Yummly

Hint/Code snippet to start

To get started, you can use the following code snippet to fetch recipes:

async function searchRecipes(query) {
  const apiKey = 'YOUR_API_KEY';
  const url = `https://api.spoonacular.com/recipes/complexSearch?query=${query}&apiKey=${apiKey}`;

  try {
    const response = await fetch(url);
    const data = await response.json();
    displayRecipes(data.results);
  } catch (error) {
    console.error('Error fetching recipes:', error);
  }
}