Zbudujesz aplikację do przeglądania i zarządzania przepisami kulinarnymi — z listą przepisów, wyszukiwarką, filtrowaniem po kategorii (śniadanie, obiad, kolacja, deser) i szczegółowym widokiem każdego przepisu.
Czego się nauczycie?
useState/recipe/:id)localStorageW prawdziwej firmie...
Aplikacje z listami, wyszukiwaniem i filtrowaniem to chleb powszedni Front-End developera. Każdy e-commerce, CMS czy panel administracyjny ma tę samą strukturę co ta aplikacja.
Umiejętności rynkowe
Lista przepisów — siatka kart z miniaturą, nazwą i kategorią
Wyszukiwarka — filtrowanie przepisów po nazwie w czasie rzeczywistym
Filtrowanie — po kategorii (śniadanie, obiad, kolacja, deser, wegetariańskie)
Szczegóły przepisu — lista składników, opis przygotowania krok po kroku, czas przygotowania
Ulubione — możliwość dodania przepisu do ulubionych (zapisane w localStorage)
Strona główna
Wyszukiwarka + filtr kategorii + siatka przepisów. Każda karta pokazuje zdjęcie, nazwę i czas przygotowania.
Szczegóły przepisu
Duże zdjęcie, lista składników z ilościami, kroki przygotowania, czas i trudność. URL: /recipe/:id.
Ulubione
Lista ulubionych przepisów (karty z opcją usunięcia z ulubionych).
{ "id": "52772", "name": "Teriyaki Chicken Casserole", "category": "Chicken", "area": "Japanese", "thumbnail": "https://www.themealdb.com/images/media/meals/wvpsxx1468256321.jpg", "prepTime": 30, "servings": 4, "difficulty": "medium", "ingredients": [ { "name": "soy sauce", "amount": "3/4 cup" }, { "name": "water", "amount": "1/2 cup" } ], "instructions": [ "Preheat oven to 350° F.", "Spray a 9x13-inch baking pan with non-stick spray." ]}Minimalne wymagania:
mockData.js)/, /recipe/:id, /favoritesRozszerzenie:
https://www.themealdb.com/api/json/v1/1/)Pełna implementacja:
useRecipes z logiką filtrowaniaimport { useMemo } from 'react';
function useFilteredRecipes(recipes, { search, category }) { return useMemo(() => { return recipes.filter((recipe) => { const matchesSearch = recipe.name .toLowerCase() .includes(search.toLowerCase()); const matchesCategory = category === 'all' || recipe.category === category; return matchesSearch && matchesCategory; }); }, [recipes, search, category]);}
export default useFilteredRecipes;import { useState, useEffect } from 'react';
function useRecipeDetail(id) { const [recipe, setRecipe] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);
useEffect(() => { if (!id) return;
setLoading(true); fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`) .then((res) => res.json()) .then((data) => { if (!data.meals) throw new Error('Recipe not found'); setRecipe(data.meals[0]); }) .catch((err) => setError(err.message)) .finally(() => setLoading(false)); }, [id]);
return { recipe, loading, error };}
export default useRecipeDetail;Powodzenia!
Książka przepisów to świetny projekt do portfolio — wygląda atrakcyjnie, ma prawdziwe dane z API i pokazuje że umiecie budować kompletne aplikacje. Zacznijcie od lokalnych danych, a potem podmieńcie na MealDB!