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)
- Create JSON files for each category
- Extract product data from existing HTML
- 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)
- Add/edit products via JSON files
- Run build script
- 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
- Easier updates โ Edit JSON, not HTML
- Consistency โ Same schema across all products
- Extensibility โ Add new categories easily
- API-ready โ JSON can power future features (search, filtering, comparison API)
- Version control โ Track product changes in git
- 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
Recommended Next Steps
- Create
data/diapers.jsonas pilot - Build simple Node.js template script
- Migrate diapers.html to data-driven
- If successful, migrate remaining categories
- Add to CI/CD pipeline
This architecture scales from current 6 categories to 14+ in the checklist spec.