Food Ordering App: Common Mistakes in Interviews

Food Ordering App: Common Mistakes in Interviews

Here are common mistakes candidates make when building a food ordering app and how to avoid them.

Mistake 1: Not Handling Empty Cart

Candidates render the cart without checking if it is empty, resulting in a blank or broken cart area.

Fix: check Object.keys(cart).length === 0 and show "Your cart is empty".

Mistake 2: Not Handling No Search Results

Candidates filter items but do not handle the case where no items match, showing a blank menu.

Fix: check filteredItems.length === 0 and show "No items found".

Mistake 3: Allowing Negative Quantity

Candidates decrement quantity without checking for 0, resulting in negative quantities.

Fix: if quantity drops to 0 or below, delete the item from the cart.

Mistake 4: Not Calculating Total Correctly

Candidates forget to multiply price by quantity, or forget to parse the item ID.

Fix: sum item.price * qty for each item. Use parseInt(id) when looking up items.

Mistake 5: Spending Too Much Time on CSS

Candidates spend 30 minutes on CSS before the cart works.

Fix: build functionality first. Add CSS in the last 10 minutes.

Mistake 6: Not Using a Single State Object

Candidates scatter state across multiple variables, making it hard to track.

Fix: use one state object with cart, searchQuery, and filters.

Mistake 7: Not Debouncing Search

Candidates re-render on every keystroke, causing performance issues with large menus.

Fix: debounce the search input (300ms).

Mistake 8: Not Testing

Candidates submit without testing the cart, filters, and checkout.

Fix: test each feature manually before submitting.

The Takeaway

Common mistakes: not handling empty cart, not handling no results, allowing negative quantity, incorrect total calculation, spending too much time on CSS, scattered state, not debouncing search, and not testing. Fix each with the appropriate technique. Test before submitting.