From 4014c5e3af562a9c8951259589f6dbcc3129cf57 Mon Sep 17 00:00:00 2001
From: li-madison <forsterliana@gmail.com>
Date: Sat, 2 May 2026 10:07:29 -0500
Subject: [PATCH 1/7] delete unused files

---
 backend/BACKEND_GUIDE.md         | 390 -------------------------------
 backend/HistoryPage.jsx          |  68 ------
 backend/NutritionAPI.js          | 116 ---------
 backend/SearchHistoryService.js  |  92 --------
 backend/SearchPage.jsx           | 105 ---------
 backend/firebase_auth_context.js |  79 -------
 6 files changed, 850 deletions(-)
 delete mode 100644 backend/BACKEND_GUIDE.md
 delete mode 100644 backend/HistoryPage.jsx
 delete mode 100644 backend/NutritionAPI.js
 delete mode 100644 backend/SearchHistoryService.js
 delete mode 100644 backend/SearchPage.jsx
 delete mode 100644 backend/firebase_auth_context.js

diff --git a/backend/BACKEND_GUIDE.md b/backend/BACKEND_GUIDE.md
deleted file mode 100644
index 17a2b35..0000000
--- a/backend/BACKEND_GUIDE.md
+++ /dev/null
@@ -1,390 +0,0 @@
-# Connecting a Backend (Firebase)
-
-## What is a Backend?
-
-The backend is the part of the app users don't see — but it's what makes everything real.
-
-### Key Responsibilities
-
-* **Data Storage** — Saves user data so it persists between sessions
-* **Authentication** — Knows who you are
-* **APIs** — Lets your app talk to external data sources
-* **Security** — Controls who can access what
-
-### Analogy
-
-Think of a restaurant:
-
-* Frontend = dining area (what you see)
-* Backend = kitchen (where everything actually happens)
-
----
-
-## What is Firebase?
-
-Firebase is a Backend-as-a-Service (BaaS) — a backend you don't have to build yourself.
-
-### What it gives you
-
-* **Firestore** — a real-time cloud database
-* **Authentication** — handles login/register securely
-* **Hosting** — deploy your app in one command
-* No servers to manage
-
----
-
-## Setting Up Firebase
-
-### Step 1: Create a Project
-
-* Go to [Firebase Console](https://console.firebase.google.com)
-* Click **"Add Project"** → give it a name → disable Analytics
-
-### Step 2: Register Your Web App
-
-* Click the **`</>`** icon
-* Copy the config object it gives you
-
-### Step 3: Set Up Firestore
-
-* Click **Firestore Database → Create Database**
-* Choose **Test Mode** (for dev day)
-* Click through the location prompt
-
-### Step 4: Enable Authentication
-
-* Click **Authentication → Get Started**
-* Enable **Email/Password**
-
----
-
-## Firebase Configuration
-
-```javascript
-// src/firebase/firebase.js
-import { initializeApp } from "firebase/app";
-import { getAuth }       from "firebase/auth";
-import { getFirestore }  from "firebase/firestore";
-
-const firebaseConfig = {
-  apiKey:            process.env.REACT_APP_FIREBASE_API_KEY,
-  authDomain:        process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
-  projectId:         process.env.REACT_APP_FIREBASE_PROJECT_ID,
-  // ... rest of the keys from your .env
-};
-
-const app = initializeApp(firebaseConfig);
-
-export const auth = getAuth(app);
-export const db   = getFirestore(app);
-```
-
-### Why environment variables?
-
-* API keys are secrets — never put them directly in code
-* `.env` file stays off GitHub (it's in `.gitignore`)
-* `REACT_APP_` prefix is required by Create React App
-
----
-
----
-
-# User Authentication
-
-## What is Authentication?
-
-Authentication answers one question: **who is this person?**
-
-### What it lets users do
-
-* Register an account
-* Log in
-* Stay logged in (Firebase remembers them)
-* Log out
-
----
-
-## The Core Functions
-
-Three lines. Firebase does everything else.
-
-```javascript
-// src/firebase/auth.js
-createUserWithEmailAndPassword(auth, email, password) // Register
-signInWithEmailAndPassword(auth, email, password)     // Login
-signOut(auth)                                         // Logout
-```
-
-Firebase handles: password hashing, tokens, session management, security.
-
----
-
-## Auth Context (The Big Idea)
-
-Without Auth Context, every component would need to ask Firebase "is anyone logged in?" separately.
-
-Instead, we ask **once** at the top of the app and share the answer everywhere.
-
-```javascript
-// src/contexts/AuthContext.jsx
-export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState(null);
-
-  useEffect(() => {
-    // Firebase calls this any time the user signs in or out
-    const unsubscribe = onAuthStateChanged(auth, (user) => {
-      setCurrentUser(user);
-    });
-    return unsubscribe;
-  }, []);
-
-  return (
-    <AuthContext.Provider value={{ currentUser }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-```
-
-### How any component reads the user
-
-```javascript
-const { currentUser } = useAuth();
-// currentUser.uid   ← unique ID for this user
-// currentUser.email ← their email
-// currentUser       ← null if not logged in
-```
-
----
-
-## Auth Flow
-
-1. User enters email + password on `/login`
-2. `loginUser()` calls Firebase
-3. Firebase verifies credentials and returns a user object
-4. `onAuthStateChanged` fires → `currentUser` updates everywhere
-5. Navbar shows email + "Logout" button
-
----
-
-## Key Takeaways
-
-* Firebase handles auth securely — don't try to build this yourself
-* Auth Context shares user state across the whole app
-* `currentUser` is `null` when no one is logged in — always check for this
-
----
-
----
-
-# Connecting an API
-
-## What is an API?
-
-An API is how two applications talk to each other.
-
-### Analogy
-
-* You = your app
-* Restaurant Kitchen = external data server
-* Waiter = API
-
-You tell the waiter what you want → the kitchen makes it → the waiter brings it back.
-
----
-
-## This App: MealDB API
-
-MealDB gives us:
-
-* Food details and ingredients by name
-* Dietary category filters (Vegan, Vegetarian, Seafood)
-* Ingredient images
-
-No API key needed for the free tier.
-
----
-
-## Fetching Data
-
-```javascript
-const response = await fetch(
-  `https://www.themealdb.com/api/json/v1/1/search.php?s=${foodName}`
-);
-const apiData = await response.json();
-```
-
----
-
-## Key Concepts
-
-### async / await
-
-Code that "waits" for data before continuing.
-Without it, you'd try to display data before it arrives.
-
-```javascript
-// Wrong — data isn't there yet
-const data = fetch(url);         // returns a Promise, not data
-
-// Right — wait for it
-const response = await fetch(url);
-const data = await response.json();
-```
-
-### try / catch
-
-Handles errors safely — network issues, bad responses, typos.
-
-```javascript
-try {
-  const response = await fetch(url);
-  const data = await response.json();
-  // use data here
-} catch (error) {
-  console.error("Something went wrong:", error);
-}
-```
-
----
-
-## Example Flow (Food.jsx)
-
-1. User clicks a food card
-2. `fetchFoodDetails()` runs
-3. Fetch request sent to MealDB with the food name
-4. Response comes back with ingredients + nutrition
-5. `setFoodDetails(...)` updates React state
-6. UI re-renders with real data
-
----
-
-## Key Takeaways
-
-* `async/await` lets you write async code that reads like normal code
-* Always wrap API calls in `try/catch`
-* Never expose API keys in code — use `.env`
-
----
-
----
-
-# CRUD Using Firestore
-
-## What is CRUD?
-
-Every real app needs to do four things to data:
-
-* **Create** → Save something new
-* **Read** → Fetch it back
-* **Update** → Change it
-* **Delete** → Remove it
-
----
-
-## This App: Saving Favorites to Firestore
-
-Old approach: `localStorage` — data lives in the browser only. Refresh on another device? Gone.
-
-New approach: **Firestore** — data lives in the cloud. Works everywhere, forever.
-
----
-
-## Firestore Data Structure
-
-```
-favorites/                  ← collection
-  {userId}/                 ← one document per user (keyed by their UID)
-    items: [                ← array of favorited foods
-      { id, name, image, price, category },
-      ...
-    ]
-```
-
-One document per user. UID is the document ID.
-
----
-
-## Read — Load Favorites
-
-```javascript
-// Runs when the user logs in
-const snap = await getDoc(doc(db, "favorites", currentUser.uid));
-if (snap.exists()) {
-  setFavorites(snap.data().items || []);
-}
-```
-
----
-
-## Create / Update — Save Favorites
-
-```javascript
-// When the user clicks ❤️ — overwrite the whole items array
-await setDoc(doc(db, "favorites", currentUser.uid), {
-  items: updatedFavorites,
-});
-```
-
-We read the current list, add or remove the item, then write the whole thing back.
-
----
-
-## The "It's Alive" Moment
-
-1. Log in → click ❤️ on a food card
-2. Open **Firebase Console → Firestore → Data**
-3. Find `favorites → your UID → items`
-4. **It's there.** In the cloud. In real time.
-5. Refresh the page → still there
-6. Open another browser → still there
-
-That's the difference between localStorage and a real backend.
-
----
-
-## What Happens If You're Not Logged In?
-
-```javascript
-if (!currentUser) {
-  addToast("🔒 Log in to save favorites!");
-  return;
-}
-```
-
-No user → no UID → can't write to Firestore.
-The app gracefully tells the user instead of crashing.
-
----
-
-## Firestore Security Rules
-
-Controls who can read/write what. Without rules, anyone can access any document.
-
-```
-match /favorites/{userId} {
-  allow read, write: if request.auth != null
-                     && request.auth.uid == userId;
-}
-```
-
-Translation: **"You can only touch your own document."**
-
----
-
-## Key Takeaways
-
-* CRUD is the backbone of every real app
-* Firestore replaces localStorage with cloud persistence
-* Auth + Firestore together = data that belongs to a specific person
-* Security rules are what make this safe
-
----
-
-## What Students Should Be Able to Answer
-
-* Why do we use environment variables instead of pasting keys directly?
-* What does Firebase Auth give you that you couldn't build in an afternoon?
-* Why do we wrap API calls in `try/catch`?
-* What does Firestore actually look like — what's stored and where?
-* How does every component know who's logged in without asking Firebase each time?
diff --git a/backend/HistoryPage.jsx b/backend/HistoryPage.jsx
deleted file mode 100644
index 211a9b9..0000000
--- a/backend/HistoryPage.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// pages/HistoryPage.jsx
-// ─────────────────────────────────────────────
-// Shows the logged-in user's past food searches.
-// Pulls from Firestore on mount.
-// This proves the Firestore READ is working.
-// ─────────────────────────────────────────────
-
-import { useEffect, useState } from "react";
-import { useAuth }             from "../contexts/AuthContext";
-import { getSearchHistory, clearSearchHistory } from "../utils/SearchHistoryService";
-
-export default function HistoryPage() {
-  const { currentUser }     = useAuth();
-  const [history,  setHistory]  = useState([]);
-  const [loading,  setLoading]  = useState(true);
-  const [error,    setError]    = useState(null);
-  const [clearing, setClearing] = useState(false);
-
-  useEffect(() => {
-    async function load() {
-      const { data, error: fetchError } = await getSearchHistory(currentUser.uid);
-      setLoading(false);
-      if (fetchError) { setError(fetchError); return; }
-      setHistory(data);
-    }
-    load();
-  }, [currentUser]);
-
-  async function handleClear() {
-    setClearing(true);
-    const { error: clearError } = await clearSearchHistory(currentUser.uid);
-    setClearing(false);
-    if (clearError) { setError(clearError); return; }
-    setHistory([]);
-  }
-
-  if (loading) return <p>Loading history...</p>;
-  if (error)   return <p style={{ color: "red" }}>{error}</p>;
-
-  return (
-    <div>
-      <h2>Your Search History</h2>
-
-      {history.length === 0 ? (
-        <p>No searches yet. Go search for a food!</p>
-      ) : (
-        <>
-          <button onClick={handleClear} disabled={clearing}>
-            {clearing ? "Clearing..." : "Clear History"}
-          </button>
-
-          {history.map((item, i) => (
-            <div key={i} style={{ border: "1px solid #ccc", margin: "8px 0", padding: "12px" }}>
-              <strong>"{item.query}"</strong>
-              <span style={{ marginLeft: "12px", color: "#888", fontSize: "12px" }}>
-                {new Date(item.searchedAt).toLocaleString()}
-              </span>
-              <p>Top result: {item.topResult.description}</p>
-              {item.topResult.nutrients?.Calories && (
-                <p>Calories: {item.topResult.nutrients.Calories.value} kcal</p>
-              )}
-            </div>
-          ))}
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/backend/NutritionAPI.js b/backend/NutritionAPI.js
deleted file mode 100644
index 51c5624..0000000
--- a/backend/NutritionAPI.js
+++ /dev/null
@@ -1,116 +0,0 @@
-// utils/NutritionAPI.js
-// ─────────────────────────────────────────────
-// All calls to the USDA FoodData Central API.
-// Docs: https://fdc.nal.usda.gov/api-guide.html
-//
-// Always returns { data, error } — never throws.
-// The frontend just checks: if (error) show error, else show data.
-// ─────────────────────────────────────────────
-
-const BASE    = "https://api.nal.usda.gov/fdc/v1";
-const API_KEY = import.meta.env.VITE_USDA_API_KEY;
-
-// ─────────────────────────────────────────────
-// SEARCH — find foods by name
-// query: string e.g. "apple", "chicken breast"
-// returns list of food items with basic info
-// ─────────────────────────────────────────────
-export async function searchFoods(query) {
-  try {
-    const params = new URLSearchParams({
-      query,
-      api_key:  API_KEY,
-      dataType: "Foundation,SR Legacy",
-      pageSize: 10,
-    });
-    const res = await fetch(`${BASE}/foods/search?${params}`);
-    if (!res.ok) throw Object.assign(new Error(), { status: res.status });
-    const json = await res.json();
-
-    const foods = json.foods || [];
-
-    // Clean up the response — only return what the frontend needs
-    const cleaned = foods.map((food) => ({
-      fdcId:       food.fdcId,
-      description: food.description,
-      brandOwner:  food.brandOwner || null,
-      dataType:    food.dataType,
-      nutrients:   extractNutrients(food.foodNutrients),
-    }));
-
-    return { data: cleaned, error: null };
-  } catch (err) {
-    const msg = err.response?.status === 403
-      ? "Invalid API key. Check your VITE_USDA_API_KEY in .env"
-      : err.response?.status === 429
-      ? "Too many requests. Slow down and try again."
-      : "Failed to fetch foods. Check your internet connection.";
-    return { data: [], error: msg };
-  }
-}
-
-// ─────────────────────────────────────────────
-// GET DETAIL — full nutrient breakdown for one food
-// fdcId: number, e.g. 173944
-// ─────────────────────────────────────────────
-export async function getFoodDetail(fdcId) {
-  try {
-    const res = await fetch(`${BASE}/food/${fdcId}?api_key=${API_KEY}`);
-    if (!res.ok) throw new Error();
-    const food = await res.json();
-
-    return {
-      data: {
-        fdcId:       food.fdcId,
-        description: food.description,
-        dataType:    food.dataType,
-        nutrients:   extractNutrients(food.foodNutrients),
-      },
-      error: null,
-    };
-  } catch (err) {
-    return { data: null, error: "Could not load food details." };
-  }
-}
-
-// ─────────────────────────────────────────────
-// HELPER — pull the nutrients we care about
-// from the raw USDA foodNutrients array.
-// Each nutrient has a nutrientId — these IDs
-// are stable across all USDA foods.
-// ─────────────────────────────────────────────
-function extractNutrients(rawNutrients = []) {
-  // USDA nutrient ID → human-readable label
-  // Full list: https://fdc.nal.usda.gov/food-details/747447/nutrients
-  const NUTRIENT_MAP = {
-    1008: { label: "Calories",          unit: "kcal" },
-    1003: { label: "Protein",           unit: "g"    },
-    1004: { label: "Total Fat",         unit: "g"    },
-    1005: { label: "Carbohydrates",     unit: "g"    },
-    1079: { label: "Fiber",             unit: "g"    },
-    2000: { label: "Total Sugars",      unit: "g"    },
-    1258: { label: "Saturated Fat",     unit: "g"    },
-    1253: { label: "Cholesterol",       unit: "mg"   },
-    1093: { label: "Sodium",            unit: "mg"   },
-    1087: { label: "Calcium",           unit: "mg"   },
-    1089: { label: "Iron",              unit: "mg"   },
-    1092: { label: "Potassium",         unit: "mg"   },
-    1106: { label: "Vitamin A",         unit: "µg"   },
-    1162: { label: "Vitamin C",         unit: "mg"   },
-    1114: { label: "Vitamin D",         unit: "µg"   },
-  };
-
-  const result = {};
-
-  for (const n of rawNutrients) {
-    const id = n.nutrientId ?? n.nutrient?.id;
-    if (NUTRIENT_MAP[id]) {
-      result[NUTRIENT_MAP[id].label] = {
-        value: Math.round((n.value ?? n.amount ?? 0) * 10) / 10, // 1 decimal
-        unit:  NUTRIENT_MAP[id].unit,
-      };
-    }
-  }
-
-  return result;
-}
diff --git a/backend/SearchHistoryService.js b/backend/SearchHistoryService.js
deleted file mode 100644
index 3e55db2..0000000
--- a/backend/SearchHistoryService.js
+++ /dev/null
@@ -1,92 +0,0 @@
-// utils/SearchHistoryService.js
-// ─────────────────────────────────────────────
-// Saves and retrieves a user's food search history in Firestore.
-//
-// Firestore structure:
-//   searchHistory/          ← collection
-//     {uid}/                ← one document per user (keyed by their UID)
-//       searches: [         ← array of search records
-//         {
-//           query:      "banana",
-//           searchedAt: Timestamp,
-//           topResult:  { fdcId, description, nutrients }
-//         },
-//         ...
-//       ]
-// ─────────────────────────────────────────────
-
-import {
-  doc,
-  getDoc,
-  setDoc,
-  updateDoc,
-  arrayUnion,
-} from "firebase/firestore";
-import { db } from "../firebase/firebase";
-
-const histRef = (uid) => doc(db, "searchHistory", uid);
-
-// ─────────────────────────────────────────────
-// READ — get all past searches for a user
-// ─────────────────────────────────────────────
-export async function getSearchHistory(uid) {
-  try {
-    const snap = await getDoc(histRef(uid));
-    if (!snap.exists()) return { data: [], error: null };
-
-    // Return newest first
-    const searches = snap.data().searches || [];
-    return { data: [...searches].reverse(), error: null };
-  } catch (err) {
-    return { data: [], error: "Could not load search history." };
-  }
-}
-
-// ─────────────────────────────────────────────
-// WRITE — save a search result to history
-// query:     the string the user searched
-// topResult: the first food item returned (fdcId, description, nutrients)
-// ─────────────────────────────────────────────
-export async function saveSearchToHistory(uid, query, topResult) {
-  const record = {
-    query,
-    searchedAt: new Date().toISOString(), // ISO string — easier to display than Firestore Timestamp
-    topResult: {
-      fdcId:       topResult.fdcId,
-      description: topResult.description,
-      nutrients:   topResult.nutrients,
-    },
-  };
-
-  try {
-    const snap = await getDoc(histRef(uid));
-
-    if (!snap.exists()) {
-      // First search — create the document
-      await setDoc(histRef(uid), { searches: [record] });
-    } else {
-      // Append to existing array
-      // Note: arrayUnion won't work here because objects with timestamps
-      // won't match — we use updateDoc + arrayUnion with the full record
-      await updateDoc(histRef(uid), {
-        searches: arrayUnion(record),
-      });
-    }
-
-    return { error: null };
-  } catch (err) {
-    return { error: "Could not save search." };
-  }
-}
-
-// ─────────────────────────────────────────────
-// DELETE — clear all search history for a user
-// ─────────────────────────────────────────────
-export async function clearSearchHistory(uid) {
-  try {
-    await setDoc(histRef(uid), { searches: [] });
-    return { error: null };
-  } catch (err) {
-    return { error: "Could not clear history." };
-  }
-}
diff --git a/backend/SearchPage.jsx b/backend/SearchPage.jsx
deleted file mode 100644
index a4ecabb..0000000
--- a/backend/SearchPage.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-// pages/SearchPage.jsx
-// ─────────────────────────────────────────────
-// This is the page that proves the backend works.
-// It wires together:
-//   1. USDA API call (NutritionAPI.js)
-//   2. Firestore save (SearchHistoryService.js)
-//   3. Auth state (useAuth)
-//
-// The frontend team can style this however they want —
-// the logic here is what matters.
-// ─────────────────────────────────────────────
-
-import { useState } from "react";
-import { searchFoods }         from "../utils/NutritionAPI";
-import { saveSearchToHistory } from "../utils/SearchHistoryService";
-import { useAuth }             from "../contexts/AuthContext";
-
-export default function SearchPage() {
-  const { currentUser }    = useAuth();
-  const [query,   setQuery]   = useState("");
-  const [results, setResults] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error,   setError]   = useState(null);
-  const [saved,   setSaved]   = useState(false); // did we save to Firestore?
-
-  async function handleSearch(e) {
-    e.preventDefault();
-    if (!query.trim()) return;
-
-    setLoading(true);
-    setError(null);
-    setSaved(false);
-
-    // ── Step 1: Hit USDA API ──────────────────
-    const { data, error: apiError } = await searchFoods(query);
-
-    setLoading(false);
-
-    if (apiError) {
-      setError(apiError);
-      return;
-    }
-
-    if (data.length === 0) {
-      setError(`No foods found for "${query}". Try a different term.`);
-      return;
-    }
-
-    setResults(data);
-
-    // ── Step 2: Save to Firestore (only if logged in) ──
-    if (currentUser) {
-      const { error: saveError } = await saveSearchToHistory(
-        currentUser.uid,
-        query,
-        data[0] // save the top result
-      );
-      if (!saveError) setSaved(true);
-    }
-  }
-
-  return (
-    <div>
-      <h1>Nutrition Search</h1>
-      <p>Powered by USDA FoodData Central</p>
-
-      {/* Search form */}
-      <form onSubmit={handleSearch}>
-        <input
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder='Try "banana", "chicken breast", "oats"'
-        />
-        <button type="submit" disabled={loading}>
-          {loading ? "Searching..." : "Search"}
-        </button>
-      </form>
-
-      {/* Status messages */}
-      {error  && <p style={{ color: "red" }}>{error}</p>}
-      {saved  && <p style={{ color: "green" }}>Search saved to your history!</p>}
-
-      {/* Results */}
-      {results.map((food) => (
-        <div key={food.fdcId} style={{ border: "1px solid #ccc", margin: "8px 0", padding: "12px" }}>
-          <h3>{food.description}</h3>
-          {food.brandOwner && <p><small>{food.brandOwner}</small></p>}
-
-          {/* Nutrition table — hand this structure to the frontend team */}
-          <table>
-            <tbody>
-              {Object.entries(food.nutrients).map(([name, { value, unit }]) => (
-                <tr key={name}>
-                  <td>{name}</td>
-                  <td>{value} {unit}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/backend/firebase_auth_context.js b/backend/firebase_auth_context.js
deleted file mode 100644
index ce4c266..0000000
--- a/backend/firebase_auth_context.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// ══════════════════════════════════════════════
-// firebase/firebase.js
-// ══════════════════════════════════════════════
-// Paste this into src/firebase/firebase.js
-
-import { initializeApp } from "firebase/app";
-import { getAuth }       from "firebase/auth";
-import { getFirestore }  from "firebase/firestore";
-
-const firebaseConfig = {
-  apiKey:            import.meta.env.VITE_FIREBASE_API_KEY,
-  authDomain:        import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-  projectId:         import.meta.env.VITE_FIREBASE_PROJECT_ID,
-  storageBucket:     import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId:             import.meta.env.VITE_FIREBASE_APP_ID,
-};
-
-const app = initializeApp(firebaseConfig);
-export const auth = getAuth(app);
-export const db   = getFirestore(app);
-
-
-// ══════════════════════════════════════════════
-// firebase/auth.js
-// ══════════════════════════════════════════════
-// Paste this into src/firebase/auth.js
-
-import {
-  createUserWithEmailAndPassword,
-  signInWithEmailAndPassword,
-  signOut,
-} from "firebase/auth";
-import { auth } from "./firebase";
-
-export const registerUser = (email, password) =>
-  createUserWithEmailAndPassword(auth, email, password);
-
-export const loginUser = (email, password) =>
-  signInWithEmailAndPassword(auth, email, password);
-
-export const logoutUser = () => signOut(auth);
-
-
-// ══════════════════════════════════════════════
-// contexts/AuthContext.jsx
-// ══════════════════════════════════════════════
-// Paste this into src/contexts/AuthContext.jsx
-
-import { createContext, useContext, useEffect, useState } from "react";
-import { onAuthStateChanged } from "firebase/auth";
-import { auth } from "../firebase/firebase";
-
-const AuthContext = createContext(null);
-
-export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState(null);
-  const [loading, setLoading]         = useState(true);
-
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (user) => {
-      setCurrentUser(user);
-      setLoading(false);
-    });
-    return unsubscribe;
-  }, []);
-
-  if (loading) return <p>Loading...</p>;
-
-  return (
-    <AuthContext.Provider value={{ currentUser }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth() {
-  return useContext(AuthContext);
-}

From b49249f8ee574c0eace708504d3dc82fe672701b Mon Sep 17 00:00:00 2001
From: li-madison <forsterliana@gmail.com>
Date: Sat, 2 May 2026 10:14:21 -0500
Subject: [PATCH 2/7] mereged final and fixed errors

---
 public/index.html                 | 43 +++++++++++++++++++++++++++++++
 src/App.js                        |  2 +-
 src/components/Food.jsx           |  2 +-
 src/components/Navbar.jsx         |  2 +-
 src/components/ToastContainer.jsx |  2 +-
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 public/index.html

diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..aa069f2
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
index f804464..70625a2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider } from './contexts/AuthContext';
-import { AppProvider }  from './context/AppContext';
+import { AppProvider }  from './contexts/AppContext';
 
 import Navbar          from './components/Navbar';
 import Hero            from './components/Hero';
diff --git a/src/components/Food.jsx b/src/components/Food.jsx
index e884c06..d0c70e9 100644
--- a/src/components/Food.jsx
+++ b/src/components/Food.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { AppContext } from '../context/AppContext';
+import { AppContext } from '../contexts/AppContext';
 import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
 
 // Price tier assigned per TheMealDB category
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index fd5858c..db4868b 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from '../context/AppContext';
+import { AppContext } from '../contexts/AppContext';
 import { useAuth } from '../contexts/AuthContext';
 import { logoutUser } from '../firebase/auth';
 import { AiOutlineMenu, AiOutlineSearch, AiOutlineClose, AiFillTag } from 'react-icons/ai';
diff --git a/src/components/ToastContainer.jsx b/src/components/ToastContainer.jsx
index 5d5d92d..5fb762b 100644
--- a/src/components/ToastContainer.jsx
+++ b/src/components/ToastContainer.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { AppContext } from '../context/AppContext';
+import { AppContext } from '../contexts/AppContext';
 
 const ToastContainer = () => {
   const { toasts } = useContext(AppContext);

From 3bd9dc37332e474e15626c95eda6cce2043d0e3a Mon Sep 17 00:00:00 2001
From: Sky1219 <dasarrajuakash@gmail.com>
Date: Sat, 2 May 2026 21:38:38 -0500
Subject: [PATCH 3/7] Update

---
 src/App.js                                |   4 +-
 src/components/Food.jsx                   | 528 +++-------------------
 src/components/Navbar.jsx                 | 183 +-------
 src/components/ToastContainer.jsx         |   2 +-
 src/{contexts => context}/AppContext.js   |   0
 src/{contexts => context}/AuthContext.jsx |   0
 6 files changed, 79 insertions(+), 638 deletions(-)
 rename src/{contexts => context}/AppContext.js (100%)
 rename src/{contexts => context}/AuthContext.jsx (100%)

diff --git a/src/App.js b/src/App.js
index 70625a2..56ee5a7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { AuthProvider } from './contexts/AuthContext';
-import { AppProvider }  from './contexts/AppContext';
+import { AuthProvider } from './context/AuthContext';
+import { AppProvider }  from './context/AppContext';
 
 import Navbar          from './components/Navbar';
 import Hero            from './components/Hero';
diff --git a/src/components/Food.jsx b/src/components/Food.jsx
index d0c70e9..10fba1f 100644
--- a/src/components/Food.jsx
+++ b/src/components/Food.jsx
@@ -1,503 +1,93 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { AppContext } from '../contexts/AppContext';
+import { AppContext } from '../context/AppContext';
 import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
 
-// Price tier assigned per TheMealDB category
-const CATEGORY_PRICES = {
-  Chicken: '$$',
-  Beef: '$$$',
-  Pasta: '$$',
-  Seafood: '$$$$',
-};
-
+// Backend pricing constants
+const CATEGORY_PRICES = { Chicken: '$$', Beef: '$$$', Pasta: '$$', Seafood: '$$$$' };
 const INITIAL_CATEGORIES = Object.keys(CATEGORY_PRICES);
 
 const Food = () => {
-  const [allFoods, setAllFoods] = useState([]);
   const [foods, setFoods] = useState([]);
-  const [foodDetails, setFoodDetails] = useState(null);
-  const [expandedCardId, setExpandedCardId] = useState(null);
-  const [showIngredientsToggle, setShowIngredientsToggle] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [ingredientSearchQuery, setIngredientSearchQuery] = useState('');
   const [isSearching, setIsSearching] = useState(false);
-  const [visibleCount, setVisibleCount] = useState(8);
-
-  const { favorites, toggleFavorite, addToCart } = useContext(AppContext);
-
-  // Fetch initial menu from TheMealDB on mount
-  useEffect(() => {
-    const fetchInitialFoods = async () => {
-      setIsSearching(true);
-      try {
-        const results = await Promise.all(
-          INITIAL_CATEGORIES.map((cat) =>
-            fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?c=${cat}`)
-              .then((r) => r.json())
-              .then((d) =>
-                (d.meals || []).slice(0, 4).map((meal) => ({
-                  id: meal.idMeal,
-                  name: meal.strMeal,
-                  category: cat.toLowerCase(),
-                  image: meal.strMealThumb,
-                  price: CATEGORY_PRICES[cat],
-                }))
-              )
-          )
-        );
-        const combined = results.flat();
-        setAllFoods(combined);
-        setFoods(combined);
-      } catch (error) {
-        console.error('Error fetching initial foods:', error);
-      }
-      setIsSearching(false);
-    };
-
-    fetchInitialFoods();
-  }, []); //end API
+  const { favorites, toggleFavorite } = useContext(AppContext);
 
