Bankers

Comparing a credit card or an insurance policy in the Netherlands usually means a dense table, a wall of small print and a site that looks like every other one. People leave without understanding what they would actually pay.

Bankers set out to make that comparison calm and readable: fewer numbers on screen at once, plain-language explanations, and product pages that feel made for the product instead of poured into a template.

Products live in a Turso database behind Drizzle ORM, modelled polymorphically: one products table holds what every product shares, and each category (credit cards, bank accounts, insurance, investments) adds its own attribute table. Translations, benefits, advantages and drawbacks sit in their own tables keyed by locale, and categories reference themselves to form a hierarchy. A new kind of product means a new attribute table, not a rework of the site.

Pages are generated ahead of time and revalidated every hour, so visitors get static-speed pages while the data stays fresh. Locale lives in the URL: /en and /nl are separate, crawlable pages served through next-intl, with middleware picking the right one on arrival.

Category pages put the decision first. Fuzzy search, filters, sorting and a list or grid view narrow the options quickly, and each result shows only the figures that matter: rating, key features and the annual fee.

Product pages adapt to the product. The accent colour follows the card itself, so the ANWB card reads yellow and the American Express Gold reads gold, while the layout stays the same: a plain-language pitch, an honest list of advantages and drawbacks, pricing details and one clear way to apply.

A knowledge base of 57 guides across the five categories answers the questions people have before they apply, from what a deductible is to how to start investing. Articles live in the same database, with their translations.

The details are production-minded too. Animations scale to the device, checking processor cores, memory, connection speed and data-saver mode before deciding how much motion to play. The contact form verifies visitors with Cloudflare Turnstile, rate-limits by IP, stores every submission and sends a notification through Resend.

Prices and ratings change, and a comparison site is only as good as its freshest number. A TypeScript sync engine fetches the providers' data feed, hashes the fields that matter with SHA-256 to detect real changes, backs up before every write, logs each change by severity and pushes the result to the database. Dry runs and per-product syncs make it safe to run by hand or on a schedule.

The first version was a client-rendered React app built with Vite. For a comparison site, search traffic is everything, so I moved it to server rendering with the Next.js App Router. The migration brought its share of technical issues, in styling and in how components behaved once rendered on the server. Each one was tracked down and solved, and the site kept its look throughout.

Moving the data into a database brought its own lesson: the first version loaded a product page with eleven separate queries, and a category listing with more than two hundred. Rewriting the loaders around Drizzle's relational queries brought every page down to a single query.

Bankers is live in English and Dutch, comparing 29 products across five categories with 57 supporting guides, served as static pages refreshed hourly from the database.

The next phase is a multi-site CMS to run many sites like it from one backoffice, with content managed globally, per country and per site. Its backend, an Express API with role-based access for five roles, is built. The backoffice is currently being built.