# 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
<Hero // Missing closing >
```

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
<div style={{
  padding: '20px',
  backgroundColor: '#f0f0f0',
  borderRadius: '8px',
  border: '1px solid #ccc'
}}>
  Content
</div>
```

**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
<div className="p-5 bg-gray-100 rounded-lg border border-gray-300">
  Content
</div>
```

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 /> // 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 `<div>` moet `</div>` 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 🚀