-  // Ingredient search debounce
-  useEffect(() => {
-    if (!ingredientSearchQuery) return;
-
-    const timeoutId = setTimeout(() => {
-      executeSearch(ingredientSearchQuery);
-    }, 400);
-
-    return () => clearTimeout(timeoutId);
-  }, [ingredientSearchQuery]);
-
-  // Filter by category (local, against pre-loaded allFoods)
-  const filterType = (category) => {
-    setFoods(allFoods.filter((item) => item.category === category));
-  };
-
-  // Filter by price (local, against pre-loaded allFoods)
-  const filterPrice = (price) => {
-    setFoods(allFoods.filter((item) => item.price === price));
-  };
-
-  // Ingredient Search (TheMealDB API)
-  const executeSearch = async (query) => {
-    setIsSearching(true);
-    try {
-      const response = await fetch(
-        `https://www.themealdb.com/api/json/v1/1/filter.php?i=${query}`
-      );
-      const apiData = await response.json();
-
-      if (apiData.meals) {
-        const mappedFoods = apiData.meals.map((meal) => ({
-          id: meal.idMeal,
-          name: meal.strMeal,
-          category: 'searched',
-          image: meal.strMealThumb,
-          price: '$$',
-        }));
-        setFoods(mappedFoods);
-      } else {
-        setFoods([]);
-      }
-    } catch (error) {
-      console.error('Error fetching ingredient search:', error);
-    }
-    setIsSearching(false);
-  };
-
-  // Dietary / category filter (TheMealDB API)
-  const searchByCategory = async (categoryStr) => {
+  // Fetch initial menu from TheMealDB
+  const fetchInitialFoods = async () => {
     setIsSearching(true);
     try {
-      const response = await fetch(
-        `https://www.themealdb.com/api/json/v1/1/filter.php?c=${categoryStr}`
+      const results = await Promise.all(
+        INITIAL_CATEGORIES.map((cat) =>
+          fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?c=${cat}`)
+            .then((r) => r.json())
+            .then((d) =>
+              (d.meals || []).slice(0, 4).map((meal) => ({
+                id: meal.idMeal,
+                name: meal.strMeal,
+                image: meal.strMealThumb,
+                price: CATEGORY_PRICES[cat],
+              }))
+            )
+        )
       );
-      const apiData = await response.json();
-
-      if (apiData.meals) {
-        const mappedFoods = apiData.meals.map((meal) => ({
-          id: meal.idMeal,
-          name: meal.strMeal,
-          category: categoryStr.toLowerCase(),
-          image: meal.strMealThumb,
-          price: '$$$',
-        }));
-        setFoods(mappedFoods);
-      } else {
-        setFoods([]);
-      }
+      setFoods(results.flat());
     } catch (error) {
-      console.error('Error fetching category:', error);
+      console.error('Error fetching initial foods:', error);
     }
     setIsSearching(false);
   };
 
-  // Fetch meal details (ingredients, nutrition) from TheMealDB
-  const fetchFoodDetails = async (food) => {
-    setIsLoading(true);
-    setFoodDetails(null);
-
-    try {
-      const searchTerm = food.name.split(' ').pop();
-      const response = await fetch(
-        `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchTerm}`
-      );
-      const apiData = await response.json();
-
-      let ingredients = [];
-      if (apiData.meals && apiData.meals.length > 0) {
-        const meal = apiData.meals[0];
-        for (let i = 1; i <= 20; i++) {
-          if (meal[`strIngredient${i}`] && meal[`strIngredient${i}`].trim() !== '') {
-            ingredients.push({
-              name: meal[`strIngredient${i}`],
-              measure: meal[`strMeasure${i}`],
-            });
-          }
-        }
-      }
-
-      const COMMON_ALLERGENS = [
-        'cheese', 'milk', 'butter', 'cream', 'nut', 'peanut',
-        'almond', 'shrimp', 'crab', 'soy', 'wheat', 'egg',
-      ];
-
-      ingredients = ingredients.map((ing) => ({
-        ...ing,
-        isAllergen: COMMON_ALLERGENS.some((allergen) =>
-          ing.name.toLowerCase().includes(allergen)
-        ),
-      }));
-
-      const detectedAllergens = ingredients
-        .filter((ing) => ing.isAllergen)
-        .map((ing) => ing.name);
-
-      const mockNutrition = {
-        calories: Math.floor(Math.random() * 500) + 300,
-        protein: Math.floor(Math.random() * 30) + 10,
-        fat: Math.floor(Math.random() * 40) + 10,
-        carbs: Math.floor(Math.random() * 60) + 20,
-      };
-
-      setFoodDetails({ ingredients, nutrition: mockNutrition, detectedAllergens });
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-    setIsLoading(false);
-  };
-
-  const handleCardClick = (item) => {
-    if (expandedCardId === item.id) {
-      setExpandedCardId(null);
-      setShowIngredientsToggle(false);
-    } else {
-      setExpandedCardId(item.id);
-      setShowIngredientsToggle(false);
-      fetchFoodDetails(item);
-    }
-  };
+  useEffect(() => {
+    fetchInitialFoods();
+  }, []);
 
   return (
     <div className='max-w-[1640px] m-auto px-4 py-12'>
       <h1 className='text-orange-600 font-bold text-4xl text-center'>
         Top Rated Menu Items
       </h1>
+      <div className='grid grid-cols-2 lg:grid-cols-4 gap-6 pt-4'>
+        {foods.map((item, index) => {
+          // Check if item is already favorited
+          const isFav = favorites.some(f => f.id === item.id || f.name === item.name);
 
-      <div className='flex flex-col lg:flex-row justify-between'>
-        <div>
-          <p className='font-bold text-gray-700'>Filter Type</p>
-          <div className='flex justfiy-between flex-wrap'>
-            <button
-              onClick={() => setFoods(allFoods)}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              All
-            </button>
-            <button
-              onClick={() => filterType('chicken')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              Chicken
-            </button>
-            <button
-              onClick={() => filterType('beef')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              Beef
-            </button>
-            <button
-              onClick={() => filterType('pasta')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              Pasta
-            </button>
-            <button
-              onClick={() => filterType('seafood')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              Seafood
-            </button>
-          </div>
-        </div>
+          return (
+            <div key={index} className='border shadow-lg rounded-lg hover:scale-105 duration-300 relative'>
 
-        <div>
-          <p className='font-bold text-gray-700'>Filter Price</p>
-          <div className='flex justify-between max-w-[390px] w-full'>
-            <button
-              onClick={() => filterPrice('$')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              $
-            </button>
-            <button
-              onClick={() => filterPrice('$$')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              $$
-            </button>
-            <button
-              onClick={() => filterPrice('$$$')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              $$$
-            </button>
-            <button
-              onClick={() => filterPrice('$$$$')}
-              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
-            >
-              $$$$
-            </button>
-          </div>
-        </div>
-
-        {/* Dietary Filters (live API) */}
-        <div className='mt-4 lg:mt-0'>
-          <p className='font-bold text-gray-700'>Dietary (API)</p>
-          <div className='flex justify-between flex-wrap max-w-[280px] w-full'>
-            <button
-              onClick={() => searchByCategory('Vegan')}
-              className='m-1 border-green-600 text-green-600 hover:bg-green-600 hover:text-white transition-colors'
-            >
-              Vegan
-            </button>
-            <button
-              onClick={() => searchByCategory('Vegetarian')}
-              className='m-1 border-green-600 text-green-600 hover:bg-green-600 hover:text-white transition-colors'
-            >
-              Vegetarian
-            </button>
-            <button
-              onClick={() => searchByCategory('Dessert')}
-              className='m-1 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition-colors'
-            >
-              Dessert
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Ingredient Search Bar */}
-      <div className='mt-8 mb-4 max-w-[600px] m-auto'>
-        <div className='flex items-center justify-between border-2 border-orange-600 rounded-full p-1 bg-white shadow-md'>
-          <input
-            type='text'
-            placeholder="Search by ingredient (e.g. 'chicken', 'garlic')"
-            className='bg-transparent focus:outline-none w-full px-4 text-gray-700'
-            value={ingredientSearchQuery}
-            onChange={(e) => setIngredientSearchQuery(e.target.value)}
-          />
-        </div>
-      </div>
-
-      {isSearching && (
-        <div className='grid grid-cols-2 lg:grid-cols-4 gap-6 pt-4'>
-          {[1, 2, 3, 4].map((n) => (
-            <div
-              key={n}
-              className='border shadow-lg rounded-lg h-[250px] bg-gray-200 animate-pulse'
-            ></div>
-          ))}
-        </div>
-      )}
-
-      {foods.length === 0 && !isSearching && (
-        <p className='text-center mt-8 text-gray-500 font-bold'>
-          No foods found matching those criteria.
-        </p>
-      )}
-
-      {!isSearching && (
-        <div className='grid grid-cols-2 lg:grid-cols-4 gap-6 pt-4'>
-          {foods.slice(0, visibleCount).map((item, index) => {
-            const isFav = favorites.some(
-              (f) => f.id === item.id || f.name === item.name
-            );
-            return (
+              {/* Favorite Button */}
               <div
-                key={index}
-                className='border shadow-lg rounded-lg hover:scale-105 duration-300 overflow-hidden flex flex-col relative'
+                className='absolute top-2 right-2 bg-white/80 p-2 rounded-full cursor-pointer z-10 hover:scale-110 transition-transform'
               >
-                <div
-                  className='absolute top-2 right-2 bg-white/80 p-2 rounded-full cursor-pointer z-10 hover:scale-110 transition-transform'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    toggleFavorite(item);
-                  }}
-                >
-                  {isFav ? (
-                    <AiFillHeart size={24} className='text-red-500' />
-                  ) : (
-                    <AiOutlineHeart size={24} className='text-gray-500' />
-                  )}
-                </div>
-
-                <div
-                  className='absolute top-2 left-2 bg-black/80 text-white px-3 py-1.5 rounded-full cursor-pointer z-10 hover:bg-orange-600 transition-colors shadow flex items-center text-xs font-bold'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    addToCart(item);
-                  }}
-                >
-                  + Cart
-                </div>
-
-                <div className='cursor-pointer' onClick={() => handleCardClick(item)}>
-                  <img
-                    src={item.image}
-                    alt={item.name}
-                    className='w-full h-[200px] object-cover rounded-t-lg'
-                  />
-                  <div className='flex justify-between px-2 py-4'>
-                    <p className='font-bold'>{item.name}</p>
-                    <p>
-                      <span className='bg-orange-500 text-white p-1 rounded-full'>
-                        {item.price}
-                      </span>
-                    </p>
-                  </div>
-                </div>
-
-                {expandedCardId === item.id && (
-                  <div className='p-4 border-t bg-gray-50 flex-grow'>
-                    {isLoading ? (
-                      <div className='flex flex-col space-y-2 py-4 animate-pulse'>
-                        <div className='h-4 bg-gray-300 rounded w-3/4 mx-auto'></div>
-                        <div className='h-20 bg-gray-200 rounded w-full mt-2'></div>
-                      </div>
-                    ) : foodDetails ? (
-                      <div>
-                        <div>
-                          <h3 className='font-bold mb-2 text-orange-600 text-sm'>
-                            Est. Nutrition
-                          </h3>
-                          <div className='flex gap-2 justify-between bg-white p-2 rounded border text-xs'>
-                            <div className='text-center'>
-                              <p className='font-bold'>{foodDetails.nutrition.calories}</p>
-                              <p className='text-gray-500'>Cal</p>
-                            </div>
-                            <div className='text-center'>
-                              <p className='font-bold'>{foodDetails.nutrition.protein}g</p>
-                              <p className='text-gray-500'>Pro</p>
-                            </div>
-                            <div className='text-center'>
-                              <p className='font-bold'>{foodDetails.nutrition.fat}g</p>
-                              <p className='text-gray-500'>Fat</p>
-                            </div>
-                            <div className='text-center'>
-                              <p className='font-bold'>{foodDetails.nutrition.carbs}g</p>
-                              <p className='text-gray-500'>Carbs</p>
-                            </div>
-                          </div>
-                        </div>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setShowIngredientsToggle(!showIngredientsToggle);
-                          }}
-                          className='mt-4 w-full bg-orange-100 text-orange-600 font-bold py-2 rounded border border-orange-200 hover:bg-orange-200 transition-colors'
-                        >
-                          {showIngredientsToggle ? 'Hide Ingredients' : 'Show Ingredients'}
-                        </button>
-
-                        {showIngredientsToggle && (
-                          <div className='mt-4'>
-                            {foodDetails.detectedAllergens &&
-                              foodDetails.detectedAllergens.length > 0 && (
-                                <div className='p-3 mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded shadow-sm'>
-                                  <p className='font-bold flex items-center text-sm'>
-                                    <span className='mr-2 text-lg'>⚠️</span> Allergen Warning
-                                  </p>
-                                  <p className='text-xs mt-1 font-medium'>
-                                    Contains: {foodDetails.detectedAllergens.join(', ')}
-                                  </p>
-                                </div>
-                              )}
-
-                            <h3 className='font-bold mb-2 text-orange-600 text-sm'>
-                              Ingredients List
-                            </h3>
-                            {foodDetails.ingredients.length > 0 ? (
-                              <div className='flex flex-wrap gap-2'>
-                                {foodDetails.ingredients.map((ing, idx) => (
-                                  <div
-                                    key={idx}
-                                    className={`flex items-center p-1 pr-3 border rounded-full shadow-sm max-w-max text-xs transition-transform hover:scale-105 ${
-                                      ing.isAllergen
-                                        ? 'bg-red-50 border-red-300 text-red-800'
-                                        : 'bg-white border-gray-200 text-gray-700'
-                                    }`}
-                                  >
-                                    <img
-                                      src={`https://www.themealdb.com/images/ingredients/${ing.name}-Small.png`}
-                                      alt={ing.name}
-                                      className='w-6 h-6 object-cover rounded-full mr-2 bg-gray-100'
-                                      onError={(e) => {
-                                        e.target.style.display = 'none';
-                                      }}
-                                    />
-                                    <span>
-                                      <span className='font-bold'>{ing.name}</span>{' '}
-                                      <span className='opacity-70 mx-1'>|</span> {ing.measure}
-                                    </span>
-                                  </div>
-                                ))}
-                              </div>
-                            ) : (
-                              <p className='text-sm text-gray-500 italic'>
-                                No ingredients found.
-                              </p>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    ) : (
-                      <p className='text-sm text-gray-500 text-center py-4'>
-                        Failed to load data.
-                      </p>
-                    )}
-                  </div>
-                )}
+                <button onClick={(e) => {
+                  e.stopPropagation();
+                  toggleFavorite(item);
+                }}>
+                  {isFav
+                    ? <AiFillHeart size={24} className='text-red-500' />
+                    : <AiOutlineHeart size={24} className='text-gray-500' />
+                  }
+                </button>
               </div>
