Recipe Finder

A practical recipe discovery application that helps users find delicious recipes based on ingredients they already have at home.

Project Overview

Recipe Finder solves the common problem of "what can I cook with what I have?" by:

• Searching recipes by available ingredients
• Filtering recipes by dietary preferences
• Saving favorite recipes for later
• Providing detailed cooking instructions
• Estimating cooking time and difficulty

Key Features

Recipe Discovery

• Ingredient-Based Search: Find recipes using ingredients you have
• Filter Options: Dietary restrictions, cooking time, difficulty level
• Recipe Details: Full ingredients list, instructions, and nutrition info
• Random Recipe: Discover new recipes when feeling adventurous

User Features

• Favorites System: Save recipes you want to try
• Shopping List: Generate shopping lists for missing ingredients
• Recipe Rating: Rate and review recipes
• Recent Searches: Quick access to previous searches

Technical Architecture

Frontend (React)

• Component Structure: Modular, reusable components
• State Management: React hooks for local state
• Styled Components: CSS-in-JS for maintainable styling
• Responsive Design: Mobile-first approach

Backend (Node.js/Express)

• RESTful API: Clean API endpoints for recipe operations
• External API Integration: Spoonacular Recipe API
• Data Caching: Redis for improved performance
• User Authentication: JWT-based authentication

Code Examples

// Recipe Search Component
function RecipeSearch() {
  const [ingredients, setIngredients] = useState([]);
  const [recipes, setRecipes] = useState([]);
  const [loading, setLoading] = useState(false);

  const searchRecipes = async () => {
    setLoading(true);
    try {
      const response = await fetch("/api/recipes/search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ingredients }),
      });
      const data = await response.json();
      setRecipes(data.recipes);
    } catch (error) {
      console.error("Search failed:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <SearchContainer>
      <IngredientInput
        ingredients={ingredients}
        setIngredients={setIngredients}
      />
      <SearchButton onClick={searchRecipes} disabled={loading}>
        {loading ? "Searching..." : "Find Recipes"}
      </SearchButton>
      <RecipeGrid recipes={recipes} />
    </SearchContainer>
  );
}

// Backend API Route
app.post("/api/recipes/search", async (req, res) => {
  try {
    const { ingredients } = req.body;
    const ingredientList = ingredients.join(",");

    const response = await fetch(
      `https://api.spoonacular.com/recipes/findByIngredients?ingredients=${ingredientList}&number=12&apiKey=${API_KEY}`
    );

    const recipes = await response.json();
    res.json({ recipes });
  } catch (error) {
    res.status(500).json({ error: "Failed to fetch recipes" });
  }
});

User Experience Design

Interface Design

• Clean Layout: Uncluttered design focusing on recipes
• Visual Recipe Cards: Appealing recipe presentation
• Easy Navigation: Intuitive user flow
• Quick Actions: Fast access to common features

Performance Optimization

• Image Lazy Loading: Faster page load times
• API Response Caching: Reduced loading times
• Optimistic Updates: Immediate UI feedback
• Progressive Enhancement: Works without JavaScript

Current Development Status

Completed Features ✅

• Recipe search by ingredients
• Recipe detail pages
• Responsive design
• Basic user authentication

In Development 🚧

• Advanced filtering options
• User recipe collections
• Social sharing features
• Meal planning integration

Planned Features 📋

• Recipe reviews and ratings
• Nutrition tracking
• Shopping list integration
• Mobile app version

Challenges and Solutions

API Rate Limiting

• Challenge: External API has usage limits
• Solution: Implemented caching and request batching

Search Performance

• Challenge: Large recipe databases are slow to search
• Solution: Added search debouncing and result pagination

Mobile Experience

• Challenge: Complex interface on small screens
• Solution: Simplified mobile UI with collapsible sections

Skills Demonstrated

• Full-Stack Development: Both frontend and backend implementation
• API Integration: Working with external recipe APIs
• User Experience: Designing intuitive recipe discovery flows
• Performance Optimization: Caching and lazy loading techniques
• Responsive Design: Mobile-friendly interface design

This project combines practical utility with technical complexity, demonstrating skills in full-stack development and user-centered design.