Skip to main content
Work

The Recipe Platform That Gave Croatia's Biggest News Portal A New Vertical

The design, frontend, backend, admin panel and infrastructure behind recepti.index.hr, a recipe platform built inside Croatia's largest news portal.

The Index Recipes homepage on desktop and mobile, with the ingredient and cooking-time filters open

Project snapshot

Location
  • Croatia
Development period
  • Nov 2019 – Ongoing

Project

Index.hr is Croatia's largest independent news portal, run by Index Promocija from Zagreb. It reaches a national audience every day with news, sport and lifestyle coverage.

In late 2019 Index decided to move into food. Not a recipe tag on the news site, a product of its own: recepti.index.hr, a standalone platform sitting inside the Index portal with its own search, its own contributors, its own advertising inventory and its own audience. They asked us to design and build it. We did, and we have shipped it ever since.

The challenge

Index had reach but no product. A recipe tag on a news portal collects articles, it does not let a reader filter by what is in their fridge, rescale a dish for six people, rate it, save it or publish their own. The food market Index wanted was already held by dedicated platforms that had spent years earning Google's recipe results, and a news CMS cannot compete with that: it has no ingredient model, no structured data for recipes, no contributor workflow. Every one of those had to be built. Index also had a hard requirement: a reader already logged into Index had to stay logged in, and the whole thing had to run on infrastructure their own engineers could live with.

  • Index Recepti Homepage
    • Search
      • Ingredients
      • Time
      • In detail
    • Ingredients
      • Ingredient Recipes List
      • About The Ingredient
      • Kitchen Index
    • Food Categories
      • Meal
      • Separated
      • Croatian Cuisine
      • World Cuisines
      • Child
      • Category Recipes List
    • Featured Recipes
      • Recipe Page
      • Recipe Suggestions
    • Latest Recipes
      • Best
      • Latest
      • The Fastest
    • Blog
      • Article Pages

Design and UX

Index.hr already had a brand and a house style, so this was never an identity project. Our job was to design a product that felt like Index and behaved like a recipe platform, two things that pull in opposite directions. A news portal is optimised for scanning headlines. A recipe is read standing up, one hand busy, screen at arm's length.

We ran wireframes a sprint ahead of development for the whole build, so engineering never waited on design and design never got specified after the fact. The interface work that mattered most was the recipe page itself: ingredient groups with their own headings and footnotes, preparation steps that carry their own photos and video, a nutrition table that stays readable at 360px and a portion control placed where a reader actually reaches for it.

Ingredient-aware search

Searching the actual ingredients, not the cookbook.

We built the search on Elasticsearch so a reader can name the ingredients they have, name the ones they will not touch and cap the result by cooking time, calories, price band or difficulty. Croatian is heavily inflected, so exact matching would fail constantly. The query runs fuzzy across recipe names, descriptions, categories, tags, author names and ingredient keywords, so a misspelling or the wrong case ending still finds the dish.

Readers stopped searching for recipes. They started searching for dinner.

An Index Recipes recipe page: rolls with ham and cheese, with ratings, prep and cooking times and the photo gallery
1 serving

Try it: change the number of servings

Ingredients

Dough

  • 50 g plain flour
  • 2 g baking powder
  • ⅙ teaspoon of salt
  • 10 ml of milk
  • 10 ml of oil
  • 23 g yogurt
  • ⅙ egg white

Stuffing

  • 17 g grated cheese
  • 17 g ham

Coating

  • ⅙ egg yolk
  • Seeds of choice

Preparation

Dough

  1. Combine the ingredients.In a large bowl, combine the flour, baking powder and salt. Add the yogurt, milk, oil and egg whites and mix until combined.
  2. Knead the dough.Knead the dough by hand, place it on a floured surface, flour the top and roll it into a circle. Preheat the oven to 200 degrees.
  3. Divide the dough.Divide the dough into 16 equal parts.

Stuffing

  1. Fill the rolls.Place a little cheese and ham on the wider part of each piece of dough and roll it up, then set it on a baking sheet lined with baking paper. Repeat with the remaining dough and ingredients.

Coating

  1. Sprinkle with seeds.Beat the egg yolk and brush the rolls with it. Sprinkle with seeds of your choice and place in the preheated oven.
  2. BakeBake for about 20 minutes until the rolls are golden brown.

The recipe page

Dynamic rescaling of the recipe's portion.

Change the number of people and every quantity rescales in place, properly: grams and millilitres round to sensible precision, and cups, tablespoons, teaspoons and pinches are re-expressed as real fractions, so a reader gets three quarters of a cup rather than 0.73 cups. Around it sits the rest of what a cook needs: ingredient groups with footnotes, preparation steps carrying their own photos and video, an optional nutrition table, equipment, prep and cook times split and totalled.

Change the servings above and the quantities rescale, exactly as they do on the site.

Celeriac
Parsley
Kiwi
Kohlrabi
Grapefruit and orange
Turnips
Radicchio
Mackerel
Kale
Butternut squash
Pomegranate
Red apples
Bell peppers

The ingredient database

4,000 recipes matched with the appropriate ingredient strings.

