truebabycost-spec-checklist

Baby Prep Checklist Feature Specification

True Baby Cost - Interactive Checklist Page

Version: 1.0
Date: 2026-02-17
Status: Draft

---

Table of Contents

1. Overview
2. Category Breakdown & Product Lists
3. UI/UX Wireframe Description
4. Data Structure
5. Implementation Notes
6. Future Features

---

Overview

The Baby Prep Checklist is an interactive tool that helps expectant parents plan and budget for all the essentials they’ll need before baby arrives. Users can browse through categories, select items, adjust quantities, and see a running total of estimated costs.

Core Value Props

• Comprehensive: 10+ categories covering everything from nursery to postpartum
• Budget-aware: Budget/Mid/Premium price tiers for every item
• Interactive: Real-time cost calculation as selections change
• Shareable: Generate URLs to share lists with partners, family, or registry
• Print-ready: Clean printable version for shopping trips

---

Category Breakdown & Product Lists

1. 🛏️ Nursery

Product	Essential	Budget	Mid	Premium	Qty Default
Crib	✅	$100-150	$200-400	$500-1200	1
Crib Mattress	✅	$40-60	$80-150	$200-400	1
Crib Sheets (set of 2-3)	✅	$15-25	$30-50	$60-100	1
Waterproof Mattress Protector	✅	$10-15	$20-35	$40-60	2
Bassinet	⭐ Nice	$50-80	$100-200	$250-500	1
Bedside Sleeper	⭐ Nice	$80-120	$150-250	$300-450	1
Dresser/Changing Table	⭐ Nice	$100-150	$200-400	$500-1000	1
Changing Pad (for dresser)	✅	$20-30	$40-70	$80-150	1
Changing Pad Covers (2-pack)	✅	$10-15	$20-35	$40-60	1
Glider/Rocker	⭐ Nice	$150-250	$350-600	$800-1500	1
Ottoman/Glider Footrest	⭐ Nice	$50-80	$100-200	$250-400	1
Baby Monitor (audio)	✅	$25-40	$50-80	-	1
Baby Monitor (video)	⭐ Nice	$80-120	$150-250	$300-500	1
Baby Monitor (smart/wifi)	⭐ Nice	$100-150	$200-350	$400-600	1
Nightlight	⭐ Nice	$5-10	$15-25	$30-50	1
Blackout Curtains	⭐ Nice	$20-35	$50-80	$100-200	1
Room Thermometer/Hygrometer	⭐ Nice	$8-15	$20-35	$40-60	1
Nursery Organizer/Caddy	⭐ Nice	$15-25	$30-50	$60-100	1
Bookshelf	⭐ Nice	$30-50	$80-150	$200-400	1
Wall Decor/Mobile	⭐ Nice	$15-30	$40-80	$100-200	1

2. 🍼 Feeding

Product	Essential	Budget	Mid	Premium	Qty Default
Bottles (set of 4-6)	✅	$15-25	$30-50	$60-100	1
Bottle Nipples (various flows)	✅	$8-12	$15-25	$30-50	2
Bottle Brush	✅	$5-8	$10-15	$20-30	1
Bottle Drying Rack	⭐ Nice	$8-12	$15-25	$30-50	1
Bottle Warmer	⭐ Nice	$20-35	$40-70	$80-150	1
Bottle Sterilizer	⭐ Nice	$25-40	$50-90	$100-180	1
Formula Dispenser	⭐ Nice	$5-10	$12-20	$25-40	1
Formula (per month estimate)	✅*	$80-120	$130-180	$200-350	1
Breast Pump (manual)	✅*	$25-35	$40-60	$80-120	1
Breast Pump (electric single)	✅*	$50-80	$100-150	$200-300	1
Breast Pump (electric double)	✅*	$100-150	$200-300	$350-600	1
Breast Pump (wearable)	⭐ Nice	$150-200	$300-400	$500-700	1
Pump Parts/Flanges	✅*	$15-25	$30-50	$60-100	1
Breast Milk Storage Bags (50ct)	✅*	$10-15	$18-25	$30-50	2
Nursing Bras (3-pack)	✅*	$25-40	$50-80	$100-150	1
Nursing Pads (disposable 100ct)	✅*	$8-12	$15-25	$30-45	1
Nursing Pads (reusable 8-pack)	⭐ Nice	$12-18	$22-35	$40-60	1
Nipple Cream/Balm	✅*	$6-10	$12-18	$22-35	1
Nursing Cover	⭐ Nice	$10-18	$22-35	$40-70	1
High Chair	✅	$40-70	$100-180	$250-450	1
Portable/Travel High Chair	⭐ Nice	$25-40	$50-80	$100-150	1
Bibs (10-pack)	✅	$10-15	$20-30	$40-60	1
Silicone Bibs (2-pack)	⭐ Nice	$10-15	$18-28	$35-55	1
Burp Cloths (10-pack)	✅	$10-18	$22-35	$40-65	1
Baby Food Maker	⭐ Nice	$30-50	$70-120	$150-250	1
Baby Spoons (set)	✅	$5-8	$10-15	$20-30	1
Suction Bowls/Plates	⭐ Nice	$10-15	$20-35	$40-70	1
Sippy Cups (2-pack)	⭐ Nice	$8-12	$15-25	$30-50	1

