DEV Community

Ali Hamza
Ali Hamza

Posted on

Day 159 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 159 of my software engineering track! Today, I designed and connected the Cart Page (Cart.jsx) & Dynamic Pricing Engine (CartTotal.jsx) for my food delivery app, Tomato! 🛒🍕⚡

Calculating shopping cart balances dynamically based on state changes requires solid React logic and clean conditional layouts. Here is how I structured the component today.


🛠️ Deconstructing the Day 159 Cart Engine

As showcased in the active application views (Screenshot 382 and Screenshot 383):

1. Dynamic Cart Table Grid

  • Rendered all active items mapped in the cart state inside a responsive table view displaying item thumbnail, title, unit price, quantity counters, subtotal, and quick deletion triggers (x).

2. Conditional Delivery & Total Aggregation

  • Handled dynamic delivery fee application inside CartTotal.jsx:

javascript
  {getTotalCartAmount() === 0 ? 0 : delivery_fee}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)