Recipe Builder: Information Architecture

A professional-grade application that transforms YouTube cooking videos into structured, actionable recipes with nutritional data and precise timestamps.

---

Table of Contents

1. Overview
2. User Flow
3. System Architecture
4. Data Model
5. Feature Breakdown
6. UI Components
7. Technical Stack

---

Overview

Vision

Recipe Builder is a precision tool for culinary professionals and serious home cooks who want to extract, organize, and track recipes from video content. The application emphasizes accuracy, clarity, and professional-grade nutritional tracking.

Core Value Proposition

• One Input: Paste a YouTube URL
• Three Outputs: Macros, Steps, Timestamps

---

User Flow

Primary Flow Diagram

Detailed State Machine

---

System Architecture

High-Level Architecture

Processing Pipeline

---

Data Model

Entity Relationship Diagram

Recipe Data Structure

interface Recipe {
  id: string;
  youtubeUrl: string;
  videoId: string;
  
  // Metadata
  title: string;
  description: string;
  thumbnailUrl: string;
  channelName: string;
  durationSeconds: number;
  
  // Content
  ingredients: Ingredient[];
  steps: RecipeStep[];
  
  // Nutrition
  nutrition: NutritionData;
  servings: number;
  
  // Timestamps
  createdAt: Date;
  updatedAt: Date;
}

interface Ingredient {
  name: string;
  quantity: number;
  unit: string;
  notes?: string;
  nutritionPer100g?: NutritionItem;
}

interface RecipeStep {
  stepNumber: number;
  instruction: string;
  timestampStart: number;  // seconds
  timestampEnd: number;    // seconds
  tips?: string[];
  technique?: string;
}

interface NutritionData {
  perServing: {
    calories: number;
    protein: number;   // grams
    carbs: number;     // grams
    fat: number;       // grams
    fiber: number;     // grams
    sodium: number;    // mg
  };
  total: {
    calories: number;
    protein: number;
    carbs: number;
    fat: number;
    fiber: number;
    sodium: number;
  };
}

---

Feature Breakdown

1. URL Input & Validation

Validation Rules:

• Must be valid YouTube URL format
• Supports: youtube.com/watch, youtu.be, youtube.com/embed
• Video must be public or unlisted
• Video must have captions/transcript available

2. Macro Extraction

Nutrition Features:

• Per-serving breakdown
• Total recipe nutrition
• Macro percentages
• Micronutrient tracking (optional)
• Dietary labels (keto, vegan, etc.)

3. Step-by-Step Instructions

Component	Description
Step Number	Sequential ordering
Instruction	Clear, actionable text
Timestamp	Click to jump to video
Duration	Time for each step
Tips	Pro tips and substitutions

4. Interactive Timeline

---

UI Components

Component Hierarchy

Design System

Element	Specification
Primary Color	#4A9EFF (Professional Blue)
Secondary Color	#00D9FF (Accent Cyan)
Background	#0A0A0A (Deep Black)
Surface	#1A1A1A (Card Background)
Text Primary	#FFFFFF
Text Secondary	#A0A0A0
Success	#00B894
Error	#D63031
Font Family	Inter, SF Pro Display
Border Radius	8px (cards), 4px (inputs)

---

Technical Stack

Recommended Stack

API Endpoints

Endpoint	Method	Description
/api/recipes/extract	POST	Extract recipe from YouTube URL
/api/recipes/:id	GET	Get saved recipe
/api/recipes	GET	List user's recipes
/api/recipes/:id	DELETE	Delete recipe
/api/nutrition/lookup	POST	Lookup ingredient nutrition

---

Summary

Recipe Builder transforms the chaos of cooking videos into structured, professional-grade recipe documentation. The clean, dark interface puts the focus on the content while the intelligent extraction engine handles the complexity of parsing video content into actionable data.

Key Differentiators

1. Precision Timestamps - Jump directly to any step in the video
2. Accurate Macros - AI-powered nutritional analysis
3. Professional UX - Clean, distraction-free interface
4. One-Click Extraction - Paste URL, get complete recipe

---

Architecture Document v1.0