# 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:** `<TestimonialSection />` 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:** `<Navbar />` en `<Footer />` worden gebruikt maar niet geïmporteerd.

**Fix:** Voeg imports toe bovenaan layout.tsx:
```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):**
```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.