My Stack Switch: From Contentful and React to Strapi (Self-Hosted) and Astro

The idea behind this post is to show you how I implemented a new stack to eliminate SaaS subscriptions like Contentful. I thought to myself: 'Why am I paying for this subscription if I already have a self-hosted VPS on Hetzner managed with Coolify?'

"In this section, I will break down the steps to complete this migration. First, I created a new design using Google Stitch AI since I don't have professional design skills. After iterating through several prompts, I got a great design; then, I used Claude to fine-tune the prototype and export the HTML, CSS, and JavaScript. From there, I used Claude again to help me split the code into separate Astro components using Tailwind CSS v4.

To make it dynamic, I implemented a methodology based on JSON templates to render components using JSON properties—very similar to how Shopify 2.0 store themes operate.

{
  "sections": {
    "component_1": {
      "type": "hero",
      "settings": {
        "title": "t:hero.heading.title",
        "logo": "/assets/logos/big.webp"
      }
    }
  },
  "order": ["component_1"]
}

Inside the Astro file, I fetch the JSON data and process it through a loop that dynamically renders each component based on its type property, mapping it directly to the corresponding file inside src/components.

Right now, I'm developing a builder to read these JSON files and simulate Shopify's theme customizer functionality, but tailored for managing templates in headless architectures.

In my next post, I'll share updates on the builder's progress, including a video demo. I hope you enjoyed this article, and I'd love to hear your thoughts in the comments section below!