Werkboek / 2026
Logboek · 2026Logbook · 2026

Software die winkels écht gebruiken. Software that shops actually use.

Ik ontwerp en bouw webshops, eigen SaaS en systemen voor bedrijven, van de eerste schets tot het moment dat het live staat en mensen ermee werken. Gebouwd met Claude Code. I design and build online stores, my own SaaS products and business systems, from the first sketch to the day it goes live and people start working with it. Built with Claude Code.

Hieronder elf opgeleverde projecten. Klantnamen en logo's zijn onleesbaar gemaakt; de appschermen tonen voorbeelddata. Eleven shipped projects below. Client names and logos are blurred; the app screens show sample data.

131.000131,000+ regels eigen code, verdeeld over elf opgeleverde projecten, van webshop tot SaaS.lines of own code across eleven shipped projects, from online stores to SaaS.

Shopify-secties op maatcustom Shopify sections
210
systemen live, met databaselive systems with a database
4
webshops op maatcustom online stores
6
tokens met Claude Codetokens with Claude Code
4,7 mld4.7 bn
Deel 1Part 1

Systemen en SaaSSystems and SaaS

Software met een database erachter, waar mensen elke dag mee werken. Klik op een scherm hieronder om het groot te zien.Software with a database behind it that people work with every day. Click a screen below to see it large.

eigen SaaSown SaaS/opgeleverdshipped

Vroegvogel

Meldingen voor nieuwe advertenties op Nederlandse en Belgische advertentiesites. Je stelt een sniper in (zoekterm, prijs, afstand, filters) en krijgt binnen seconden een bericht via Telegram of push, met foto, prijs en een koopjesscore. Alerts for new listings on Dutch and Belgian classifieds sites. You set up a sniper (search term, price, distance, filters) and get a Telegram or push message within seconds, with photo, price and a deal score.

  • Begonnen met een analyse van bestaande diensten in deze markt: wat ze doen, wat ze kosten en waar ze tekortschieten.Started with an analysis of existing services in this market: what they do, what they cost and where they fall short.
  • Koopjesscore: de prijs tegenover wat vergelijkbare advertenties op dit moment vragen.Deal score: the price compared with what similar listings are asking right now.
  • Zakt de prijs van een gemelde advertentie, dan volgt een nieuwe melding met de oude prijs doorgestreept.When a reported listing drops in price, a new alert follows with the old price struck through.
  • Een sniper maken gaat in vijf stappen, met tips op basis van echte advertenties en een schatting van het aantal meldingen per dag.Creating a sniper takes five steps, with tips drawn from real listings and an estimate of alerts per day.
  • Beheerpagina, uitnodigingslinks en automatische meldingen als een site of zoekopdracht hapert.Admin page, invite links and automatic warnings when a site or search stops working.
  • Zo zuinig gebouwd dat alles binnen de limieten van het gratis Cloudflare-plan blijft: elke controle duurt minder dan 10 ms rekentijd, gemeten.Engineered so lean it stays within the limits of Cloudflare's free plan: every check takes under 10 ms of CPU time, measured.
Voorbeeldmelding in TelegramSample Telegram alert (the bot speaks Dutch)

Piaggio Zip 4T 2019, nieuwe banden, 2 sleutels

€ 749 · 24% onder markt (gangbaar € 985)

Utrecht, 4 km · 18 s na plaatsing

  • Cloudflare Workers
  • D1
  • Durable Objects
  • Telegram Bot API
  • Web Push
  • JavaScript

Schermen en melding met voorbeelddata.Screens and alert use sample data.

vroegvogel · app
Vondsten: lijst met nieuwe advertenties, koopjesscores en reactietijd
Vondsten op een telefoon
Vondsten: elke nieuwe advertentie met prijs, koopjesscore en hoe snel na plaatsing hij gemeld is.Finds: every new listing with price, deal score and how soon after posting it was reported.
interne appinternal app/opgeleverdshipped

Dealerradar en backofficeDealer radar and back office

