Web Development Case Study

How Mediterranean Joy Turned a Recipe Website Into a Story-Led Mediterranean Food Platform

Amplify Creative Lab designed and built Mediterranean Joy as a custom editorial food platform that combines authentic Mediterranean recipes, long-form education, and interactive nutrition tools in one cohesive digital product.

Mediterranean Joy website homepage showing an editorial Mediterranean hero section with warm food photography and story-led copy

Project Snapshot

What Mediterranean Joy gained from the website

Web Development Case Study Remote

Mediterranean Joy launched with the feel of a premium content platform rather than a generic recipe blog. The site now gives Stefano a clearer way to publish recipes, practical health education, and personal cultural context inside a system that feels trustworthy, useful, and built for long-term growth.

Visit the client site

Platform
Custom Mediterranean recipe and nutrition website rooted in Sardinian Blue Zone culture
Stack
Astro, MDX, React islands, Netlify, and a custom design system
Library
268 recipes and 218 educational posts across roughly 1,130 built pages
Standout
27 topic hubs, interactive nutrition tooling, and an automated social, PDF and audio pipeline

The problem Mediterranean Joy needed to solve

Most recipe websites are cluttered, repetitive, and built around generic templates that flatten the food and the story behind it. Mediterranean Joy needed the opposite: a premium product with a clear point of view, a stronger personal voice, and an architecture that could handle a large content library without becoming noisy or hard to browse. The build also had to support custom interactive features that go well beyond a static recipe template.

How we shaped the website for Mediterranean Joy

The platform was planned as a content product, not a theme. The brand direction leaned warm, editorial, and human, drawing from Sardinian Blue Zone culture and real Mediterranean home cooking rather than stock recipe-blog patterns. Information architecture was built around recipes, guides, and browse pathways, while Astro, MDX, React islands, and Netlify provided a fast foundation for custom features like the nutrition playground and recipe picker without turning the site into a heavy app.

What Was Delivered

Website delivered for Mediterranean Joy

  • Custom website design and front-end build for a story-led Mediterranean food brand
  • Structured recipe and guide templates with editorial layouts, jump links, FAQ sections, and related content
  • Interactive Nutrition Playground with ingredient toggles, swaps, serving controls, and live nutrition updates
  • "What Should I Cook Tonight?" recipe picker with filters, shuffle flow, recent picks, and share actions
  • SEO architecture covering schema markup, internal linking, content hubs, and scalable taxonomy

What Changed

What changed for Mediterranean Joy after delivery

  • A more premium and trustworthy presentation than a standard recipe-blog template
  • A clearer way to publish recipes, health education, and personal storytelling inside one platform
  • Interactive features that make the site materially more useful than a static recipe library
  • A content structure carrying 268 recipes and 218 educational posts and guides across roughly 1,130 built pages
  • A stronger editorial and technical base for long-term organic growth

Rollout Context

Custom web development for a 1,100-page content platform

Mediterranean Joy was never meant to behave like a generic recipe blog. The goal was a platform with a clear editorial point of view, where recipes, long-form education and cultural context could live together without the site becoming bloated or directionless.

It is now 268 recipes and 218 educational posts, building out to roughly 1,130 pages. That scale is the interesting part of this project, because a content site of that size fails in ways a twenty-page site never does. The problems are not design problems. They are architecture problems, and they arrive whether you plan for them or not.

What breaks when a content site gets big

A recipe site with thirty recipes works no matter how it is built. Every page is reachable from the homepage, nothing is buried, and a visitor can see the whole thing in a couple of minutes.

At a thousand pages, three things break at once.

Discovery collapses. Most pages sit several clicks from the homepage, which means readers never find them and search engines crawl them rarely. Content you paid to produce sits unread.

The library becomes a maze. Without a deliberate structure, a large site is just a long reverse-chronological list. A reader interested in olive oil, or eating Mediterranean on a shift-worker’s schedule, has no path — only a search box and hope.

Consistency fails silently. Every recipe needs its structured data, nutrition information, images at the right sizes, and internal links. Done page by page, some will be wrong, and nobody will notice for months.

