Get Spoonacular API key
⏱️ 1-2 hours
const API_KEY = import.meta.env.VITE_SPOONACULAR_KEY
const BASE_URL = "https://api.spoonacular.com/recipes"Free tier: 150 requests/day
Read API documentation
⚠️ Common Pitfalls:
Implement search with filters
⏱️ 4-5 hours
const searchRecipes = async (query: string, diet?: string) => {
const params = new URLSearchParams({ apiKey: API_KEY, query, diet: diet || "" })
return fetch(/complexSearch?).then(r => r.json())
}Use complexSearch endpoint
Add diet and cuisine filters
⚠️ Common Pitfalls:
Show full recipe with instructions
⏱️ 3-4 hours
const recipe = await fetch(//information?apiKey=).then(r => r.json())Fetch recipe by ID
Display ingredients and steps
⚠️ Common Pitfalls:
Save favorite recipes
⏱️ 2-3 hours
const favorites = JSON.parse(localStorage.getItem("favorites") || "[]")Use localStorage for persistence
Create favorites page
⚠️ Common Pitfalls:
Create weekly meal plan
⏱️ 3-4 hours
interface MealPlan {
[day: string]: { breakfast?: Recipe, lunch?: Recipe, dinner?: Recipe }
}Create calendar-like interface
Allow drag-and-drop
⚠️ Common Pitfalls:
Deploy to Vercel
⏱️ 1 hour
vercel --prod⚠️ Common Pitfalls: