← Back to Home

🛍️ Smart Shopping Cart - Auto-Calculating Prices

Change the price, add a coupon, or adjust quantity - everything updates automatically! No manual calculations needed.

❓

What Is This Demo Showing?

This is like a real online shopping cart! When you shop on Amazon, changing one thing (like quantity) automatically updates:

  • • Subtotal (price × quantity)
  • • Discounts (if you have a sale)
  • • Shipping costs (based on weight)
  • • Taxes (based on your location)
  • • Final total (everything combined)

🎯 Try it: Move any slider below and watch all the prices update instantly! SignalForge automatically knows what needs to recalculate.

💡

Why Is This Amazing?

Imagine coding this manually - you'd need to write code to recalculate everything whenever anything changes!

😰 Without SignalForge (Manual Way)

📝 You change the quantity

⚒️ You manually recalculate subtotal

⚒️ You manually recalculate discount

⚒️ You manually recalculate shipping

⚒️ You manually recalculate tax

⚒️ You manually recalculate total

😫 For 12 calculations: ~200 lines of code!

It's like doing your taxes by hand with a calculator! 🧑‍💻

✅ With SignalForge (Smart Way)

📝 You change the quantity

✨ Everything updates automatically!

SignalForge tracks what depends on what, and only recalculates what changed.

const subtotal = createComputed(() => 
  price.get() * quantity.get()
);
// Done! Subtotal auto-updates! 🎉

🚀 For 12 calculations: ~50 lines of code!

Like having a personal accountant! 🧾

🔧

How Does It Work? (3 Simple Steps!)

1

Create base signals (user inputs)

const price = createSignal(100);      // Base price
const quantity = createSignal(1);     // How many items
const discount = createSignal(10);    // Discount %

These are like the input fields in a form! 📝

2

Create computed values (automatic calculations)

const subtotal = createComputed(() => 
  price.get() * quantity.get()
);

const total = createComputed(() => 
  subtotal.get() - (subtotal.get() * discount.get() / 100)
);

These auto-update when inputs change! No manual work! ✨

3

Use them in your UI

function Cart() {
  const totalValue = useSignalValue(total);
  return <div>Total: ${totalValue}</div>;
  // Updates automatically when anything changes! 🎉
}

SignalForge handles all the math - you just display it! 📊

🎮 Play With The Shopping Cart!

📊 How Your Total Is Calculated (Step-by-Step)

Base Price × Quantity

$100.00

Level 1: subtotal

- Discount (0%)

-$0.00

Level 1: discountAmount

After Discount

$100.00

Level 1: afterDiscount

+ Shipping

$5.00

Level 2: shippingCost

+ Tax (10%)

$10.50

Level 4: taxAmount

Final Total

$115.50

Level 5: finalTotal

🌳 Dependency Tree

Level 0: Base Inputs

basePricequantitydiscountPercenttaxRateshippingWeightisPremiumMembercouponCode
⬇️

Level 1: Basic Calculations

subtotaldiscountAmountafterDiscount
⬇️

Level 2: Shipping Logic

shippingCost
⬇️

Level 3: Coupon Logic

couponDiscountafterCoupon
⬇️

Level 4: Tax Calculation

taxableAmounttaxAmount
⬇️

Level 5: Final Result

finalTotaltotalSavings

💀 The Redux Nightmare

SignalForge (12 lines)

// Define once, works everywhere
const subtotal = createComputed(() => 
  basePrice.get() * quantity.get()
);

const discountAmount = createComputed(() =>
  subtotal.get() * (discount.get() / 100)
);

const afterDiscount = createComputed(() =>
  subtotal.get() - discountAmount.get()
);

// ... 9 more like this
// Total: ~50 lines including all logic

Redux (100+ lines)

// Need reselect for memoization
import { createSelector } from 'reselect';

// Selector for each value
const selectBase = state => state.basePrice;
const selectQty = state => state.quantity;

// Memoized selector
const selectSubtotal = createSelector(
  [selectBase, selectQty],
  (base, qty) => base * qty
);

const selectDiscount = state => state.discount;
const selectDiscountAmount = createSelector(
  [selectSubtotal, selectDiscount],
  (sub, discount) => sub * (discount / 100)
);

// ... 50 more lines of selectors
// ... plus actions, reducers, types
// Total: ~200 lines for same logic

🌍 Real-World Use Cases

💼 Financial Calculators

Loan payments, investment returns, tax calculations with 20+ interdependent formulas. SignalForge handles the entire dependency tree automatically.

🎮 Game State

Character stats → equipment bonuses → skill modifiers → final damage. Change one item, everything updates instantly.

📊 Analytics Dashboards

Raw data → filtered data → aggregations → visualizations. Filter changes propagate through entire pipeline in microseconds.

🛒 Complex Pricing

Volume discounts, member tiers, dynamic fees, currency conversion. This demo is a simplified real e-commerce scenario!