3.5 KiB
3.5 KiB
Les 2 - Huiswerkopdracht
Deadline: Voor les 3
Opdracht 1: Nieuw Project vanaf Scratch (2 uur)
In de les heb je een bestaand project uitgebreid. Nu ga je een nieuw project maken met OpenCode.
Stap 1: Maak een nieuw React project
npx create-next-app@latest mijn-nieuwe-project
cd mijn-nieuwe-project
npm run dev
Kies bij de prompts:
- TypeScript: Yes
- Tailwind CSS: Yes
- App Router: Yes
Stap 2: Configureer OpenCode
opencode
Selecteer OpenCode Zen → GLM 4.7 (gratis).
Stap 3: Bouw minimaal 3 componenten
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
Verplichte componenten:
1. Header/Navbar
- Logo
- Navigatie links
- CTA button
- Mobile hamburger menu (werkend!)
2. Hero Section
- Headline
- Subtitle
- 1-2 buttons
- Achtergrond (gradient of afbeelding)
3. Kies één:
Optie A: Feature Cards
- Minimaal 3 cards
- Icon, titel, beschrijving per card
- Responsive grid
Optie B: Testimonials
- Minimaal 2 testimonials
- Quote, naam, foto placeholder
- Mooie styling
Optie C: Pricing Table
- 3 pricing tiers
- Features per tier
- Highlight recommended
Stap 4: Push naar GitHub
Anders dan bij v0! Bij v0 was Vercel automatisch gekoppeld. Nu moet je dit handmatig doen.
4a. Maak GitHub repository
- Ga naar github.com
- Klik "+" → "New repository"
- Naam: bijvoorbeeld
mijn-nieuwe-project - Public aanvinken
- Klik "Create repository"
4b. Push je code
GitHub toont instructies. Voer uit in je projectmap:
git remote add origin https://github.com/JOUW-USERNAME/mijn-nieuwe-project.git
git branch -M main
git push -u origin main
Of met GitHub Desktop:
- File → Add Local Repository
- Selecteer je projectmap
- Publish repository
Stap 5: Koppel aan Vercel
- Ga naar vercel.com (log in met GitHub)
- Klik "Add New..." → "Project"
- "Import Git Repository"
- Selecteer je nieuwe repo
- Framework: Next.js (automatisch gedetecteerd)
- Klik "Deploy"
Na ~1 minuut: Je website is live!
Tip: Elke volgende git push wordt automatisch gedeployed.
Opdracht 2: Reflectie (300 woorden)
Schrijf over je OpenCode ervaring.
Beantwoord deze vragen:
-
Les vs Huiswerk
- Wat was het verschil tussen werken met een bestaand project (les) en een nieuw project (huiswerk)?
- Wat vond je makkelijker/moeilijker?
-
Plan vs Build mode
- Hoe heb je Plan mode gebruikt?
- Wanneer switch je naar Build?
-
Vergelijking met v0
- Hoe verschilt OpenCode van v0.dev?
- Wat zijn voor- en nadelen van beide?
-
Workflow
- Hoe vaak heb je gepusht naar Vercel?
- Wat is je ideale workflow geworden?
-
Tips voor jezelf
- Welke shortcuts gebruik je het meest?
- Wat zou je volgende keer anders doen?
Inleveren via Teams
- Link naar live website (Vercel URL)
- Link naar GitHub repository
- Screenshots van je 3 componenten (desktop + mobile)
- Reflectie als tekst of document
Beoordeling
| Onderdeel | Punten |
|---|---|
| Header/Navbar compleet + responsive | 2 |
| Hero Section compleet | 2 |
| Derde component compleet | 2 |
| Deployed op Vercel | 1 |
| Reflectie (inhoud + inzicht) | 3 |
| Totaal | 10 |
Bonus (optioneel)
- Voeg meer dan 3 componenten toe
- Implementeer dark mode
- Voeg animaties toe met Framer Motion
- Maak meerdere pagina's
Hulp nodig?
- Check de OpenCode documentatie: opencode.ai/docs
- Bekijk de les slides nogmaals
- Stel vragen in Teams