Note: Items marked ✅ depend on feeding choice (breast vs formula)*

3. 🧷 Diapering

Product	Essential	Budget	Mid	Premium	Qty Default
Disposable Diapers - Newborn (pack)	✅	$20-30	$35-50	$55-80	2
Disposable Diapers - Size 1 (pack)	✅	$25-35	$40-55	$60-85	3
Cloth Diapers (24-pack starter)	⭐ Nice	$150-250	$300-450	$500-800	1
Cloth Diaper Inserts (12-pack)	⭐ Nice	$25-40	$50-80	$100-150	1
Cloth Diaper Covers (6-pack)	⭐ Nice	$50-80	$100-150	$180-280	1
Baby Wipes (pack of 400+)	✅	$12-18	$22-32	$40-60	2
Reusable Wipes (24-pack)	⭐ Nice	$15-25	$30-50	$60-100	1
Wipe Warmer	⭐ Nice	$20-30	$35-50	$60-90	1
Changing Pad (portable)	✅	$8-12	$15-25	$30-50	1
Changing Table	⭐ Nice	$80-120	$150-250	$300-500	1
Diaper Pail	⭐ Nice	$25-40	$50-80	$100-150	1
Diaper Pail Refills (3-pack)	⭐ Nice	$15-25	$30-45	$55-80	1
Diaper Bag (basic)	✅	$25-40	$50-80	-	1
Diaper Bag (backpack style)	⭐ Nice	$40-60	$80-130	$150-250	1
Diaper Bag (designer)	⭐ Nice	$100-150	$200-350	$400-800	1
Diaper Caddy/Organizer	⭐ Nice	$15-25	$30-50	$60-100	1
Diaper Cream/Ointment	✅	$6-10	$12-18	$22-35	2
Disposable Changing Pads (pack)	⭐ Nice	$8-12	$15-22	$28-40	1
Wet Bags (for cloth/travel)	⭐ Nice	$10-15	$18-28	$35-55	2

4. 👕 Clothing

Product	Essential	Budget	Mid	Premium	Qty Default
Newborn (0-3 months)
Onesies/Bodysuits (5-7 pack)	✅	$15-25	$30-50	$60-100	2
Sleepers/Footies (3-5 pack)	✅	$20-30	$40-60	$80-130	1
Gowns (3-pack)	⭐ Nice	$15-25	$30-50	$60-100	1
Hats (3-pack)	✅	$8-12	$15-25	$30-50	1
Mittens/Scratch Guards (3-pack)	✅	$6-10	$12-18	$22-35	1
Socks/Booties (6-pack)	✅	$8-12	$15-25	$30-50	1
Pants (3-pack)	⭐ Nice	$12-18	$25-40	$50-80	1
3-6 months
Onesies/Bodysuits (5-7 pack)	✅	$15-25	$30-50	$60-100	2
Sleepers/Footies (3-5 pack)	✅	$20-30	$40-60	$80-130	1
Outfits/Sets (3-pack)	⭐ Nice	$25-40	$50-80	$100-170	1
Socks (6-pack)	✅	$8-12	$15-25	$30-50	1
6-12 months
Onesies/Bodysuits (5-7 pack)	⭐ Nice	$15-25	$30-50	$60-100	1
Sleepers/Footies (3-5 pack)	⭐ Nice	$20-30	$40-60	$80-130	1
Outfits/Sets (3-pack)	⭐ Nice	$25-40	$50-80	$100-170	1
Outerwear (seasonal)
Light Jacket	⭐ Nice	$15-25	$35-55	$70-120	1
Winter Coat/Bunting	⭐ Nice	$25-40	$50-90	$120-200	1
Sun Hat	⭐ Nice	$8-12	$15-25	$30-50	1
Winter Hat	⭐ Nice	$8-12	$15-25	$30-50	1
Shoes/Soft Soles (first pair)	⭐ Nice	$10-18	$25-40	$50-80	1

5. 🛁 Bath Time

