How to Build a Food Ordering App in a Machine Coding Interview

How to Build a Food Ordering App in a Machine Coding Interview

The food ordering app is a real Swiggy interview question. It tests state management, filtering, and cart logic. Here is how to build it.

Requirements

• Menu list with items (name, price, image, category).
• Search bar to filter items by name.
• Filters: veg/non-veg, price range, category.
• Cart: add items, remove items, change quantity.
• Cart total with price calculation.
• Checkout button.

Plan (10 minutes)

1. Data: array of food items.
2. State: cart (map of item ID to quantity), filters, search query.
3. Components: header, search, filters, menu list, cart sidebar.
4. Events: search, filter, add to cart, remove from cart, change quantity.

Build Core (50 minutes)

Data

const menu = [
  { id: 1, name: "Pizza", price: 200, category: "italian", veg: false },
  { id: 2, name: "Pasta", price: 150, category: "italian", veg: true },
  { id: 3, name: "Burger", price: 100, category: "fastfood", veg: false },
  { id: 4, name: "Salad", price: 80, category: "healthy", veg: true },
];

State and Rendering

let cart = {};
let filters = { veg: null, category: "all", maxPrice: Infinity };
let searchQuery = "";

function getFilteredItems() {
  return menu.filter((item) => {
    if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    if (filters.veg !== null && item.veg !== filters.veg) return false;
    if (filters.category !== "all" && item.category !== filters.category) return false;
    if (item.price > filters.maxPrice) return false;
    return true;
  });
}

function renderMenu() {
  const items = getFilteredItems();
  const list = document.getElementById("menuList");
  list.innerHTML = items.map((item) => `
    <div class="menu-item">
      <h3>${item.name}</h3>
      <p>₹${item.price}</p>
      <button onclick="addToCart(${item.id})">Add</button>
    </div>
  `).join("");
}

function addToCart(id) {
  cart[id] = (cart[id] || 0) + 1;
  renderCart();
}

function removeFromCart(id) {
  delete cart[id];
  renderCart();
}

function renderCart() {
  const cartItems = Object.entries(cart).map(([id, qty]) => {
    const item = menu.find((m) => m.id === parseInt(id));
    return { ...item, qty };
  });
  const total = cartItems.reduce((sum, item) => sum + item.price * item.qty, 0);
  const cartDiv = document.getElementById("cart");
  cartDiv.innerHTML = cartItems.map((item) => `
    <div class="cart-item">
      <span>${item.name} x${item.qty}</span>
      <span>₹${item.price * item.qty}</span>
      <button onclick="removeFromCart(${item.id})">Remove</button>
    </div>
  `).join("") + `<div class="total">Total: ₹${total}</div>`;
}

Edge Cases (20 minutes)

• Empty cart (show "Your cart is empty").
• No search results (show "No items found").
• Quantity 0 (remove from cart).
• Decimal prices.
• Clear cart button.
• Checkout confirmation.

The Takeaway

Build the food ordering app: data (menu array), state (cart map, filters, search), rendering (filtered menu, cart with totals), events (add/remove/quantity, search, filter). Handle edge cases (empty cart, no results). This is a real Swiggy interview question testing state management and cart logic.