Een interne web-app die de hele dag draait voor een klein Europees merk van fietsonderdelen. Hij vindt nieuwe dealers, schrijft ze aan, maakt van binnenkomende mail orders en taken, en volgt elk pakket tot het bezorgd is. An internal web app that runs the whole day for a small European bike-parts brand. It finds new dealers, writes to them, turns incoming mail into orders and tasks, and tracks every parcel until it is delivered.

  • Begonnen bij de werkdag van het team: leads in een spreadsheet, een gedeelde mailbox, een verzendportaal en het webshopbeheer, elke ochtend met de hand naast elkaar gelegd.Started from the team's working day: leads in a spreadsheet, a shared mailbox, a shipping portal and the store admin, matched up by hand every morning.
  • Het dashboard zet de dag in genummerde stappen: orders uit de mail, orders om te verzenden, mails om te lezen en te versturen, nieuwe winkels om aan te schrijven.The dashboard lays out the day as numbered steps: orders from email, orders to ship, emails to read and send, new shops to write to.
  • Dealerradar: zoekt in 20 talen, per land, naar fietswinkels die een concurrerend product verkopen, en checkt per winkel of het op voorraad is, wat het e-mailadres is en op welk platform de shop draait.Dealer radar: searches in 20 languages, country by country, for bike shops that sell a competing product, and checks each one for stock, contact email and shop platform.
  • Eerst gratis, betaald als laatste: gewone HTTP en platform-API's gaan voor betaalde credits, met budgetten per scan en per domein.Free first, paid last: plain HTTP and platform APIs come before paid credits, with budgets per scan and per domain.
  • Claude leest de mailbox en sorteert elke mail: nieuwe order, vraag, klacht of antwoord van een lead. Concepten voor dealers schrijft hij in hun eigen taal; er gaat niets weg zonder dat een mens het leest.Claude reads the mailbox and sorts every message: new order, question, complaint or a lead's reply. It drafts dealer emails in their own language; nothing goes out until a person has read it.
  • Verzenden is één Postgres-transactie: tracking opslaan, voorraad afboeken en de taak sluiten gebeurt samen of niet. MyParcel-zendingen koppelen zich vanzelf aan orders.Shipping is one Postgres transaction: tracking saved, stock lowered and the task closed together or not at all. MyParcel shipments link to orders on their own.
  • Kostenoverzicht voor alle betaalde diensten, uitnodigingen voor het team en een wekelijkse back-up van elke tabel.A cost overview for every paid service, team invites and a weekly backup of every table.
  • React
  • TypeScript
  • Supabase
  • Netlify Functions
  • Claude API
  • Firecrawl
  • MyParcel
  • 27 migraties27 migrations
  • 19 serverless functies19 serverless functions

Schermen met fictieve demodata.Screens show fictional demo data.

backoffice · app
Dashboard met de dag in genummerde stappen
Dashboard op een telefoon
Dashboard: de dag van boven naar beneden, met één knop per regel.Dashboard: the day from top to bottom, with one button per row.
bedrijfssysteembusiness system/opgeleverdshipped

WerkplaatssysteemWorkshop system

