Skip to content

Quick Recipes from Fridge Items

DifficultyIntermediate
Team Size2-3 people
Time~30-35 hours
Demo-ready byStep 5
PrerequisitesNode.js, HTML/CSS/JavaScript, basic ML concepts
Built bySuperCook, MyFridgeFood, Yummly, Allrecipes

Skills you'll earn: Fuzzy matching, ranking algorithms, image recognition, REST APIs, dietary filtering, meal planning

Start with matching ingredients. End with a smart recipe recommendation engine.

(Assumes starting from scratch with basic HTML/CSS/JS knowledge)

Step 1: Match ingredients to recipes (~2-3 hours)

You have eggs, tomatoes, and cheese. What can you make?

  • Build a static JSON file with 20-30 recipes, each with a name, ingredients list, and instructions
  • Create a frontend with checkboxes or a text input for available ingredients
  • Filter recipes where all required ingredients are in your list
  • Display matching recipes

You now have: A basic ingredient matcher.

Step 2: Partial matches and ranking (~2-3 hours)

With strict matching, you almost never get results. One missing ingredient shouldn't disqualify a recipe.

  • Score each recipe by the percentage of ingredients you have
  • Sort by best match (90% match ranks above 50%)
  • Show what's missing for each recipe
  • Highlight which of your ingredients each recipe uses

You now have: Ranked recipe suggestions.

Step 3: Move to a server (~2-3 hours)

Your JSON file has 30 recipes. You want thousands, and you want to add new ones.

  • Set up a Node.js server with Express
  • Store recipes in a database (MongoDB works well for flexible ingredient lists)
  • Create API endpoints: GET /recipes?ingredients=egg,tomato,cheese
  • Add an admin endpoint to add new recipes

You now have: A recipe API.

Step 4: User-submitted recipes (~3-4 hours)

You have 30 recipes. Your users know thousands.

  • Add user registration and login
  • Let users submit recipes with name, ingredients, instructions, and a photo
  • Add a review/approval workflow so bad recipes don't show up immediately
  • Show the contributor's name on each recipe

You now have: Community-contributed recipes.

Step 5: Smart ingredient input (~3-4 hours)

Users type "tomato" but the database says "tomatoes." No match.

  • Normalize ingredient names (stemming, pluralization)
  • Add an ingredient autocomplete that suggests from known ingredients
  • Support synonyms: "capsicum" matches "bell pepper"
  • Use fuzzy matching for typos

You now have: Forgiving ingredient matching.

Step 6: Dietary filters and tags (~2-3 hours)

You're vegetarian. Half the results have chicken.

  • Add tags: vegetarian, vegan, gluten-free, dairy-free, quick (under 30 min)
  • Let users filter by dietary preference
  • Show tags on recipe cards
  • Save preferences in the user's profile

You now have: Dietary-aware recommendations.

Step 7: Recipe detail page (~3-4 hours)

  • Full recipe page with ingredients, step-by-step instructions, cook time, and servings
  • Serving size adjuster (scale ingredients up or down)
  • Nutritional info (calories, protein, carbs, fat) — estimate from ingredients

Step 8: Image recognition (~4-5 hours)

  • Let users take a photo of their fridge
  • Use a vision model or image classification to identify ingredients
  • Auto-populate the ingredient list from the photo

Step 9: Meal planning (~3-4 hours)

  • Suggest a week of meals using available ingredients
  • Generate a shopping list for missing ingredients
  • Track pantry inventory over time

Step 10: Deploy (~2 hours)

  • Containerize and deploy
  • Add CI/CD
  • Set up a domain and TLS

Useful Resources

Where to go from here

  • Voice input ("I have eggs, rice, and soy sauce")
  • Social features (save favorites, share recipes, follow cooks)
  • Cost estimation based on local grocery prices
  • Integration with grocery delivery APIs
  • Cooking timer and step-by-step guided mode