Koffiemeister

Koffiemeister.nl is a Dutch affiliate comparison site for coffee machines, built as a fully custom full-stack web application. The goal: help visitors find the right machine and convert them via affiliate links (bol.com/Amazon).

Stack

Next.js 14 · Tailwind CSS v4 · Sanity CMS · Vercel

The CMS (Sanity)

The site is powered by a headless CMS built on Sanity.io, managing two content types:

Machines — each product is a structured document with: title, auto-generated slug, price, score (0–5), category (fully automatic / espresso / capsule / filter), brand, product image with hotspot support, affiliate URL, and a rich text description via Portable Text. All 40+ machines were bulk-imported from an Excel file via a custom Node.js script using the Sanity API — no manual entry needed.

Blog posts — fully dynamic blog with title, slug, cover image, publish date, and a Portable Text body field. A custom PortableText renderer handles headings, lists, links, and empty lines. Each post gets its own route at /blogs/[slug].

The CMS schema enforces validation rules (e.g. score must be between 0 and 5), and content editors can publish new machines or articles without touching any code.

"Advies op Maat" — Personalised Recommender

The site includes a multi-step recommendation tool that guides users to their ideal machine in four questions:

  1. Budget — what's your price range?

  2. Drinks — espresso only, or milk-based drinks too?

  3. Priority — convenience vs. coffee quality?

  4. Usage — how many cups per day?

Each answer feeds into a scoring algorithm that runs against the full machine catalogue from Sanity. Every machine gets a weighted score based on how well it matches the user's answers — category, price range, and use intensity all factor in. The top 2 results are shown as product cards with a direct affiliate link.

The flow auto-advances after each selection (200ms delay), shows a progress bar, and has a back button per step. Built entirely in React with local state — no backend call needed beyond the initial data fetch from Sanity.

challenge.

Building a comparison site that actually converts means more than just listing products — it needs to guide indecisive visitors toward a purchase. The coffee machine market is crowded and technical, and most buyers don't know the difference between a fully automatic and a portafilter machine. The challenge was to make product discovery feel simple and personal, while keeping the content manageable without a development background. That meant designing a recommendation flow that asks the right questions in the right order, a CMS structure flexible enough to handle 40+ products without becoming a chore to maintain, and a frontend that feels polished enough to build trust with first-time visitors.