Product	Essential	Budget	Mid	Premium	Qty Default
Baby Bathtub	✅	$15-25	$30-50	$60-100	1
Bath Support/Seat	⭐ Nice	$15-25	$30-50	$60-100	1
Hooded Towels (2-pack)	✅	$12-18	$25-40	$50-80	1
Washcloths (10-pack)	✅	$8-12	$15-25	$30-50	1
Baby Shampoo/Body Wash	✅	$5-8	$10-15	$18-30	2
Baby Lotion	✅	$5-8	$10-15	$18-30	2
Baby Oil	⭐ Nice	$4-7	$9-14	$18-28	1
Diaper Cream	✅	$6-10	$12-18	$22-35	1
Baby Sunscreen	⭐ Nice	$8-12	$14-22	$28-45	1
Bath Toys	⭐ Nice	$8-15	$18-30	$40-70	1
Baby Hairbrush/Comb Set	⭐ Nice	$5-8	$10-18	$22-35	1
Baby Nail Clippers/File	✅	$4-7	$9-15	$18-30	1
Electric Nail Trimmer	⭐ Nice	$15-22	$28-40	$50-80	1
Bath Thermometer	⭐ Nice	$5-8	$10-18	$22-35	1
Non-slip Bath Mat	⭐ Nice	$8-12	$15-25	$30-50	1
Bath Kneeler	⭐ Nice	$15-22	$28-45	$55-90	1
Rinse Cup	⭐ Nice	$4-7	$9-14	$18-28	1

6. 🚗 Travel & Gear

Product	Essential	Budget	Mid	Premium	Qty Default
Infant Car Seat	✅	$80-120	$150-250	$300-550	1
Car Seat Base (extra)	⭐ Nice	$40-60	$80-120	$150-250	1
Convertible Car Seat	⭐ Nice	$100-180	$250-400	$450-700	1
Stroller (full-size)	✅	$100-180	$250-450	$600-1500	1
Stroller (lightweight/umbrella)	⭐ Nice	$40-80	$100-180	$250-450	1
Stroller (jogging)	⭐ Nice	$150-250	$300-500	$600-900	1
Travel System (car seat + stroller)	✅	$180-280	$350-550	$700-1200	1
Double Stroller	⭐ Nice	$150-250	$350-550	$700-1200	1
Baby Carrier (wrap)	⭐ Nice	$25-45	$50-80	$100-180	1
Baby Carrier (structured)	⭐ Nice	$80-130	$150-220	$280-400	1
Baby Carrier (ring sling)	⭐ Nice	$40-60	$70-110	$130-200	1
Stroller Organizer	⭐ Nice	$10-18	$22-35	$45-75	1
Car Seat Protector	⭐ Nice	$15-25	$30-50	$60-100	1
Car Sunshades (2-pack)	⭐ Nice	$8-12	$15-25	$30-50	1
Car Mirror (rear-facing view)	⭐ Nice	$10-18	$22-35	$45-75	1
Stroller Rain Cover	⭐ Nice	$10-18	$22-35	$45-75	1
Stroller Travel Bag	⭐ Nice	$20-35	$45-75	$90-150	1
Car Seat Travel Bag	⭐ Nice	$25-40	$50-85	$100-170	1
Portable Crib/Pack ‘n Play	⭐ Nice	$60-100	$130-200	$250-400	1
Travel Bassinet	⭐ Nice	$40-70	$90-150	$180-300	1

7. 🏥 Health & Safety

Product	Essential	Budget	Mid	Premium	Qty Default
Digital Thermometer	✅	$8-12	$18-30	$40-70	1
Forehead/Ear Thermometer	⭐ Nice	$20-35	$45-70	$90-150	1
Nasal Aspirator (bulb)	✅	$3-6	$8-12	$15-25	1
Nasal Aspirator (electric)	⭐ Nice	$25-40	$50-80	$100-150	1
NoseFrida (parent-powered)	⭐ Nice	$12-18	$22-30	-	1
Saline Drops/Spray	✅	$4-7	$8-12	$15-22	2
Baby Medicine Dispenser	✅	$4-7	$9-15	$18-28	1
Infant Tylenol/Pain Relief	✅	$6-10	$12-18	-	1
Gas Relief Drops	✅	$8-12	$14-20	-	1
Gripe Water	⭐ Nice	$8-12	$14-22	$28-40	1
First Aid Kit (baby)	✅	$15-25	$30-50	$60-100	1
Humidifier (cool mist)	⭐ Nice	$25-40	$50-80	$100-180	1
Baby Proofing
Outlet Covers (12-pack)	✅	$6-10	$12-18	$22-35	2
Cabinet Locks (6-pack)	✅	$10-15	$18-28	$35-55	2
Drawer Latches (6-pack)	✅	$8-12	$15-22	$28-45	1
Baby Gates	✅	$25-45	$55-90	$110-180	2
Corner Protectors (8-pack)	✅	$6-10	$12-18	$22-35	1
Door Knob Covers (4-pack)	⭐ Nice	$6-10	$12-18	$22-35	1
Furniture Anchors (6-pack)	✅	$8-12	$15-22	$28-45	1
Stove Knob Covers	⭐ Nice	$8-12	$15-22	$28-45	1
Toilet Lock	⭐ Nice	$8-12	$15-22	$28-45	1
Door Pinch Guards	⭐ Nice	$6-10	$12-18	$22-35	1

