1
🎓 View Certificate (1)
← Back

Build a Recipe Finder

Search recipes and create meal plans using Spoonacular API.

Sign in to track your progress

Step 1: API Setup

Get Spoonacular API key

⏱️ 1-2 hours

🎬 Video Walkthrough

📝 Code

typescript
const API_KEY = import.meta.env.VITE_SPOONACULAR_KEY
const BASE_URL = "https://api.spoonacular.com/recipes"
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Free tier: 150 requests/day

Hint 2 (unlocks after 10min)

Read API documentation

⚠️ Common Pitfalls:

  • Rate limit your requests
  • Cache API responses
  • Handle API errors

Step 2: Recipe Search

Implement search with filters

⏱️ 4-5 hours

🎬 Video Walkthrough

📝 Code

typescript
const searchRecipes = async (query: string, diet?: string) => {
  const params = new URLSearchParams({ apiKey: API_KEY, query, diet: diet || "" })
  return fetch(/complexSearch?).then(r => r.json())
}
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Use complexSearch endpoint

Hint 2 (unlocks after 10min)

Add diet and cuisine filters

⚠️ Common Pitfalls:

  • Debounce search input
  • Handle empty results
  • Show loading states

Step 3: Recipe Details

Show full recipe with instructions

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

typescript
const recipe = await fetch(//information?apiKey=).then(r => r.json())
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Fetch recipe by ID

Hint 2 (unlocks after 10min)

Display ingredients and steps

⚠️ Common Pitfalls:

  • Parse HTML in instructions
  • Display nutritional info
  • Handle missing data

Step 4: Favorites

Save favorite recipes

⏱️ 2-3 hours

🎬 Video Walkthrough

📝 Code

typescript
const favorites = JSON.parse(localStorage.getItem("favorites") || "[]")
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Use localStorage for persistence

Hint 2 (unlocks after 10min)

Create favorites page

⚠️ Common Pitfalls:

  • Check localStorage limits
  • Add remove functionality
  • Handle duplicates

Step 5: Meal Planner

Create weekly meal plan

⏱️ 3-4 hours

🎬 Video Walkthrough

📝 Code

typescript
interface MealPlan {
  [day: string]: { breakfast?: Recipe, lunch?: Recipe, dinner?: Recipe }
}
💡 Hints (2 available)
Hint 1 (unlocks after 5min)

Create calendar-like interface

Hint 2 (unlocks after 10min)

Allow drag-and-drop

⚠️ Common Pitfalls:

  • Persist meal plan
  • Generate shopping list
  • Handle conflicts

Step 6: Deploy

Deploy to Vercel

⏱️ 1 hour

🎬 Video Walkthrough

📝 Code

bash
vercel --prod

⚠️ Common Pitfalls:

  • Add API key to env
  • Test production build

Study Timer

🎯 Focus
25:00
Stay focused!
Total Study Time
0m
💡 Work: 25 min • Break: 5 min

⚙️ Technologies

ReactAPITypeScript