fix: add lesson 3
This commit is contained in:
Tim Rijkse
175
v2/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md
Normal file
175
v2/Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md
Normal file
@@ -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:** `<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.
|
||||
Reference in New Issue
Block a user