Eén app voor een scooterwerkplaats, van de intake aan de balie tot de betaling aan de kassa. Er is een Nederlandse en een Belgische versie. One app for a scooter workshop, from intake at the counter to payment at the till. There is a Dutch and a Belgian version.

  • Samen met de klant doorlopen: drie ontwerprichtingen, een klikbare demo, een plan van aanpak naar productie en twee feedbackrondes vóór de livegang.Run together with the client: three design directions, a clickable demo, a plan from demo to production and two feedback rounds before go-live.
  • Intake met foto's per kant en een kentekencheck bij de RDW: merk, model en bouwjaar vullen zich in, met een rode waarschuwing bij geen verzekering of een terugroepactie.Intake with photos of every side and a licence-plate check against the vehicle registry: make, model and year fill in, with a red warning for no insurance or an open recall.
  • Wachtrij en planning, een weekagenda die waarschuwt bij dubbel plannen, en uren per voertuigsoort met een eigen uurtarief.Work queue and planning, a weekly calendar that warns about double bookings, and hours per vehicle type at its own rate.
  • Werkbon, factuur, kassa, archief, herinneringen en cijfers. Facturen worden in de database vergrendeld; corrigeren gaat met een creditnota.Work orders, invoices, till, archive, reminders and figures. Invoices are locked in the database; corrections go through a credit note.
  • Bedragen staan inclusief btw op het scherm maar worden exclusief btw op 4 decimalen bewaard, zodat € 100,00 altijd € 100,00 blijft.Amounts show including VAT but are stored excluding VAT at 4 decimals, so €100.00 always stays €100.00.
  • Schaderapporten voor verzekeraars als PDF, met de intakefoto's erbij.Damage reports for insurers as PDFs, with the intake photos attached.
  • Een lokale proefomgeving met Postgres in de browser, zodat elke wijziging eerst helemaal wordt nagelopen zonder productie te raken.A local test environment with Postgres running in the browser, so every change is checked end to end without touching production.
  • Supabase / Postgres
  • 26 tabellen26 tables
  • 88 toegangsregels88 access policies
  • Netlify
  • JavaScript
  • PGlite

Schermen met voorbeelddata uit de proefomgeving.Screens show sample data from the test environment.

werkplaats · app
Werkvoorraad en planning
Werkvoorraad op een telefoon
Werkvoorraad: wat in behandeling is, wat wacht en wat op een onderdeel wacht, met de monteurs ernaast.Work queue: what's in progress, what's waiting and what's waiting for a part, with the mechanics alongside.
Shopify + API/opgeleverdshipped

AfsprakensysteemBooking system

Een afsprakenmodule in de webshop van een scooterwerkplaats, ter vervanging van een betaalde boekingsapp. Na het voorleggen van meerdere concepten voor desktop en mobiel koos de klant voor een compact boekingsscherm: klanten kiezen zelf dag en tijd om hun scooter te brengen of te laten ophalen. A booking module inside a scooter workshop's online store, replacing a paid booking app. After several concepts for desktop and mobile were presented, the client chose a compact booking screen: customers pick a day and time to drop off their scooter or have it collected.

  • Openingstijden, capaciteit en blokkades (vakantie, feestdag) stelt de winkel zelf in via de Shopify-editor.The shop sets opening hours, capacity and blocked days (holidays) itself in the Shopify editor.
  • Dubbel boeken kan niet: tellen en opslaan gebeurt in één SQL-statement, getest met 12 gelijktijdige aanvragen.Double booking can't happen: counting and saving run in a single SQL statement, tested with 12 simultaneous requests.
  • Bevestigingsmail met annuleerlink voor de klant, een mail met alle gegevens voor de winkel en een afsprakenoverzicht.Confirmation email with a cancel link for the customer, an email with all details for the shop, and an appointments overview.
  • Beschermd tegen misbruik: een verborgen botveld, maximaal 5 aanvragen per uur per IP en 3 open afspraken per e-mailadres.Protected against abuse: a hidden bot trap, at most 5 requests an hour per IP and 3 open bookings per email address.
  • Persoonsgegevens worden na 180 dagen automatisch gewist (AVG).Personal data is deleted automatically after 180 days (GDPR).
  • Shopify Liquid
  • Cloudflare Workers
  • D1
  • Resend
  • JavaScript

Het afsprakenoverzicht en de mails tonen voorbeeldafspraken.The overview and emails show sample bookings.

•••••••••••.nl/pages/contact
De afsprakenmodule op de live webshop
Bevestigingsmail op een telefoon
De module op de live webshop: voertuig, dag en tijd gekozen, rechts het overzicht.The module on the live store: vehicle, day and time picked, with the summary on the right.
tool/opgeleverdshipped

Dashboard-mockupbouwerDashboard mockup builder

