3.8 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 Desktop App
- Open de Desktop App
- Open je projectfolder
- Selecteer OpenCode Zen → GLM 4.7 (gratis)
Stap 3: Bouw minimaal 3 componenten
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
⚠️ BELANGRIJK: Eén prompt per taak!
Maak niet één grote prompt voor alles. Verdeel je werk:
- Prompt 1: "Maak een Header component met logo en navigatie"
- Prompt 2: "Voeg een mobile hamburger menu toe aan de Header"
- Prompt 3: "Maak een Hero section met headline en buttons"
- etc.
Houd je prompts bij! Je moet ze inleveren (zie Opdracht 2).
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: Houd je Prompts Bij!
Belangrijk: Houd tijdens het bouwen een lijst bij van alle prompts die je gebruikt.
Voorbeeld format:
1. [Plan] "Analyseer dit project en beschrijf de folder structuur"
2. [Build] "Maak een Header component met logo links en navigatie rechts"
3. [Build] "Voeg een hamburger menu toe voor mobile"
4. [Build] "Maak een Hero section met grote headline en gradient achtergrond"
5. [Build] "Voeg twee buttons toe aan de Hero: primair en secundair"
6. [Build] "Maak een Features sectie met 3 cards in een grid"
...
Waarom?
- In Les 3 gaan we iedereen langs
- We bespreken hoeveel prompts je hebt gebruikt
- En of je het werk goed hebt opgesplitst (één prompt per taak)
Dit hoef je niet in te leveren, maar zorg dat je het kunt laten zien in de les!
Inleveren via Teams (voor Les 3)
Post in Teams:
- Link naar Vercel (je live website)
- Link naar GitHub (je repository)
Dat is alles! In Les 3 gaan we kort iedereen langs:
- Bekijken wat je hebt gemaakt
- Bespreken hoeveel prompts je hebt gebruikt
- Delen wat goed werkte en wat niet
💡 Tip: Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les!
Hulp nodig?
- Check de OpenCode documentatie: opencode.ai/docs
- Bekijk de les slides nogmaals
- Stel vragen in Teams
- Stel vragen in Teams