fix: les
This commit is contained in:
@@ -1,493 +1,178 @@
|
||||
# Les 3: Cursor Basics - Lesopdracht (In-Class Assignment)
|
||||
# Les 3 — Lesopdracht
|
||||
## Bouw je eerste Cursor-componenten
|
||||
|
||||
## Doelstelling
|
||||
|
||||
In deze les leer je hoe je **Cursor** effectief gebruikt om snel professionele componenten te bouwen. Je maakt een **NIEUW** Next.js project met Cursor Composer, genereert AI-gegenereerde cursorrules, en oefent met Tab Completion, Chat, Inline Edit en Composer.
|
||||
|
||||
**Eindresultaat:** Een werkende Next.js applicatie met Hero component en Feature Cards, volledig gebouwd met Cursor.
|
||||
**Vak:** AI-Assisted Development
|
||||
**Opleiding:** NOVI Hogeschool Utrecht
|
||||
**Werkvorm:** in-class, na de pauze (±75 minuten)
|
||||
**Status:** klaar = drie components live op `localhost:3000` + eerste git commit
|
||||
|
||||
---
|
||||
|
||||
## Timing
|
||||
## Doel
|
||||
|
||||
**Totaal: 85 minuten**
|
||||
- Setup & Git: 10 min
|
||||
- Skills & cursorrules: 10 min
|
||||
- Hero Component (Composer): 20 min
|
||||
- Feature Cards (Composer): 20 min
|
||||
- Inline Edit styling: 15 min
|
||||
- Git commit: 5 min
|
||||
- Buffer: 5 min
|
||||
Je gebruikt vandaag voor het eerst Cursor's drie hoofdsneltoetsen — Tab, Cmd+K en Cmd+L — om een werkende Next.js homepage te bouwen. Aan het eind heb je een Hero, een styling-tweak en één extra feature in je code, plus een eerste git commit.
|
||||
|
||||
---
|
||||
|
||||
## Voorbereiding
|
||||
## Wat je nodig hebt (klaar uit de demo)
|
||||
|
||||
### Benodigde software
|
||||
- **Cursor** (gedownload en geïnstalleerd van cursor.com)
|
||||
- **Node.js** 18+ en npm
|
||||
- **Git** (voor versiecontrole)
|
||||
- **Terminal/Command Prompt**
|
||||
- Cursor geïnstalleerd + Pro Student actief
|
||||
- Skills/Docs voor Next.js, React, Tailwind toegevoegd
|
||||
- Vers Next.js-project: `mijn-eerste-cursor-app`
|
||||
- `npm run dev` draait op `localhost:3000`
|
||||
|
||||
---
|
||||
|
||||
## Stap 1: Project aanmaken met Git (10 minuten)
|
||||
## Stappenplan
|
||||
|
||||
### Stap 1.1: Nieuwe folder en Git init
|
||||
### Stap 1 — `.cursorrules` genereren
|
||||
|
||||
Open Terminal/Command Prompt op je computer (niet in Cursor nog):
|
||||
Open Cursor in je project. Druk **Cmd+L** voor de chat. Plak deze prompt:
|
||||
|
||||
```
|
||||
Maak een .cursorrules voor dit Next.js 16 project. Focus op:
|
||||
- TypeScript strict mode
|
||||
- Tailwind CSS voor styling, geen CSS modules
|
||||
- Server components by default; "use client" alleen waar nodig
|
||||
- @/ import alias
|
||||
- Functional components
|
||||
|
||||
Geef alleen het bestand terug, geen extra uitleg.
|
||||
```
|
||||
|
||||
Cursor geeft een bestand. Kopieer de inhoud naar een nieuw bestand `.cursorrules` in de root van je project. Save.
|
||||
|
||||
### Stap 2 — Taak 1: Hero-component (via Cmd+L)
|
||||
|
||||
Open `src/app/page.tsx`. Druk **Cmd+L** voor de chat (nieuwe chat). Plak deze prompt:
|
||||
|
||||
```
|
||||
@file:src/app/page.tsx
|
||||
|
||||
Vervang de huidige inhoud met een Hero-component. Specs:
|
||||
- Gradient achtergrond (subtiele blauwe verloop)
|
||||
- Grote titel: "Mijn Eerste Cursor App"
|
||||
- Ondertitel: "Gebouwd in les 3 met Cursor"
|
||||
- Twee CTA-knoppen: "Aan de slag" (primair) en "Meer info" (secundair)
|
||||
- Responsive: stack op mobiel, naast elkaar op desktop
|
||||
- Tailwind only, geen custom CSS
|
||||
- Inline in app/page.tsx houden (geen aparte component file)
|
||||
```
|
||||
|
||||
Cursor toont een diff. Bekijk de code, klik **Accept all**. Save. Open `http://localhost:3000` in je browser.
|
||||
|
||||
✅ **Check:** je ziet je Hero. Responsive: maak browser smaller, knoppen moeten onder elkaar staan.
|
||||
|
||||
### Stap 3 — Taak 2: Styling-tweak (via Cmd+K)
|
||||
|
||||
Selecteer in `src/app/page.tsx` de twee knoppen (de hele button- of link-blokken). Druk **Cmd+K**. Plak deze prompt in het balkje:
|
||||
|
||||
```
|
||||
Verander de primaire knop naar een paars gradient (purple-600 naar pink-600). Maak de secundaire knop transparant met een paarse border en paarse tekst. Voeg een hover-effect toe aan beide.
|
||||
```
|
||||
|
||||
Cursor toont een inline diff. Druk **Tab** om te accepteren. Save. Refresh browser.
|
||||
|
||||
✅ **Check:** knoppen zijn paars, hover werkt.
|
||||
|
||||
### Stap 4 — Taak 3: Extra feature (vrije keuze)
|
||||
|
||||
Kies één van de drie. Gebruik Cmd+L of Cmd+K naar wat het beste past.
|
||||
|
||||
**Optie A — FeatureCards (3 cards onder de Hero)**
|
||||
|
||||
```
|
||||
Voeg onder de Hero in @file:src/app/page.tsx een sectie toe met 3 feature-cards.
|
||||
Per card: een emoji-icoon, een titel, een korte beschrijving.
|
||||
Drie features: "Snel", "AI-powered", "Open Source".
|
||||
Grid layout: 1 kolom mobiel, 3 kolommen desktop.
|
||||
Tailwind styling, matched de Hero.
|
||||
```
|
||||
|
||||
**Optie B — ContactForm (form onderaan)**
|
||||
|
||||
```
|
||||
Voeg onder de Hero in @file:src/app/page.tsx een contact-form toe.
|
||||
Velden: naam, e-mail, bericht (textarea).
|
||||
Een submit-knop in dezelfde paarse stijl als de Hero CTAs.
|
||||
Form moet er goed uitzien — max-width, padding, ronde hoeken.
|
||||
"use client" gebruiken, met useState voor de velden (nog geen echte submit-logica).
|
||||
```
|
||||
|
||||
**Optie C — Footer (footer met links + copyright)**
|
||||
|
||||
```
|
||||
Voeg een Footer toe onder de hele page-inhoud in @file:src/app/page.tsx.
|
||||
Drie kolommen: "Product" (3 links), "Resources" (3 links), "Contact" (e-mail + locatie).
|
||||
Copyright-regel onderaan: "© 2026 Mijn Eerste Cursor App".
|
||||
Matched de Hero-stijl, donkere achtergrond voor contrast.
|
||||
```
|
||||
|
||||
Cursor toont diff → Accept → save → refresh.
|
||||
|
||||
✅ **Check:** je extra feature staat in de pagina, matched de Hero-stijl.
|
||||
|
||||
### Stap 5 — Git commit
|
||||
|
||||
Open een terminal in Cursor (Ctrl+ ` of Terminal → New Terminal).
|
||||
|
||||
```bash
|
||||
mkdir les3-cursor-project
|
||||
cd les3-cursor-project
|
||||
git init
|
||||
git add .
|
||||
git commit -m "first cursor build: hero + tweaks + extra feature"
|
||||
```
|
||||
|
||||
### Stap 1.2: Open in Cursor
|
||||
Optioneel: push naar GitHub.
|
||||
|
||||
```bash
|
||||
cursor .
|
||||
gh repo create mijn-eerste-cursor-app --public --source=. --push
|
||||
```
|
||||
|
||||
Dit opent je lege project in Cursor.
|
||||
|
||||
**Checkpoint 1:** Project is open in Cursor met lege folder.
|
||||
|
||||
### Stap 1.3: Create Next.js app in Cursor Terminal
|
||||
|
||||
Open de Terminal in Cursor met **Ctrl+`** (backtick):
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest . --typescript --tailwind --app
|
||||
```
|
||||
|
||||
Beantwoord alle vragen met **Yes (y)**:
|
||||
- TypeScript? → **Yes**
|
||||
- ESLint? → **Yes**
|
||||
- Tailwind CSS? → **Yes**
|
||||
- `src/` directory? → **No**
|
||||
- App Router? → **Yes**
|
||||
- Default import alias? → **Yes**
|
||||
|
||||
Dit duurt ~2-3 minuten. Wacht tot het klaar is.
|
||||
|
||||
**Checkpoint 2:** Next.js project is aangemaakt. Je ziet `app/`, `components/`, `package.json`, etc. in de file tree.
|
||||
(Vereist `gh auth login`.)
|
||||
|
||||
---
|
||||
|
||||
## Stap 2: Cursor Skills & Docs (10 minuten)
|
||||
## Op te leveren
|
||||
|
||||
### Stap 2.1: Open Settings
|
||||
In de chat (Teams):
|
||||
|
||||
Klik op het **⚙️ Settings icoon** linksonder in Cursor.
|
||||
|
||||
### Stap 2.2: Activeer Docs
|
||||
|
||||
Ga naar **Features** → **Docs**
|
||||
|
||||
Voeg deze drie documenten toe (zoek en click Add):
|
||||
1. **Next.js** (officiële docs)
|
||||
2. **React** (officiële docs)
|
||||
3. **Tailwind CSS** (officiële docs)
|
||||
|
||||
Dit helpt Cursor veel beter code te genereren omdat het toegang heeft tot de juiste documentatie.
|
||||
|
||||
### Stap 2.3: Controleer Tab Completion
|
||||
|
||||
Ga naar **Features** → **Completion**
|
||||
- Zorg dat **Tab Completion** is ingeschakeld (dit is gratis!)
|
||||
|
||||
**Checkpoint 3:** Alle drie docs zijn zichtbaar in je Docs sidebar rechts. Tab Completion is enabled.
|
||||
1. Screenshot van je `localhost:3000` met Hero + extra feature zichtbaar
|
||||
2. Korte tekst: welke optie (A/B/C) heb je gekozen voor taak 3?
|
||||
3. Optioneel: GitHub-URL als je hebt gepushed
|
||||
|
||||
---
|
||||
|
||||
## Stap 3: Generate cursorrules met Chat (1 request)
|
||||
## Bonus — als je tijd over hebt
|
||||
|
||||
### Stap 3.1: Open Cursor Chat
|
||||
|
||||
Druk **Ctrl+L** (Windows/Linux) of **Cmd+L** (Mac).
|
||||
|
||||
Een chat panel opent aan de zijkant.
|
||||
|
||||
### Stap 3.2: Prompt voor .cursorrules
|
||||
|
||||
Typ deze prompt en druk Enter:
|
||||
|
||||
```
|
||||
Je bent een expert Next.js developer. Genereer een .cursorrules bestand
|
||||
voor een Next.js project met TypeScript, Tailwind CSS, en App Router.
|
||||
|
||||
Het bestand moet guidelines bevatten voor:
|
||||
- Functional components en React hooks
|
||||
- TypeScript best practices
|
||||
- Tailwind CSS utilities (nooit inline styles)
|
||||
- Bestandsnaamgeving (PascalCase voor components, camelCase voor utils)
|
||||
- Folder structuur (/app, /components, /lib)
|
||||
- Comments in het Nederlands
|
||||
- Keine `any` types
|
||||
|
||||
Output het volledige .cursorrules bestand klaar om te copy-pasten.
|
||||
```
|
||||
|
||||
Wacht op Cursor's antwoord.
|
||||
|
||||
### Stap 3.3: Copy de output
|
||||
|
||||
Cursor geeft je het complete .cursorrules bestand.
|
||||
|
||||
Selecteer alle code (Ctrl+A in de chat output) en kopieer het.
|
||||
|
||||
### Stap 3.4: Maak .cursorrules bestand
|
||||
|
||||
1. Rechtsklik op de root folder in de left sidebar
|
||||
2. Klik "New File"
|
||||
3. Noem het `.cursorrules` (met punt aan het begin!)
|
||||
4. Plak de content
|
||||
|
||||
Save het bestand (Ctrl+S).
|
||||
|
||||
**Checkpoint 4:** `.cursorrules` bestand bestaat in je project root met goede guidelines.
|
||||
|
||||
**Request Budget: 1 van ~7 used**
|
||||
- Vraag Cursor om een dark/light mode toggle toe te voegen
|
||||
- Probeer `@docs:Tailwind` om een geavanceerde animatie te toevoegen
|
||||
- Voeg een tweede pagina toe (`src/app/about/page.tsx`) en link ernaar vanuit de Hero
|
||||
- Genereer favicon + metadata via Cursor
|
||||
|
||||
---
|
||||
|
||||
## Stap 4: Hero Component met Composer (20 minuten)
|
||||
## Vastgelopen?
|
||||
|
||||
### Stap 4.1: Maak component file
|
||||
| Probleem | Snelle fix |
|
||||
|----------|-----------|
|
||||
| Cursor reageert niet bij Cmd+L | Settings → Account: nog Pro Student? Anders opnieuw activeren |
|
||||
| Tab-completion komt niet | Settings → Features → Cursor Tab → check enabled |
|
||||
| Tailwind classes worden niet toegepast | Check `globals.css` op `@tailwind base/components/utilities` |
|
||||
| Diff is verkeerd | Esc om te rejecten, herformuleer prompt specifieker |
|
||||
| `@file` werkt niet | Wacht 5 sec na file aanmaken (Cursor moet indexeren) |
|
||||
| Geen requests meer | Wacht op nieuwe maand, of plug je eigen OpenAI/Claude key in via Settings |
|
||||
|
||||
1. Rechtsklik op de `app` folder
|
||||
2. "New File"
|
||||
3. Noem het `app/components/Hero.tsx`
|
||||
|
||||
(Dit maakt automatisch de `components` subfolder)
|
||||
|
||||
### Stap 4.2: Open Composer
|
||||
|
||||
Met het Hero.tsx file open, druk **Ctrl+Shift+I** (Windows/Linux) of **Cmd+Shift+I** (Mac).
|
||||
|
||||
De Composer panel opent.
|
||||
|
||||
### Stap 4.3: Geef instructie aan Composer
|
||||
|
||||
In Composer, typ:
|
||||
|
||||
```
|
||||
Maak een Hero component (TypeScript, React functional component) met:
|
||||
- Grote h1 heading: "Welkom bij Cursor"
|
||||
- Subheading met beschrijvende tekst: "Bouw websites snel met AI"
|
||||
- Een CTA button: "Aan de slag" (link naar #features)
|
||||
- Responsive design: Tailwind CSS (md: breakpoint)
|
||||
- Flexbox voor verticale centrering
|
||||
- Dark mode compatible (dark: classes)
|
||||
- Gradient background (blauw naar paars)
|
||||
- Geen external dependencies
|
||||
|
||||
Geef alleen de component code, geen imports of exports statements voor buiten.
|
||||
```
|
||||
|
||||
Cursor genereert het component.
|
||||
|
||||
### Stap 4.4: Accept of refine
|
||||
|
||||
Review de getoonde code. Klik **Accept All** (groene knop) om het in je bestand in te voegen.
|
||||
|
||||
**Checkpoint 5:** Hero.tsx file bevat een werkend Hero component met juiste structuur.
|
||||
|
||||
**Request Budget: 2 van ~7 used**
|
||||
Tim loopt rond — vragen gewoon stellen.
|
||||
|
||||
---
|
||||
|
||||
## Stap 5: Feature Cards Component met Composer (20 minuten)
|
||||
## Reflectie (na afloop)
|
||||
|
||||
### Stap 5.1: Maak component file
|
||||
Denk na voor jezelf:
|
||||
- Hoeveel requests heb je gebruikt? (Settings → Account toont saldo)
|
||||
- Welke sneltoets voelde het meest natuurlijk?
|
||||
- Wanneer zou je liever zelf typen dan Cursor laten genereren?
|
||||
|
||||
1. Rechtsklik op `app` folder
|
||||
2. "New File"
|
||||
3. Noem het `app/components/FeatureCards.tsx`
|
||||
Dat zijn de gewoontes die je deze opleiding gaat ontwikkelen.
|
||||
|
||||
### Stap 5.2: Open Composer
|
||||
|
||||
Druk **Ctrl+Shift+I** in dit nieuwe bestand.
|
||||
|
||||
### Stap 5.3: Composer prompt
|
||||
|
||||
```
|
||||
Maak een FeatureCards component (TypeScript, React) dat:
|
||||
- Een grid van 3 feature cards toont
|
||||
- Responsive: 1 kolom op mobile, 3 kolommen op desktop (Tailwind grid)
|
||||
- Elke card heeft:
|
||||
* Een icon uit lucide-react (Package, Zap, Layers)
|
||||
* Een h3 title
|
||||
* Een description text
|
||||
- Hover effect: transform scale-105 en shadow toename
|
||||
- Cards hebben border en padding (Tailwind)
|
||||
- Dark mode ready
|
||||
- lucide-react is geïmporteerd bovenaan
|
||||
|
||||
Geef alleen de component code.
|
||||
```
|
||||
|
||||
Composer genereert het component.
|
||||
|
||||
### Stap 5.4: Accept
|
||||
|
||||
Klik **Accept All**.
|
||||
|
||||
### Stap 5.5: Install lucide-react
|
||||
|
||||
In je Cursor Terminal (Ctrl+`):
|
||||
|
||||
```bash
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
Wacht tot npm klaar is.
|
||||
|
||||
**Checkpoint 6:** FeatureCards.tsx werkt, lucide-react is geïnstalleerd.
|
||||
|
||||
**Request Budget: 3 van ~7 used**
|
||||
|
||||
---
|
||||
|
||||
## Stap 6: Integreer in Homepage (5 minuten)
|
||||
|
||||
### Stap 6.1: Open `app/page.tsx`
|
||||
|
||||
Dit is je homepage.
|
||||
|
||||
### Stap 6.2: Update de content
|
||||
|
||||
Vervang de bestaande content (of voeg toe aan het bestand) met:
|
||||
|
||||
```typescript
|
||||
import Hero from './components/Hero';
|
||||
import FeatureCards from './components/FeatureCards';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<Hero />
|
||||
<section className="py-20 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-4xl font-bold mb-12 text-center">Features</h2>
|
||||
<FeatureCards />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Save (Ctrl+S).
|
||||
|
||||
### Stap 6.3: Test in browser
|
||||
|
||||
In Cursor Terminal:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open `http://localhost:3000` in je browser.
|
||||
|
||||
Je ziet nu: Hero → Features section met 3 cards.
|
||||
|
||||
**Checkpoint 7:** Website draait lokaal en ziet er netjes uit.
|
||||
|
||||
---
|
||||
|
||||
## Stap 7: Styling Refinement met Inline Edit (15 minuten)
|
||||
|
||||
Nu gebruiken we **Inline Edit** (Ctrl+K) voor kleine styling tweaks.
|
||||
|
||||
### Stap 7.1: Hero button styling
|
||||
|
||||
1. Open `app/components/Hero.tsx`
|
||||
2. Klik ergens in de button JSX
|
||||
3. Druk **Ctrl+K**
|
||||
4. Type:
|
||||
|
||||
```
|
||||
Voeg een hover effect toe aan de button:
|
||||
- Scale slightly bigger on hover
|
||||
- Change background color smoothly
|
||||
- Add smooth transition
|
||||
```
|
||||
|
||||
5. Review de suggestie, klik Accept
|
||||
|
||||
### Stap 7.2: Card shadows verbeteren
|
||||
|
||||
1. Open `app/components/FeatureCards.tsx`
|
||||
2. Selecteer een card div
|
||||
3. Druk **Ctrl+K**
|
||||
4. Type:
|
||||
|
||||
```
|
||||
Voeg een mooier shadow effect toe aan de cards:
|
||||
- Larger shadow on hover
|
||||
- Smooth transition
|
||||
- Better depth perception
|
||||
```
|
||||
|
||||
5. Accept
|
||||
|
||||
### Stap 7.3: Typography verbeteren
|
||||
|
||||
1. Open `app/page.tsx`
|
||||
2. Druk **Ctrl+K**
|
||||
3. Type:
|
||||
|
||||
```
|
||||
Maak de "Features" heading groter en mooier:
|
||||
- Groter font size
|
||||
- Betere kleur gradient
|
||||
```
|
||||
|
||||
5. Accept
|
||||
|
||||
Refresh je browser (F5) om de changes te zien.
|
||||
|
||||
**Checkpoint 8:** Styling ziet er gepolijst uit, hover effects werken.
|
||||
|
||||
**Request Budget: 4-5 van ~7 used**
|
||||
|
||||
---
|
||||
|
||||
## Stap 8: Git Commit (5 minuten)
|
||||
|
||||
### Stap 8.1: Open Source Control
|
||||
|
||||
Druk **Ctrl+Shift+G** in Cursor.
|
||||
|
||||
Source Control panel opent links.
|
||||
|
||||
### Stap 8.2: Stage alle bestanden
|
||||
|
||||
Klik op het **+** icoon bij "Changes" of druk **Ctrl+Shift+A**.
|
||||
|
||||
Alle bestanden worden staged (groen).
|
||||
|
||||
### Stap 8.3: Write commit message
|
||||
|
||||
In het message veld, typ:
|
||||
|
||||
```
|
||||
feat: Build Hero and FeatureCards components with Cursor Composer
|
||||
```
|
||||
|
||||
### Stap 8.4: Commit
|
||||
|
||||
Druk **Ctrl+Enter** of klik de ✓ button.
|
||||
|
||||
Je commit is gemaakt!
|
||||
|
||||
**Checkpoint 9:** Git commit is succesvol (geen errors).
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Shortcuts Reference
|
||||
|
||||
| Actie | Windows | Mac |
|
||||
|-------|---------|-----|
|
||||
| **Cursor Chat** | Ctrl+L | Cmd+L |
|
||||
| **Composer** | Ctrl+Shift+I | Cmd+Shift+I |
|
||||
| **Inline Edit (quick fix)** | Ctrl+K | Cmd+K |
|
||||
| **Terminal** | Ctrl+` | Cmd+` |
|
||||
| **Command Palette** | Ctrl+Shift+P | Cmd+Shift+P |
|
||||
| **Source Control** | Ctrl+Shift+G | Cmd+Shift+G |
|
||||
| **Save** | Ctrl+S | Cmd+S |
|
||||
| **Tab Completion** | Tab | Tab |
|
||||
|
||||
---
|
||||
|
||||
## Request Budget Tracking
|
||||
|
||||
Je hebt **~7 requests** beschikbaar in deze les:
|
||||
|
||||
| Fase | Type | Requests |
|
||||
|------|------|----------|
|
||||
| cursorrules generatie | Chat | 1 |
|
||||
| Hero Component | Composer | 1 |
|
||||
| FeatureCards Component | Composer | 1 |
|
||||
| Button styling tweak | Inline Edit | 0.5 |
|
||||
| Card styling tweak | Inline Edit | 0.5 |
|
||||
| Typography tweak | Inline Edit | 0.5 |
|
||||
| Buffer/extra | - | 2.5 |
|
||||
|
||||
**💡 Pro tip:** Gebruik **Tab Completion** (gratis!) voor:
|
||||
- Imports toevoegen
|
||||
- Props schrijven
|
||||
- Repetitieve code (zelfde classNames herhalen)
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Probleem: "Module not found: lucide-react"
|
||||
**Oplossing:**
|
||||
```bash
|
||||
npm install lucide-react
|
||||
npm run dev
|
||||
```
|
||||
(Herstart je dev server na npm install)
|
||||
|
||||
### Probleem: Composer stelt rare dingen voor
|
||||
**Oplossing:** Wees specifieker in je prompt. Verwijs naar bestaande code:
|
||||
- "Voeg lucide-react icons toe" (voldoende duidelijk)
|
||||
- "Zorg dat het met TypeScript werkt" (specifieer)
|
||||
|
||||
### Probleem: Inline Edit accepteert niet
|
||||
**Oplossing:** Klik de groene ✓ knop of druk Ctrl+Enter
|
||||
|
||||
### Probleem: `npm run dev` geeft error
|
||||
**Stappen:**
|
||||
1. Controleer dat je in de juiste folder bent: `pwd`
|
||||
2. Controleer node versie: `node --version` (moet 18+ zijn)
|
||||
3. Verwijder en herinstalleer dependencies:
|
||||
```bash
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Probleem: Port 3000 al in gebruik
|
||||
```bash
|
||||
npm run dev -- -p 3001
|
||||
# Openen: http://localhost:3001
|
||||
```
|
||||
|
||||
### Probleem: Git werkt niet
|
||||
**Controleer:**
|
||||
- Ben je in de juiste folder? `pwd` moet je project folder zijn
|
||||
- Bestaat `.git` folder? `ls -la .git`
|
||||
- Zijn je bestanden getracked? `git status`
|
||||
|
||||
---
|
||||
|
||||
## Checklist - Vinkje alles af voor je klaar bent
|
||||
|
||||
- [ ] Git init en create-next-app uitgevoerd
|
||||
- [ ] Cursor Skills (Next.js, React, Tailwind) geactiveerd
|
||||
- [ ] `.cursorrules` bestand gegenereerd en in root geplaatst
|
||||
- [ ] `app/components/Hero.tsx` aangemaakt met Composer
|
||||
- [ ] `app/components/FeatureCards.tsx` aangemaakt met Composer
|
||||
- [ ] lucide-react geïnstalleerd via npm
|
||||
- [ ] Componenten geïmporteerd in `app/page.tsx`
|
||||
- [ ] `npm run dev` draait zonder errors
|
||||
- [ ] Website ziet er goed uit op http://localhost:3000
|
||||
- [ ] Styling verfijnd met Inline Edit (minimaal 2 aanpassingen)
|
||||
- [ ] Git commit gemaakt met duidelijke message
|
||||
- [ ] Alle bestanden zijn saved (geen rode stippen in sidebar)
|
||||
|
||||
---
|
||||
|
||||
## Volgende stappen
|
||||
|
||||
**Voor volgende les:**
|
||||
- Zorg dat `npm run dev` nog werkt
|
||||
- Download het huiswerk zip bestand van Teams (les3-debug-challenge.zip)
|
||||
- Voorkom dat je project files verwijdert/opslaanslecht
|
||||
|
||||
**Veel succes! 🚀**
|
||||
Veel succes!
|
||||
|
||||
Reference in New Issue
Block a user