Een volledig werkend analytics-dashboard waarin je elk getal, elke naam en elke grafiek ter plekke aanpast. Voor demo's, pitches en presentaties: zet de cijfers die je wilt laten zien, en het blijft er echt uitzien. A fully working analytics dashboard where you change every number, name and chart in place. For demos, pitches and presentations: enter the figures you want to show, and it still looks like the real thing.

  • Bewerkmodus: klik op een omlijnde waarde en typ. Totalen en grafieken rekenen zichzelf opnieuw uit.Edit mode: click any outlined value and type. Totals and charts recalculate themselves.
  • Een zijpaneel met alle data: namen, profielfoto, valuta, tijdzone, rijen toevoegen of weghalen.A side panel with all the data: names, profile photo, currency, time zone, add or remove rows.
  • Licht en donker thema; exporteren en importeren als JSON.Light and dark theme; export and import as JSON.
  • Zonder externe libraries gebouwd: alle grafieken, interacties en opslag zijn zelf geschreven.Built without external libraries: every chart, interaction and storage layer is written from scratch.
  • HTML
  • CSS
  • JavaScript
  • SVG
dashboard · demo
Dashboard met inkomsten, grafiek en recente transacties
Het dashboard op een telefoon
Het dashboard zoals een kijker het ziet.The dashboard as a viewer sees it.
Deel 2Part 2

Webshops en websitesOnline stores and websites

Shopify-thema's op maat. Alles wat je ziet is door de winkel zelf aan te passen in de Shopify-editor. Beweeg over een homepage om erdoor te scrollen; klik op een pagina om hem te bekijken.Custom Shopify themes. Everything you see can be changed by the shop itself in the Shopify editor. Hover over a homepage to scroll through it; click a page to view it.

Shopify-themaShopify theme/opgeleverdshipped

Merk voor fietsgearCycling gear brand

Thema voor een merk van elektrische fietspompjes en bandenreparatie dat in heel Europa verkoopt. Eerst zijn conversieconcepten voor de home- en productpagina's uitgewerkt; die vormen de basis voor productpagina's die vragen beantwoorden voordat ze gesteld worden. Theme for a brand of electric bike pumps and tyre repair kits that sells across Europe. Conversion concepts for the home and product pages came first; they shaped product pages that answer questions before they're asked.

  • 115 eigen secties, allemaal aanpasbaar in de editor.115 custom sections, all editable in the theme editor.
  • Meertalig via de vertalingen van Shopify zelf, in plaats van losse pagina's per taal.Multilingual through Shopify's own translations instead of separate pages per language.
  • Dealerzoeker met kaart, gevuld vanuit Shopify-metaobjecten met een eigen importscript.Retailer locator with a map, filled from Shopify metaobjects by a custom import script.
  • Een bandenspanningscalculator voor weg, gravel en MTB.A tyre pressure calculator for road, gravel and MTB.
  • 110 commits aan eigen code.110 commits of custom code.
  • Shopify Liquid
  • Metaobjects
  • i18n
  • JavaScript

Het merk staat op de producten zelf gedrukt; dat is in productfoto's niet weg te halen.The brand is printed on the products themselves, which can't be removed from product photos.

••••••••.eu
Homepage van de webshop, volledige pagina
Homepage op een telefoon
Homepage op desktop en telefoon.Homepage on desktop and phone.
Shopify-themaShopify theme/opgeleverdshipped

KeukenshowroomsKitchen showrooms

Een nieuw, luxer ontwerp voor een keukenzaak met vier showrooms, opgebouwd uit het eigen beeld- en videomateriaal van de klant. De site heeft één doel: bezoekers een afspraak laten maken in de showroom. A new, more upmarket design for a kitchen company with four showrooms, built from the client's own photography and video. The site has one goal: getting visitors to book a showroom visit.

  • 14 eigen secties op een Dawn-basis, met een eigen ontwerpsysteem voor typografie en kleur.14 custom sections on a Dawn base, with their own design system for type and colour.
  • Bij de overstap een verborgen script ontdekt in het oude thema dat de hele pagina kon vervangen, en verwijderd.During the switch I found a hidden script in the old theme that could replace the whole page, and removed it.
  • Gekoppeld aan GitHub: elke wijziging staat binnen een minuut live.Connected to GitHub: every change is live within a minute.
  • Shopify Liquid
  • Dawn
  • GitHub
  • CSS
