diff --git a/Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md b/Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md new file mode 100644 index 0000000..1a41fa7 --- /dev/null +++ b/Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md @@ -0,0 +1,493 @@ +# Les 3: Cursor Basics - Lesopdracht (In-Class Assignment) + +## Doelstelling + +In deze les leer je hoe je **Cursor** effectief gebruikt om snel professionele componenten te bouwen. Je maakt een **NIEUW** Next.js project met Cursor Composer, genereert AI-gegenereerde cursorrules, en oefent met Tab Completion, Chat, Inline Edit en Composer. + +**Eindresultaat:** Een werkende Next.js applicatie met Hero component en Feature Cards, volledig gebouwd met Cursor. + +--- + +## Timing + +**Totaal: 85 minuten** +- Setup & Git: 10 min +- Skills & cursorrules: 10 min +- Hero Component (Composer): 20 min +- Feature Cards (Composer): 20 min +- Inline Edit styling: 15 min +- Git commit: 5 min +- Buffer: 5 min + +--- + +## Voorbereiding + +### Benodigde software +- **Cursor** (gedownload en geïnstalleerd van cursor.com) +- **Node.js** 18+ en npm +- **Git** (voor versiecontrole) +- **Terminal/Command Prompt** + +--- + +## Stap 1: Project aanmaken met Git (10 minuten) + +### Stap 1.1: Nieuwe folder en Git init + +Open Terminal/Command Prompt op je computer (niet in Cursor nog): + +```bash +mkdir les3-cursor-project +cd les3-cursor-project +git init +``` + +### Stap 1.2: Open in Cursor + +```bash +cursor . +``` + +Dit opent je lege project in Cursor. + +**Checkpoint 1:** Project is open in Cursor met lege folder. + +### Stap 1.3: Create Next.js app in Cursor Terminal + +Open de Terminal in Cursor met **Ctrl+`** (backtick): + +```bash +npx create-next-app@latest . --typescript --tailwind --app +``` + +Beantwoord alle vragen met **Yes (y)**: +- TypeScript? → **Yes** +- ESLint? → **Yes** +- Tailwind CSS? → **Yes** +- `src/` directory? → **No** +- App Router? → **Yes** +- Default import alias? → **Yes** + +Dit duurt ~2-3 minuten. Wacht tot het klaar is. + +**Checkpoint 2:** Next.js project is aangemaakt. Je ziet `app/`, `components/`, `package.json`, etc. in de file tree. + +--- + +## Stap 2: Cursor Skills & Docs (10 minuten) + +### Stap 2.1: Open Settings + +Klik op het **⚙️ Settings icoon** linksonder in Cursor. + +### Stap 2.2: Activeer Docs + +Ga naar **Features** → **Docs** + +Voeg deze drie documenten toe (zoek en click Add): +1. **Next.js** (officiële docs) +2. **React** (officiële docs) +3. **Tailwind CSS** (officiële docs) + +Dit helpt Cursor veel beter code te genereren omdat het toegang heeft tot de juiste documentatie. + +### Stap 2.3: Controleer Tab Completion + +Ga naar **Features** → **Completion** +- Zorg dat **Tab Completion** is ingeschakeld (dit is gratis!) + +**Checkpoint 3:** Alle drie docs zijn zichtbaar in je Docs sidebar rechts. Tab Completion is enabled. + +--- + +## Stap 3: Generate cursorrules met Chat (1 request) + +### Stap 3.1: Open Cursor Chat + +Druk **Ctrl+L** (Windows/Linux) of **Cmd+L** (Mac). + +Een chat panel opent aan de zijkant. + +### Stap 3.2: Prompt voor .cursorrules + +Typ deze prompt en druk Enter: + +``` +Je bent een expert Next.js developer. Genereer een .cursorrules bestand +voor een Next.js project met TypeScript, Tailwind CSS, en App Router. + +Het bestand moet guidelines bevatten voor: +- Functional components en React hooks +- TypeScript best practices +- Tailwind CSS utilities (nooit inline styles) +- Bestandsnaamgeving (PascalCase voor components, camelCase voor utils) +- Folder structuur (/app, /components, /lib) +- Comments in het Nederlands +- Keine `any` types + +Output het volledige .cursorrules bestand klaar om te copy-pasten. +``` + +Wacht op Cursor's antwoord. + +### Stap 3.3: Copy de output + +Cursor geeft je het complete .cursorrules bestand. + +Selecteer alle code (Ctrl+A in de chat output) en kopieer het. + +### Stap 3.4: Maak .cursorrules bestand + +1. Rechtsklik op de root folder in de left sidebar +2. Klik "New File" +3. Noem het `.cursorrules` (met punt aan het begin!) +4. Plak de content + +Save het bestand (Ctrl+S). + +**Checkpoint 4:** `.cursorrules` bestand bestaat in je project root met goede guidelines. + +**Request Budget: 1 van ~7 used** + +--- + +## Stap 4: Hero Component met Composer (20 minuten) + +### Stap 4.1: Maak component file + +1. Rechtsklik op de `app` folder +2. "New File" +3. Noem het `app/components/Hero.tsx` + +(Dit maakt automatisch de `components` subfolder) + +### Stap 4.2: Open Composer + +Met het Hero.tsx file open, druk **Ctrl+Shift+I** (Windows/Linux) of **Cmd+Shift+I** (Mac). + +De Composer panel opent. + +### Stap 4.3: Geef instructie aan Composer + +In Composer, typ: + +``` +Maak een Hero component (TypeScript, React functional component) met: +- Grote h1 heading: "Welkom bij Cursor" +- Subheading met beschrijvende tekst: "Bouw websites snel met AI" +- Een CTA button: "Aan de slag" (link naar #features) +- Responsive design: Tailwind CSS (md: breakpoint) +- Flexbox voor verticale centrering +- Dark mode compatible (dark: classes) +- Gradient background (blauw naar paars) +- Geen external dependencies + +Geef alleen de component code, geen imports of exports statements voor buiten. +``` + +Cursor genereert het component. + +### Stap 4.4: Accept of refine + +Review de getoonde code. Klik **Accept All** (groene knop) om het in je bestand in te voegen. + +**Checkpoint 5:** Hero.tsx file bevat een werkend Hero component met juiste structuur. + +**Request Budget: 2 van ~7 used** + +--- + +## Stap 5: Feature Cards Component met Composer (20 minuten) + +### Stap 5.1: Maak component file + +1. Rechtsklik op `app` folder +2. "New File" +3. Noem het `app/components/FeatureCards.tsx` + +### Stap 5.2: Open Composer + +Druk **Ctrl+Shift+I** in dit nieuwe bestand. + +### Stap 5.3: Composer prompt + +``` +Maak een FeatureCards component (TypeScript, React) dat: +- Een grid van 3 feature cards toont +- Responsive: 1 kolom op mobile, 3 kolommen op desktop (Tailwind grid) +- Elke card heeft: + * Een icon uit lucide-react (Package, Zap, Layers) + * Een h3 title + * Een description text +- Hover effect: transform scale-105 en shadow toename +- Cards hebben border en padding (Tailwind) +- Dark mode ready +- lucide-react is geïmporteerd bovenaan + +Geef alleen de component code. +``` + +Composer genereert het component. + +### Stap 5.4: Accept + +Klik **Accept All**. + +### Stap 5.5: Install lucide-react + +In je Cursor Terminal (Ctrl+`): + +```bash +npm install lucide-react +``` + +Wacht tot npm klaar is. + +**Checkpoint 6:** FeatureCards.tsx werkt, lucide-react is geïnstalleerd. + +**Request Budget: 3 van ~7 used** + +--- + +## Stap 6: Integreer in Homepage (5 minuten) + +### Stap 6.1: Open `app/page.tsx` + +Dit is je homepage. + +### Stap 6.2: Update de content + +Vervang de bestaande content (of voeg toe aan het bestand) met: + +```typescript +import Hero from './components/Hero'; +import FeatureCards from './components/FeatureCards'; + +export default function Home() { + return ( +
+ +
+
+

