Rork でレシピ管理アプリを作る完全チュートリアル — お気に入り・カテゴリ検索・買い物リスト機能付き

// レシピのデータ型定義
interface Recipe {
  id: string;
  title: string;           // レシピ名
  category: string;        // カテゴリ（和食、洋食、中華など）
  cookingTime: number;     // 調理時間（分）
  servings: number;        // 何人前
  difficulty: 'easy' | 'medium' | 'hard'; // 難易度
  ingredients: Ingredient[];  // 材料リスト
  steps: string[];         // 調理手順
  imageUrl: string;        // レシピ画像のURL
  isFavorite: boolean;     // お気に入りフラグ
  createdAt: string;       // 作成日
}
 
interface Ingredient {
  name: string;     // 材料名
  amount: string;   // 分量（例: "200g", "大さじ2"）
  checked: boolean; // 買い物リストでのチェック状態
}

レシピ管理アプリを作成してください。
 
【画面構成】
1. ホーム画面: カテゴリ別のレシピカルーセルを表示
2. 検索画面: キーワード検索 + カテゴリフィルター
3. レシピ詳細画面: 材料リスト、手順、調理時間、人数
4. お気に入り画面: 保存したレシピの一覧
5. 買い物リスト画面: 選択したレシピの材料をまとめて表示
 
【デザイン要件】
- タブナビゲーション（ホーム、検索、お気に入り、買い物リスト）
- カラーテーマ: 温かみのあるオレンジ系
- レシピカードはサムネイル画像付き
- 調理時間と難易度をバッジで表示
 
【データ】
- カテゴリ: 和食、洋食、中華、イタリアン、デザート
- サンプルレシピを各カテゴリ3つずつ含めてください
- 材料には分量を必ず記載してください

ホーム画面のレシピカードを修正してください:
- カードの角を丸く（border-radius: 12px）
- サムネイル画像の高さを180pxに統一
- 調理時間アイコンを時計アイコンに変更

お気に入り機能を改善してください:
- AsyncStorageを使ってお気に入りデータを永続化
- アプリを再起動してもお気に入りが消えないようにする
- お気に入りの追加/削除時にハートアニメーションを表示

// お気に入り管理のカスタムフック
// Custom hook for managing favorite recipes
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const FAVORITES_KEY = '@recipe_favorites';
 
export const useFavorites = () => {
  const [favorites, setFavorites] = useState<string[]>([]);
 
  // アプリ起動時にお気に入りを読み込む
  // Load favorites when the app starts
  useEffect(() => {
    loadFavorites();
  }, []);
 
  const loadFavorites = async () => {
    const stored = await AsyncStorage.getItem(FAVORITES_KEY);
    if (stored) setFavorites(JSON.parse(stored));
  };
 
  // お気に入りの追加・削除を切り替える
  // Toggle a recipe's favorite status
  const toggleFavorite = async (recipeId: string) => {
    const updated = favorites.includes(recipeId)
      ? favorites.filter(id => id !== recipeId)
      : [...favorites, recipeId];
    setFavorites(updated);
    await AsyncStorage.setItem(FAVORITES_KEY, JSON.stringify(updated));
  };
 
  return { favorites, toggleFavorite };
};
// 期待する動作:
// - toggleFavorite('recipe-001') → お気に入りに追加
// - 再度呼び出し → お気に入りから削除
// - アプリ再起動後もデータが保持される

買い物リスト機能を追加してください:
- お気に入りのレシピから買い物リストを自動生成
- 同じ材料は分量を合算して1行にまとめる
- チェックボックスで購入済みをマーク可能
- カテゴリ別に材料をグループ化（野菜、肉、調味料など）
- リスト全体のクリアボタンを配置

// 複数レシピの材料を統合して買い物リストを生成する
// Merge ingredients from multiple recipes into a shopping list
const generateShoppingList = (recipes: Recipe[]): ShoppingItem[] => {
  const merged = new Map<string, ShoppingItem>();
 
  recipes.forEach(recipe => {
    recipe.ingredients.forEach(ingredient => {
      const key = ingredient.name.toLowerCase();
      if (merged.has(key)) {
        const existing = merged.get(key)!;
        existing.amounts.push({
          amount: ingredient.amount,
          fromRecipe: recipe.title,
        });
      } else {
        merged.set(key, {
          name: ingredient.name,
          amounts: [{
            amount: ingredient.amount,
            fromRecipe: recipe.title,
          }],
          checked: false,
          category: categorizeIngredient(ingredient.name),
        });
      }
    });
  });
 
  return Array.from(merged.values());
};
// 期待する出力例:
// [
//   { name: "たまねぎ", amounts: [{ amount: "1個", fromRecipe: "カレー" }, { amount: "1/2個", fromRecipe: "ハンバーグ" }], ... },
//   { name: "にんじん", amounts: [{ amount: "1本", fromRecipe: "カレー" }], ... }
// ]

検索画面を強化してください:
- キーワード検索（レシピ名と材料の両方を検索対象に）
- カテゴリフィルター（横スクロールのチップUI）
- 調理時間フィルター（15分以内、30分以内、60分以内）
- 難易度フィルター（かんたん、ふつう、本格派）
- 検索結果が0件の場合に「レシピが見つかりませんでした」と表示

以下のアニメーションを追加してください:
- レシピカードタップ時のスケールアニメーション
- お気に入りボタンのハートがバウンスするアニメーション
- 買い物リストのチェック時にストライクスルーアニメーション
- 画面遷移にスライドアニメーション

ダークモードに対応してください:
- システム設定に連動して自動切り替え
- 食品の写真が映えるよう背景は深いグレー（#1C1C1E）
- テキストコントラスト比をWCAG AA基準以上に維持