novi-lessons/Les07-Supabase/Les07-Lesopdracht.md

# Les 7 — Lesopdracht
## Supabase Setup + eerste queries

**Duur:** ~120 minuten klassikaal

---

## Doel

Aan het einde: Supabase project gekoppeld aan QuickPoll. Polls tabel aangemaakt, en homepage leest uit echte database in plaats van in-memory.

---

## Stap 1 — Supabase project klaar

Account + project moeten klaar zijn (uit Les 6 huiswerk). Anders nu doen.

Check je gegevens (Settings → API):
- Project URL: `https://abc123.supabase.co`
- Anon key: `eyJ...`

---

## Stap 2 — Tabellen via SQL Editor

Supabase Dashboard → SQL Editor → New query:

```sql
-- Polls tabel
create table polls (
  id          bigserial primary key,
  title       text not null,
  created_at  timestamp default now()
);

-- Options tabel (relatie naar polls)
create table options (
  id        bigserial primary key,
  poll_id   bigint not null references polls(id) on delete cascade,
  text      text not null,
  votes     integer default 0,
  created_at timestamp default now()
);

-- RLS open voor demo
alter table polls enable row level security;
alter table options enable row level security;

create policy "polls demo open" on polls
  for all to anon using (true) with check (true);

create policy "options demo open" on options
  for all to anon using (true) with check (true);
```

Run → check Table Editor: beide tabellen verschijnen.

---

## Stap 3 — Test data inserten

In SQL Editor:

```sql
insert into polls (title) values
  ('Beste programmeertaal?'),
  ('Beste IDE?');

insert into options (poll_id, text) values
  (1, 'TypeScript'), (1, 'Python'), (1, 'Go'),
  (2, 'Cursor'), (2, 'VS Code'), (2, 'Vim');
```

Check Table Editor → 2 polls, 6 opties.

---

## Stap 4 — Supabase in Next.js

```bash
cd quickpoll
pnpm add @supabase/supabase-js
```

`.env.local`:
```
NEXT_PUBLIC_SUPABASE_URL=https://abc123.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
```

`lib/supabase.ts`:
```typescript
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);
```

---

## Stap 5 — Homepage van Supabase

Refactor `app/page.tsx`:

```tsx
import { supabase } from "@/lib/supabase";
import Link from "next/link";

export default async function Home() {
  const { data: polls, error } = await supabase
    .from("polls")
    .select("*")
    .order("created_at", { ascending: false });

  if (error) return <p className="p-8 text-red-600">Error: {error.message}</p>;

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">QuickPoll</h1>
      <ul className="space-y-2">
        {polls?.map(p => (
          <li key={p.id}>
            <Link href={`/poll/${p.id}`} className="text-blue-600 hover:underline">
              {p.title}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}
```

Restart `pnpm dev` (env-changes vereisen restart). Open localhost:3000 → polls zichtbaar uit Supabase.

---

## Stap 6 — Detail-pagina

```tsx
// app/poll/[id]/page.tsx
import { supabase } from "@/lib/supabase";
import { notFound } from "next/navigation";

export default async function PollPage({
  params,
}: { params: Promise<{ id: string }> }) {
  const { id } = await params;

  const { data: poll } = await supabase
    .from("polls")
    .select("*, options(*)")
    .eq("id", Number(id))
    .single();

  if (!poll) notFound();

  return (
    <main className="max-w-md mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">{poll.title}</h1>
      <ul className="space-y-2">
        {poll.options.map(o => (
          <li key={o.id} className="p-3 border rounded flex justify-between">
            <span>{o.text}</span>
            <span className="text-gray-500">{o.votes}</span>
          </li>
        ))}
      </ul>
    </main>
  );
}
```

Voting bouwen we in Les 8.

---

## Eisen

- [ ] Supabase project actief met `polls` + `options` tabellen
- [ ] RLS aan met open policies
- [ ] Minstens 2 polls in DB
- [ ] Homepage leest van Supabase
- [ ] Detail-pagina toont opties van Supabase
- [ ] Geen errors in console

---

## Bonus

- Voeg een 3e tabel `votes` toe (voor user-tracking later)
- Type-generation: `pnpm dlx supabase gen types typescript --linked > types/database.ts`
- Loading-skeleton voor detail-pagina

---

## Veelvoorkomende problemen

| Probleem | Oplossing |
|----------|-----------|
| "Invalid API key" | Anon key klopt niet — check .env.local, restart dev |
| Polls niet zichtbaar | RLS policy ontbreekt — check beide tabellen |
| `.env.local` niet geladen | Restart `pnpm dev` na env-changes |
| Foreign key violation | Insert opties na polls (poll_id moet bestaan) |

---

## Klaar?

Volgende les: schrijven naar DB (INSERT, UPDATE) — create-pagina + voting werkend.