8. 😴 Sleep

Product	Essential	Budget	Mid	Premium	Qty Default
Swaddles/Swaddle Blankets (3-pack)	✅	$20-30	$40-60	$80-130	1
Velcro/Zip Swaddles (2-pack)	⭐ Nice	$25-40	$50-80	$100-150	1
Weighted Swaddle	⭐ Nice	$30-45	$55-85	$100-150	1
Sleep Sacks (2-pack)	✅	$25-40	$50-80	$100-160	1
Transitional Sleep Sack	⭐ Nice	$25-40	$50-80	$100-160	1
White Noise Machine	⭐ Nice	$20-35	$45-70	$90-150	1
Portable Sound Machine	⭐ Nice	$15-25	$30-50	$60-100	1
Smart Sleep Tracker	⭐ Nice	$100-150	$200-300	$350-500	1
Pacifiers (2-4 pack)	⭐ Nice	$6-10	$12-20	$25-40	2
Pacifier Clips (2-pack)	⭐ Nice	$6-10	$12-18	$22-35	1
Pacifier Holder/Case	⭐ Nice	$5-8	$10-15	$18-28	1
Lovey/Security Blanket	⭐ Nice	$10-18	$22-35	$45-75	1
Breathable Crib Mattress	⭐ Nice	$100-150	$200-300	$400-600	1
Crib Wedge (for reflux)	⭐ Nice	$15-25	$30-50	$60-100	1

9. 🎮 Play & Development

Product	Essential	Budget	Mid	Premium	Qty Default
Play Mat/Activity Gym	✅	$25-45	$60-100	$130-220	1
Bouncer/Rocker	⭐ Nice	$30-50	$70-130	$160-280	1
Swing (full-size)	⭐ Nice	$80-130	$160-250	$300-450	1
Swing (portable)	⭐ Nice	$50-80	$100-160	$200-320	1
Tummy Time Mat/Pillow	⭐ Nice	$15-25	$30-50	$60-100	1
Baby Mirror (tummy time)	⭐ Nice	$10-18	$22-35	$45-75	1
High Contrast Cards	⭐ Nice	$8-12	$15-25	$30-50	1
Soft Books (set)	⭐ Nice	$10-18	$22-35	$45-75	1
Board Books (starter set)	⭐ Nice	$15-25	$30-50	$60-100	1
Rattles/Teethers (set)	✅	$10-18	$22-35	$45-75	1
Teething Toys	✅	$8-15	$18-30	$40-70	1
Stacking Toys	⭐ Nice	$10-18	$22-35	$45-75	1
Shape Sorter	⭐ Nice	$10-18	$22-35	$45-75	1
Exersaucer/Activity Center	⭐ Nice	$60-100	$130-200	$250-400	1
Jumperoo/Jumper	⭐ Nice	$60-100	$130-200	$250-400	1
Playpen/Play Yard	⭐ Nice	$60-100	$130-200	$250-400	1
Ball Pit	⭐ Nice	$30-50	$60-100	$130-200	1
Soft Blocks	⭐ Nice	$12-20	$25-40	$50-85	1
Musical Toys	⭐ Nice	$15-25	$30-50	$60-100	1
Sensory Toys	⭐ Nice	$12-20	$25-40	$50-85	1

10. 👩 For Mom (Postpartum)

Product	Essential	Budget	Mid	Premium	Qty Default
Nursing Pillow	✅*	$20-35	$45-70	$90-150	1
Pregnancy/Body Pillow	⭐ Nice	$25-45	$55-90	$110-180	1
Postpartum Underwear (5-pack)	✅	$15-25	$30-50	$60-100	1
Maternity Pads (pack)	✅	$8-12	$15-22	$28-42	2
Peri Bottle	✅	$8-12	$15-22	$28-42	1
Sitz Bath	⭐ Nice	$12-18	$22-35	$45-70	1
Witch Hazel Pads	✅	$6-10	$12-18	$22-32	1
Nipple Cream	✅*	$6-10	$12-18	$22-35	1
Nipple Shields	⭐ Nice	$8-12	$15-22	$28-42	1
Breast Therapy Packs (hot/cold)	⭐ Nice	$10-18	$22-35	$45-70	1
Postpartum Belly Wrap	⭐ Nice	$20-35	$45-70	$90-150	1
Comfortable Robe	⭐ Nice	$25-40	$50-80	$100-180	1
Nursing-friendly Pajamas	⭐ Nice	$25-40	$50-80	$100-170	1
Nursing Tank Tops (3-pack)	⭐ Nice	$25-40	$50-80	$100-160	1
Postpartum Vitamins	✅	$15-25	$30-50	$60-100	1
Stool Softener	✅	$8-12	$15-22	-	1
Hands-free Pumping Bra	⭐ Nice	$20-35	$45-70	$90-140	1
Lactation Supplements	⭐ Nice	$15-25	$30-50	$60-100	1
Postpartum Recovery Kit	⭐ Nice	$30-50	$60-100	$130-220	1
Breast Milk Catcher	⭐ Nice	$12-18	$22-35	$45-70	1

