novi-lessons/Samenvattingen/Les11-Samenvatting.md

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