# 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

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

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: Reflectie (300 woorden)

Schrijf over je OpenCode ervaring.

### Beantwoord deze vragen:

1. **Les vs Huiswerk**
   - Wat was het verschil tussen werken met een bestaand project (les) en een nieuw project (huiswerk)?
   - Wat vond je makkelijker/moeilijker?

2. **Plan vs Build mode**
   - Hoe heb je Plan mode gebruikt?
   - Wanneer switch je naar Build?

3. **Vergelijking met v0**
   - Hoe verschilt OpenCode van v0.dev?
   - Wat zijn voor- en nadelen van beide?

4. **Workflow**
   - Hoe vaak heb je gepusht naar Vercel?
   - Wat is je ideale workflow geworden?

5. **Tips voor jezelf**
   - Welke shortcuts gebruik je het meest?
   - Wat zou je volgende keer anders doen?

---

## Inleveren via Teams

1. **Link naar live website** (Vercel URL)
2. **Link naar GitHub repository**
3. **Screenshots** van je 3 componenten (desktop + mobile)
4. **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