|
|
|
@@ -48,36 +48,15 @@ Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen:
|
|
|
|
|
|
|
|
|
|
|
|
## Algemene opdrachtbeschrijving
|
|
|
|
## 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.
|
|
|
|
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.
|
|
|
|
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:**
|
|
|
|
**Wat je gaat doen:**
|
|
|
|
|
|
|
|
|
|
|
|
- Een professionele repository opzetten met juiste structuur en documentatie
|
|
|
|
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.
|
|
|
|
- .cursorrules files schrijven die Cursor instrueren voor jouw project
|
|
|
|
|
|
|
|
- Skills.sh installeren en minimaal 2 relevante skills gebruiken
|
|
|
|
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.
|
|
|
|
- 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
@@ -151,200 +130,102 @@ Een adaptieve quiz app met een AI die moeilijkheid aanpast en uitlegt.
|
|
|
|
|
|
|
|
|
|
|
|
## Deelopdracht 1: Project Setup & Repository Inrichting
|
|
|
|
## 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.
|
|
|
|
Richt je repository professioneel in zodat je effectief kunt werken met AI tools.
|
|
|
|
|
|
|
|
|
|
|
|
**Wat je doet:**
|
|
|
|
**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.
|
|
|
|
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:**
|
|
|
|
**Vereisten:**
|
|
|
|
|
|
|
|
|
|
|
|
- GitHub repository met duidelijke naam en beschrijving
|
|
|
|
- GitHub repository met Next.js 14, TypeScript, en Tailwind CSS
|
|
|
|
- Next.js 14 project met TypeScript, Tailwind CSS, en App Router
|
|
|
|
- Folder structuur zoals behandeld in Les 14
|
|
|
|
- Skills.sh geïnstalleerd met minimaal 2 actieve skills:
|
|
|
|
- Skills.sh met minimaal 2 actieve skills
|
|
|
|
- `vercel-react-best-practices` (verplicht)
|
|
|
|
- Minimaal 2 .cursorrules files
|
|
|
|
- Minimaal 1 andere relevante skill (bijv. `supabase-postgres-best-practices`)
|
|
|
|
- docs/ folder met PROJECT-BRIEF.md, PROMPT-LOG.md, en AI-DECISIONS.md
|
|
|
|
- Folder structuur volgens best practices:
|
|
|
|
- README.md met installatie-instructies
|
|
|
|
```
|
|
|
|
|
|
|
|
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:**
|
|
|
|
**Op te leveren:**
|
|
|
|
- GitHub repository URL
|
|
|
|
- GitHub repository URL
|
|
|
|
- Screenshot van folder structuur
|
|
|
|
- PROJECT-BRIEF.md met projectbeschrijving en features
|
|
|
|
- Lijst van geïnstalleerde Skills
|
|
|
|
|
|
|
|
- Inhoud van je belangrijkste .cursorrules file
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Deelopdracht 2: Database & Authenticatie met Supabase
|
|
|
|
## 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.
|
|
|
|
Ontwerp en implementeer de data-laag van je applicatie.
|
|
|
|
|
|
|
|
|
|
|
|
**Wat je doet:**
|
|
|
|
**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.
|
|
|
|
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:**
|
|
|
|
**Vereisten:**
|
|
|
|
|
|
|
|
|
|
|
|
- Database schema ontworpen met:
|
|
|
|
- Database schema met correcte relaties (minimaal 2 tabellen)
|
|
|
|
- Correcte primary keys (UUID)
|
|
|
|
- Werkende CRUD operaties met React Query
|
|
|
|
- Foreign keys voor relaties
|
|
|
|
- Authenticatie met login/registratie
|
|
|
|
- Minimaal één one-to-many relatie
|
|
|
|
- User-specifieke data met RLS policies
|
|
|
|
- Gedocumenteerd in AI-DECISIONS.md
|
|
|
|
- Schema 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:**
|
|
|
|
**Op te leveren:**
|
|
|
|
- Database schema diagram of beschrijving
|
|
|
|
- Database schema beschrijving
|
|
|
|
- Screenshot van je Supabase tabellen
|
|
|
|
|
|
|
|
- Beschrijving van je relaties in AI-DECISIONS.md
|
|
|
|
|
|
|
|
- Werkende login flow (gedemonstreerd in eindpresentatie)
|
|
|
|
- Werkende login flow (gedemonstreerd in eindpresentatie)
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Deelopdracht 3: AI Agent met Externe API
|
|
|
|
## 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.
|
|
|
|
Bouw een AI Agent die externe data combineert met intelligente interpretatie.
|
|
|
|
|
|
|
|
|
|
|
|
**Wat je doet:**
|
|
|
|
**Wat je doet:**
|
|
|
|
|
|
|
|
|
|
|
|
Je bouwt een AI Agent met de Vercel AI SDK die:
|
|
|
|
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.
|
|
|
|
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:**
|
|
|
|
**Vereisten:**
|
|
|
|
|
|
|
|
|
|
|
|
- Vercel AI SDK (`ai` package) + Zod geïnstalleerd
|
|
|
|
- Minimaal 1 externe API geïntegreerd via Tool Calling
|
|
|
|
- **Externe API integratie:**
|
|
|
|
- Minimaal 3 tools gedefinieerd
|
|
|
|
- Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, Open Trivia DB, of andere)
|
|
|
|
- Agent kan meerdere stappen autonoom uitvoeren (`maxSteps`)
|
|
|
|
- API data wordt opgehaald via tools, niet hardcoded
|
|
|
|
- AI interpreteert en combineert data (niet alleen doorsturen)
|
|
|
|
- **Tool Calling:**
|
|
|
|
- Chat interface met streaming responses
|
|
|
|
- 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:**
|
|
|
|
**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.
|
|
|
|
```
|
|
|
|
|
|
|
|
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:**
|
|
|
|
**Op te leveren:**
|
|
|
|
- Agent design in AI-DECISIONS.md (welke tools, waarom, typische flow)
|
|
|
|
- Agent design in AI-DECISIONS.md
|
|
|
|
- System prompt met uitleg
|
|
|
|
- Werkende AI feature (gedemonstreerd in eindpresentatie)
|
|
|
|
- Minimaal 5 prompts in PROMPT-LOG.md over agent development
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Deelopdracht 4: Testing, Deployment & Presentatie
|
|
|
|
## 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.
|
|
|
|
Rond je project af met testing, deployment en documentatie.
|
|
|
|
|
|
|
|
|
|
|
|
**Wat je doet:**
|
|
|
|
**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.
|
|
|
|
Je test je applicatie, deployt naar Vercel, en bereidt een presentatie voor waarin je je werk demonstreert.
|
|
|
|
|
|
|
|
|
|
|
|
**Vereisten:**
|
|
|
|
**Vereisten:**
|
|
|
|
|
|
|
|
|
|
|
|
**Testing & Quality:**
|
|
|
|
**Testing & Deployment:**
|
|
|
|
- Applicatie handmatig getest op belangrijkste flows
|
|
|
|
- Applicatie getest op belangrijkste flows
|
|
|
|
- Minimaal 1 bug gevonden en opgelost met Cursor hulp (gedocumenteerd in PROMPT-LOG.md)
|
|
|
|
- TypeScript zonder errors
|
|
|
|
- Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md)
|
|
|
|
- Applicatie gedeployed op Vercel en werkt volledig
|
|
|
|
- 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:**
|
|
|
|
**Documentatie:**
|
|
|
|
- PROMPT-LOG.md bevat minimaal 10 significante prompts met:
|
|
|
|
- PROMPT-LOG.md: minimaal 10 prompts met beschrijving, gebruikte tool, en wat je leerde
|
|
|
|
- De prompt zelf
|
|
|
|
- AI-DECISIONS.md: minimaal 5 gedocumenteerde beslissingen
|
|
|
|
- Welke tool (Cursor/ChatGPT/Claude)
|
|
|
|
- README.md: up-to-date met installatie-instructies
|
|
|
|
- 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):**
|
|
|
|
**Presentatie:**
|
|
|
|
- Introductie: wat doet je app, voor wie?
|
|
|
|
- Wat doet je app en voor wie?
|
|
|
|
- Demo: live walkthrough van belangrijkste features
|
|
|
|
- Demo van belangrijkste features en AI integratie
|
|
|
|
- AI integratie: toon je AI feature in actie
|
|
|
|
- Reflectie op je development proces
|
|
|
|
- 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:**
|
|
|
|
**Op te leveren:**
|
|
|
|
- Productie URL (Vercel)
|
|
|
|
- Productie URL (Vercel)
|
|
|
|
- Technisch verantwoordingsdocument (PDF)
|
|
|
|
- Technisch verantwoordingsdocument (PDF, 1500-2000 woorden)
|
|
|
|
- Slide deck (PDF of PPTX)
|
|
|
|
- Slide deck en demo
|
|
|
|
- Demo (live tijdens presentatie of video)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
@@ -453,56 +334,6 @@ Korte conclusie met de belangrijkste takeaways.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 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
|
|
|
|
# Beoordelingscriteria
|
|
|
|
|