novi-lessons/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md

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:

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:

// 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: <TestimonialSection /> wordt gebruikt in page.tsx maar is niet geïmporteerd.

Fix: Voeg import toe bovenaan page.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: <Navbar /> en <Footer /> worden gebruikt maar niet geïmporteerd.

Fix: Voeg imports toe bovenaan layout.tsx:

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

Leerdoel: Zelfs in layout.tsx moeten componenten geïmporteerd worden.

---

FOUT 5: Inline Styles → Tailwind (6 bestanden!)

Bestanden met inline styles:

1. components/Hero.tsx — hele component
2. components/FeatureCards.tsx — hele component
3. components/TestimonialSection.tsx — hele component
4. components/Navbar.tsx — hele component
5. components/Footer.tsx — hele component
6. app/about/page.tsx — hele pagina
7. app/contact/page.tsx — hele pagina (formulier)

Symptoom: Geen error, maar code gebruikt style={{...}} i.p.v. Tailwind classes.

Voorbeeld fix (Hero.tsx):

// FOUT (inline styles):
<section style={{
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  padding: '80px 20px',
  textAlign: 'center',
  color: 'white',
  minHeight: '500px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}}>

// CORRECT (Tailwind):
<section className="bg-gradient-to-br from-indigo-500 to-purple-700 py-20 px-5 text-center text-white min-h-[500px] flex items-center justify-center">

Aanpak voor studenten:

1. Selecteer de style={{...}} code
2. Druk Ctrl+K (Inline Edit)
3. Typ: "Converteer alle inline styles naar Tailwind CSS classes"
4. Accept

Leerdoel: Leren werken met Tailwind, Inline Edit gebruiken voor refactoring.

---

Samenvatting: Alle Fouten

#	Type	Bestand	Ernst
1	Missing dependency	package.json (lucide-react)	🔴 Blokkerend
2	Typo in import	app/page.tsx (componenst)	🔴 Blokkerend
3	Missing import	app/page.tsx (TestimonialSection)	🔴 Blokkerend
4	Missing imports	app/layout.tsx (Navbar, Footer)	🔴 Blokkerend
5	Inline styles	7 bestanden	🟡 Niet blokkerend, maar opdracht

Verwachte volgorde van oplossen:

1. npm install → werkt (geen errors hier)
2. npm run dev → Module not found: lucide-react → npm install lucide-react
3. npm run dev → Can't resolve '@/componenst/Hero' → fix typo
4. npm run dev → TestimonialSection not defined → add import
5. npm run dev → Navbar/Footer not defined → add imports
6. npm run dev → ✅ WERKT! Site is zichtbaar
7. Inline styles → Tailwind conversie (Inline Edit)

---

Verwachte Requests Gebruik

Actie	Requests
"Welke deps missen?" (Chat)	1
Fix typos/imports (handmatig of Chat)	0-1
Inline styles conversie (Inline Edit × 3-5)	3-5
Totaal	4-7 requests

Studenten op Hobby plan moeten dit kunnen doen. Tab Completion helpt bij imports.

---

Tips voor Tim

• Moeilijkheidsgraad: Gemiddeld. Fouten 1-4 zijn "lees de error message" niveau. Fout 5 (Tailwind) is de echte oefening.
• Als studenten vastlopen: Wijs ze op de terminal error messages. Zeg: "Lees de eerste regel van de error."
• Grid responsiveness: De FeatureCards en TestimonialSection grids zijn repeat(3, 1fr) — op mobiel breken ze. Bonuspunt als studenten dit ook fixen naar responsive grid.
• Contact form: Werkt functioneel (alert), maar alle styling is inline. Goed voorbeeld van een formulier omzetten naar Tailwind.