# Eindopdracht

## Leerlijn AI-Driven Development (30 EC)

**Versie 2.0**

---

## Inhoudsopgave

1. [Eindopdracht AI-Driven Development](#eindopdracht-ai-driven-development)
2. [Deelopdrachten](#deelopdrachten)
3. [Quickscan](#quickscan)
4. [Structuur](#structuur)
5. [Beoordelingscriteria](#beoordelingscriteria)

---

# Eindopdracht AI-Driven Development

## Integrale eindopdracht

De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps.

**Dit is een zelfstandige eindopdracht.** Na het afronden van de 18 lessen werk je in je eigen tijd aan dit project. Je past alle geleerde vaardigheden en tools toe om een complete applicatie te bouwen.

Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen:

1. **TypeScript & Next.js Development**
   Je kunt een moderne webapplicatie bouwen met Next.js 14 (App Router), TypeScript, en Tailwind CSS.

2. **Database Design & Supabase**
   Je kunt een database ontwerpen met correcte relaties, en CRUD operaties en authenticatie implementeren met Supabase.

3. **AI-Assisted Development met Cursor**
   Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, @ mentions, context management, en Composer mode.

4. **Skills.sh voor Consistente Output**
   Je kunt Skills gebruiken om de kwaliteit van AI-gegenereerde code te verhogen en consistente best practices te hanteren.

5. **Prompt Engineering & Iteratief Werken**
   Je kunt effectieve prompts schrijven, iteratief werken met AI, en je proces documenteren.

6. **AI Agents Bouwen met Vercel AI SDK**
   Je kunt AI agents bouwen met de Vercel AI SDK, inclusief Tool Calling voor externe API integratie en `maxSteps` voor autonome multi-step taken.

---

## Algemene opdrachtbeschrijving

Je hebt 18 weken lang geleerd hoe je als moderne developer met AI werkt. Nu is het tijd om te laten zien wat je kunt.

Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst.

**Wat je gaat doen:**

Je zet een professionele repository op met logische structuur. Je bouwt een webapplicatie waarin je data opslaat en ophaalt via een database. Je integreert een AI feature die externe data combineert met intelligente interpretatie. Je documenteert je proces en deployt naar productie.

Hierbij pas je alle technieken toe die je in de lessen hebt geleerd: TypeScript, Next.js, Supabase, Cursor, Skills.sh, de Vercel AI SDK, en deployment naar Vercel.

---

## Voorbeeldprojecten

Je mag zelf bepalen wat je bouwt, zolang je aan alle technische eisen voldoet. **Belangrijk:** je applicatie moet AI combineren met externe data via een gratis API. De AI moet de data **interpreteren en analyseren**, niet alleen doorsturen.

Hieronder drie voorbeelden ter inspiratie:

### 1. Cocktail Sommelier
Een AI-powered cocktail advisor die helpt bij het kiezen en plannen van drinks.

| Aspect | Invulling |
|--------|-----------|
| **Externe API** | [TheCocktailDB](https://www.thecocktaildb.com/api.php) - 636 cocktails, recepten, ingrediënten |
| **Database** | users, favorites, party_plans, preferences |
| **Auth** | Login om favorieten en voorkeuren op te slaan |
| **Agent Tools** | `searchByIngredient`, `getCocktailDetails`, `searchNonAlcoholic`, `searchByCategory` |
| **Agent Taak** | "Plan cocktails voor mijn verjaardagsfeest, 15 mensen, sommigen drinken geen alcohol" |
| **AI Meerwaarde** | Agent zoekt meerdere opties, combineert ingrediëntenlijsten, geeft persoonlijk advies |

### 2. Recipe Remix
Een slimme recepten-assistent die helpt met koken op basis van wat je hebt.

| Aspect | Invulling |
|--------|-----------|
| **Externe API** | [TheMealDB](https://www.themealdb.com/api.php) - 597 recepten, ingrediënten, categorieën |
| **Database** | users, saved_recipes, pantry_items, diet_preferences |
| **Auth** | Login om recepten en voorraad op te slaan |
| **Agent Tools** | `searchByIngredient`, `getRecipeDetails`, `searchByCategory`, `searchByArea` |
| **Agent Taak** | "Ik heb kip, rijst en paprika. Wat kan ik maken voor een gezin met een vegetariër?" |
| **AI Meerwaarde** | Agent zoekt recepten, checkt dieetwensen, suggereert alternatieven, maakt weekmenu |

### 3. Quiz Master AI
Een adaptieve quiz app met een AI die moeilijkheid aanpast en uitlegt.

| Aspect | Invulling |
|--------|-----------|
| **Externe API** | [Open Trivia DB](https://opentdb.com/api_config.php) - 4000+ vragen in diverse categorieën |
| **Database** | users, quiz_sessions, scores, progress |
| **Auth** | Login om voortgang bij te houden |
| **Agent Tools** | `getQuestions`, `checkAnswer`, `getHint`, `explainAnswer` |
| **Agent Taak** | "Start een quiz over wetenschap, pas de moeilijkheid aan op mijn niveau" |
| **AI Meerwaarde** | Agent selecteert vragen, past moeilijkheid aan, geeft hints, legt foute antwoorden uit |

### Beschikbare Gratis APIs

| API | Data | URL |
|-----|------|-----|
| TheCocktailDB | Cocktails & recepten | thecocktaildb.com/api.php |
| TheMealDB | Maaltijden & recepten | themealdb.com/api.php |
| Open Trivia DB | Quiz vragen | opentdb.com/api_config.php |
| REST Countries | Landen informatie | restcountries.com |
| Open Library | Boeken data | openlibrary.org/developers |

**Eigen idee?** Je mag ook een eigen projectidee uitwerken met een andere gratis API, mits het voldoet aan alle technische eisen (agent met tools, externe data, AI interpretatie). Bespreek je idee eventueel met de docent.

---

## Op te leveren producten

- **GitHub Repository** met volledige broncode en documentatie
- **Deployed applicatie** op Vercel (werkende URL)
- **Technisch verantwoordingsdocument** (PDF, 1500-2000 woorden)
- **Slide deck** voor presentatie (10-15 slides)
- **Demo** van de werkende applicatie (live of video, max 5 minuten)

---

# Deelopdrachten

## Deelopdracht 1: Project Setup & Repository Inrichting

Richt je repository professioneel in zodat je effectief kunt werken met AI tools.

**Wat je doet:**

Je maakt een GitHub repository aan met een Next.js project. Je configureert Cursor met .cursorrules en installeert Skills.sh. Je maakt de documentatie files aan die je gedurende het project gaat vullen.

**Vereisten:**

- GitHub repository met Next.js 14, TypeScript, en Tailwind CSS
- Folder structuur zoals behandeld in Les 14
- Skills.sh met minimaal 2 actieve skills
- Minimaal 2 .cursorrules files
- docs/ folder met PROJECT-BRIEF.md, PROMPT-LOG.md, en AI-DECISIONS.md
- README.md met installatie-instructies

**Op te leveren:**
- GitHub repository URL
- PROJECT-BRIEF.md met projectbeschrijving en features

---

## Deelopdracht 2: Database & Authenticatie met Supabase

Ontwerp en implementeer de data-laag van je applicatie.

**Wat je doet:**

Je ontwerpt een database schema (zoals geleerd in Les 8), implementeert dit in Supabase, en bouwt CRUD operaties met React Query. Je voegt authenticatie toe zodat gebruikers hun eigen data kunnen beheren.

**Vereisten:**

- Database schema met correcte relaties (minimaal 2 tabellen)
- Werkende CRUD operaties met React Query
- Authenticatie met login/registratie
- User-specifieke data met RLS policies
- Schema gedocumenteerd in AI-DECISIONS.md

**Op te leveren:**
- Database schema beschrijving
- Werkende login flow (gedemonstreerd in eindpresentatie)

---

## Deelopdracht 3: AI Agent met Externe API

Bouw een AI Agent die externe data combineert met intelligente interpretatie.

**Wat je doet:**

Je bouwt een AI Agent met de Vercel AI SDK (zoals geleerd in Les 17) die tools gebruikt om data op te halen van een externe API, en deze data interpreteert en combineert tot nuttig advies voor de gebruiker.

**Vereisten:**

- Minimaal 1 externe API geïntegreerd via Tool Calling
- Minimaal 3 tools gedefinieerd
- Agent kan meerdere stappen autonoom uitvoeren (`maxSteps`)
- AI interpreteert en combineert data (niet alleen doorsturen)
- Chat interface met streaming responses

**Belangrijk:** De AI moet waarde toevoegen. "Hier zijn cocktails met rum" is alleen data doorsturen. "Voor jouw feest raad ik X aan omdat..." is interpretatie en advies.

**Op te leveren:**
- Agent design in AI-DECISIONS.md
- Werkende AI feature (gedemonstreerd in eindpresentatie)

---

## Deelopdracht 4: Testing, Deployment & Presentatie

Rond je project af met testing, deployment en documentatie.

**Wat je doet:**

Je test je applicatie, deployt naar Vercel, en bereidt een presentatie voor waarin je je werk demonstreert.

**Vereisten:**

**Testing & Deployment:**
- Applicatie getest op belangrijkste flows
- TypeScript zonder errors
- Applicatie gedeployed op Vercel en werkt volledig

**Documentatie:**
- PROMPT-LOG.md: minimaal 10 prompts met beschrijving, gebruikte tool, en wat je leerde
- AI-DECISIONS.md: minimaal 5 gedocumenteerde beslissingen
- README.md: up-to-date met installatie-instructies

**Presentatie:**
- Wat doet je app en voor wie?
- Demo van belangrijkste features en AI integratie
- Reflectie op je development proces

**Op te leveren:**
- Productie URL (Vercel)
- Technisch verantwoordingsdocument (PDF, 1500-2000 woorden)
- Slide deck en demo

---

# Quickscan

Hieronder vind je de randvoorwaarden waaraan de eindopdracht moet voldoen. De beoordelaar kan op basis van deze eisen de eindopdracht teruggeven en zal deze niet verder nakijken tot aan de eisen is voldaan.

## Algemene eisen

- [ ] Naam van de student, inleverdatum en leerlijntitel zijn opgenomen op de titelpagina van het verantwoordingsdocument
- [ ] Het technisch verantwoordingsdocument is digitaal ingeleverd als PDF
- [ ] De slide deck is digitaal ingeleverd als PDF of PPTX
- [ ] De GitHub repository URL is bijgevoegd
- [ ] De Vercel productie URL is bijgevoegd en werkt
- [ ] Alle deelopdrachten zijn uitgewerkt en de gevraagde deelproducten zijn aanwezig
- [ ] Het verantwoordingsdocument is goed leesbaar zonder storende grammatica- en spellingsfouten
- [ ] De omvang van het verantwoordingsdocument beslaat 1500-2000 woorden (exclusief inhoudsopgave en bijlagen)
- [ ] De presentatie duurt maximaal 15 minuten (inclusief demo)
- [ ] Pagina's in het verantwoordingsdocument zijn genummerd

## Inhoudelijke eisen

- [ ] De GitHub repository bevat een complete folder structuur zoals beschreven
- [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies
- [ ] Skills.sh is geïnstalleerd met minimaal 2 actieve skills (waaronder vercel-react-best-practices)
- [ ] docs/PROJECT-BRIEF.md is volledig ingevuld
- [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts
- [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
- [ ] README.md bevat installatie-instructies die werken
- [ ] De applicatie gebruikt Next.js 14 (App Router) met TypeScript en Tailwind CSS
- [ ] Database schema bevat correcte relaties (primary keys, foreign keys)
- [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen
- [ ] CRUD operaties zijn geïmplementeerd met React Query
- [ ] Authenticatie is geïmplementeerd (login/registratie)
- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI Agent
- [ ] Minimaal 1 externe API is geïntegreerd via Tool Calling
- [ ] Minimaal 3 tools zijn gedefinieerd met Zod parameters
- [ ] Agent heeft `maxSteps` van minimaal 3
- [ ] AI interpreteert/combineert data (niet alleen doorsturen)
- [ ] Streaming responses zijn geïmplementeerd
- [ ] De applicatie is gedeployed op Vercel en werkt volledig

## AI-gebruik

- [ ] Het gebruik van AI is toegestaan en verwacht bij deze eindopdracht
- [ ] Alle significante AI prompts zijn gedocumenteerd in PROMPT-LOG.md
- [ ] Architectuurbeslissingen gemaakt met AI hulp zijn gedocumenteerd in AI-DECISIONS.md
- [ ] Je bent te allen tijde verantwoordelijk voor de kwaliteit van de opgeleverde code
- [ ] Je kunt tijdens de presentatie uitleggen hoe je code werkt

---

# Structuur

## Technisch Verantwoordingsdocument

Voor het technisch verantwoordingsdocument wordt de volgende structuur aanbevolen:

### Titelpagina
- Naam student
- Inleverdatum
- Projectnaam
- GitHub URL
- Vercel URL

### Samenvatting
Een korte samenvatting (max 150 woorden) van wat je hebt gebouwd en de belangrijkste resultaten.

### Inhoudsopgave
Overzichtelijke inhoudsopgave met paginanummers.

### 1. Introductie
- Wat is het probleem dat je oplost?
- Wie is je doelgroep?
- Wat zijn de belangrijkste features?

### 2. Technische Implementatie
- Gekozen tech stack en waarom
- Database design (met diagram of beschrijving)
- AI Agent design:
  - Welke externe API en waarom
  - Welke tools heb je gedefinieerd
  - Hoe werkt de agent flow (typisch scenario)
  - System prompt en waarom deze aanpak
- Belangrijkste technische uitdagingen en oplossingen

### 3. AI-Assisted Development Proces
- Hoe heb je Cursor ingezet? Welke .cursorrules werkten goed?
- Welke Skills.sh skills heb je gebruikt en wat was het effect?
- Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md)
- Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md)

### 4. Reflectie
- Wat ging goed?
- Wat was uitdagend?
- Wat heb je geleerd over AI-assisted development?
- Wat zou je anders doen bij een volgend project?

### 5. Conclusie
Korte conclusie met de belangrijkste takeaways.

### Bijlagen
- Link naar GitHub repository
- Link naar Vercel deployment
- Eventuele screenshots of diagrammen

---

---

# Beoordelingscriteria

De eindopdracht wordt beoordeeld op basis van de volgende criteria. Per criterium kent de beoordelaar een cijfer van 1-10 toe.

| Deelopdracht | Criterium | Weging |
|--------------|-----------|--------|
| **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** |
| 1.1 | Repository structuur is professioneel en compleet | 5% |
| 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% |
| 1.3 | Skills.sh correct geïnstalleerd en gebruikt | 5% |
| **2. Database & Auth** | *Leeruitkomst: Database design & Supabase* | **25%** |
| 2.1 | Database schema is logisch met correcte relaties | 10% |
| 2.2 | CRUD operaties werken correct met React Query | 10% |
| 2.3 | Authenticatie is correct geïmplementeerd | 5% |
| **3. AI Agent** | *Leeruitkomst: AI Agents bouwen met Vercel AI SDK* | **30%** |
| 3.1 | Agent voegt waarde toe: interpreteert en combineert data | 10% |
| 3.2 | Tool Calling correct geïmplementeerd (min. 3 tools, externe API) | 10% |
| 3.3 | Agent gedrag correct (`maxSteps`, system prompt, error handling) | 10% |
| **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** |
| 4.1 | Applicatie werkt volledig in productie | 10% |
| 4.2 | Code kwaliteit (TypeScript strict, geen errors) | 5% |
| **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** |
| 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% |
| 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% |
| 5.3 | Presentatie en verantwoordingsdocument | 5% |
| **Totaal** | | **100%** |

---

## Cijferbepaling

| Cijfer | Betekenis |
|--------|-----------|
| 9-10 | Uitstekend: overtreft alle verwachtingen, creatief en professioneel |
| 7-8 | Goed: voldoet ruim aan alle eisen, weinig verbeterpunten |
| 6 | Voldoende: voldoet aan de basiseisen |
| 5 | Onvoldoende: voldoet niet aan alle basiseisen, maar dichtbij |
| 1-4 | Onvoldoende: significante onderdelen ontbreken of werken niet |

Een voldoende (≥5.5) is vereist om de leerlijn af te ronden.