Items marked ✅ depend on feeding choice*

---

UI/UX Wireframe Description

Page Layout

┌─────────────────────────────────────────────────────────────────┐
│  HEADER                                                         │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ 🍼 True Baby Cost - Baby Prep Checklist                     ││
│  │ [Share] [Print] [Reset]                           $X,XXX    ││
│  │                                               Running Total  ││
│  └─────────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────────┤
│  FILTERS & SUMMARY BAR                                          │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ Budget Mode: [Budget ▼] [Mid ▼] [Premium ▼] [Mix ▼]        ││
│  │ Filter: [✓] Essentials Only  [ ] Nice to Have              ││
│  │ Categories: 10 | Items Selected: XX | Est. Total: $X,XXX   ││
│  └─────────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────────┤
│  MAIN CONTENT (Two-column on desktop, single on mobile)         │
│  ┌───────────────────┬─────────────────────────────────────────┐│
│  │ CATEGORY NAV      │ CATEGORY DETAIL                         ││
│  │                   │                                         ││
│  │ 🛏️ Nursery $XXX   │ ┌─────────────────────────────────────┐││
│  │ 🍼 Feeding $XXX   │ │ 🛏️ NURSERY                 $XXX     │││
│  │ 🧷 Diapering $XXX │ │ ─────────────────────────────────── │││
│  │ 👕 Clothing $XXX  │ │                                     │││
│  │ 🛁 Bath $XXX      │ │ ☐ Crib                    ✅ Essential│││
│  │ 🚗 Travel $XXX    │ │   [Budget ▼] [$150]  Qty: [1] [-][+]│││
│  │ 🏥 Health $XXX    │ │                                     │││
│  │ 😴 Sleep $XXX     │ │ ☑ Bassinet               ⭐ Nice    │││
│  │ 🎮 Play $XXX      │ │   [Mid ▼] [$180]     Qty: [1] [-][+]│││
│  │ 👩 For Mom $XXX   │ │                                     │││
│  │                   │ │ ☑ Baby Monitor (video)   ⭐ Nice    │││
│  │ ─────────────     │ │   [Premium ▼] [$350] Qty: [1] [-][+]│││
│  │ TOTAL: $X,XXX     │ │                                     │││
│  │                   │ └─────────────────────────────────────┘││
│  └───────────────────┴─────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────────┤
│  FOOTER                                                         │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ Progress: ████████████░░░░ 75% Complete                     ││
│  │ [💾 Save for Later] [🔗 Copy Shareable Link] [🖨️ Print]    ││
│  └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

Component Details

1. Header Section

• Logo and page title
• Running total prominently displayed (sticky on scroll)
• Quick action buttons: Share, Print, Reset
• Updates in real-time as selections change

2. Filter & Summary Bar

• Budget Mode Selector: Quick toggle to auto-select all items at a specific tier
  • Budget: Auto-selects lowest price option for all items
  • Mid: Auto-selects middle tier
  • Premium: Auto-selects highest tier
  • Mix: Manual selection (default)
• Filter Toggles:
  • Essentials Only: Show only ✅ Essential items
  • Include Nice to Have: Show ⭐ items too
• Summary Stats: Category count, items selected, estimated total

3. Category Navigation (Left Sidebar)

• Sticky sidebar on desktop
• Category icons with names
• Per-category subtotals updating in real-time
• Visual indicator for current/active category
• Collapse/expand all categories option
• Bottom: Grand total

4. Category Detail Cards (Main Area)

• Category Header: Icon, name, subtotal, expand/collapse toggle
• Item Rows:
  • Checkbox (selected/unselected)
  • Product name
  • Essential/Nice to Have tag (color-coded)
  • Price tier dropdown (Budget/Mid/Premium)
  • Calculated price display
  • Quantity selector (+/- buttons)
  • Optional: Info icon with product notes/tips
• Cards can be expanded/collapsed individually
• Smooth animations on selection changes

5. Footer Actions

• Progress indicator (% of essentials selected)
• Save for Later (generates shareable URL for MVP)
• Copy Link button
• Print button (opens print-friendly version)

Mobile Layout