Features

+ +
+
+
+ ); +} +``` + +Save (Ctrl+S). + +### Stap 6.3: Test in browser + +In Cursor Terminal: + +```bash +npm run dev +``` + +Open `http://localhost:3000` in je browser. + +Je ziet nu: Hero → Features section met 3 cards. + +**Checkpoint 7:** Website draait lokaal en ziet er netjes uit. + +--- + +## Stap 7: Styling Refinement met Inline Edit (15 minuten) + +Nu gebruiken we **Inline Edit** (Ctrl+K) voor kleine styling tweaks. + +### Stap 7.1: Hero button styling + +1. Open `app/components/Hero.tsx` +2. Klik ergens in de button JSX +3. Druk **Ctrl+K** +4. Type: + +``` +Voeg een hover effect toe aan de button: +- Scale slightly bigger on hover +- Change background color smoothly +- Add smooth transition +``` + +5. Review de suggestie, klik Accept + +### Stap 7.2: Card shadows verbeteren + +1. Open `app/components/FeatureCards.tsx` +2. Selecteer een card div +3. Druk **Ctrl+K** +4. Type: + +``` +Voeg een mooier shadow effect toe aan de cards: +- Larger shadow on hover +- Smooth transition +- Better depth perception +``` + +5. Accept + +### Stap 7.3: Typography verbeteren + +1. Open `app/page.tsx` +2. Druk **Ctrl+K** +3. Type: + +``` +Maak de "Features" heading groter en mooier: +- Groter font size +- Betere kleur gradient +``` + +5. Accept + +Refresh je browser (F5) om de changes te zien. + +**Checkpoint 8:** Styling ziet er gepolijst uit, hover effects werken. + +**Request Budget: 4-5 van ~7 used** + +--- + +## Stap 8: Git Commit (5 minuten) + +### Stap 8.1: Open Source Control + +Druk **Ctrl+Shift+G** in Cursor. + +Source Control panel opent links. + +### Stap 8.2: Stage alle bestanden + +Klik op het **+** icoon bij "Changes" of druk **Ctrl+Shift+A**. + +Alle bestanden worden staged (groen). + +### Stap 8.3: Write commit message + +In het message veld, typ: + +``` +feat: Build Hero and FeatureCards components with Cursor Composer +``` + +### Stap 8.4: Commit + +Druk **Ctrl+Enter** of klik de ✓ button. + +Je commit is gemaakt! + +**Checkpoint 9:** Git commit is succesvol (geen errors). + +--- + +## Keyboard Shortcuts Reference + +| Actie | Windows | Mac | +|-------|---------|-----| +| **Cursor Chat** | Ctrl+L | Cmd+L | +| **Composer** | Ctrl+Shift+I | Cmd+Shift+I | +| **Inline Edit (quick fix)** | Ctrl+K | Cmd+K | +| **Terminal** | Ctrl+` | Cmd+` | +| **Command Palette** | Ctrl+Shift+P | Cmd+Shift+P | +| **Source Control** | Ctrl+Shift+G | Cmd+Shift+G | +| **Save** | Ctrl+S | Cmd+S | +| **Tab Completion** | Tab | Tab | + +--- + +## Request Budget Tracking + +Je hebt **~7 requests** beschikbaar in deze les: + +| Fase | Type | Requests | +|------|------|----------| +| cursorrules generatie | Chat | 1 | +| Hero Component | Composer | 1 | +| FeatureCards Component | Composer | 1 | +| Button styling tweak | Inline Edit | 0.5 | +| Card styling tweak | Inline Edit | 0.5 | +| Typography tweak | Inline Edit | 0.5 | +| Buffer/extra | - | 2.5 | + +**💡 Pro tip:** Gebruik **Tab Completion** (gratis!) voor: +- Imports toevoegen +- Props schrijven +- Repetitieve code (zelfde classNames herhalen) + +--- + +## Troubleshooting + +### Probleem: "Module not found: lucide-react" +**Oplossing:** +```bash +npm install lucide-react +npm run dev +``` +(Herstart je dev server na npm install) + +### Probleem: Composer stelt rare dingen voor +**Oplossing:** Wees specifieker in je prompt. Verwijs naar bestaande code: +- "Voeg lucide-react icons toe" (voldoende duidelijk) +- "Zorg dat het met TypeScript werkt" (specifieer) + +### Probleem: Inline Edit accepteert niet +**Oplossing:** Klik de groene ✓ knop of druk Ctrl+Enter + +### Probleem: `npm run dev` geeft error +**Stappen:** +1. Controleer dat je in de juiste folder bent: `pwd` +2. Controleer node versie: `node --version` (moet 18+ zijn) +3. Verwijder en herinstalleer dependencies: + ```bash + rm -rf node_modules package-lock.json + npm install + npm run dev + ``` + +### Probleem: Port 3000 al in gebruik +```bash +npm run dev -- -p 3001 +# Openen: http://localhost:3001 +``` + +### Probleem: Git werkt niet +**Controleer:** +- Ben je in de juiste folder? `pwd` moet je project folder zijn +- Bestaat `.git` folder? `ls -la .git` +- Zijn je bestanden getracked? `git status` + +--- + +## Checklist - Vinkje alles af voor je klaar bent + +- [ ] Git init en create-next-app uitgevoerd +- [ ] Cursor Skills (Next.js, React, Tailwind) geactiveerd +- [ ] `.cursorrules` bestand gegenereerd en in root geplaatst +- [ ] `app/components/Hero.tsx` aangemaakt met Composer +- [ ] `app/components/FeatureCards.tsx` aangemaakt met Composer +- [ ] lucide-react geïnstalleerd via npm +- [ ] Componenten geïmporteerd in `app/page.tsx` +- [ ] `npm run dev` draait zonder errors +- [ ] Website ziet er goed uit op http://localhost:3000 +- [ ] Styling verfijnd met Inline Edit (minimaal 2 aanpassingen) +- [ ] Git commit gemaakt met duidelijke message +- [ ] Alle bestanden zijn saved (geen rode stippen in sidebar) + +--- + +## Volgende stappen + +**Voor volgende les:** +- Zorg dat `npm run dev` nog werkt +- Download het huiswerk zip bestand van Teams (les3-debug-challenge.zip) +- Voorkom dat je project files verwijdert/opslaanslecht + +**Veel succes! 🚀** diff --git a/Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md b/Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md new file mode 100644 index 0000000..d325a14 --- /dev/null +++ b/Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md @@ -0,0 +1,375 @@ +# Les 3: Cursor Basics - Huiswerkopdracht (Homework - DEBUG CHALLENGE) + +**Deadline:** Vóór Les 4 + +**Type:** Debug Challenge - Je krijgt een kapot Next.js project en moet het repareren met Cursor. + +--- + +## Introductie + +Dit huiswerk is anders dan gewoon code schrijven. Je krijgt een **intentioneel kapot** Next.js project dat je met Cursor moet debuggen. + +Je leert: +- Errors opsporen met Cursor +- De Terminal gebruiken voor error messages +- Inline styles naar Tailwind CSS converteren +- Missing imports en dependencies vinden +- ESLint warnings beheren + +**Geschatte tijd:** 1.5-2 uur + +--- + +## Stap 0: Download het Zip-bestand + +Download `les3-debug-challenge.zip` van Teams. + +Unzip het bestand: +```bash +unzip les3-debug-challenge.zip +cd les3-debug-challenge +``` + +Open het in Cursor: +```bash +cursor . +``` + +--- + +## Wat je tegenkomt + +Het project `les3-debug-challenge` bevat deze INTENTIONELE ERRORS: + +### Error Type 1: Missing Dependencies + +**Wat:** `lucide-react` wordt gebruikt in `components/HeroIcon.tsx`, maar staat niet in `package.json`. + +**Hoe te vinden:** +- Open Terminal in Cursor (Ctrl+`) +- Run: `npm run dev` +- Je ziet: `Error: Module not found: lucide-react` + +**Hoe te fixen:** +```bash +npm install lucide-react +``` + +### Error Type 2: Syntax Errors (typos, missing closing tags) + +**Wat:** Een component heeft een vergeten closing JSX tag of import typo. + +**Bijv. in `app/page.tsx`:** +```tsx + +``` + +Of in imports: +```tsx +import { Button } from '@/componenst/Button' // typo: componenst +``` + +**Hoe te vinden:** +- Terminal errors: `SyntaxError` of `Cannot find module` +- Cursor geeft rode underlines in editor +- Gebruik Cursor Chat (Ctrl+L) om de error uit te leggen + +**Hoe te fixen:** +1. Kijk naar de regel number in error +2. Open dat bestand +3. Controleer imports en JSX syntax +4. Fix typos +5. Save en test: `npm run dev` + +### Error Type 3: Inline Styles (moeten naar Tailwind) + +**Wat:** Een component gebruikt `style={{...}}` ipv Tailwind classes. + +**Bijv. in `components/Card.tsx`:** +```tsx +
+ Content +
+``` + +**Hoe te fixen:** Gebruik Cursor **Inline Edit (Ctrl+K)** + +1. Open het bestand +2. Selecteer de `style={{...}}` block +3. Druk **Ctrl+K** +4. Type: + +``` +Converteer deze inline styles naar Tailwind CSS classes. +Verwijder de style prop en voeg className toe. +``` + +5. Cursor converteerd het naar: + +```tsx +
+ Content +
+``` + +6. Accept en verify + +**Tabel: Inline Styles → Tailwind Mapping** +| Inline Style | Tailwind Class | +|--------------|----------------| +| `padding: '20px'` | `p-5` (4px × 5) | +| `backgroundColor: '#f0f0f0'` | `bg-gray-100` | +| `borderRadius: '8px'` | `rounded-lg` | +| `border: '1px solid #ccc'` | `border border-gray-300` | +| `marginBottom: '16px'` | `mb-4` | +| `display: 'flex'` | `flex` | +| `justifyContent: 'center'` | `justify-center` | + +### Error Type 4: Missing Imports + +**Wat:** Een component wordt gebruikt maar niet geïmporteerd. + +**Bijv. in `app/page.tsx`:** +```tsx +export default function Home() { + return // FeatureCards is niet geïmporteerd! +} +``` + +**Hoe te vinden:** +- Cursor geeft rode underline: "Cannot find name 'FeatureCards'" +- Terminal error bij `npm run dev` + +**Hoe te fixen:** +- Voeg import bovenaan toe: + +```tsx +import FeatureCards from '@/components/FeatureCards'; +``` + +Of gebruik Cursor's **Quick Fix** (Ctrl+. op de fout). + +--- + +## Debug-aanpak stap-voor-stap + +### Stap 1: Installeer eerst alles + +```bash +npm install +``` + +### Stap 2: Start dev server + +```bash +npm run dev +``` + +Lees ALLE errors van boven naar beneden. + +### Stap 3: Fix errors één voor één + +**Beginnen bij:** +1. **npm install errors** (missing packages) +2. **Syntax errors** (ESLint, typos) +3. **Runtime errors** (module not found, missing imports) +4. **Styling issues** (inline styles) + +### Stap 4: Use Cursor Chat voor moeilijke errors + +Druk **Ctrl+L** en beschrijf de error: + +``` +Ik krijg deze error: +Error: Cannot find module 'lucide-react' + +Hoe fix ik dit? +``` + +Cursor helpt je. + +### Stap 5: Verify in browser + +Na elke fix: +1. Zorg dat `npm run dev` draait zonder errors +2. Open http://localhost:3000 +3. Check visueel dat alles werkt +4. Geen rode errors in console (F12 → Console tab) + +--- + +## Checklist van errors om op te lossen + +Zorg dat je ALLE deze punten fixt: + +- [ ] **npm install errors** - Alle missing dependencies geïnstalleerd +- [ ] **Syntax errors** - Alle closing tags toegevoegd, imports gecorrigeerd +- [ ] **Missing imports** - Alle componenten die gebruikt worden zijn geïmporteerd +- [ ] **Inline styles** - Minimaal 3 inline styles → Tailwind conversions +- [ ] **ESLint warnings** - Geen rode/oranje squiggly lines meer +- [ ] **Browser console** - Geen rood errors (F12) +- [ ] **Visual check** - Website ziet er correct uit + +--- + +## Tips per error-type + +### Voor Missing Dependencies + +```bash +# Check welke packages ontbreken +npm install + +# Of installeer handmatig +npm install [package-name] +``` + +### Voor Syntax Errors + +- **Controleer imports:** `import X from '@/components/X'` (check spelling) +- **Controleer JSX closing:** Elke `
` moet `
` hebben +- **Controleer quotes:** Tailwind classes moeten in dubbele quotes: `className="..."` + +### Voor Inline Styles → Tailwind + +Gebruik altijd Inline Edit (Ctrl+K): +1. Select de `style={{...}}` code +2. Ctrl+K +3. Type: "Convert to Tailwind classes" +4. Accept + +Tailwind Cheat Sheet: +- Padding: `p-2`, `p-4`, `p-8` (2, 4, 8 × 4px) +- Margin: `m-2`, `mb-4`, `mt-2` +- Background: `bg-white`, `bg-gray-100`, `bg-blue-500` +- Border: `border`, `border-2`, `border-gray-300` +- Radius: `rounded`, `rounded-lg`, `rounded-full` +- Display: `flex`, `grid`, `block` +- Colors: `text-white`, `bg-red-500`, `border-blue-300` + +### Voor Missing Imports + +Cursor's Quick Fix (Ctrl+.) werkt vaak: +1. Klik op de rode error +2. Druk Ctrl+. +3. "Add import" + +Of manual: +```tsx +import ComponentNaam from '@/components/ComponentNaam'; +``` + +--- + +## Submitting Your Work + +### Voor Les 4: + +Maak een **GitHub commit** en **push** het: + +```bash +git add . +git commit -m "fix: debug all errors and convert styles to Tailwind" +git push +``` + +Post in Teams: +1. **GitHub link** naar je debugged project +2. **Screenshot** van je werkende website (http://localhost:3000) +3. **Korte beschrijving:** Welke errors heb je gerepareerd? + ``` + - Fixed missing lucide-react dependency + - Fixed typo in import statement (componenst → components) + - Converted 5 inline styles to Tailwind classes + - Added missing Hero import to page.tsx + - Verified no ESLint errors + ``` + +### Checklist voor inlevering + +- [ ] Alle npm/syntax/import errors zijn fixed +- [ ] `npm run dev` draait zonder errors +- [ ] http://localhost:3000 toont de website correct +- [ ] Browser console (F12) toont geen errors +- [ ] Minimaal 3 inline styles zijn converted naar Tailwind +- [ ] Git commit is gemaakt +- [ ] GitHub link gepost in Teams + +--- + +## Bonus: Maak je eigen component (optioneel) + +Na alle errors te hebben opgelost, voeg je **een eigen component** toe: + +Ideeën: +- Een "Newsletter Signup" sectie +- Een "Call to Action" button bar +- Een "Stats" sectiie met cijfers +- Een "Testimonials" carousel +- Een "FAQ" sectie met accordions + +**Hoe:** +1. Open Composer (Ctrl+Shift+I) +2. Prompt: + +``` +Maak een [ComponentNaam] component met: +- [beschrijving] +- Tailwind CSS styling +- Responsive design +- TypeScript types + +Voeg het toe aan /components en importeer het in /app/page.tsx +``` + +3. Accept en test + +**Bonus punten!** + +--- + +## Troubleshooting Debug Errors + +### Error: "SyntaxError: Unexpected token" +**Oorzaak:** Ontbrekende haakje, quote, of JSX closing tag +**Fix:** Kijk naar de regel in de editor, controleer haakjes + +### Error: "Cannot find module 'X'" +**Oorzaak:** Package niet geïnstalleerd OF typo in import +**Fix:** +- Check spelling in import statement +- Of: `npm install X` + +### Error: "Cannot find name 'Component'" +**Oorzaak:** Component niet geïmporteerd +**Fix:** Voeg import toe boven het bestand + +### Error in Browser Console (F12) +**Oplossing:** Zeg dit tegen Cursor Chat: +``` +Ik zie deze error in de browser console: +[paste de error] + +Wat betekent het en hoe fix ik het? +``` + +--- + +## Veel Succes! + +Je gaat leren: +- ✅ Debuggen met Cursor +- ✅ Terminal errors lezen +- ✅ Inline styles naar Tailwind converteren +- ✅ Imports en dependencies beheren +- ✅ Website testen in browser + +Dit zijn essentiële vaardigheden als je echt met code werkt! + +**Deadline:** Vóór Les 4 🚀 diff --git a/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md b/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md new file mode 100644 index 0000000..0e3be1d --- /dev/null +++ b/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md @@ -0,0 +1,175 @@ +# Debug Challenge - Antwoordenblad (ALLEEN VOOR TIM) + +**⚠️ NIET DELEN MET STUDENTEN** + +--- + +## Overzicht Fouten + +Het project bevat **4 typen fouten**, verspreid over **8 bestanden**. + +--- + +## FOUT 1: Missing Dependency — `lucide-react` + +**Bestanden:** `components/Hero.tsx`, `components/FeatureCards.tsx` +**Symptoom:** `npm install` werkt, maar `npm run dev` geeft: +``` +Module not found: Can't resolve 'lucide-react' +``` + +**Oorzaak:** `lucide-react` wordt geïmporteerd in Hero.tsx en FeatureCards.tsx, maar staat NIET in package.json. + +**Fix:** +```bash +npm install lucide-react +``` + +**Leerdoel:** Studenten leren dat je imports moet matchen met dependencies in package.json. + +--- + +## FOUT 2: Typo in Import Path + +**Bestand:** `app/page.tsx` (regel 1) +**Symptoom:** +``` +Module not found: Can't resolve '@/componenst/Hero' +``` + +**Oorzaak:** Typo: `@/componenst/Hero` i.p.v. `@/components/Hero` + +**Fix:** +```tsx +// FOUT: +import Hero from "@/componenst/Hero"; + +// CORRECT: +import Hero from "@/components/Hero"; +``` + +**Leerdoel:** Lezen van error messages, herkennen van typos in import paden. + +--- + +## FOUT 3: Missing Import — `TestimonialSection` + +**Bestand:** `app/page.tsx` (regel 9) +**Symptoom:** +``` +ReferenceError: TestimonialSection is not defined +``` + +**Oorzaak:** `` wordt gebruikt in page.tsx maar is niet geïmporteerd. + +**Fix:** Voeg import toe bovenaan page.tsx: +```tsx +import TestimonialSection from "@/components/TestimonialSection"; +``` + +**Leerdoel:** Begrijpen dat elk component geïmporteerd moet worden. + +--- + +## FOUT 4: Missing Imports in layout.tsx — `Navbar` en `Footer` + +**Bestand:** `app/layout.tsx` (regels 17-18) +**Symptoom:** +``` +ReferenceError: Navbar is not defined +ReferenceError: Footer is not defined +``` + +**Oorzaak:** `` en `