True Baby Cost โ€” Data Architecture Proposal

Created: 2026-02-18
Status: Draft


Current State

  • Strollers (data/strollers.json) โ€” Already uses JSON โœ…
  • All other products โ€” Hardcoded in HTML files โŒ

This makes updating products tedious and error-prone.


Proposed Architecture

1. Unified JSON Schema

All products follow a consistent schema:

interface Product {
  id: string;                    // e.g., "pampers-swaddlers"
  name: string;                  // "Pampers Swaddlers"
  brand: string;                 // "Pampers"
  category: ProductCategory;     // "diapers" | "formula" | "wipes" | etc.
  
  // Pricing
  pricing: {
    tier: "budget" | "mid" | "premium";
    unitPrice?: number;          // Per unit (diaper, wipe, oz)
    packPrice?: number;          // Per pack
    yearOneCost?: {              // Calculated annual cost
      min: number;
      max: number;
    };
  };
  
  // For age/weight-limited products
  usageRange?: {
    ageStart?: string;           // "newborn", "6m", "12m"
    ageEnd?: string;             // "4m", "15m", "3y"
    weightMin?: number;          // lbs
    weightMax?: number;          // lbs
    notes?: string;              // "until rolling"
  };
  
  // Content
  description?: string;
  highlights?: string[];
  pros?: string[];
  cons?: string[];
  
  // Media
  image?: string;                // Path or URL
  amazonUrl?: string;
  manufacturerUrl?: string;
  
  // Metadata
  rating?: number;               // 1-5
  featured?: boolean;
  tags?: string[];               // For filtering
  lastUpdated?: string;          // ISO date
}
 
type ProductCategory = 
  | "strollers"
  | "diapers" 
  | "formula"
  | "wipes"
  | "bottles"
  | "breast-pumps"
  | "nursery"
  | "clothing"
  | "bath"
  | "travel"
  | "health"
  | "sleep"
  | "play"
  | "postpartum";

2. File Structure

/data
  /strollers.json      (already exists)
  /diapers.json
  /formula.json
  /wipes.json
  /bottles.json
  /breast-pumps.json
  /accessories.json    (universal accessories)
  /categories.json     (category metadata)

3. Category Metadata

{
  "categories": [
    {
      "id": "diapers",
      "name": "Diapers",
      "emoji": "๐Ÿงท",
      "description": "Compare disposable diaper costs across brands",
      "yearOneEstimate": "$800-2,500",
      "keyMetric": "cost per diaper",
      "sortOrder": 2
    }
  ]
}

Migration Plan

Phase 1: Extract Data (Week 1)

  1. Create JSON files for each category
  2. Extract product data from existing HTML
  3. Validate against schema

Phase 2: Build System (Week 2)

Option A: Build-time generation (Recommended)

  • Node.js script generates HTML from JSON + templates
  • Run before deploy: npm run build
  • Output: Static HTML (fast, simple hosting)

Option B: Client-side rendering

  • JavaScript fetches JSON and renders
  • More dynamic, but slower initial load

Phase 3: Update Workflow (Week 3)

  1. Add/edit products via JSON files
  2. Run build script
  3. Deploy to Cloudflare Pages

Sample Data: Diapers

{
  "lastUpdated": "2026-02-18",
  "products": [
    {
      "id": "pampers-swaddlers",
      "name": "Pampers Swaddlers",
      "brand": "Pampers",
      "category": "diapers",
      "pricing": {
        "tier": "mid",
        "unitPrice": 0.28,
        "yearOneCost": { "min": 900, "max": 1200 }
      },
      "usageRange": {
        "ageStart": "newborn",
        "ageEnd": "24m",
        "weightMin": 6,
        "weightMax": 35
      },
      "highlights": [
        "Wetness indicator",
        "Umbilical cord cutout (NB)",
        "Air-dry channels"
      ],
      "pros": ["Soft", "Good leak protection", "Widely available"],
      "cons": ["More expensive than store brands", "Fragrance"],
      "amazonUrl": "https://amazon.com/dp/...",
      "rating": 4.7,
      "featured": true
    }
  ]
}

Benefits

  1. Easier updates โ€” Edit JSON, not HTML
  2. Consistency โ€” Same schema across all products
  3. Extensibility โ€” Add new categories easily
  4. API-ready โ€” JSON can power future features (search, filtering, comparison API)
  5. Version control โ€” Track product changes in git
  6. Collaboration โ€” Non-devs can edit JSON

Future Features Enabled

  • Search API โ€” Algolia or simple client-side search
  • Price alerts โ€” Track price changes over time
  • User reviews โ€” Add user-submitted ratings
  • Comparison tool โ€” Side-by-side across categories
  • First Year Calculator โ€” Sum costs across all categories
  • Affiliate optimization โ€” A/B test product placements

  1. Create data/diapers.json as pilot
  2. Build simple Node.js template script
  3. Migrate diapers.html to data-driven
  4. If successful, migrate remaining categories
  5. Add to CI/CD pipeline

This architecture scales from current 6 categories to 14+ in the checklist spec.