176 lines
5.1 KiB
Markdown
176 lines
5.1 KiB
Markdown
# 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.
|