┌─────────────────────────┐
│ 🍼 Baby Prep Checklist  │
│ Total: $2,450   [≡]     │
├─────────────────────────┤
│ [Budget ▼] [Essentials] │
├─────────────────────────┤
│ ▼ 🛏️ Nursery    $650    │
│ ┌─────────────────────┐ │
│ │ ☑ Crib      ✅      │ │
│ │ Mid $300   [1][-][+]│ │
│ │ ☐ Bassinet  ⭐      │ │
│ │ Budget $80 [1][-][+]│ │
│ └─────────────────────┘ │
│ ▶ 🍼 Feeding    $320    │
│ ▶ 🧷 Diapering  $180    │
│ ▶ 👕 Clothing   $250    │
│ ...                     │
├─────────────────────────┤
│ [Share] [Print] [Save]  │
└─────────────────────────┘

• Hamburger menu for category jump navigation
• Collapsible accordion-style categories
• Sticky header with running total
• Fixed bottom action bar

Print-Friendly Version

┌─────────────────────────────────────────┐
│         BABY PREP CHECKLIST             │
│         Generated: Feb 17, 2026         │
│         Total Estimated Cost: $X,XXX    │
├─────────────────────────────────────────┤
│                                         │
│ NURSERY ($XXX)                          │
│ ──────────────────────────              │
│ ☐ Crib - Mid Range - $300 x1 = $300    │
│ ☑ Bassinet - Budget - $80 x1 = $80     │
│ ☐ Monitor - Premium - $350 x1 = $350   │
│                                         │
│ FEEDING ($XXX)                          │
│ ──────────────────────────              │
│ ☑ Bottles (6-pack) - $45 x1 = $45      │
│ ...                                     │
│                                         │
├─────────────────────────────────────────┤
│ Notes:                                  │
│ _______________________________________│
│ _______________________________________│
│ _______________________________________│
└─────────────────────────────────────────┘

• Clean, minimal styling
• Checkboxes for manual checking while shopping
• Category subtotals
• Grand total at top
• Space for handwritten notes
• QR code linking back to online version (optional)

---

Data Structure

TypeScript Interfaces

// Core Types
type PriceTier = 'budget' | 'mid' | 'premium';
type ItemPriority = 'essential' | 'nice-to-have';
 
interface PriceRange {
  min: number;
  max: number;
}
 
// Age/Weight ranges for product lifespan
interface UsageRange {
  ageStart?: string;                   // e.g., "newborn", "6m", "12m"
  ageEnd?: string;                     // e.g., "4m", "15m", "3y"
  weightMin?: number;                  // in lbs
  weightMax?: number;                  // in lbs (e.g., bassinet: 15lbs)
  notes?: string;                      // e.g., "until rolling" or "or sitting unassisted"
}
 
interface ChecklistItem {
  id: string;                          // Unique identifier (e.g., "nursery-crib")
  name: string;                        // Display name
  categoryId: string;                  // Parent category reference
  priority: ItemPriority;              // Essential vs Nice to Have
  prices: {
    budget: PriceRange;
    mid: PriceRange;
    premium?: PriceRange;              // Optional - not all items have premium
  };
  defaultQuantity: number;             // Default qty when added
  maxQuantity: number;                 // Max allowed quantity
  usageRange?: UsageRange;             // Age/weight range for product lifespan
  notes?: string;                      // Optional tips/info
  tags?: string[];                     // For filtering (e.g., "breastfeeding", "formula")
  dependsOn?: string[];                // Conditional logic (e.g., show if "breastfeeding" selected)
}
 
interface Category {
  id: string;                          // e.g., "nursery"
  name: string;                        // e.g., "Nursery"
  icon: string;                        // Emoji or icon reference
  description?: string;                // Category description
  items: ChecklistItem[];
  sortOrder: number;                   // Display order
}
 
// User Selection State
interface ItemSelection {
  itemId: string;
  selected: boolean;
  tier: PriceTier;
  quantity: number;
}
 
interface ChecklistState {
  id: string;                          // Unique checklist ID for sharing
  createdAt: Date;
  updatedAt: Date;
  budgetMode: PriceTier | 'mix';       // Global budget preference
  showEssentialsOnly: boolean;
  selections: Record<string, ItemSelection>;  // itemId -> selection
}
 
// Computed/Derived Types
interface CategorySummary {
  categoryId: string;
  itemCount: number;
  selectedCount: number;
  subtotal: number;
}
 
interface ChecklistSummary {
  totalItems: number;
  selectedItems: number;
  essentialsSelected: number;
  essentialsTotal: number;
  grandTotal: number;
  categorySummaries: CategorySummary[];
  completionPercentage: number;        // Based on essentials
}

Sample Data Structure (JSON)

