Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/bhavnesh7781/Food-Delivery-App/llms.txt

Use this file to discover all available pages before exploring further.

The food menu is the heart of the customer-facing app. When the application first loads, all available dishes are fetched from the backend and stored in a global context. Customers can then scroll through the full catalogue or narrow their view to a specific category — and add or remove items directly from each card without leaving the page.

​
How the Menu Works

The StoreContextProvider in StoreContext.jsx calls GET /api/food/list as part of its initial loadData effect. The response is stored in the food_list state array and shared across the entire app through React Context. Every component that needs the menu — the display grid, the cart, the order summary — reads from this single source of truth. 
const fetchFoodList = async () => {
  const response = await axios.get(url + "/api/food/list");
  setFoodList(response.data.data);
};
food_list is populated once on app mount. The menu reflects the catalogue as it existed at page load. Refreshing the page re-fetches the latest items from the database.

​
Categories

The ExploreMenu component renders a horizontally scrollable row of category icons. Clicking a category icon sets the active category state in the parent Home page, which is passed down to FoodDisplay to filter the grid.

Salad

Fresh salads and vegetable-forward dishes.

Rolls

Stuffed and grilled rolls for on-the-go eating.

Deserts

Sweet desserts to end your meal.

Sandwich

Classic and gourmet sandwiches.

Cake

Celebration and everyday cakes.

Pure Veg

100 % vegetarian dishes.

Pasta

Italian-style pasta preparations.

Noodles

Asian noodle bowls and stir-fries.
Clicking a category a second time deselects it and returns the grid to the All view: 
onClick={() =>
  setCategory(prev => prev === item.menu_name ? "All" : item.menu_name)
}

​
FoodDisplay Component

FoodDisplay receives the active category prop and iterates over food_list. Items whose category does not match the selection are skipped; when the category is "All", every item is rendered. 
{food_list.map((item, index) => {
  if (category === "All" || category === item.category) {
    return (
      <FoodItem
        key={index}
        id={item._id}
        name={item.name}
        description={item.description}
        price={item.price}
        image={item.image}
      />
    );
  }
})}

​
FoodItem Card

Each FoodItem card displays:
  • Image — loaded from /images/<filename> on the backend server
  • Name — the dish’s title
  • Description — a short text describing the dish
  • Price — displayed as Rs.<price>
  • Rating stars — a static star-rating graphic
  • Cart controls — a + button when the item is not yet in the cart; once added, an inline counter with − / quantity / + controls appears
<img className="food-item-image" src={url + "/images/" + image} alt="" />

{!cartItems[id]
  ? <img className="add" onClick={() => addToCart(id)} src={assets.add_icon_white} alt="" />
  : <div className="food-item-counter">
      <img onClick={() => removeFromCart(id)} src={assets.remove_icon_red} alt="" />
      <p>{cartItems[id]}</p>
      <img onClick={() => addToCart(id)} src={assets.add_icon_green} alt="" />
    </div>
}

​
Food Data Model

Food documents in MongoDB follow this Mongoose schema (from backend/models/foodModel.js):
FieldTypeRequiredNotes
nameString✅Display name of the dish
descriptionString✅Short description shown on the card
priceNumber✅Price in INR
imageString✅Filename stored in backend/uploads/
categoryString✅One of the 8 supported categories

​
API Response Shape

A successful call to GET /api/food/list returns: 
{
  "success": true,
  "data": [
    {
      "_id": "663a...",
      "name": "Greek Salad",
      "description": "Fresh vegetables and feta cheese",
      "price": 12,
      "category": "Salad",
      "image": "1713578089412food_1.png"
    }
  ]
}

​
Image Serving

Food images are stored in backend/uploads/ at the time an item is added. They are served as static files at: 
GET /images/:filename
For example, an item with image: "1713578089412food_1.png" resolves to: 
http://localhost:3000/images/1713578089412food_1.png
Update the base URL in StoreContext.jsx (currently http://localhost:3000) to your production server address before deploying.

Build docs developers (and LLMs) love

Get started for freeTalk to us