🦝 Reggie's Vault

truebabycost-spec-checklist-grouping

5 min read

Checklist Grouping & Alternatives Spec

Feature 1: Visual Subgroups

Problem

Large categories (Feeding has 28 items, Nursery has 20) feel overwhelming as one long table. Users scanning for “breastfeeding stuff” have to hunt through the whole list.

Solution

Add subgroup headers within each category table. Items with the same subgroup are visually grouped together with a light header row.

Proposed Subgroups

Nursery

  • Sleep Setup: crib, mattress, sheets, protector, bassinet, bedside sleeper
  • Furniture: dresser, changing pad, covers, glider, ottoman
  • Monitoring: audio monitor, video monitor, smart monitor
  • Environment: nightlight, blackout curtains, thermometer
  • Organization: caddy, bookshelf, decor

Feeding

  • Bottles & Prep: bottles, nipples, brush, rack, warmer, sterilizer, formula dispenser, formula
  • Breastfeeding: all pumps, parts, storage bags, nursing bras, pads (both types), nipple cream, nursing cover
  • Feeding Gear: high chair, portable chair, bibs (both types), burp cloths, food maker, spoons, bowls, sippy cups

Diapering

  • Disposables: newborn diapers, size 1 diapers, wipes, disposable pads
  • Cloth: cloth starter, inserts, covers, reusable wipes, wet bags
  • Setup & Storage: changing table, portable pad, pail, refills, diaper bag (all types), caddy, cream

Clothing

  • Newborn (0-3m): NB onesies, sleepers, gowns, hats, mittens, socks, pants
  • 3-6 Months: 3m onesies, sleepers, outfits, socks
  • 6-12 Months: 6m onesies, sleepers, outfits, shoes
  • Outerwear: jacket, winter coat, sun hat, winter hat

Bath Time

  • Bathing: tub, support, towels, washcloths, toys, thermometer, mat, kneeler, rinse cup
  • Skin Care: shampoo, lotion, oil, diaper cream, sunscreen
  • Grooming: brush/comb, nail clippers, nail trimmer

Travel & Gear

  • Car Seats: infant seat, extra base, convertible seat
  • Strollers: full-size, lightweight, jogging
  • Carriers: wrap, structured, sling
  • Accessories: organizer, rain cover, bug net, footmuff, hooks, sunshade, mirror, shade, protector
  • Travel: portable crib, travel bag

Health & Safety

  • First Aid: thermometer, aspirator, med kit, meds, humidifier, filters
  • Baby-Proofing: outlet covers, cabinet locks, corner guards, door stoppers, stair gates, furniture straps, cord covers, toilet lock

Sleep

  • Swaddling & Sleepwear: swaddles, sleep sacks (all types)
  • Sleep Aids: white noise, portable sound, pacifiers, paci clips, nightlight, humidifier

Play & Development

  • Floor Time: play mat, play gym, tummy time pillow
  • Toys: rattles, teethers, soft toys, age-specific sets
  • Learning: books, flash cards, walker, bouncer, swing, jumper

Postpartum

  • Recovery: pads, underwear, peri bottle, sitz bath, cream, ice packs
  • Support: belly wrap, compression socks, nursing pillow, nipple cream, breastfeeding set

UI Implementation

  • Add collapsible subgroup headers (light gray background)
  • Subgroup totals shown in header
  • Click header to expand/collapse items
  • Default: all expanded

Data Structure Change

{ 
  id: 'feeding-bottles', 
  name: 'Bottles (set of 4-6)', 
  subgroup: 'Bottles & Prep',  // NEW
  priority: 'essential', 
  prices: { budget: 20, mid: 40, premium: 80 },
  ...
}

Feature 2: Alternative Items (Dropdowns)

Problem

Some items are mutually exclusive alternatives. Listing all 4 breast pump types clutters the checklist when most people will only buy one.

Solution

Group alternatives into a single row with a dropdown selector. Selecting one automatically deselects others in the group.

Proposed Alternative Groups

Feeding

  • Breast Pump: Manual / Electric Single / Electric Double / Wearable
  • Nursing Pads: Disposable 100ct / Reusable 8-pack

Nursery

  • Baby Monitor: Audio / Video / Smart/WiFi
  • Bedside Sleep: Bassinet / Bedside Sleeper (pick one or neither)

Diapering

  • Diaper Bag: Basic / Backpack / Designer
  • Wipes: Disposable / Reusable (can have both, but most pick primary)

Travel

  • Stroller: Full-size / Lightweight / Jogging (can have multiple, but primary)
  • Carrier: Wrap / Structured / Sling

Sleep

  • Sleep Sack: Lightweight / Winter / Transition Arms-Out

UI Implementation

Option A: Dropdown within row

☑️ Breast Pump    [Electric Double ▼]    [$125-$475]    [Qty: 1]

When you change the dropdown, prices update automatically.

Option B: Radio buttons in expanded section

☑️ Breast Pump                           [$125-$475]    [Qty: 1]
    ○ Manual ($30-$100)
    ○ Electric Single ($65-$250)  
    ● Electric Double ($125-$475) ← selected
    ○ Wearable ($175-$600)

Recommendation: Option A (dropdown) is cleaner, Option B is more informative. Could do Option A with a (?) tooltip showing all prices.

Data Structure Change

{
  id: 'feeding-pump',
  name: 'Breast Pump',
  subgroup: 'Breastfeeding',
  priority: 'essential',
  notes: 'If breastfeeding',
  alternatives: [
    { id: 'manual', label: 'Manual', prices: { budget: 30, mid: 50, premium: 100 } },
    { id: 'single', label: 'Electric Single', prices: { budget: 65, mid: 125, premium: 250 } },
    { id: 'double', label: 'Electric Double', prices: { budget: 125, mid: 250, premium: 475 }, default: true },
    { id: 'wearable', label: 'Wearable', prices: { budget: 175, mid: 350, premium: 600 } }
  ],
  qty: 1,
  maxQty: 1
}

Selection state would store: { selected: true, tier: 'mid', qty: 1, alternative: 'double' }

Implementation Priority

  1. Subgroups first - Lower risk, bigger visual impact, doesn’t change data structure much
  2. Alternatives second - More complex, requires selection state changes and URL encoding updates

Effort Estimate

  • Subgroups: ~2-3 hours (add subgroup property, render grouped tables, styling)
  • Alternatives: ~4-5 hours (new data structure, dropdown UI, selection logic, URL state)

Questions for Adam

  1. Subgroups: Collapsible or always-visible?
  2. Alternatives: Dropdown (compact) or radio buttons (informative)?
  3. Which alternative groups feel right? Any to add/remove?
  4. Should non-selected alternatives still be visible (grayed out) or hidden entirely?

Graph View