# Les 11: Van Idee naar Prototype

---

## Hoofdstuk
**Deel 3: Full-Stack Development** (Les 9-12)

## Beschrijving
Proces van vaag idee naar werkend prototype. Feature breakdown, component thinking, MVP planning, user stories, en voorbereiding op eindproject. Kiezen van eindproject idea en architectuur opzetten.

---

## Te Behandelen (~45 min)

- Hoe ga je van vaag idee naar concrete features?
- Feature breakdown method en AI-hulp
- Component thinking: UI opdelen in herbruikbare stukken
- MVP (Minimum Viable Product) denken
- User stories schrijven (As a user I want to...)
- Prioritizing features: must-have, nice-to-have, later
- Database schema planning voor je idee
- Project architecture design
- Folder structure planning
- Eindproject idee kiezen (vereenvoudigde versie)

---

### Van Idee naar Feature Breakdown

**Stap 1: Beschrijf je idee in 1 zin**
```
"Ik wil een app waar je recepten kan zoeken op basis van ingrediënten die je hebt"
```

**Stap 2: Werk uit wat gebruikers willen**
```
User stories:
- Als gebruiker wil ik ingrediënten kunnen invoeren
- Als gebruiker wil ik recepten suggesties krijgen
- Als gebruiker wil ik recepten kunnen opslaan
```

**Stap 3: Break down in features**
```
Core Features:
- Ingredient input form
- Recipe search/filter
- Save favorites
- View saved recipes

Nice-to-have:
- Meal planning
- Shopping list generator
- Nutritional info
- Export recipes
```

**Stap 4: Prioriteer (MVP)**
- ✅ Input form + recipe search
- ✅ Display results
- ✅ Save/favorites
- ❌ Shopping list (later)
- ❌ Meal planning (later)

---

### Component Thinking

**Visualiseer je app:**
```
App
├── Header
├── SearchForm (input + submit)
├── RecipeList
│   └── RecipeCard (repeated)
│       ├── Title
│       ├── Ingredients
│       ├── Favorite button
│       └── View details
└── Footer
```

**Questions to ask:**
- Welke componenten worden herhaald?
- Welke componenten zijn child components?
- Welke componenten hebben state?
- Waar gaat data vandaan?

---

### MVP Denken

**MVP = Minimum Viable Product**

Het eenvoudigst mogelijke product dat nog steeds waarde levert.

**❌ Niet MVP:**
- Alle features tegelijk
- Perfect design met animaties
- Geavanceerde filters
- Social features

**✅ Wel MVP:**
- Core functionaliteit werkt
- Basis styling (Tailwind)
- Happy path werkt
- Data persists (database)

---

### Database Planning

**Voor recipe app:**
```
users table:
- id, email, password_hash, created_at

recipes table:
- id, title, ingredients, instructions, created_at

favorites table:
- id, user_id, recipe_id, created_at
```

**Relations:**
- users → favorites (one-to-many)
- users → saved_recipes (one-to-many)
- recipes → favorites (one-to-many)

---

## Tools
- Cursor
- ChatGPT (voor planning)
- Pen & papier (voor sketches)

---

## Lesopdracht (2 uur, klassikaal)

### Kies je Eindproject & Plan Architectuur

**Groepsdiscussie (15 min):**
Bespreek klassikaal de styling ervaringen uit Les 10 - welke Tailwind en shadcn/ui patterns werkten goed?

**Deel 1: Idee Kiezen (30 min)**

Kies één van deze projecten OF je eigen idee (met goedkeuring docent):
- **AI Recipe Generator** - Input: ingredients, Output: recipe suggestions + cooking tips
- **Smart Budget Buddy** - Track expenses, AI insights on spending patterns
- **Travel Planner AI** - Generate itineraries based on preferences
- **Study Buddy AI** - Quiz generation, note-taking, Q&A helper
- **Jouw eigen idee**

**Deel 2: Feature Breakdown (30 min)**

Voor je gekozen project:
1. Schrijf project description (2-3 zinnen)
2. Maak 3-5 user stories
3. Break down in core vs nice-to-have features
4. Selecteer MVP (wat is essentieel?)

**Deel 3: Architecture Planning (45 min)**

1. Schets database schema
2. List de main components
3. Plan folder structure
4. Identify donde AI integreert (tool calling? Chat? Completion?)

**Deel 4: Start Codebase (15 min)**

1. Maak GitHub repo
2. Create-next-app setup
3. Push initial commit

### Deliverable
- Project description document
- Feature breakdown met user stories
- Database schema diagram (hand-drawn ok)
- Component tree visualization
- GitHub repo met initial setup

---

## Huiswerk (2 uur)

### Bouw Basis Architecture

**Deel 1: Folder Structure (30 min)**

Create proper folder structure:
- src/components/ui/
- src/components/features/
- src/lib/
- src/hooks/
- src/types/
- docs/

**Deel 2: Type Definitions (30 min)**

Schrijf TypeScript types voor je project:
- User type
- Main data types
- API response types

**Deel 3: Component Skeleton (1 uur)**

Maak skeleton components:
- Main layout
- 3-4 main feature components (without logic)
- Proper props interfaces
- Basic Tailwind styling

### Deliverable
- GitHub commits met folder structure
- types/ folder met je data types
- Skeleton components
- README.md met project description

---

## Leerdoelen

Na deze les kan de student:
- Een project idee van vaag naar concreet uitwerken
- User stories schrijven
- Feature breakdown maken
- MVP bepalen
- Database schema ontwerpen
- Component architecture plannen
- Project codebase opzetten
- TypeScript types structureren
- Voorbereiding maken op verdere implementatie