Van idee tot werkende app op internet, zonder zelf code te typen en zonder eigen server. Ik beschrijf wat ik wil, Claude Code schrijft de code, GitHub bewaart alles en Cloudflare laat het draaien.
Het schema
Drie zones: waar ik bouw, waar de app draait en de buitenwereld. Kies een route en loop de stappen door. Klik op een blok voor uitleg.
Veeg opzij om het hele schema te zien →
De onderdelen
Elk blok uit het schema, in gewone woorden. Wie het liever in beelden hoort: zie het als een restaurant.
OnderdeelWat het doetIn restauranttermenTechnisch
Claude Code
AI-programmeur
Wat het doet
Schrijft alle code op basis van mijn uitleg in gewone taal. Test, verbetert, maakt de database en opslag aan en zet de app live. Kan zelf API-sleutels gebruiken, bijvoorbeeld van OpenAI (GPT) en ElevenLabs, om tijdens het bouwen te testen.
In restauranttermen
De chef-kok. Schrijft de recepten en probeert ze eerst uit in de proefkeuken.
Technisch
Werkt in de terminal of app, leest en schrijft de hele repo.
GitHub
Codearchief
Wat het doet
De hele app staat hier als repository (repo). Elke wijziging is een opgeslagen versie, dus ik kan altijd terug naar hoe het gisteren was.
In restauranttermen
Het receptenboek. Met elke oude versie van elk recept erbij.
Technisch
git commit legt vast, git push stuurt naar GitHub.
Cloudflare Worker
Hosting
Wat het doet
Hier draait de app. De code staat klaar in datacenters over de hele wereld en start pas als iemand iets vraagt. Er is geen server die ik zelf moet bijhouden.
In restauranttermen
De keuken. Neemt bestellingen aan en maakt ze klaar.
Technisch
wrangler deploy zet een nieuwe versie live, op een eigen domein.
D1
Database
Wat het doet
SQL-database voor gegevens in tabellen: gebruikers, instellingen, wat er wanneer is gemaakt.
In restauranttermen
Het bestelboek. De administratie van wie wat heeft besteld.
Technisch
env.DB.prepare("SELECT …")
R2
Bestandsopslag
Wat het doet
Bewaart bestanden in een bucket: foto's, audio, pdf's, uploads. Je betaalt voor opslag, niet voor het dataverkeer als bezoekers bestanden downloaden.
In restauranttermen
De voorraadkelder. Alles wat bewaard moet worden, op de plank.
Technisch
env.FILES.put("audio/123.mp3", …)
Secrets
Sleutelkluis
Wat het doet
Versleutelde plek voor API-sleutels van externe partijen. Alleen de Worker kan ze lezen. Ze staan nooit in GitHub en nooit in de browser van de bezoeker.
In restauranttermen
De kluis. Met de klantpasjes van de leveranciers erin.
Technisch
wrangler secret put OPENAI_API_KEY
Externe API's
Ingehuurde AI
Wat het doet
Diensten van andere bedrijven die de app via internet inschakelt (een API). De app meldt zich aan met een API-sleutel: een soort wachtwoord dat ook bepaalt wie de rekening krijgt. Bijvoorbeeld GPT van OpenAI voor tekst en ElevenLabs voor stemmen. Je betaalt per gebruik, rechtstreeks aan die partij.
In restauranttermen
De leveranciers. Zoals een banketbakker die de taarten levert. Je betaalt per bestelling.
Technisch
De Worker roept ze aan met fetch() en de sleutel uit Secrets.
Andere manieren om een app te maken
Een website of app kun je op meerdere manieren maken en hosten. Zo verhoudt mijn aanpak zich tot de bekende routes.
Aanpak
Wie maakt het
Server bijhouden
Vrijheid
Kosten bij de start
WebsitebouwerWix, Squarespace, Webflow
Jij, door te klikken en te slepen
Nee
Beperkt tot wat het platform biedt
Maandabonnement
WordPress bij een hosterklassieke webhosting
Jij met thema's en plugins, of een webbouwer
Deels: updates van WordPress en plugins
Gemiddeld
Hostingpakket per maand of jaar
Eigen server (VPS)bijvoorbeeld Hetzner, DigitalOcean
Een programmeur
Ja: updates, beveiliging en back-ups zelf
Volledig
Vast bedrag per maand
Hostingplatform voor ontwikkelaarsVercel, Netlify
Een programmeur
Nee
Groot
Gratis instap
Mijn aanpakClaude Code + GitHub + Cloudflare
Claude Code, op mijn aanwijzing
Nee
Volledig: eigen code, eigen data
Claude-abonnement; hosting gratis, bij veel gebruik $5 per maand
Wat kost het?
Cloudflare heeft een gratis plan met daglimieten. Het betaalde Workers-plan kost minimaal $5 per maand per account en dekt alle apps samen.
Onderdeel
Gratis plan
Workers Paid ($5/mnd)
Workerverzoeken en rekentijd
100.000 verzoeken per dag 10 ms rekentijd per verzoek
10 miljoen verzoeken per maand inbegrepen daarna $0,30 per miljoen
D1database
5 miljoen rijen lezen per dag 100.000 rijen schrijven per dag 5 GB opslag
25 miljard rijen lezen per maand 50 miljoen rijen schrijven per maand 5 GB inbegrepen
R2bestanden, eigen gratis tegoed
10 GB opslag per maand 1 miljoen schrijfacties, 10 miljoen leesacties uitgaand verkeer gratis
valt niet onder de $5; daarboven $0,015 per GB per maand $4,50 / $0,36 per miljoen schrijf- / leesacties
Buiten Cloudflareeigen rekeningen
OpenAI en ElevenLabs rekenen per gebruik. GitHub is gratis voor privé-repo's. Claude Code loopt via een Claude-abonnement.
Bedragen in USD, stand oktober 2026. Bron: developers.cloudflare.com (Workers, D1 en R2 pricing).
Waarom zo, en waar let ik op
Waarom het werkt
Geen server om bij te houden. Cloudflare regelt de machines, updates en schaal.
Snel voor iedereen. De app draait dicht bij de bezoeker, waar die ook zit.
Sleutels blijven geheim. Ze staan niet in de code of in GitHub, en de bezoeker ziet ze nooit.
Code terug te draaien. Elke versie van de code staat in GitHub.
Hosting kost bijna niets. Veel apps passen in het gratis plan van Cloudflare.
Om op te letten
Afhankelijk van Cloudflare. De code blijft wel van mij en staat in GitHub.
AI kost per gebruik. Zet een bestedingslimiet in je OpenAI- en ElevenLabs-account.
Daglimieten op het gratis plan. Bij veel bezoekers is $5 per maand nodig.
Zelf blijven testen. Claude Code schrijft de code, ik controleer of het doet wat ik wil.
Onder de motorkap
Voor wie de code wil zien. Eén configuratiebestand koppelt de onderdelen aan elkaar. De Worker krijgt de database, de opslag en de sleutels binnen via env. Vereenvoudigd voorbeeld van de voorleesapp uit het schema.
wrangler.jsonc
{
"name": "voorleesapp",
"main": "src/index.js",
"compatibility_date": "2026-10-01",
"routes": [
{ "pattern": "voorlees.mijndomein.nl", "custom_domain": true }
],
"d1_databases": [
{ "binding": "DB", "database_name": "voorlees-db", "database_id": "…" }
],
"r2_buckets": [
{ "binding": "FILES", "bucket_name": "voorlees-audio" }
]
// API-sleutels staan hier bewust NIET in.// Die gaan in Secrets:// wrangler secret put OPENAI_API_KEY// wrangler secret put ELEVENLABS_API_KEY
}
src/index.js
export default {
async fetch(request, env) {
const { tekst } = await request.json();
// 1. GPT vat samen, met de sleutel uit Secretsconst samenvatting = await vraagGPT(tekst, env.OPENAI_API_KEY);
// 2. ElevenLabs maakt er spraak vanconst mp3 = await maakStem(samenvatting, env.ELEVENLABS_API_KEY);
// 3. Audio in R2, registratie in D1const id = crypto.randomUUID();
await env.FILES.put(`audio/${id}.mp3`, mp3);
await env.DB
.prepare("INSERT INTO voorlezingen (id, samenvatting) VALUES (?, ?)")
.bind(id, samenvatting)
.run();
// 4. Antwoord terug naar de bezoekerreturn Response.json({ id, samenvatting });
},
};