{
  "categories": [
    {
      "id": "nursery",
      "name": "Nursery",
      "icon": "🛏️",
      "sortOrder": 1,
      "items": [
        {
          "id": "nursery-bassinet",
          "name": "Bassinet",
          "categoryId": "nursery",
          "priority": "nice-to-have",
          "prices": {
            "budget": { "min": 50, "max": 80 },
            "mid": { "min": 100, "max": 200 },
            "premium": { "min": 250, "max": 500 }
          },
          "usageRange": {
            "ageStart": "newborn",
            "ageEnd": "4m",
            "weightMax": 15,
            "notes": "Or until rolling over"
          },
          "defaultQuantity": 1,
          "maxQuantity": 1,
          "notes": "Useful for first 3-4 months. Some parents skip and go straight to crib."
        },
        {
          "id": "nursery-crib",
          "name": "Crib",
          "categoryId": "nursery",
          "priority": "essential",
          "prices": {
            "budget": { "min": 100, "max": 150 },
            "mid": { "min": 200, "max": 400 },
            "premium": { "min": 500, "max": 1200 }
          },
          "usageRange": {
            "ageStart": "newborn",
            "ageEnd": "3y",
            "weightMax": 50,
            "notes": "Convertible cribs can transition to toddler bed"
          },
          "defaultQuantity": 1,
          "maxQuantity": 1,
          "notes": "Ensure JPMA certification. Consider convertible cribs for longevity."
        }
      ]
    }
  ]
}

URL State Encoding

For shareable URLs, encode selections in a compact format:

/checklist?v=1&s=BASE64_ENCODED_STATE

// Decoded state format (compressed)
{
  "v": 1,                              // Version for future compatibility
  "m": "mix",                          // budgetMode
  "e": false,                          // essentialsOnly
  "i": {                               // items (shortened keys)
    "n-c": [1, "m", 1],                // [selected, tier, qty] - "nursery-crib"
    "n-b": [1, "b", 1],                // "nursery-bassinet"
    "f-bt": [1, "p", 2]                // "feeding-bottles"
  }
}

URL encoding strategy:

1. Create compact JSON representation
2. Compress with pako/zlib
3. Base64 encode
4. URL-safe encoding
5. Max URL length consideration (~2000 chars)

Database Schema (Future - User Accounts)

-- Users table
CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR(255) UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);
 
-- Checklists table
CREATE TABLE checklists (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  name VARCHAR(255) DEFAULT 'My Checklist',
  state JSONB NOT NULL,                -- Full ChecklistState
  is_public BOOLEAN DEFAULT false,
  share_token VARCHAR(32) UNIQUE,      -- For sharing without auth
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);
 
-- Gift tracking (future)
CREATE TABLE gifts (
  id UUID PRIMARY KEY,
  checklist_id UUID REFERENCES checklists(id),
  item_id VARCHAR(100) NOT NULL,
  giver_name VARCHAR(255),
  giver_email VARCHAR(255),
  quantity INTEGER DEFAULT 1,
  purchased BOOLEAN DEFAULT false,
  created_at TIMESTAMP DEFAULT NOW()
);

---

Implementation Notes

Technology Stack

• Framework: Next.js 14+ (App Router)
• Styling: Tailwind CSS + shadcn/ui
• State Management: Zustand or React Context + useReducer
• URL State: nuqs or custom hook
• Animations: Framer Motion
• Print Styling: @media print CSS
• Analytics: PostHog or Plausible

Key Implementation Considerations

1. State Management

// useChecklistStore.ts (Zustand example)
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
 
interface ChecklistStore {
  state: ChecklistState;
  
  // Actions
  toggleItem: (itemId: string) => void;
  setItemTier: (itemId: string, tier: PriceTier) => void;
  setItemQuantity: (itemId: string, qty: number) => void;
  setBudgetMode: (mode: PriceTier | 'mix') => void;
  setEssentialsOnly: (value: boolean) => void;
  resetChecklist: () => void;
  importFromUrl: (encoded: string) => void;
  exportToUrl: () => string;
  
  // Computed
  getSummary: () => ChecklistSummary;
  getCategorySubtotal: (categoryId: string) => number;
}
 
export const useChecklistStore = create<ChecklistStore>()(
  persist(
    (set, get) => ({
      // ... implementation
    }),
    {
      name: 'baby-checklist-storage',
    }
  )
);

2. Price Calculation Logic

function calculateItemPrice(
  item: ChecklistItem,
  selection: ItemSelection
): number {
  if (!selection.selected) return 0;
  
  const priceRange = item.prices[selection.tier];
  if (!priceRange) {
    // Fallback to next available tier
    const fallbackTier = selection.tier === 'premium' ? 'mid' : 'budget';
    return item.prices[fallbackTier]?.max ?? 0;
  }
  
  // Use max price for conservative estimate
  // Could also offer avg: (min + max) / 2
  return priceRange.max * selection.quantity;
}

3. URL State Sync

// useUrlState.ts
import { useSearchParams, useRouter } from 'next/navigation';
import { useEffect } from 'react';
 
