Academy
mediumReact Native#129

Pokemon Store (cart with limits)

Prompt

Build a Pokemon store with a cart. Requirements:

  1. Show list of Pokemon with name and price
  2. Cart floating button showing item count
  3. Max 3 items per cart
  4. Show total price on cart button
  5. Cap cart total at $10

Solution

export default function PokemonStore() {
  const [cart, setCart] = useState([])
  const addToCart = (p) => {
    if (cart.length >= 3) return
    const total = cart.reduce((s, i) => s + i.price, 0)
    if (total + p.price > 10) return
    setCart(prev => [...prev, p])
  }
  const removeFromCart = (id) => setCart(prev => prev.filter(i => i.id !== id))
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList data={POKEMON} keyExtractor={p => String(p.id)} renderItem={({ item }) => (
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 12, borderBottomWidth: 1 }}>
          <View><Text style={{ fontWeight: 'bold' }}>{item.name}</Text><Text>${item.price}</Text></View>
          <Button title="Add" onPress={() => addToCart(item)} />
        </View>
      )} />
      {cart.length > 0 && (
        <View style={{ position: 'absolute', bottom: 20, right: 20, backgroundColor: 'blue', padding: 12, borderRadius: 24 }}>
          <Text style={{ color: 'white' }}>{cart.length} items - ${cart.reduce((s, i) => s + i.price, 0)}</Text>
        </View>
      )}
    </View>
  )
}
Mentor's take

This mini-project is about enforcing business invariants at the single mutation point. "Max 3 items" and "cap at $10" are checked inside addToCart, before setCart fires — so every Add button in the app goes through the same gate and the cart cannot enter an invalid state. Guards that live in the UI ("disable the button when...") are presentation; guards that live in the mutator are correctness. You usually want both, but only one of them is load-bearing.

The other deliberate choice: total is derived, computed with reduce from the cart array at render time, not tracked as its own useState. Two states describing one fact will eventually disagree — someone adds a remove path and forgets to subtract. One state, one reduce, zero drift. If the derivation ever got expensive, the fix is useMemo, still not a second state.

The floating cart button is the standard RN overlay pattern: position: 'absolute' with bottom/right offsets inside a flex: 1 container, conditionally rendered with cart.length > 0 && so an empty cart shows nothing.

Red flag: validating the limits in the button's onPress in one screen, then adding a second entry point (deep link, "buy again") that calls setCart directly. Invariants scattered across callers are invariants you no longer have.

Say it: "The cart's rules live in the mutator, not the buttons — and the total is a reduce over the cart, because two states for one fact always drift."