# Step 1: Multi-Step Educational Website - Drink Making
## Project Definition Document

---

## 1. COMPONENTS (Reusable UI Elements)

### Layout Components
- **Header**
  - Logo/Title
  - Navigation menu
  - Progress indicator (current step/recipe)
  
- **Sidebar**
  - Recipe list
  - Quick navigation
  - User profile

- **Footer**
  - Help/Support links
  - Social media
  - Credits

### Content Components
- **Recipe Card**
  - Recipe name
  - Difficulty level
  - Prep time
  - Thumbnail image
  - Quick stats (calories, servings)

- **Step Card**
  - Step number
  - Instructions text
  - Ingredient indicators
  - Timer (if needed)
  - Image/video placeholder
  - "Next/Previous" buttons

- **Ingredient List**
  - Ingredient item
  - Quantity/measurement
  - Checkbox (for tracking)
  - Substitution link
  - Image (of ingredient)

- **Video/Media Container**
  - Video player
  - Pause/play controls
  - Fullscreen toggle
  - Caption toggle

### Interactive Components
- **Timer Widget**
  - Start/pause/reset buttons
  - Time display
  - Sound notification

- **Interactive Tools**
  - Measurement converter
  - Ingredient substitution modal
  - Difficulty filter

- **Buttons**
  - Primary (Next, Start Recipe)
  - Secondary (Save, Share)
  - Tertiary (Help, Settings)

- **Forms/Inputs**
  - Search bar
  - Filter dropdowns
  - Text input fields

---

## 2. SCREENS (Pages/Views)

### Screen 1: **Landing/Home Page**
- Hero section (featured recipe)
- Browse recipes grid
- Categories/filters
- Welcome message for new users
- Recent/trending recipes
- **Purpose**: Entry point, recipe discovery

### Screen 2: **Recipe Selection Page**
- Filtered recipe list
- Sort options (difficulty, time, rating)
- Recipe preview cards
- Search functionality
- Categories sidebar
- **Purpose**: Help users find the right recipe

### Screen 3: **Recipe Overview/Intro**
- Full recipe title & description
- Difficulty level, prep time, cook time, servings
- Complete ingredient list
- Equipment needed
- Nutrition info
- "Start Recipe" button
- Save/Share options
- **Purpose**: Provide all recipe context before starting

### Screen 4: **Step-by-Step Tutorial (Multi-Step)**
- Current step number and total
- Step title & instructions
- Ingredients for this step (highlighted)
- Media (image/video)
- Timer (if applicable)
- Previous/Next navigation
- Pause/Resume options
- Progress bar
- **Purpose**: Guide users through the recipe

### Screen 5: **Completion/Results Page**
- "Congratulations" message
- Final result image/video placeholder
- Time taken vs. estimated
- Option to rate the recipe
- Share results
- "Try Another Recipe" button
- Certificates/achievements (if applicable)
- **Purpose**: Celebrate completion, encourage engagement

### Screen 6: **User Profile (Optional)**
- Completed recipes
- Saved recipes
- User settings
- Difficulty preference
- Dietary restrictions
- **Purpose**: Personalization and tracking

### Screen 7: **Help/FAQ Page**
- Common questions
- Tutorials/troubleshooting
- Contact support
- **Purpose**: User support

---

## 3. STATE MANAGEMENT

### Global State
```
{
  user: {
    id: string
    name: string
    dietaryRestrictions: string[]
    difficultyLevel: "beginner" | "intermediate" | "advanced"
    completedRecipes: string[]
    savedRecipes: string[]
  },
  
  currentRecipe: {
    id: string
    title: string
    description: string
    difficulty: "easy" | "medium" | "hard"
    prepTime: number (minutes)
    cookTime: number (minutes)
    servings: number
    ingredients: Ingredient[]
    steps: Step[]
    nutrition: {
      calories: number
      protein: number
      carbs: number
      fat: number
    }
    tags: string[]
    rating: number
  },
  
  recipeProgress: {
    currentStepIndex: number
    isStarted: boolean
    isPaused: boolean
    startTime: timestamp
    completedSteps: number[]
    checkedIngredients: string[]
  },
  
  ui: {
    currentScreen: "home" | "recipes" | "overview" | "tutorial" | "completion" | "profile" | "help"
    isMenuOpen: boolean
    isDarkMode: boolean
    notification: {
      message: string
      type: "success" | "error" | "info"
    }
  }
}
```

### Local State (Component Level)
- Timer countdown
- Video playback state
- Modal open/close
- Form input values
- Tab selection in steps

---

## 4. USER FLOW

### Flow A: **New User Journey**
1. **Landing** → Browse/search recipes
2. **Recipe Selection** → View recipe details
3. **Recipe Overview** → Confirm ingredients & equipment
4. **Tutorial** → Follow step-by-step instructions
5. **Completion** → Share or try another recipe

### Flow B: **Returning User Journey**
1. **Landing** → Quick access to saved recipes
2. **Recipe Selection** → Continue where they left off OR pick new recipe
3. → Same as Flow A from step 3

### Flow C: **Alternative Paths**
- **Filter first**: Landing → Filter by difficulty → Select recipe → Continue
- **Search only**: Landing → Search bar → Select recipe → Continue
- **Skip intro**: Recipe overview → "Skip to cooking" → Tutorial
- **Pause & resume**: Tutorial → Pause → Leave page → Return → Resume tutorial

### Flow D: **Support Request**
- Any screen → Help button → Help/FAQ → Contact support

### Decision Points
- At Recipe Overview: "Ready to cook?" (Yes → Tutorial | No → Back to selection)
- During Tutorial: "Continue?" after each step (Yes → Next | No → Pause)
- At Completion: "Another recipe?" (Yes → Selection | No → Home)

---

## SUMMARY OF KEY INTERACTIONS

| User Goal | Starting Point | Path | Ending Point |
|-----------|---|---|---|
| Learn to make a drink | Home | Browse/Search → Select → Overview → Tutorial | Completion |
| Repeat a recipe | Profile | Recently Completed → Start | Completion |
| Find recipe by filters | Home | Filters → Browse → Select | Recipe Overview |
| Get help | Any page | Help button | FAQ/Support |
| Save recipe | Recipe overview | Click Save | Saved to profile |
| Share result | Completion | Click Share | Social/Friend share |

---

## DELIVERABLES FOR APPROVAL

✅ **Components List** - 15+ reusable UI elements defined  
✅ **Screens/Views** - 7 main screens mapped  
✅ **State Structure** - Global and local state defined  
✅ **User Flows** - 4 primary flows + decision trees  

**Ready for your feedback & approval to proceed to Step 2 (Wireframes/Design).**