fix: debug challenge
This commit is contained in:
Tim Rijkse
375
Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md
Normal file
375
Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,375 @@
|
||||
# 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 🚀
|
||||
Reference in New Issue
Block a user