Jamstack eCommerce 101

Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.
We’ll show you how to create an app that accesses information from a development store and can run in your local environment.

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

- React Bricks: why we built it, what it is and how it works
- Create a free account
- Create a new project with Next.js and Tailwind
- Explore the directory structure
- Anatomy of a Brick
- Create a new Brick (Text-Image)
- Add a title and description with RichText visual editing
- Add an Image with visual editing
- Add Sidebar controls to edit props (padding and image side)
- Nesting Bricks using the Repeater component
- Create an Image gallery brick
- Publish on Netlify or Vercel
- Page Types and Custom fields
- Access Page meta values
- Internationalization
- How to reuse content across pages: Stories and Embeds
- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks
- Advanced enterprise features: flexible permissions, locked structure, custom visual components

You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!
- In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.
- How Next.js serves content, and how content is served with Static Site Generation (SSG).
- Atomic design methodology, and how this is applied to the content management system.
- Hands-on project experience by building a Jamstack project with Next.js and Storyblok.
Prerequisites
-
Any Text . Visual Studio Code recommended
-
Node.js LTS
-
NPM or Yarn
-
GitHub account
-
Vercel account
- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus
What's included
1. Introduction and overview of the workshop
2. Introduction to Jamstack
3. Introduction to Atomic Design
4. Overview of Headless CMS
5. Introduction to Storyblok
6. Next.js app creation
7. Storyblok space creation
8. Next.js and Storyblok connection
9. Custom components creation
10.First-page creation
11. Introduction to Visual
12. Dynamic pages addition
13. Blog section creation
14. Deployment on Vercel

Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.