novi-lessons/Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md

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:

unzip les3-debug-challenge.zip
cd les3-debug-challenge

Open het in Cursor:

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:

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:

<Hero // Missing closing >

Of in imports:

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:

<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:

<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:

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:

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

npm install

Stap 2: Start dev server

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

# 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:

import ComponentNaam from '@/components/ComponentNaam';

---

Submitting Your Work

Voor Les 4:

Maak een GitHub commit en push het:

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 🚀