The build addressed each of these structurally rather than editorially, because at this scale “remember to do it properly each time” is not a strategy.

Twenty-seven hubs instead of one long list

The most consequential decision was organising the library around 27 topic hubs rather than categories and tags alone.

A hub is a substantial page owning one subject — olive oil, Mediterranean breakfast, anti-inflammatory eating, blood sugar, fermentation, athlete nutrition, eating Mediterranean in Australia, cooking for one, picky eaters — that links out to every recipe and article beneath it, with those pages linking back.

This is topical authority architecture, and it does two jobs simultaneously. For readers, it turns a thousand-page archive into about thirty comprehensible entry points; someone curious about olive oil gets a guided path instead of search results. For search engines, it groups related content into clusters that clearly demonstrate depth on a subject, rather than leaving a thousand pages competing individually with no signal about how they relate.

It also solves the discovery-collapse problem directly. Nothing is orphaned, because every recipe belongs to at least one hub, and every hub is reachable from the top of the site.

Recipe pages as content products

Recipe pages were built as flexible compositions rather than one rigid template, assembled from around sixteen dedicated components: jump links, an ingredient list, instruction steps, a nutrition panel, health callouts, storage notes, variations, FAQs, related recipes and more.

Two of those are worth calling out because they exist for the reader’s actual situation rather than the page’s appearance.

Cooking mode changes the page for someone standing in a kitchen — larger text, less chrome, no distractions — because that reader has different needs from someone browsing on a commute.

Generated recipe audio lets a recipe be listened to rather than read, for exactly the same reason: hands covered in flour, phone across the bench.

The nutrition playground is the most technically involved. Readers toggle ingredients on and off, swap components, change servings and units, and see nutrition recalculate live — rather than reading one fixed table computed for a serving size they are not cooking.

The publishing pipeline

At this volume, the work that would otherwise consume all the available time is not writing — it is everything that has to happen to each piece of content afterwards.

So that work was automated into the project’s own tooling: scripts that convert image assets to WebP in bulk, generate recipe audio, produce PDFs, and prepare and publish social packages. Publishing a recipe triggers the supporting assets rather than starting a checklist.

This is the part most content sites never build, and it is why most content sites plateau. The library stops growing not because the ideas run out, but because each new post costs an hour of mechanical work that nobody wants to do for the four hundredth time.

Fast, despite the size

The whole platform is static. Every one of those ~1,130 pages is pre-built HTML, served finished, with interactive features loaded as isolated islands only on the pages that use them — so a reader on a guide page downloads no tool code at all.

Search runs through Pagefind, indexed at build time and served from static files. On a site this size that decision matters: hosted search is typically priced per record or per query, and a thousand-page library with a search box on every page is exactly the shape that gets expensive. Here it costs nothing and depends on no third party.

The result is a large content platform with the loading behaviour of a small one — which is not how large content platforms usually feel, and it is the single clearest argument for building this kind of site as custom web development rather than on a page-builder theme carrying its own overhead on every visit.


The result: a Mediterranean food platform of 268 recipes and 218 guides across roughly 1,130 pages, organised into 27 topic hubs so nothing is orphaned, with recipe pages built from composable components, live nutrition tooling, an automated asset pipeline, and zero-cost static search.

Explore Mediterranean Joy, or read more about our Web Development Perth service.

Web Development Case Study

Need a content platform that does more than publish pages?

The strongest editorial websites are designed like products. We plan the architecture, UX, and custom features together so the site is easier to use, easier to scale, and harder to confuse with a template competitor.

Start Project
Mediterranean Joy ★★★★★ Google review

Amplify Creative Lab did an amazing job on my website. The team was professional, reliable, and easy to work with. I strongly recommend them for web development and website design.

Also the after support is top tier.

Plan Your Next Project

Tell us about your project — food photography, product shoots, website design, or full brand content packages. We respond within 24 hours.
Alternatively use our 60 seconds photography shoot planner or website development planner.