-            );
-          })}
-        </div>
-      )}
 
-      {/* Pagination */}
-      {visibleCount < foods.length && !isSearching && (
-        <div className='flex justify-center mt-12'>
-          <button
-            onClick={() => setVisibleCount((prev) => prev + 8)}
-            className='bg-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:bg-orange-700 hover:scale-105 duration-300'
-          >
-            Load More Delights...
-          </button>
-        </div>
-      )}
+              <img
+                src={item.image}
+                alt={item.name}
+                className='w-full h-[200px] object-cover rounded-t-lg'
+              />
+              <div className='flex justify-between px-2 py-4'>
+                <p className='font-bold'>{item.name}</p>
+                <p>
+                  <span className='bg-orange-500 text-white p-1 rounded-full'>
+                    {item.price}
+                  </span>
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };
 
-export default Food;
+export default Food;
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index db4868b..e457c27 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,19 +1,16 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from '../contexts/AppContext';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../context/AuthContext';
 import { logoutUser } from '../firebase/auth';
+
 import { AiOutlineMenu, AiOutlineSearch, AiOutlineClose, AiFillTag } from 'react-icons/ai';
 import { BsFillCartFill, BsFillSaveFill } from 'react-icons/bs';
-import { TbTruckDelivery } from 'react-icons/tb'
-import { FaUserFriends, FaWallet } from 'react-icons/fa'
-import { MdFavorite, MdHelp } from 'react-icons/md'
+import { TbTruckDelivery } from 'react-icons/tb';
+import { FaUserFriends, FaWallet } from 'react-icons/fa';
+import { MdFavorite, MdHelp } from 'react-icons/md';
 
 const Navbar = () => {
   const [nav, setNav] = useState(false);
-  const [favMenuOpen, setFavMenuOpen] = useState(false);
-  const [cartMenuOpen, setCartMenuOpen] = useState(false);
-  const { favorites, cart, removeFromCart, addToast } = useContext(AppContext);
   const { currentUser } = useAuth();
   const navigate = useNavigate();
 
@@ -22,36 +19,6 @@ const Navbar = () => {
     navigate('/login');
   }
 
-  // Form Validation States
-  const [checkoutEmail, setCheckoutEmail] = useState('');
-  const [checkoutCard, setCheckoutCard] = useState('');
-  const [emailError, setEmailError] = useState('');
-  const [cardError, setCardError] = useState('');
-
-  const handleCheckout = (e) => {
-    e.preventDefault();
-    setEmailError('');
-    setCardError('');
-    let isValid = true;
-
-    if (!checkoutEmail.includes('@') || !checkoutEmail.includes('.')) {
-      setEmailError('Please enter a valid email address.');
-      isValid = false;
-    }
-
-    if (checkoutCard.length < 16) {
-      setCardError('Credit card must be 16 digits.');
-      isValid = false;
-    }
-
-    if (isValid) {
-      addToast('🎉 Mock Order Placed Successfully!');
-      setCartMenuOpen(false);
-      setCheckoutEmail('');
-      setCheckoutCard('');
-    }
-  };
-
   return (
     <div className='max-w-[1640px] mx-auto flex justify-between items-center p-4'>
       {/* Left side */}
@@ -71,61 +38,19 @@ const Navbar = () => {
       {/* Search Input */}
       <div className='bg-gray-200 rounded-full flex items-center px-2 w-[200px] sm:w-[400px] lg:w-[500px]'>
         <AiOutlineSearch size={25} />
-        <input
-          className='bg-transparent p-2 w-full focus:outline-none'
-          type='text'
-          placeholder='Search foods'
-        />
+        <input className='bg-transparent p-2 w-full focus:outline-none' type='text' placeholder='Search foods' />
       </div>
-      {/* Auth + Cart + Favorites buttons */}
-      <div className='hidden md:flex gap-2 text-sm relative items-center'>
-        <button
-          onClick={() => setCartMenuOpen(true)}
-          className='bg-black text-white flex items-center px-4 py-2 rounded-full hover:bg-gray-800 transition-colors relative'
-        >
+
+      <div className='hidden md:flex items-center gap-2'>
+        <button className='bg-black text-white flex items-center py-2 px-4 rounded-full'>
           <BsFillCartFill size={20} className='mr-2' /> Cart
-          {cart.length > 0 && (
-            <span className='absolute -top-1 -right-1 bg-orange-600 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs font-bold'>
-              {cart.length}
-            </span>
-          )}
-        </button>
-        <button
-          onClick={() => setFavMenuOpen(!favMenuOpen)}
-          className='border border-orange-600 text-orange-600 flex items-center px-4 py-2 rounded-full font-bold relative hover:bg-orange-100 transition-colors'
-        >
-          <MdFavorite size={20} className='mr-2' /> Favorites
-          {favorites.length > 0 && (
-            <span className='absolute -top-1 -right-1 bg-red-600 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs'>
-              {favorites.length}
-            </span>
-          )}
         </button>
 
-        {/* Favorites Dropdown*/}
-        {favMenuOpen && (
-          <div className='absolute top-12 right-0 bg-white border border-gray-200 shadow-2xl rounded-xl w-[280px] p-4 z-50 flex flex-col gap-2 max-h-[400px] overflow-y-auto'>
-            <h3 className='font-bold border-b pb-2 mb-2 text-orange-600 text-lg'>Your Favorites ❤️</h3>
-            {favorites.length === 0 ? (
-              <p className='text-sm text-gray-500 italic text-center py-4'>No favorites yet.<br />Click the heart on a food card to save it!</p>
-            ) : (
-              favorites.map((fav, i) => (
-                <div key={i} className='flex items-center gap-3 border-b pb-2 last:border-b-0 group'>
-                  <img src={fav.image} alt={fav.name} className='w-12 h-12 rounded-full object-cover shadow-sm' />
-                  <div className='flex flex-col'>
-                    <p className='text-sm font-bold text-gray-800 line-clamp-1' title={fav.name}>{fav.name}</p>
-                    <p className='text-xs text-orange-600 font-bold'>{fav.price || '$$'}</p>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        )}
-
-        {/* Login / Logout */}
         {currentUser ? (
           <div className='flex items-center gap-2 ml-2'>
-            <span className='text-gray-500 text-xs hidden lg:block truncate max-w-[120px]'>{currentUser.email}</span>
+            <span className='text-gray-500 text-xs hidden lg:block truncate max-w-[120px]'>
+              {currentUser.email}
+            </span>
             <button
               id='logout-btn'
               onClick={handleLogout}
@@ -145,18 +70,12 @@ const Navbar = () => {
         )}
       </div>
 
-      {/* Mobile Menu */}
-      {/* Overlay */}
+      {/* Mobile Menu Overlay */}
       {nav ? <div className='bg-black/80 fixed w-full h-screen z-10 top-0 left-0'></div> : ''}
 
-
       {/* Side drawer menu */}
-      <div className={nav ? 'fixed top-0 left-0 w-[300px] h-screen bg-white z-10 duration-300' : 'fixed top-0 left-[-100%] w-[300px] h-screen bg-white z-10 duration-300'}>
-        <AiOutlineClose
-          onClick={() => setNav(!nav)}
-          size={30}
-          className='absolute right-4 top-4 cursor-pointer'
-        />
+      <div className={nav ? 'fixed top-0 left-0 w-[300px] h-screen bg-white z-10 duration-300' : 'fixed top-0 left-[-100%] z-10 duration-300'}>
+        <AiOutlineClose onClick={() => setNav(!nav)} size={30} className='absolute right-4 top-4 cursor-pointer' />
         <h2 className='text-2xl p-4'>
           Best <span className='font-bold'>Eats</span>
         </h2>
@@ -172,76 +91,8 @@ const Navbar = () => {
           </ul>
         </nav>
       </div>
-
-      {/*]Cart Checkout*/}
-      {cartMenuOpen && <div onClick={() => setCartMenuOpen(false)} className='bg-black/80 fixed w-full h-screen z-50 top-0 left-0 transition-opacity'></div>}
-
-      <div className={cartMenuOpen ? 'fixed top-0 right-0 w-[100%] md:w-[400px] h-screen bg-white z-50 duration-300 p-6 overflow-y-auto shadow-2xl' : 'fixed top-0 right-[-100%] w-[100%] md:w-[400px] h-screen bg-white z-50 duration-300 p-6 shadow-2xl'}>
-        <AiOutlineClose
-          onClick={() => setCartMenuOpen(false)}
-          size={30}
-          className='absolute right-4 top-4 cursor-pointer hover:text-red-500 transition-colors'
-        />
-        <h2 className='text-2xl font-bold mb-6 mt-4'>Your <span className='text-orange-600'>Order</span></h2>
-
-        {cart.length === 0 ? (
-          <p className='text-gray-500 italic'>Your cart is empty.</p>
-        ) : (
-          <div className='flex flex-col gap-4 mb-8'>
-            {/* Cart Items List */}
-            {cart.map((item, index) => (
-              <div key={index} className='flex items-center justify-between border-b pb-3'>
-                <div className='flex items-center gap-3'>
-                  <img src={item.image} alt={item.name} className='w-14 h-14 object-cover rounded shadow-sm' />
-                  <p className='font-bold text-sm max-w-[140px] truncate' title={item.name}>{item.name}</p>
-                </div>
-                <div className='flex items-center gap-4'>
-                  <p className='text-orange-600 font-bold text-sm'>{item.price || '$$'}</p>
-                  <button onClick={() => removeFromCart(index)} className='p-1 bg-red-50 text-red-600 hover:bg-red-100 rounded text-xs font-bold transition-colors'>Remove</button>
-                </div>
-              </div>
-            ))}
-
-            <div className='flex justify-between font-bold text-xl mt-4 bg-gray-50 p-4 rounded-lg'>
-              <p>Total:</p>
-              <p className='text-orange-600'>$$$</p>
-            </div>
-
-            {/* Mock Checkout Form*/}
-            <h3 className='font-bold mt-6 mb-2 border-b pb-2'>Checkout Details</h3>
-            <form onSubmit={handleCheckout} className='flex flex-col gap-3'>
-              <div>
-                <input
-                  type="email"
-                  placeholder="Email Address"
-                  className={`border w-full p-3 rounded focus:outline-none focus:ring-2 ${emailError ? 'border-red-500 ring-red-200' : 'focus:ring-orange-200 focus:border-orange-600'}`}
-                  value={checkoutEmail}
-                  onChange={(e) => setCheckoutEmail(e.target.value)}
-                />
-                {emailError && <p className='text-red-500 text-xs mt-1 font-bold'>{emailError}</p>}
-              </div>
-
-              <div>
-                <input
-                  type="text"
-                  placeholder="Credit Card (16 Digits)"
-                  className={`border w-full p-3 rounded focus:outline-none focus:ring-2 ${cardError ? 'border-red-500 ring-red-200' : 'focus:ring-orange-200 focus:border-orange-600'}`}
-                  value={checkoutCard}
-                  onChange={(e) => setCheckoutCard(e.target.value.replace(/\D/g, ''))} // Only allow numbers
-                  maxLength="16"
-                />
-                {cardError && <p className='text-red-500 text-xs mt-1 font-bold'>{cardError}</p>}
-              </div>
-
-              <button className='bg-orange-600 text-white font-bold text-lg py-4 rounded-lg mt-4 hover:bg-orange-700 transition-colors shadow-lg'>
-                Complete Mock Order
-              </button>
-            </form>
-          </div>
-        )}
-      </div>
     </div>
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/ToastContainer.jsx b/src/components/ToastContainer.jsx
index 5fb762b..5d5d92d 100644
--- a/src/components/ToastContainer.jsx
+++ b/src/components/ToastContainer.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { AppContext } from '../contexts/AppContext';
+import { AppContext } from '../context/AppContext';
 
 const ToastContainer = () => {
   const { toasts } = useContext(AppContext);
diff --git a/src/contexts/AppContext.js b/src/context/AppContext.js
similarity index 100%
rename from src/contexts/AppContext.js
rename to src/context/AppContext.js
diff --git a/src/contexts/AuthContext.jsx b/src/context/AuthContext.jsx
similarity index 100%
rename from src/contexts/AuthContext.jsx
rename to src/context/AuthContext.jsx

From 37ee4832b9a3975ca9dba9ebe6a717dbbde8df85 Mon Sep 17 00:00:00 2001
From: SafeBigfoot65 <tobennanwosu10@gmail.com>
Date: Sun, 3 May 2026 17:44:18 -0500
Subject: [PATCH 4/7] Project Done

Co-authored-by: Copilot <copilot@github.com>
---
 package-lock.json                 | 56 +++++--------------
 package.json                      |  4 +-
 src/App.js                        | 16 +++++-
 src/components/Category.jsx       | 13 ++++-
 src/components/Food.jsx           | 42 +++++++++++++--
 src/components/HeadlineCards.jsx  | 41 +++++++++++++-
 src/components/Hero.jsx           | 15 +++++-
 src/components/Navbar.jsx         | 90 ++++++++++++++++++++++++++++++-
 src/components/ToastContainer.jsx | 11 +++-
 src/context/AppContext.js         | 32 ++++++++++-
 yarn.lock                         | 26 ++++-----
 11 files changed, 276 insertions(+), 70 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e4e2d38..f2855d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,10 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^13.0.0",
         "@testing-library/user-event": "^13.2.1",
-        "firebase": "^12.12.0",
+        "firebase": "^12.12.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-icons": "^4.4.0",
+        "react-icons": "^4.12.0",
         "react-router-dom": "^7.14.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.0"
@@ -64,7 +64,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.9.tgz",
       "integrity": "sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -965,7 +964,6 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz",
       "integrity": "sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.18.6"
       },
@@ -1568,7 +1566,6 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz",
       "integrity": "sha512-Mz7xMPxoy9kPS/JScj6fJs03TZ/fZ1dJPlMjRAgTaxaS0fUBk8FV/A2rRgfPsVCZqALNwMexD+0Uaf5zlcKPpw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-module-imports": "^7.18.6",
@@ -2343,9 +2340,9 @@
       }
     },
     "node_modules/@firebase/ai": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-2.11.0.tgz",
-      "integrity": "sha512-+oqOne/h5J51LezazR+VyzKe3AK455W29JXnb4jOeVvQhC7FymledN5+XE+w5vEcMhRQ6n1f62fdGs4A44X32A==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-2.11.1.tgz",
+      "integrity": "sha512-WGTF81W3WBKJY+c7xqTzO15OGAkCAs8cpADqflAI0skhTZjIkhF0qyf55rq4Ctt6jKygkv99rPfMrjAHTgXaVQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@firebase/app-check-interop-types": "0.3.3",
@@ -2405,7 +2402,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.14.11.tgz",
       "integrity": "sha512-yxADFW35LYkP8oSGobGsYIrI42I+GPCvKTNHx4meT9Yq3C950IVz1eANoBk822I9tbKv1wyv9P4Bv1G5TpucFw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/component": "0.7.2",
         "@firebase/logger": "0.5.0",
@@ -2472,7 +2468,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.5.11.tgz",
       "integrity": "sha512-KaACDjXkK5VLpI01vEs592R7/8s5DjFdIXfKoR385ly1SmK3Tu+jMHCIB4MsiY5jsez6v7VlEX/3rJ90dVkHyA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/app": "0.14.11",
         "@firebase/component": "0.7.2",
@@ -2489,7 +2484,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.4.tgz",
       "integrity": "sha512-crX9TA5SVYZwLPG7/R16IsH8FLlgkPXjJUVhsVpHVDSqJiq3D/NuFTM5ctxGTExXAOeIn//69tQw47CPerM8MQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/logger": "0.5.0"
       }
@@ -2949,7 +2943,6 @@
       "integrity": "sha512-AmWf3cHAOMbrCPG4xdPKQaj5iHnyYfyLKZxwz+Xf55bqKbpAmcYifB4jQinT2W9XhDRHISOoPyBOariJpCG6FA==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -4541,7 +4534,8 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.1.19",
@@ -4944,7 +4938,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz",
       "integrity": "sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.30.7",
         "@typescript-eslint/type-utils": "5.30.7",
@@ -4997,7 +4990,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.7.tgz",
       "integrity": "sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.30.7",
         "@typescript-eslint/types": "5.30.7",
@@ -5349,7 +5341,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
       "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5469,7 +5460,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -6278,7 +6268,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001366",
         "electron-to-chromium": "^1.4.188",
@@ -6985,7 +6974,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -7944,7 +7932,6 @@
       "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.0",
         "@humanwhocodes/config-array": "^0.9.2",
@@ -8445,7 +8432,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -9240,12 +9226,12 @@
       }
     },
     "node_modules/firebase": {
-      "version": "12.12.0",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-12.12.0.tgz",
-      "integrity": "sha512-5Ap+pN5iEJUvBlQEZEmLuUm7Gvu6I5xv1jZ5SiSNyw4jrwlHo+4tmZv3OPPoKfN9eo1kBwyyBvi+pWHIPXwfYw==",
+      "version": "12.12.1",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-12.12.1.tgz",
+      "integrity": "sha512-ee7xA+bTJLfjB9BP/8FQr3EkxmpAAGc1lNc5QkWgTDpUw24HYXFPm7FEWRdLtGnygxIdYpFmepSc5VjkI6NHhw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@firebase/ai": "2.11.0",
+        "@firebase/ai": "2.11.1",
         "@firebase/analytics": "0.10.21",
         "@firebase/analytics-compat": "0.2.27",
         "@firebase/app": "0.14.11",
@@ -10851,7 +10837,6 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
       "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^27.5.1",
         "import-local": "^3.0.2",
@@ -13698,7 +13683,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -14503,7 +14487,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -15624,7 +15607,6 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
       "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -16008,7 +15990,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -16164,7 +16145,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -16180,9 +16160,9 @@
       "license": "MIT"
     },
     "node_modules/react-icons": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
-      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*"
@@ -16199,7 +16179,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16682,7 +16661,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.0.tgz",
       "integrity": "sha512-vL8xjY4yOQEw79DvyXLijhnhh+R/O9zpF/LEgkCebZFtb6ELeN9H3/2T0r8+mp+fFTBHZ5qGpOpW2ela2zRt3g==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -18038,7 +18016,6 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "license": "(MIT OR CC0-1.0)",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -18380,7 +18357,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.73.0.tgz",
       "integrity": "sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -18451,7 +18427,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -18505,7 +18480,6 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz",
       "integrity": "sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -18561,7 +18535,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -18903,7 +18876,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
diff --git a/package.json b/package.json
index 591cbbe..0ca0fb1 100644
--- a/package.json
+++ b/package.json
@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "firebase": "^12.12.0",
+    "firebase": "^12.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.12.0",
     "react-router-dom": "^7.14.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"
diff --git a/src/App.js b/src/App.js
index 2033c26..f598e43 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,27 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import { AppProvider } from './context/AppContext';
+import ToastContainer from './components/ToastContainer';
 
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
+import Navbar from './components/Navbar';
+
+import Hero from './components/Hero';
+import HeadlineCards from './components/HeadlineCards';
+import Food from './components/Food';
+import Category from './components/Category';
 
 // Main page layout — all the existing components together
 function MainLayout() {
   return (
-    <div className='flex items-center justify-center h-screen bg-gray-100'>
-      <h1 className='text-4xl font-bold text-orange-600'>Welcome to HackUTD's Devday!</h1>
+    <div>
+      <Navbar />
+      <Hero />
+      <HeadlineCards />
+      <Food />
+      <Category />
+      <ToastContainer />
     </div>
   );
 }
diff --git a/src/components/Category.jsx b/src/components/Category.jsx
index e3ada3a..d4a57a2 100644
--- a/src/components/Category.jsx
+++ b/src/components/Category.jsx
@@ -18,7 +18,18 @@ const Category = () => {
   }, []);
 
   return (
-    <div>
+    <div className='max-w-[1640px] m-auto px-4 py-12'>
+      <h1 className='text-red-600 font-bold text-4xl text-center'>
+        Eat What Makes You Happy
+      </h1>
+      <div className='grid grid-cols-2 md:grid-cols-4 gap-6 py-6'>
+        {categories.map((item, index) => (
+          <div key={index} className='bg-gray-100 rounded-lg p-4 flex flex-col items-center'>
+            <h2 clh2sName='font-bold sm:text-xl'>{item.name}</h2>
+            <img src = {item.image} alt = {item.name} className = 'w-20' />
+          </div>
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Food.jsx b/src/components/Food.jsx
index d7bc4cc..2580e7c 100644
--- a/src/components/Food.jsx
+++ b/src/components/Food.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { AppContext } from '../context/AppContext';
 import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
+import {data} from '../data/data.js';
 
 // Backend pricing constants
 const CATEGORY_PRICES = { Chicken: '$$', Beef: '$$$', Pasta: '$$', Seafood: '$$$$' };
@@ -13,6 +14,7 @@ const Food = () => {
   const { favorites, toggleFavorite } = useContext(AppContext);
 
   // Fetch initial menu from TheMealDB
+  useEffect(() => {
   const fetchInitialFoods = async () => {
     setIsSearching(true);
     try {
@@ -23,7 +25,7 @@ const Food = () => {
             .then((d) =>
               (d.meals || []).slice(0, 4).map((meal) => ({
                 id: meal.idMeal,
-                name: meal.strMeal,
+                namefet: meal.strMeal,
                 image: meal.strMealThumb,
                 price: CATEGORY_PRICES[cat],
               }))
@@ -31,16 +33,50 @@ const Food = () => {
         )
       );
       setFoods(results.flat());
+      console.log('Initial foods fetched:', results.flat());
     } catch (error) {
       console.error('Error fetching initial foods:', error);
     }
     setIsSearching(false);
   };
+  fetchInitialFoods();
+}, []);
 
   return (
-    <div>
-
+    <div className='max-w-[1640px] m-auto px-4 py-12'>
+      <h1 className='text-red-600 font-bold text-4xl text-center'>
+        Top Rated Menu Items
+      </h1>
+      <div className='grid grid-cols-2 lg:grid-cols-4 gap-6 pt-4'>
+        {foods.map((item, index) => {
+          const isFav = favorites.some(f => f.id === item.id || f.name === item.namefet);
+          return (
+          <div key ={index} className='relative border shadow-lg rounded-lg hover:scale-105 duration-300'>
+            <div className='absolute top-2 right-2 bg-white/80 p-2 rounded-full cursor-pointer z-10 hover:scale-110 transition-transform'>
+              <button onClick={(e) => {
+                e.stopPropagation();
+                toggleFavorite(item);
+                }
+                }>
+                {isFav ? (
+                  <AiFillHeart className='text-red-500' size={24} />
+                ) : (
+                  <AiOutlineHeart className='text-gray-500' size={24} />
+                )}
+              </button>
+            </div>
+            < img src = {item.image} alt = {item.name} className='w-full h-[200px] object-cover rounded-t-lg'/>
+            <div className='flex justify-between px-2 py-4'>
+              <p className='font-bold'>{item.namefet}</p>
+              <p>
+                <span className='bg-orange-500 text-white p-1 rounded-full'>{item.price}</span>
+              </p>
+            </div>
+          </div>
+        );})}
+      </div>
     </div>
+
   );
 };
 
diff --git a/src/components/HeadlineCards.jsx b/src/components/HeadlineCards.jsx
index 8e8717b..f195d6f 100644
--- a/src/components/HeadlineCards.jsx
+++ b/src/components/HeadlineCards.jsx
@@ -2,7 +2,46 @@ import React from 'react';
 
 const HeadlineCards = () => {
   return (
-    <div>
+    <div className='max-w-[1640px] mx-auto p-4 py-12 grid md:grid-cols-3 gap-6'>
+      {/* First Card */}
+      <div className='rounded-xl relative'>
+          {/* Overlay */}
+        <div className='absolute w-full h-full bg-black/50 rounded-xl text-white'>
+          <p className='font-bold text-2xl px-2 pt-4'>Sun's Out, BOGO's Out</p>
+          <p className='px-2'>Through 8/26</p>
+          <button className='border-white bg-white text-black mx-2 absolute bottom-4'>Order Now</button>
+        </div>
+      <img className='max-h-[160px] md:max-h-[200px] w-full object-cover rounded-xl'
+        src = 'https://images.unsplash.com/photo-1613769049987-b31b641f25b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9vZHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60'
+        alt = '/'
+      />
+      </div>
+      {/* Second Card */}
+      <div className='rounded-xl relative'>
+        <div className='absolute w-full h-full bg-black/50 rounded-xl text-white'>
+          {/* Overlay */}
+          <p className='font-bold text-2xl px-2 pt-4'>Spicy Chicken Sandwhich</p>
+          <p className='px-2'>Through 9/25</p>
+          <button className='border-white bg-white text-black mx-2 absolute bottom-4'>Order Now</button>
+        </div>
+        <img className='max-h-[160px] md:max-h-[200px] w-full object-cover rounded-xl'
+        src = 'https://th.bing.com/th/id/OIP.oENz208yD0QFtuRZBAeiaQHaEK?w=285&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3'
+        alt = '/'
+      />
+      </div>
+      {/* Third Card */}
+      <div className='rounded-xl relative'>
+        <div className='absolute w-full h-full bg-black/50 rounded-xl text-white'>
+          {/* Overlay */}
+          <p className='font-bold text-2xl px-2 pt-4'>Beef Patty</p>
+          <p className='px-2'>Through 4/9</p>
+          <button className='border-white bg-white text-black mx-2 absolute bottom-4'>Order Now</button>
+        </div>
+        <img className='max-h-[160px] md:max-h-[200px] w-full object-cover rounded-xl'
+        src = 'https://chefbiting.com/wp-content/uploads/2025/12/3-6.webp'
+        alt = '/'
+      />
+      </div>
     </div>
   );
 };
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 4523189..907f287 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -2,7 +2,20 @@ import React from 'react';
 
 const Hero = () => {
   return (
-    <div>
+    <div className='max-w-[1640px] mx-auto p-4'>
+      <div className = 'max-h-[500px] relative'>
+        <div className = 'absolute w-full h-full text-gray-200 max-h-[500px] bg-black/40 flex flex-col justify-center'>
+          <h1 className='px-4 text-4xl font-bold'>The <span className='text-orange-500'>Best</span>
+          </h1>
+          <h1 className='px-4 text-4xl font-bold'><span className='text-orange-500'>Foods</span> Delivered
+
+          </h1>
+        </div>
+        <img className = 'w-full max-h-[500px] object-cover'
+          src = 'https://th.bing.com/th/id/R.6fdface4471867ef989100efd8fafce5?rik=Ld9jNTpmZ4GVxA&riu=http%3a%2f%2fwww.pandaexpress.com.ph%2fsites%2fph%2ffiles%2fstyles%2fproduct_tile_2x%2fpublic%2f2023-03%2fBigger-Plate.jpg%3fitok%3dnI3V9fut&ehk=kpmINJDhjh75%2be2n7lPmKnH633CNKyrrGvari6hqm9s%3d&risl=&pid=ImgRaw&r=0'
+          alt = '/'
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index d82094f..5080e9f 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,7 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { logoutUser } from '../firebase/auth';
+import { AiOutlineMenu, AiOutlineSearch, AiOutlineClose, AiFillTag } from 'react-icons/ai';
+import { BsFillCartFill, BsFillSaveFill } from 'react-icons/bs';
+import {TbTruckDelivery} from 'react-icons/tb';
+import {FaUserFriends, FaWallet} from 'react-icons/fa';
+import {MdFavorite, MdHelp} from 'react-icons/md';
 
 const Navbar = () => {
   const [nav, setNav] = useState(false);
@@ -16,9 +21,90 @@ const Navbar = () => {
   }
 
   return (
-    <div>
+    <div className='max-w-[1640px] mx-auto flex justify-between items-center p-4'>
+      <div className='flex items-center'>
+        <div onClick = {() => setNav(!nav)} className = 'cursor-pointer'>
+          <AiOutlineMenu size = {30} />
+        </div>
+        <h1 className = 'text-2xl sm:text-3xl lg:text-4xl px-2'>
+          Best <span>Eats</span>
+        </h1>
+        <div className='hidden lg:flex items-center bg-gray-200
+          rounded-full p-1 text-[14px]'>
+          <p className='bg-black text-white rounded-full p-2'>Delivery</p>
+          <p className='p-2'>Pickup</p>
+        </div>
+      </div>
+
+      <div className='bg-gray-200 rounded-full flex items-center px-2 w-[200px] sm:w-[400px] lg:w-[500px]'>
+        <AiOutlineSearch size = {25}/>
+        <input className='bg-transparent p-2 w-full focus:outline-none' type ='text' placeholder= 'Search Foods' />
+      </div>
+
+      <div className='hidden md:flex items-center gap-2'>
+        <button className='bg-black text-white flex items-center py-2 px-4 rounded-full'>
+          <BsFillCartFill size={20} className='mr-2' /> Cart
+        </button>
+      </div>
+
+      {currentUser ? (
+        <div className='flex items-center gap-2 ml-2'>
+          <span className='text-gray-500 text-xs hidden lg:block truncate max-w-[120px]'>
+            {currentUser.email}
+          </span>
+
+          <button
+            id = 'logout-btn'
+            onClick = {handleLogout}
+            className = 'border border-gray-300 text-gray-600 px-3 py-2 rounded-full text-xs font-bold hover:bg-gray-100 transition-color'>
+            Logout
+          </button>
+        </div>
+        ) : (
+          <button id = 'login-btn'
+          onClick = {() => navigate('/login')}
+          className='bg-orange-600 text-white px-4 py-2 rounded-full
+          text-sm font-bold hover:bg-orange-700 transition-colors ml-2'>
+            Login
+          </button>
+        )
+        }
+
+        {/* Mobile Menu */}
+        {/* Overlay */}
+        {nav ? <div className='bg-black/80 fixed w-full h-screen z-10 top-0 left-0'>
+              {/* Side drawer menu */}
+
+          <div className='fixed top-0 left-0 w-[300px] h-screen bg-white z-10 duration-300'>
+            <AiOutlineClose onClick ={() => setNav(!nav)} size={30} className='absolute right-4 top-4 cursor-pointer'/>
+            <h2 className='text=2xl p-4'>
+              Best <span className='font-bold'>Eats</span>
+            </h2>
+
+            <nav>
+              <ul className='flex flex-col p-4 text-gray-800'>
+                <li className='text-xl py-4 flex'>
+                  <TbTruckDelivery size={25} className='mr-4' /> Orders
+                </li>
+
+                <li className ='text=xl py-4 flex'><MdFavorite size={25} className='mr-4' /> Favorites</li>
+                <li className ='text=xl py-4 flex'><FaWallet size={25} className='mr-4' /> Wallet</li>
+                <li className ='text=xl py-4 flex'><MdHelp size={25} className='mr-4' /> Help</li>
+                <li className ='text=xl py-4 flex'><AiFillTag size={25} className='mr-4' /> Promotions</li>
+                <li className ='text=xl py-4 flex'><BsFillSaveFill size={25} className='mr-4' /> Best Ones</li>
+                <li className ='text=xl py-4 flex'><FaUserFriends size={25} className='mr-4' /> Invite Friends</li>
+
+              </ul>
+
+              
+            </nav>
+          </div>
+      </div> : ''}
+
+        
 
     </div>
+
   );
 };
 
diff --git a/src/components/ToastContainer.jsx b/src/components/ToastContainer.jsx
index 36a15b5..6339a61 100644
--- a/src/components/ToastContainer.jsx
+++ b/src/components/ToastContainer.jsx
@@ -1,8 +1,15 @@
-import React from 'react';
+import React, {useContext} from 'react';
+import { AppContext } from '../context/AppContext';
 
 const ToastContainer = () => {
+  const { toasts } = useContext(AppContext);
   return (
-    <div>
+    <div className='fixed bottom-4 right-4 z-[100] flex flex-col gap-2'>
+      {toasts.map((toast) => (
+        <div key={toast.id} className='bg-black/80 text-white font-bold py-3 px-6 rounded-lg shadow'>
+          {toast.message}
+        </div>
+      ))}
     </div>
   );
 };
diff --git a/src/context/AppContext.js b/src/context/AppContext.js
index 223c27d..a2f4188 100644
--- a/src/context/AppContext.js
+++ b/src/context/AppContext.js
@@ -39,12 +39,42 @@ export const AppProvider = ({ children }) => {
   }, [currentUser]);
 
   //toggleFavorite
+  const toggleFavorite = (food) => {
+    if (!currentUser){
+      addToast('🔒 Log in to save favorites!');
+      return;
+    }
+
+    setFavorites((prev) => {
+      const exists = prev.some((f) => f.id === food.id || f.name === food.name);
+      let updated;
+      if (exists) {
+        updated = prev.filter((f) => f.id !== food.id && f.name !== food.name);
+      } else {
+        updated = [...prev, food];
+      }
+      saveFavoritesToFirestore(updated);
+      return updated;
+    });
+  };
 
   // Toasts
+  const [toasts , setToasts] = useState([]);
+  const addToast = (message) => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    }, 3000);
+    
+  }
 
   return (
     <AppContext.Provider value={{
-      favorites
+      favorites,
+      toggleFavorite,
+      toasts,
+      addToast
     }}>
       {children}
     </AppContext.Provider>
diff --git a/yarn.lock b/yarn.lock
index b7455c2..8d35fe3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1184,10 +1184,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@firebase/ai@2.11.0":
-  version "2.11.0"
-  resolved "https://registry.npmjs.org/@firebase/ai/-/ai-2.11.0.tgz"
-  integrity sha512-+oqOne/h5J51LezazR+VyzKe3AK455W29JXnb4jOeVvQhC7FymledN5+XE+w5vEcMhRQ6n1f62fdGs4A44X32A==
+"@firebase/ai@2.11.1":
+  version "2.11.1"
+  resolved "https://registry.npmjs.org/@firebase/ai/-/ai-2.11.1.tgz"
+  integrity sha512-WGTF81W3WBKJY+c7xqTzO15OGAkCAs8cpADqflAI0skhTZjIkhF0qyf55rq4Ctt6jKygkv99rPfMrjAHTgXaVQ==
   dependencies:
     "@firebase/app-check-interop-types" "0.3.3"
     "@firebase/component" "0.7.2"
@@ -4940,12 +4940,12 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
-firebase@^12.12.0:
-  version "12.12.0"
-  resolved "https://registry.npmjs.org/firebase/-/firebase-12.12.0.tgz"
-  integrity sha512-5Ap+pN5iEJUvBlQEZEmLuUm7Gvu6I5xv1jZ5SiSNyw4jrwlHo+4tmZv3OPPoKfN9eo1kBwyyBvi+pWHIPXwfYw==
+firebase@^12.12.1:
+  version "12.12.1"
+  resolved "https://registry.npmjs.org/firebase/-/firebase-12.12.1.tgz"
+  integrity sha512-ee7xA+bTJLfjB9BP/8FQr3EkxmpAAGc1lNc5QkWgTDpUw24HYXFPm7FEWRdLtGnygxIdYpFmepSc5VjkI6NHhw==
   dependencies:
-    "@firebase/ai" "2.11.0"
+    "@firebase/ai" "2.11.1"
     "@firebase/analytics" "0.10.21"
     "@firebase/analytics-compat" "0.2.27"
     "@firebase/app" "0.14.11"
@@ -7935,10 +7935,10 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-icons@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz"
-  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+react-icons@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz"
+  integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
 
 react-is@^16.13.1:
   version "16.13.1"

From 17909aa5db57e861cd529c8d447b1b1c71a12766 Mon Sep 17 00:00:00 2001
From: SafeBigfoot65 <tobennanwosu10@gmail.com>
Date: Sun, 3 May 2026 17:58:05 -0500
Subject: [PATCH 5/7] Changes to Food.jsx

---
 src/components/Food.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Food.jsx b/src/components/Food.jsx
index 2580e7c..f5dcf44 100644
--- a/src/components/Food.jsx
+++ b/src/components/Food.jsx
@@ -9,8 +9,6 @@ const INITIAL_CATEGORIES = Object.keys(CATEGORY_PRICES);
 
 const Food = () => {
   const [foods, setFoods] = useState([]);
-  const [ingredientSearchQuery, setIngredientSearchQuery] = useState('');
-  const [isSearching, setIsSearching] = useState(false);
   const { favorites, toggleFavorite } = useContext(AppContext);
 
   // Fetch initial menu from TheMealDB

From 075e293a4f7119fd3549610dcaf4bfdfb6537f9a Mon Sep 17 00:00:00 2001
From: SafeBigfoot65 <tobennanwosu10@gmail.com>
Date: Sun, 3 May 2026 18:00:44 -0500
Subject: [PATCH 6/7] More changes to Food,jsx

---
 src/components/Food.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Food.jsx b/src/components/Food.jsx
index f5dcf44..9626ea6 100644
--- a/src/components/Food.jsx
+++ b/src/components/Food.jsx
@@ -14,7 +14,6 @@ const Food = () => {
   // Fetch initial menu from TheMealDB
   useEffect(() => {
   const fetchInitialFoods = async () => {
-    setIsSearching(true);
     try {
       const results = await Promise.all(
         INITIAL_CATEGORIES.map((cat) =>
@@ -35,7 +34,6 @@ const Food = () => {
     } catch (error) {
       console.error('Error fetching initial foods:', error);
     }
-    setIsSearching(false);
   };
   fetchInitialFoods();
 }, []);

From ac888019fee997ea6914e296048ec389b42a3f10 Mon Sep 17 00:00:00 2001
From: SafeBigfoot65 <tobennanwosu10@gmail.com>
Date: Sun, 3 May 2026 18:13:17 -0500
Subject: [PATCH 7/7] .

---
 src/components/Food.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Food.jsx b/src/components/Food.jsx
index 9626ea6..543fe2a 100644
--- a/src/components/Food.jsx
+++ b/src/components/Food.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { AppContext } from '../context/AppContext';
 import { AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
-import {data} from '../data/data.js';
+// import {data} from '../data/data.js';
 
 // Backend pricing constants
 const CATEGORY_PRICES = { Chicken: '$$', Beef: '$$$', Pasta: '$$', Seafood: '$$$$' };