export function useUrlStateSync(store: ChecklistStore) {
  const searchParams = useSearchParams();
  const router = useRouter();
  
  // Import from URL on mount
  useEffect(() => {
    const encoded = searchParams.get('s');
    if (encoded) {
      store.importFromUrl(encoded);
    }
  }, []);
  
  // Export to URL when state changes
  const syncToUrl = () => {
    const encoded = store.exportToUrl();
    router.replace(`/checklist?s=${encoded}`, { scroll: false });
  };
  
  return { syncToUrl };
}

4. Print Styles

@media print {
  /* Hide interactive elements */
  .no-print,
  button,
  .filter-bar,
  .sidebar {
    display: none !important;
  }
  
  /* Expand all categories */
  .category-content {
    display: block !important;
    max-height: none !important;
  }
  
  /* Checkbox styling */
  .item-checkbox {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    display: inline-block;
  }
  
  .item-checkbox:checked::after {
    content: '✓';
  }
  
  /* Page breaks */
  .category {
    page-break-inside: avoid;
  }
}

5. Accessibility Considerations

• Keyboard navigation for all interactive elements
• ARIA labels for checkboxes and buttons
• Focus management when expanding/collapsing sections
• Screen reader announcements for total updates
• Reduced motion option for animations
• High contrast mode support

6. Performance Optimizations

• Virtualized list for long item lists (react-window)
• Memoized price calculations
• Debounced URL state sync
• Lazy load category data if needed
• Service worker for offline access (future)

Development Phases

Phase 1: MVP (2-3 weeks)

• Static category/item data
• Basic checklist UI with selections
• Price tier selection
• Quantity adjustment
• Running totals (per category + grand total)
• Local storage persistence
• URL-based sharing
• Print-friendly CSS

Phase 2: Polish (1-2 weeks)

• Mobile-optimized responsive design
• Animations and micro-interactions
• Budget mode quick-select
• Essential/Nice filters
• Item notes/tips tooltips
• Progress indicator
• SEO optimization

Phase 3: Enhancement (2-3 weeks)

• User accounts (optional)
• Saved checklists
• Multiple checklists per user
• Social sharing (OG images)
• Analytics integration
• A/B testing framework

---

Future Features

Product Timeline / Gantt Chart Visualization

“When Will You Use It?”

A horizontal timeline showing when each product is typically used, helping parents:

• Understand transition points (bassinet → crib, infant car seat → convertible)
• See product longevity at a glance (which investments last longer)
• Plan when to buy (don’t need high chair until 4-6 months)
• Identify overlap periods (when you need multiple options)

Age Timeline:    0   3m   6m   9m   12m   18m   24m   3y
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Bassinet        ████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Crib            ██████████████████████████████████████████
Swaddles        ██████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
Sleep Sacks     ░░░░██████████████████████████░░░░░░░░░░░
Infant Car Seat █████████████████░░░░░░░░░░░░░░░░░░░░░░░
Convertible     ░░░░░░░░░░░░░░████████████████████████████
Infant Stroller █████████████████░░░░░░░░░░░░░░░░░░░░░░░
Full Stroller   ░░░░░░░░████████████████████████████████░
High Chair      ░░░░░░░░████████████████████████████░░░░░

Features:

• Interactive hover for details (weight limits, milestone triggers)
• Filter by category
• Color coding by cost tier
• “Your baby is here” marker based on due date
• Mobile-friendly horizontal scroll

User Accounts

• Email/password or social login
• Save multiple checklists
• Sync across devices
• Email reminders before due date

Registry Integrations

Amazon Baby Registry

• Import existing registry items
• “Add to Amazon” buttons
• Price comparison
• Check off items purchased

Babylist Integration

• Similar import/export
• Universal registry support
• Price tracking

Gift Tracking

• Share checklist with family/friends
• Mark items as “being purchased by X”
• Avoid duplicate gifts
• Thank you note tracking

Smart Recommendations

• “People also bought” suggestions
• Seasonal adjustments (winter baby vs summer baby)
• Regional pricing adjustments
• Brand comparisons

Community Features

• User reviews/ratings per item
• “What I actually used” feedback
• Cost tracking post-birth (actual vs estimated)
• Community-submitted items

Analytics Dashboard

• Category spending breakdown
• Budget vs actual tracking
• Comparison to other parents
• Cost over time trends

---

Success Metrics

Key Performance Indicators

• Engagement: Time on page, items selected, completion rate
• Sharing: URL shares, social shares
• Conversion: Newsletter signups, return visits
• Utility: Print clicks, checklist completions

Target Benchmarks

• 60%+ of visitors select at least 5 items
• 30%+ complete at least 50% of essentials
• 15%+ share or print their checklist
• 10%+ return within 30 days

---

Document created: 2026-02-17
Author: True Baby Cost Team