••••••••••••.nl
Homepage van de keukenzaak, volledige pagina
Homepage op een telefoon
Homepage op desktop en telefoon.Homepage on desktop and phone.
Shopify + lanceringShopify + launch/opgeleverdshipped

ModelabelFashion label

Webshop en lancering voor een modern modest-fashionlabel: een rustig thema met veel ruimte voor de fotografie, in het Nederlands en Engels, en een campagne die is opgebouwd na onderzoek naar de advertenties in de markt. Online store and launch for a modern modest-fashion label: a calm theme with plenty of room for the photography, in Dutch and English, and a campaign built after researching the ads in the market.

  • Eigen thema met 11 secties.Custom theme with 11 sections.
  • 44 advertentiebeelden, met AI gemaakt vanuit de echte fotoshoot. Het kledingstuk zelf tekent de AI nooit opnieuw.44 ad images made with AI from the real photoshoot. The AI never redraws the garment itself.
  • Lanceringscampagne op Meta, gebaseerd op een analyse van de advertenties van concurrenten.Launch campaign on Meta, based on an analysis of competitors' ads.
  • Rapportages in begrijpelijke taal: cijfers uit Meta en Shopify, verwerkt tot een PDF met advies en een goedkeuringspagina. Wijzigingen gaan pas door na akkoord van de klant.Reports in plain language: figures from Meta and Shopify turned into a PDF with advice and an approval page. Changes only go ahead once the client signs off.
  • Shopify Liquid
  • Meta Marketing API
  • Python
  • AI-beeldAI imagery
•••••••.com
Homepage van het modelabel, volledige pagina
Homepage op een telefoon
Homepage op desktop en telefoon.Homepage on desktop and phone.
Shopify-themaShopify theme/opgeleverdshipped

ScooterdealerScooter dealer

Een compleet nieuw thema voor een scooterdealer met eigen werkplaats. Vijf homepage-concepten zijn samen met de klant beoordeeld; het gekozen concept is in rondes uitgebouwd tot 44 eigen secties, met mockups per pagina ter goedkeuring. A completely new theme for a scooter dealer with its own workshop. Five homepage concepts were reviewed with the client; the chosen one was developed in rounds into 44 custom sections, with page-by-page mockups for approval.

  • Elke kleur, tekst, afbeelding en lijst is aan te passen vanuit de editor.Every colour, text, image and list can be changed from the editor.
  • Het afsprakensysteem van hierboven zit erin.The booking system above is built in.
  • SEO-teksten per collectie en eigen pagina's voor merken, service en voorwaarden.SEO copy per collection and dedicated pages for brands, service and terms.
  • 130 commits, automatisch uitgerold vanuit GitHub.130 commits, deployed automatically from GitHub.
  • Shopify Liquid
  • Dawn
  • GitHub
•••••••••••.nl
Homepage van de scooterdealer
Homepage op een telefoon
Homepage op desktop en telefoon.Homepage on desktop and phone.
Shopify-themaShopify theme/opgeleverdshipped

ScootermerkScooter brand

Webshop voor een scootermerk in België, met benzine- en elektrische modellen en een netwerk van dealers. De ontwerprichting is gekozen uit klikbare mockups, en welke modellen welke snelheidsvarianten krijgen is samen met de klant vastgelegd. Online store for a scooter brand in Belgium, with petrol and electric models and a dealer network. The design direction was chosen from clickable mockups, and which models get which speed variants was agreed with the client.

  • Eigen secties voor categorieën, specificaties, een dealerpagina en proefritaanvragen.Custom sections for categories, specs, a dealer page and test-ride requests.
  • Snelheidsvarianten van 25 en 45 km/u toegevoegd aan 20 producten via de Admin API. Het thema toont er automatisch het juiste rijbewijs bij (A- of B-klasse).Added 25 and 45 km/h speed variants to 20 products through the Admin API. The theme automatically shows the matching licence class (A or B).
  • Nieuwe collectie, menu's en footerlinks voor SEO.New collection, menus and footer links for SEO.
  • Shopify Liquid
  • Admin GraphQL API
  • Dawn
