Learn JAMStack by building Ecommerce website

Learn to build a blog posts list in jamstack by creating blogs.liquid, configuring data and slug-based permalinks, and using a layout to render posts with links and titles.

Render blog content from Contentful by installing a rich text library, importing library functions, and displaying the first post in the blog template and browser preview.

Install tailwindcss and initialize 11ty, then set up the typography plugin. Configure tailwind, add dev and watch scripts, and apply tailwind layers in liquid templates.

Create a dynamic page content model for a JAMStack ecommerce site by defining page fields, a blocks array, and reusable content types, then assemble and publish pages with navigation linked.

Render landing pages by organizing content as blogs and pages, creating liquid templates, and wiring content types to templates for dynamic, searchable ecommerce pages.

Build a responsive navigation header for a jamstack ecommerce site by styling with Tailwind and Liquid, configuring a logo, mobile menu button, and adaptive menu behavior across devices.

Fix the mobile navigation toggle to ensure a responsive menu, then complete the home page styling with a responsive grid, blog posts, and featured images for a JAMStack ecommerce site.

Deploy a jamstack ecommerce project to Netlify by preparing production-ready files, creating a GitHub repository, pushing commits, and triggering automatic builds and site previews.

Learn to automatically rebuild a jamstack ecommerce site when content changes by configuring deployment triggers, selecting publish events, and verifying live updates after deployment.

Set up a Gatsby project by installing Gatsby, React, and React DOM, create a pages folder with index.js, then run to view the traditional hello world in the browser.

Create a shopify test store by signing up or logging in, confirming your email, and using the dashboard to add products and set up stories and ads.

Load Shopify products into a Gatsby project by configuring the Gatsby setup, enabling a private Shopify app, and using an environment token to fetch products.

Learn JAMStack by building an ecommerce site with Gatsby to create dynamic product pages from Shopify data using GraphQL queries and product handles.

Create a store context for the cart to manage line items, products, and checkout in a JAMstack ecommerce app, wrapping pages with a layout and providing add-to-cart functionality.

Initialize the Shopify client by configuring environment variables, importing modules, and implementing add-to-cart and checkout flows with line items, error handling, and local storage sync.

Build a dynamic cart page in a JAMStack ecommerce site by rendering line items, managing quantities, and wiring add-to-cart interactions with React components and Gatsby navigation.

Update and remove line items in the cart of a jamstack ecommerce app, manage quantity with state, and build a reusable item component.

Build a JAMStack ecommerce flow by adding Shopify checkout, wiring a shopping cart with subtotal, a checkout button, and a test payment to simulate real transactions.

Configure Tailwind CSS with Gatsby by using recipes and plugins, install dependencies, and apply Tailwind styles across all pages to beautify and streamline your site.

Style the index page and navigation for a jamstack ecommerce site, with header padding, a responsive product grid, and product cards featuring images and prices, plus a conditional cart badge.

Learn to style a product page with responsive layout using container classes, image sizing, and typography tweaks for mobile and desktop presentation.

Learn to style a jamstack ecommerce cart page by applying utility classes to containers, items, prices, and buttons, achieving responsive layouts, spacing, borders, and focus states.

Upload your site to GitHub and authorize it for deployment on Netlify. Create environment variables, deploy the live site, and explore the homepage with add-to-cart and checkout features.

Configure webhooks for product creation, update, and deletion to trigger automatic site builds, deploy changes, and preview updated ecommerce pages in real time.