Web Development Case Study

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

Mediterranean Joy needed to hold hundreds of recipes and guides without turning into a cluttered recipe blog. We built a content platform of roughly 1,130 pages — 268 recipes and 218 guides — organised into 27 topic hubs so every page can be found, with a live nutrition tool and a 'What Should I Cook Tonight?' picker. Google's Lighthouse speed test scores it 87 on mobile and 93 on desktop.

  • 268 recipes
  • 218 guides and educational posts
  • 27 topic hubs linking every recipe into the site
  • 87 / 93 Lighthouse speed score, mobile / desktop
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

Readers browse by topic instead of scrolling an endless list, adjust a recipe's nutrition to what they're actually cooking, and search the whole library without a paid search service. Publishing is lighter too: WebP images, recipe audio, PDFs and social packages come from the site's own scripts, so Stefano isn't making them by hand for every post.

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
Lighthouse (Sep 2026)
Performance 87 mobile · 93 desktop · SEO 100

Measured, not claimed

How the live Mediterranean Joy site scores in Google Lighthouse

Tested 27 Sep 2026 with Google Lighthouse 12.8.2 on mediterraneanjoy.com

  • Performance

    How quickly pages load and respond

    Mobile
    87
    Desktop
    93
  • Accessibility

    How well it works with screen readers, keyboards and zoom

    Mobile
    96
    Desktop
    96
  • Best Practices

    Security and current web standards

    Mobile
    100
    Desktop
    100
  • SEO

    Whether Google can crawl and read every page

    Mobile
    100
    Desktop
    100

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.

Measured, it is good rather than perfect. Google Lighthouse scores the homepage 87 for performance on mobile and 93 on desktop (27 September 2026). The points lost on mobile are load time: on Lighthouse’s simulated mid-range phone over slow 4G, the first content appears at 2.6 seconds and the main content at 3.4 seconds, which is the next thing to tighten.

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.