# 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

```bash
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

1. Open de Desktop App
2. Open je projectfolder
3. Selecteer OpenCode Zen → Kimi K2.5 Free (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

1. Ga naar github.com
2. Klik "+" → "New repository"
3. Naam: bijvoorbeeld `mijn-nieuwe-project`
4. **Public** aanvinken
5. Klik "Create repository"

#### 4b. Push je code

GitHub toont instructies. Voer uit in je projectmap:

```bash
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:**
1. File → Add Local Repository
2. Selecteer je projectmap
3. Publish repository

---

### Stap 5: Koppel aan Vercel

1. Ga naar vercel.com (log in met GitHub)
2. Klik "Add New..." → "Project"
3. "Import Git Repository"
4. Selecteer je nieuwe repo
5. Framework: Next.js (automatisch gedetecteerd)
6. 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:
1. **Link naar Vercel** (je live website)
2. **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