Food Ordering App: Architecture and State Management

Food Ordering App: Architecture and State Management

Good architecture makes the food ordering app maintainable. Here is how to structure the code and manage state.

Architecture

Separate the code into three layers:

1. Data layer: the menu array and any API calls.
2. State layer: cart, filters, search query.
3. View layer: rendering functions for menu, cart, filters.

Data Layer

const menu = [
  { id: 1, name: "Pizza", price: 200, category: "italian", veg: false, image: "..." },
  // ...
];
``
### State Layer

```js
const state = {
  cart: {},           // { itemId: quantity }
  searchQuery: "",
  filters: {
    veg: null,
    category: "all",
    maxPrice: Infinity,
  },
};
``
### View Layer

```js
function renderMenu() { /* render filtered items */ }
function renderCart() { /* render cart items and total */ }
function renderApp() { renderMenu(); renderCart(); }
``
### Update Flow

1. User action (click add, type search, toggle filter).
2. Update state.
3. Re-render affected view.

```js
function addToCart(itemId) {
  state.cart[itemId] = (state.cart[itemId] || 0) + 1;
  renderCart();
}
``
### Single Source of Truth

All state is in one object. All views read from this state. All actions update this state. This makes the app predictable and debuggable.

### Avoid Direct DOM Manipulation

Instead of directly modifying the DOM, update state and re-render. This keeps the UI in sync with the state.

### The Takeaway

Structure the food ordering app: data (menu array), state (cart, filters, search in one object), view (render functions for menu, cart). Update flow: action -> update state -> re-render. Single source of truth. Avoid direct DOM manipulation. This architecture is clean and maintainable.