3.6 KiB
3.6 KiB
Les 2 - Lesopdracht: Website uitbreiden met OpenCode
Doel
Breid je v0 website uit met OpenCode. Je leert:
- Project lokaal draaien
- Werken met Plan en Build mode
- Wijzigingen deployen via git push
Tijd
85 minuten (09:50-10:15 + 10:30-11:30)
☕ Pauze: 10:15-10:30
Stap 1: Project Lokaal Draaien (15 min)
Clone je repository
Optie A - Terminal:
git clone https://github.com/jouw-username/jouw-project.git
cd jouw-project
Optie B - GitHub Desktop:
- File → Clone Repository
- Selecteer je v0 project
- Clone
Installeer dependencies
npm install
Start development server
npm run dev
Open http://localhost:3000 - je ziet je website!
Checkpoint: ✅ Website draait lokaal
Stap 2: OpenCode Configureren (10 min)
Start OpenCode
opencode
Selecteer gratis AI model
- Druk
Ctrl+O - Kies "OpenCode Zen"
- Selecteer "GLM 4.7"
Checkpoint: ✅ OpenCode draait met Zen model
Stap 3: Uitbreiden met OpenCode (45 min)
Fase 1: Analyseer (Plan Mode)
Check dat je in Plan mode zit (📋 icoon).
Analyseer dit project. Welke componenten zijn er?
Waar zou ik een testimonials sectie kunnen toevoegen?
Fase 2: Bouw (Build Mode)
Druk Tab om naar Build mode (🔨) te gaan.
Kies minimaal 2 van deze opdrachten:
Optie A: Testimonials Sectie
@src/components/
Maak een Testimonials component met:
- 3 testimonial cards naast elkaar
- Foto placeholder, quote, naam, functie
- Responsive: onder elkaar op mobile
- Voeg toe aan de homepage onder de hero
Optie B: Pricing Sectie
@src/components/
Maak een Pricing component met:
- 3 pricing tiers (Basic, Pro, Enterprise)
- Features lijst per tier
- CTA button per tier
- Highlight de middelste (Pro)
Optie C: FAQ Sectie
@src/components/
Maak een FAQ component met:
- Minimaal 5 vragen
- Accordion style (klik om te openen)
- Smooth animatie
Optie D: Verbeter bestaande componenten
@src/components/[ComponentNaam].tsx
Verbeter deze component:
- Betere mobile responsiveness
- Hover effecten toevoegen
- Animaties bij scroll
Checkpoint: ✅ Nieuwe sectie(s) toegevoegd
Stap 4: Deploy naar Vercel (10 min)
Commit je wijzigingen
Terminal:
git add .
git commit -m "Add testimonials section"
git push
Of GitHub Desktop:
- Zie changed files links
- Schrijf commit message
- Commit to main
- Push origin
Check Vercel
- Open je Vercel dashboard
- Zie "Building..." status
- Na ~1 min: bekijk je live site!
Checkpoint: ✅ Wijzigingen live op Vercel
Stap 5: Herhaal! (10 min)
Doe minimaal nog één wijziging en push opnieuw.
Het doel is dat je de volledige workflow meerdere keren doorloopt:
- Wijzig met OpenCode
- Test lokaal
- Commit & push
- Bekijk live
Tips
@ Mentions gebruiken
@src/components/Hero.tsx
Maak de heading groter en gebruik een gradient
Plan mode voor vragen
📋 Hoe kan ik animaties toevoegen aan mijn cards?
Build mode voor actie
🔨 Voeg fade-in animatie toe aan de feature cards
Stuck?
- Wees specifieker in je prompt
- Verwijs naar het exacte bestand met @
- Bekijk de error in terminal
- Vraag een klasgenoot of de docent
Inleveren
Aan het einde van de les:
- Website draait lokaal
- Minimaal 1 nieuwe sectie toegevoegd
- Minimaal 2x gepusht naar Vercel
- Wijzigingen zijn live
Bonus (als je klaar bent)
- Voeg dark mode toggle toe
- Implementeer smooth scroll navigatie
- Voeg contact formulier toe
- Maak een aparte pagina (About, Contact)