novi-lessons/Eindopdracht-AI-Developer.md

Eindopdracht

Leerlijn AI-Driven Development (30 EC)

Versie 2.0

---

Inhoudsopgave

1. Eindopdracht AI-Driven Development
2. Deelopdrachten
3. Quickscan
4. Structuur
5. 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

In het bedrijfsleven worden steeds vaker AI-tools ingezet om sneller en efficiënter software te ontwikkelen. Als moderne developer wordt van je verwacht dat je deze tools beheerst en weet hoe je AI-features integreert in applicaties.

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.

Verplichte technologieën (geleerd in de lessen):

Technologie	Les	Toepassing
TypeScript	Les 5	Typed code, interfaces, strict mode
Next.js 14	Les 6-7	App Router, SSR, API routes, React Query
Supabase	Les 8-9	Database design, CRUD, authenticatie
Cursor	Les 12, 16	.cursorrules, @ mentions, Composer
Skills.sh	Les 4	Minimaal 2 skills actief tijdens development
Vercel AI SDK	Les 17	Tool Calling, Agents met maxSteps
Externe API	Les 17	Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, etc.)
Vercel	Les 18	Deployment naar productie

Wat je gaat doen:

• Een professionele repository opzetten met juiste structuur en documentatie
• .cursorrules files schrijven die Cursor instrueren voor jouw project
• Skills.sh installeren en minimaal 2 relevante skills gebruiken
• Een Next.js applicatie bouwen met TypeScript en Tailwind CSS
• Data opslaan en ophalen via Supabase (database + authenticatie)
• Een AI Agent bouwen met de Vercel AI SDK:
  • Minimaal 3 tools die externe API data ophalen
  • maxSteps voor autonome multi-step taken
  • De AI interpreteert en combineert data voor de gebruiker
• Je applicatie deployen naar Vercel
• Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md

---

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 - 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 - 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 - 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

Een goed gestructureerd project is essentieel voor effectief werken met AI tools. In deze deelopdracht richt je je repository professioneel in, zodat Cursor en andere AI tools optimaal kunnen functioneren.

Wat je doet:

Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je installeert Skills.sh en activeert relevante skills. Je maakt documentatie files aan die je gedurende het project gaat vullen.

Vereisten:

• GitHub repository met duidelijke naam en beschrijving
• Next.js 14 project met TypeScript, Tailwind CSS, en App Router
• Skills.sh geïnstalleerd met minimaal 2 actieve skills:
  • vercel-react-best-practices (verplicht)
  • Minimaal 1 andere relevante skill (bijv. supabase-postgres-best-practices)
• Folder structuur volgens best practices:

  project/
  ├── .cursor/rules/
  │   ├── general.mdc
  │   └── [andere rules files]
  ├── .skills/                    # Skills.sh configuratie
  ├── docs/
  │   ├── PROJECT-BRIEF.md
  │   ├── PROMPT-LOG.md
  │   └── AI-DECISIONS.md
  ├── src/
  │   ├── app/
  │   ├── components/
  │   ├── lib/
  │   ├── hooks/
  │   └── types/
  ├── .env.example
  └── README.md
  

• Minimaal 2 .cursorrules files met project-specifieke instructies
• Volledig ingevulde PROJECT-BRIEF.md met:
  • Projectnaam en beschrijving
  • Doelgroep
  • Core features (3-5)
  • Tech stack keuzes met onderbouwing
• Complete README.md met installatie-instructies
• .env.example met alle benodigde environment variables

Op te leveren:

• GitHub repository URL
• Screenshot van folder structuur
• Lijst van geïnstalleerde Skills
• Inhoud van je belangrijkste .cursorrules file

---

Deelopdracht 2: Database & Authenticatie met Supabase

Elke serieuze applicatie heeft data opslag en gebruikersbeheer nodig. Je gaat Supabase gebruiken om dit te realiseren, met hulp van AI voor de implementatie.

Wat je doet:

Je ontwerpt eerst je database schema op papier of in een diagram tool (zoals geleerd in Les 8). Daarna maak je een Supabase project aan en implementeert je tabellen via de Table Editor. Je implementeert CRUD operaties met React Query (zoals geleerd in Les 7) en voegt authenticatie toe.

Vereisten:

• Database schema ontworpen met:
  • Correcte primary keys (UUID)
  • Foreign keys voor relaties
  • Minimaal één one-to-many relatie
  • Gedocumenteerd in AI-DECISIONS.md
• Supabase project aangemaakt en gekoppeld
• Minimaal 2 tabellen die relevant zijn voor je applicatie
• Werkende CRUD operaties met React Query:
  • useQuery voor data ophalen
  • useMutation voor create/update/delete
  • Optimistic updates (optioneel maar aangeraden)
• Authenticatie geïmplementeerd:
  • Login/registratie pagina met Supabase Auth UI
  • Protected routes (alleen voor ingelogde gebruikers)
  • User-specifieke data (RLS policies)
• TypeScript types voor je database schema
• Environment variables correct geconfigureerd
• Foutafhandeling bij database operaties

Op te leveren:

• Database schema diagram of beschrijving
• Screenshot van je Supabase tabellen
• Beschrijving van je relaties in AI-DECISIONS.md
• Werkende login flow (gedemonstreerd in eindpresentatie)

---

Deelopdracht 3: AI Agent met Externe API

Het onderscheidende element van jouw applicatie is de AI Agent die externe data combineert met intelligente interpretatie. Je gaat een agent bouwen die autonoom meerdere stappen kan uitvoeren om complexe taken te volbrengen.

