Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.
You will know:
- Get started with the hello-world template on StackBlitz
- File-based routing to create a /products/example route
- Dynamic routing /products/:handle
- Hit the Storefront API with GraphQL
- Move the query into the Hydrogen app
- Update the query to fetch a product by handle
- Display title, price, image & description.
- Tailwind styling
- Variant picker and buy now button
- Bonus if there’s time: Collections page
- A Chromium-based browser (StackBlitz)
- Ideally experience with React. A general web development background would be fine.