234 lines
5.1 KiB
Markdown
234 lines
5.1 KiB
Markdown
# 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
|