Recipe Browser with Favorites

Build a recipe browsing application in React with TypeScript. Users can browse recipes, search and filter them, save favorites, and view detailed cooking instructions.

Data:

• Fetches recipes from /api/recipes which returns { recipes: Recipe[] } where each Recipe has id: string, title: string, cuisine: string, difficulty: "easy" | "medium" | "hard", prepTime: number (minutes), cookTime: number (minutes), servings: number, ingredients: string[], instructions: string[], image: string, and rating: number.

Features:

1. Search bar -- search recipes by title
2. Cuisine filter -- dropdown to filter by cuisine type (or "All")
3. Difficulty filter -- filter by difficulty level (or "All")
4. Sort control -- sort by title, rating, or total time
5. Recipe cards -- grid of cards showing title, image, cuisine, difficulty badge, total time (prep + cook), and rating
6. Stats line -- "Showing X of Y recipes | Average rating: Z | Average total time: W min" for the currently filtered results
7. Favorites -- a heart/star toggle on each card to save favorites; favorites persist across pages and are accessible from a "Favorites" tab/page; favorite count shown in the header
8. Recipe detail page -- clicking a card navigates to /recipes/:id which fetches full details from /api/recipes/:id and shows all ingredients and step-by-step instructions
9. Tabs -- "All Recipes" and "Favorites" tabs on the main page; the Favorites tab shows only favorited recipes with the same search/filter/sort controls

Output

Produce TypeScript/TSX files in a src/ directory:

• src/types.ts -- TypeScript type definitions
• src/hooks/useRecipes.ts -- hook to fetch all recipes
• src/hooks/useRecipe.ts -- hook to fetch a single recipe by ID
• src/context/FavoritesContext.tsx -- favorites state shared across the app
• src/components/RecipeBrowser.tsx -- the main browse page with tabs, search, filters
• src/components/RecipeCard.tsx -- individual recipe card with favorite toggle
• src/components/RecipeGrid.tsx -- the grid of recipe cards
• src/components/RecipeDetail.tsx -- the full recipe detail page
• src/components/SearchAndFilters.tsx -- search and filter controls
• src/components/Header.tsx -- header with favorites count
• src/App.tsx -- app with routing

The code does not need to run against a real server. Do not include test files or build configuration.