Ingredients started as free text. We built a proper ingredient entity with its own name, description, image, keyword list and slug, gave every ingredient its own page listing every recipe that uses it and put seasonal ingredients on the homepage for editors to swap through the year. For the migration, we wrote a matching job that reads every unlinked ingredient string, compares it against ingredient names and keywords in a single pass and writes the relation where it finds a match. It runs nightly, skips what is already connected and picks up new recipes on its own.

The Index Recipes recipe submission form next to a reader profile, over an egg and salad photo

Recipes from readers

A publisher with one kitchen becomes a publisher of hundreds of recipes.

Registered readers write their own recipes through the same structured form the editors use, preview the result and submit. Nothing goes live on its own. Every submission lands in a review queue with a status of its own, and an editor approves, holds, archives or blocks. Readers get profiles, collections, a public list of what they have cooked and two ways to respond to a recipe: how they liked it and how they make it differently.

Google results for an Index Recipes corn salad: the recipe rich result with rating, time and photo, on desktop and on a phone

Built to be found

Every recipe ships as a page Google can read.

Every recipe emits full schema.org markup: ingredients, step-by-step instructions grouped into sections, prep, cook and total time in ISO duration, aggregate rating and review count, nutrition values, embedded video, author, cuisine and yield. Category, tag, ingredient and profile pages carry their own structured data on top. The frontend runs server-side rendered through Angular Universal, so a crawler gets finished HTML on first request, and URLs are readable slugs. Canonical tags are injected per route so filtered and sorted views never compete with the page they came from, the sitemap is generated and images are served at a size chosen per placement and loaded as they are reached.

Recipe card: poppy seed and cherry jam bars
Recipe card: pancakes with apples and cinnamon
Recipe card: creamy pasta in pumpkin and cheese sauce
Recipe card: chicken breast in a creamy sauce with vegetables
Recipe card: proja with cheese and spinach

Every recipe is a page Google can read. Every ingredient is another one.

How the platform is monetised

A new audience is only half of it. This one arrived with inventory attached.

The platform was built to earn from day one. Ad slots run through Google Ad Manager with targeting, placed by the same editors who manage content. Individual recipes can be marked sponsored and carry sponsor text with their own weighting in listings. Whole category hubs can be branded, with a sponsor name, logo, description and link. Promoted articles pull from the main Index portal into the recipe site on a scheduled window, so traffic runs both ways.

The editorial desk

Editors run the platform through the CMS.

The admin panel is its own application, not a settings screen. Editors manage recipes, nested categories, tags, ingredients, comments and users. They pick what is featured on the homepage and in what order, curate special category hubs, moderate reader submissions and photos, read feedback and pull promoted articles across from the main Index portal on a date window. Recipes can be written ahead and published on a schedule, and the search index respects the publish time.

Sign-in flow

  1. recepti.index.hrReader taps sign inOr tries to rate, save or comment on a recipe
  2. Index SSOCheck the Index sessionActive session: no password. Otherwise the usual Index sign-in.
  3. recepti.index.hrBack on the page, signed inThe session renews itself in the background

Architecture

  • For readersPublic frontendAngular, server-side renderedRecipes, search, profiles
  • Run by IndexIndex SSOOpenID ConnectIndex accounts and passwords
  • For editorsAdmin panelAngularRecipes, moderation, promo slots

Our APIASP.NET Core

  • Token checkEvery request against Index's signing keys
  • Users and rolesLocal user on first sign-in, roles set here, not by Index
  • Image previewsFive sizes, resized on request
  • Background jobsView counts, ratings, slugs, related recipes, etc.
  • SQL ServerRecipes, ingredients, users, roles, job queue
  • ElasticsearchIngredient-aware search, full reindex
  • Object storageMinIO, S3-compatible, original images
  • Index.hrRun by Index, main portal

Inside the Index portal

One Index account. No second login, no second password.

Readers arrive from index.hr already logged in and stay that way. Authentication runs through Index's own single sign-on over OAuth and OpenID Connect, returning a JWT the platform validates, while roles and permissions stay on our side. Media sits in object storage with server-side preview sizes generated per image, the platform ships in Docker and background jobs handle work that should never block a request: view counts, rating aggregation, related recipes, slug backfills and the ingredient sync.

More than a recipe tag

Index Recipes went live in 2021 and is still running stronger than ever.

It was never a feature bolted onto a news site. We built every layer a recipe platform needs and kept adding them: ingredient-aware search, a real ingredient model, reader submissions with moderation, structured data Google can read, native ad inventory and single sign-on into the Index account.

The lemon cake recipe open on the Index Recipes mobile site, next to an orange loaf cake on a marble worktop

Inspiring everyday cooking through simple recipe discovery.

Results

Visitors every month
1,000,000+
Years of shipping
6+

Links

The client says...

Custom Software DevelopmentCroatia

They are a small and agile team, who can quickly adjust and deliver every reasonable request we need.

4.5
Matija BabićMatija BabićFounder, Index.hr
Work with us

Ready to talk about work like this for your product?

Whether you're starting an MVP, stabilising a growing product or planning AI features, we'll help you choose the smallest sensible starting point and a delivery model that fits your team.

See our work

Build faster with AI

Our playbook for integrating AI into product design and development workflows.

Download the playbook