Facebook Pixel

Food Ordering App: Advanced Features to Impress

Beyond the basics: coupons, ratings, delivery time, and order tracking. Here are advanced features.

Food Ordering App: Advanced Features to Impress

Beyond the basics, here are advanced features that can impress the interviewer if you have time.

1. Coupon/Discount System

const coupons = { SAVE10: 0.1, SAVE20: 0.2 }; function applyCoupon(code) { if (coupons[code]) { const discount = calculateTotal() * coupons[code]; return calculateTotal() - discount; } return calculateTotal(); } `` ### 2. Item Ratings Display a star rating for each item: ```js menu: [{ id: 1, name: "Pizza", price: 200, rating: 4.5 }] `` Sort by rating (highest first). ### 3. Delivery Time Estimate ```js function getDeliveryTime() { return Math.floor(Math.random() * 30) + 20; // 20-50 min } `` ### 4. Order Tracking After checkout, show an order status: preparing -> on the way -> delivered. ```js const statuses = ["Preparing", "On the way", "Delivered"]; let orderStatus = 0; function trackOrder() { setInterval(() => { if (orderStatus < statuses.length - 1) { orderStatus++; renderOrderStatus(); } }, 5000); } `` ### 5. Quantity in Menu Show the current quantity in the menu's "Add" button: ```js const qty = cart[item.id] || 0; button.textContent = qty > 0 ? `Add (${qty})` : "Add"; `` ### 6. Sort Options ```js function sortItems(items, sortBy) { if (sortBy === "price-low") return items.sort((a, b) => a.price - b.price); if (sortBy === "price-high") return items.sort((a, b) => b.price - a.price); if (sortBy === "rating") return items.sort((a, b) => b.rating - a.rating); return items; } `` ### 7. Item Customization Allow adding notes or extras (cheese, sauce) to each item. ### 8. Persistence with localStorage ```js function saveCart() { localStorage.setItem("cart", JSON.stringify(cart)); } function loadCart() { cart = JSON.parse(localStorage.getItem("cart") || "{}"); } `` ### The Takeaway Advanced features to impress: coupon/discount system, item ratings with sort, delivery time estimate, order tracking (preparing -> on the way -> delivered), quantity in menu, sort options (price, rating), item customization, and localStorage persistence. Add these only after the core works and edge cases are handled.

Coupon/discount system, item ratings with sort, delivery time estimate, order tracking (preparing -> on the way -> delivered), quantity display in menu, sort options (price, rating), item customization, and localStorage persistence. Add only after core works.

Store coupons as { code: discountRate }. When a coupon is applied, calculate the discounted total: total * (1 - discountRate). Show the discount amount and the final total. Handle invalid codes with an error message.

Use localStorage: save with localStorage.setItem('cart', JSON.stringify(cart)) on every cart change. Load with JSON.parse(localStorage.getItem('cart') || '{}') on page load. This persists the cart across page refreshes.

After checkout, show order status: preparing -> on the way -> delivered. Use setInterval to advance the status every few seconds. Update the UI with the current status. Clear the interval when delivered.

No. Handle edge cases first (empty cart, no results, quantity 0). Advanced features are bonus points only if the core works. A working app with edge cases handled scores higher than an app with advanced features but broken edge cases.

Ready to master React completely?

Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.

Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.