Storyblok

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering specialized agencies like FocusReactive to create engaging, interactive, and scalable web applications. In this workshop, we will quickly take a dive into the Headless World and Architecture. Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. Master headless CMS fundamentalsMaster an Astro & headless CMS approachUse Atomic design in your Astro & Storyblok applicationCreating pages, adding content and understanding how the dynamic routing works with headless

Ready to build with Storyblok? Browse the top Storyblok CMS agencies and development companies to find an implementation partner. 

I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation

In this workshop, you will integrate a decoupled Gatsby Shopify website into Storyblok real-time visual editor.1. Connect Gatsby with Shopify and build the catalog2. Build the shopping Card functionality using shopify-buy3. Connect Gatsby with Storyblok4. Build editable components for the Storyblok visual editor, including Shopify products and Collections
PrerequisitesComputer ready for Gatsby.
Workshop levelReact and Gatsby intermediate.