Wat je doet:

Je bouwt een AI Agent met de Vercel AI SDK die:

1. Tools gebruikt om data op te halen van een externe API
2. Meerdere stappen autonoom kan uitvoeren (maxSteps)
3. De data interpreteert en combineert tot nuttig advies

Vereisten:

• Vercel AI SDK (ai package) + Zod geïnstalleerd
• Externe API integratie:
  • Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, Open Trivia DB, of andere)
  • API data wordt opgehaald via tools, niet hardcoded
• Tool Calling:
  • Minimaal 3 tools gedefinieerd met Zod parameters
  • Duidelijke description per tool
  • Error handling in elke tool
• Agent functionaliteit:
  • maxSteps van minimaal 3 (AI kan meerdere tools aanroepen)
  • System prompt die agent gedrag beschrijft
  • AI combineert/interpreteert data (niet alleen doorsturen)
• Frontend:
  • Chat interface met useChat hook
  • Streaming responses
  • Loading indicator
  • Error handling
• Integratie met Supabase:
  • User preferences meegeven als context
  • Conversation history opslaan (optioneel maar aangeraden)

Voorbeeld van wat NIET voldoet:

User: "Zoek cocktails met rum"
AI: "Hier zijn cocktails met rum: Mojito, Daiquiri, Piña Colada"

Dit is alleen data doorsturen, geen interpretatie.

Voorbeeld van wat WEL voldoet:

User: "Ik geef een feest voor 10 mensen, sommigen drinken geen alcohol"
AI: [roept searchByIngredient aan]
    [roept searchNonAlcoholic aan]
    [roept getCocktailDetails aan voor 3 cocktails]
    "Voor je feest raad ik aan: Mojito (fris, makkelijk te maken in grote
    hoeveelheden), Margarita (populair, past bij Mexicaans eten), en voor
    niet-drinkers: Virgin Piña Colada. Je hebt nodig: 2 flessen rum,
    1 fles tequila, limoenen, munt..."

Dit is een agent die data combineert en persoonlijk advies geeft.

Op te leveren:

• Agent design in AI-DECISIONS.md (welke tools, waarom, typische flow)
• System prompt met uitleg
• Minimaal 5 prompts in PROMPT-LOG.md over agent development

---

Deelopdracht 4: Testing, Deployment & Presentatie

Een applicatie is pas af als hij getest, gedeployed, en gedocumenteerd is. Je rondt je project af en bereidt een presentatie voor.

Wat je doet:

Je test je applicatie grondig, deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces met AI tools.

Vereisten:

Testing & Quality:

• Applicatie handmatig getest op belangrijkste flows
• Minimaal 1 bug gevonden en opgelost met Cursor hulp (gedocumenteerd in PROMPT-LOG.md)
• Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md)
• TypeScript strict mode zonder errors
• Geen console errors in productie
• Lighthouse score >80 op Performance

Deployment:

• Applicatie gedeployed op Vercel
• Environment variables correct geconfigureerd in Vercel
• Supabase redirect URLs geconfigureerd voor productie
• Applicatie werkt volledig op productie URL

Documentatie:

• PROMPT-LOG.md bevat minimaal 10 significante prompts met:
  • De prompt zelf
  • Welke tool (Cursor/ChatGPT/Claude)
  • Wat werkte wel/niet
  • Wat je leerde
• AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
• README.md is up-to-date en compleet

Presentatie (slide deck + demo):

• Introductie: wat doet je app, voor wie?
• Demo: live walkthrough van belangrijkste features
• AI integratie: toon je AI feature in actie
• Development proces: hoe heb je Cursor en Skills.sh ingezet?
• Reflectie: wat ging goed, wat was lastig, wat heb je geleerd?
• Conclusie: wat zou je anders doen?

Op te leveren:

• Productie URL (Vercel)
• Technisch verantwoordingsdocument (PDF)
• Slide deck (PDF of PPTX)
• Demo (live tijdens presentatie of video)

---

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

---

Repository Structuur

Je repository moet de volgende structuur hebben:

project-naam/
├── .cursor/
│   └── rules/
│       ├── general.mdc          # Algemene project regels
│       ├── components.mdc       # Component conventies (optioneel)
│       └── api.mdc              # API/Supabase regels (optioneel)
├── .skills/                     # Skills.sh configuratie
├── docs/
│   ├── PROJECT-BRIEF.md         # Project beschrijving
│   ├── PROMPT-LOG.md            # Gedocumenteerde prompts
│   └── AI-DECISIONS.md          # Architectuur beslissingen
├── src/
│   ├── app/                     # Next.js App Router
│   │   ├── api/
│   │   │   └── agent/
│   │   │       └── route.ts     # AI Agent API route (met tools)
│   │   ├── (auth)/              # Auth route group
│   │   │   ├── login/
│   │   │   └── register/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/                  # Basis UI components
│   │   ├── layout/              # Layout components
│   │   └── features/            # Feature-specifieke components
│   ├── hooks/
│   │   ├── useAuth.ts
│   │   └── [custom hooks]
│   ├── lib/
│   │   ├── supabase.ts          # Supabase client
│   │   ├── utils.ts
│   │   └── queryClient.ts       # React Query client
│   └── types/
│       ├── database.ts          # Supabase types
│       └── index.ts
├── .env.example                 # Template voor env vars
├── .env.local                   # Lokale env vars (NIET committen)
├── .gitignore
├── next.config.js
├── package.json
├── README.md
├── tailwind.config.ts
└── tsconfig.json

---

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.