••••••••••••.be
Homepage van het scootermerk, volledige pagina
Homepage op een telefoon
Homepage op desktop en telefoon.Homepage on desktop and phone.
Shopify-themaShopify theme/opgeleverdshipped

FietsenwinkelBike shop

De klant wilde een webshop op het niveau van de grote spelers in de branche. Op basis van hun voorbeelden zijn drie ontwerprichtingen uitgewerkt en in een presentatie besproken, elk met eigen kleuren, typografie en opbouw. De gekozen richting is uitgebouwd tot een volledig thema, met winkeldata en SEO. The client wanted a store on the level of the biggest players in their market. Based on their references, three design directions were worked out and discussed in a presentation, each with its own colours, typography and structure. The chosen direction became a complete theme, with store data and SEO.

  • 19 eigen secties, waaronder een mega-menu en een maatkiezer voor kinderfietsen.19 custom sections, including a mega menu and a size picker for children's bikes.
  • Winkeldata toegevoegd via de Admin API: 34 slimme collecties, 17 pagina's, 4 blogartikelen en 9 menu's.Store data added through the Admin API: 34 smart collections, 17 pages, 4 blog articles and 9 menus.
  • SEO-teksten voor collecties, producten en de homepage.SEO copy for collections, products and the homepage.
  • Shopify Liquid
  • Admin GraphQL API
  • Dawn
  • Node.js
•••••••••.nl
Homepage van de fietsenwinkel, volledige pagina
Homepage op een telefoon
Homepage op desktop en telefoon.Homepage on desktop and phone.
Deel 3Part 3

WerkwijzeHow I work

Elk project hierboven liep langs dezelfde vijf stappen.Every project above went through the same five steps.

  1. Kennismaking en analyseDiscovery and analysis

    Doelen, doelgroep en de huidige situatie in kaart, met de concurrenten en voorbeelden die de klant belangrijk vindt.Goals, audience and the current situation mapped out, along with the competitors and references the client cares about.

  2. OntwerprichtingenDesign directions

    Meerdere uitgewerkte richtingen als mockup of presentatie, samen met de klant besproken en gekozen.Several worked-out directions as mockups or a presentation, discussed and chosen together with the client.

  3. Bouwen in rondesBuilding in rounds

    Werkende tussenversies op een aparte testomgeving, met feedback van de klant na elke ronde.Working interim versions on a separate test environment, with client feedback after every round.

  4. Testen en opleverenTesting and launch

    Getest op desktop en telefoon, met echte gegevens, en live gezet volgens een vaste checklist.Tested on desktop and phone with real data, and launched by a fixed checklist.

  5. Overdracht en beheerHandover and care

    Een overdrachtsdocument per project, alles aanpasbaar zonder code, en doorontwikkeling waar nodig.A handover document for every project, everything editable without code, and further development where needed.

Deel 4Part 4

GereedschapToolbox

Waar deze projecten mee gebouwd zijn.What these projects are built with.

Shopify

Liquid-secties en -blokken, Admin GraphQL API, metaobjecten, thema-vertalingen, GitHub-koppeling.Liquid sections and blocks, Admin GraphQL API, metaobjects, theme translations, GitHub integration.

Backend

Cloudflare Workers, D1 en Durable Objects; Supabase met Postgres, row-level security en pg_cron; Netlify Functions; Node.js.Cloudflare Workers, D1 and Durable Objects; Supabase with Postgres, row-level security and pg_cron; Netlify Functions; Node.js.

Frontend

React en TypeScript, HTML, CSS en JavaScript zonder framework, PWA's met push, SVG-grafieken.React and TypeScript, HTML, CSS and JavaScript without a framework, PWAs with push, SVG charts.

AI en koppelingenAI and integrations

Claude Code en de Claude API, Firecrawl, Telegram Bot API, Resend, MyParcel, Meta Marketing API, RDW open data, AI-beeldgeneratie.Claude Code and the Claude API, Firecrawl, Telegram Bot API, Resend, MyParcel, Meta Marketing API, vehicle registry open data, AI image generation.