Een complete webapp bouwen

In deze les bouwen we een volledige webapplicatie met Claude Code — van idee tot deployment. We gebruiken een takenlijst-app als voorbeeld, maar de aanpak werkt voor elk type webapp.

Fase 1: Planning

Begin niet met code, maar met een plan:

Ik wil een takenlijst app bouwen met deze features:
- Taken toevoegen, afvinken en verwijderen
- Taken categoriseren met labels
- Filteren op label en status
- Data opslaan in een database

Tech stack: Next.js 14, Tailwind CSS, Prisma, SQLite.
Maak een implementatieplan in volgorde van bouwen.

Claude maakt een gestructureerd plan:

1. Project setup (Next.js, Tailwind, Prisma)
2. Database schema (tasks, labels)
3. API routes (CRUD voor tasks en labels)
4. Frontend: TaskList component
5. Frontend: AddTask formulier
6. Frontend: Filters en labels
7. Styling en responsive design
8. Testen
9. Deployment

Fase 2: Project setup

Begin met stap 1: zet het project op. Initialiseer
Next.js 14 met TypeScript, Tailwind CSS en Prisma.
Configureer SQLite als database.

Claude voert de setup commando’s uit:

npx create-next-app@latest todo-app --typescript --tailwind
cd todo-app
npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

Na elke stap: test of het werkt (npm run dev), commit.

Fase 3: Database

Maak het Prisma schema voor de tasks en labels.
Een task heeft: id, title, completed, createdAt.
Een label heeft: id, name, color.
Een task kan meerdere labels hebben.

Claude schrijft het schema en maakt de migratie:

model Task {
  id        String   @id @default(cuid())
  title     String
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
  labels    Label[]
}

model Label {
  id    String @id @default(cuid())
  name  String
  color String
  tasks Task[]
}

Fase 4: API routes

Maak API routes voor tasks:
- GET /api/tasks — lijst alle taken
- POST /api/tasks — maak nieuwe taak
- PATCH /api/tasks/[id] — update taak (afvinken)
- DELETE /api/tasks/[id] — verwijder taak

Gebruik de Prisma client. Voeg error handling toe.

Claude bouwt elke route met proper error handling en TypeScript types.

Fase 5: Frontend

Bouw de frontend pagina met:
- Een input veld bovenaan om taken toe te voegen
- Een lijst van taken met checkboxes
- Een delete knop per taak
- Een filter balk voor labels
- Gebruik fetch() voor de API calls
- Tailwind voor styling, mobile-first

Dit is de grootste stap. Laat Claude het in delen doen:

Begin met het TaskList component en de AddTask form.
De filters doen we daarna.

Fase 6: Deployment

Als alles werkt lokaal:

Bereid de app voor op deployment naar Vercel.
Check of alle environment variables goed staan
en of de database migratie werkt in productie.

Claude helpt met:

• vercel.json configuratie
• Environment variables instellen
• Database migratie script
• Build en deploy commando’s

Het complete plaatje

Het hele proces in een notendop:

Fase	Sessie	Duur
Planning	1	5 min
Setup	1	10 min
Database	1-2	15 min
API	2	20 min
Frontend	2-3	30 min
Styling	3	15 min
Deployment	3-4	15 min

Totaal: een complete webapp in 2-4 Claude sessies.