hondenrassen.club

Overview

A Dutch-language encyclopedia of dog breeds, built and launched during my internship at ESKIDOOS in Ghent. It answers a question that usually sends people to forums and half-reliable blog posts: which breed actually fits my home, my schedule and my energy level?

The site is not a flat list of breeds. Every breed carries the same structured set of attributes size, energy level, trainability, weight range, lifespan, country of origin and personality traits and that structure is what makes the rest of the site possible. Filtering, side-by-side comparison and the breed-matching quiz are all downstream of getting the data model right.

I took the project from an empty repository to the live site, covering the content model, the database behind it, the front end, SEO and the deployment pipeline.

The content model

Everything rests on how breeds are modelled. Rather than letting editors describe each breed in free text, breeds are a custom post type with Advanced Custom Fields defining each attribute as its own typed field.

That one decision is what unlocks the features. Because energy level is a controlled value and not a sentence somebody typed into the editor, it can drive a filter, populate a comparison table, and be weighted by the matching quiz all from the same source. Editors get a consistent form to fill in, and the front end gets data it can actually query.

It also keeps the site honest as it grows: a new breed is filterable, comparable and matchable the moment it is published, without anyone touching the templates.

Helping people find a breed

Visitors arrive knowing very different amounts, so there is more than one route to an answer:

The interactive parts filtering, comparison and the favourites list are written in TypeScript, so the shapes of the breed data are checked at build time rather than discovered as runtime bugs.

Where the dog comes from

Choosing a breed is only half of the decision; the other half is where the dog comes from, and that is the half with real welfare consequences. The site pairs the encyclopedia with a breeder finder built on the Google Places API, so visitors can look for breeders near them, alongside guidance on adoption for people who would rather rehome a dog than buy a puppy.

Front end and motion

SCSS for styling, compiled and bundled through Vite with PostCSS and Autoprefixer handling vendor prefixes. GSAP drives the motion, used to make transitions between views feel deliberate rather than to decorate the page.

Because the catalogue is image-heavy, the front end work was as much about restraint as about effect: keeping pages quick to load on a phone matters more on a site people browse casually than any animation does.

Search visibility

A breed encyclopedia lives or dies by search. Someone typing "labrador temperament" into Google should land on the labrador page, not the homepage and that traffic is the entire point of the site.

RankMath handles metadata, sitemaps and structured data across the catalogue. Because breed attributes are already structured fields rather than prose, the same data that powers the filters also feeds clean, consistent metadata on every breed page, instead of being written by hand one breed at a time.

Build and deployment

Assets are built with Vite and deployed through GitHub Actions, so shipping a change is a push rather than a manual upload over FTP. Keeping deployment automated mattered more than it might sound for a site of this size: it made small fixes cheap to release during the internship, which is exactly when you want to be able to iterate quickly.