O'Reilly logo
live online training icon Live Online training

Building an E-commerce Website with the JAMstack

Tamas Piros

The JAMstack is short for JavaScript, API and Markup, however, there's a lot more to the stack than what the abbreviation suggests. It allows developers to create and deploy sites with ease while leveraging some of the latest technologies out there, including static site generators (like Gatsby), headless CMS, and a myriad of APIs and services. The JAMstack is not only important for developers because of features like git workflows, continuous deployment, integration, and atomic deploys, but also for end-users due to performance reasons.

In this training, we will use the following tools to build an e-commerce JAMstack:

  • Markdown files to manage content
  • Gatsby to generate our static site
  • Snipcart to handle e-commerce
  • Cloudinary to handle product images
  • GitHub to host our Git repository and example site
  • Netlify to deploy the final application

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand:

  • the advantages of building with the JAMstack.
  • the role of static site generators and the basics of Gatsby.
  • how to work with a headless CMS.

And you’ll be able to:

  • generate a production build using Gatsby.
  • leverage and integrate APIs such as Cloudinary and Snipcart.
  • build fast, flexible and merchant-friendly e-commerce sites, using JAMstack.

This training course is for you because...

  • You’re a web developer, who’s looking to discover the tools available in the JAMstack ecosystem.
  • You’re a web developer, who wants to learn about Gatsby.
  • You’re a web developer working with React and wishing to learn more about static site generators.
  • You’re a web developer, who wants to learn how to integrate a variety of APIs for a complete e-commerce offering.

Prerequisites

  • Basic React knowledge is helpful, but not required
  • Basic understanding of web APIs
  • General web development knowledge (HTML, CSS, JavaScript, deployment)

Recommended preparation:

  • Have a local development environment with React ready to go.
  • Have Node.js installed (LTS or Current) locally.
  • Have your favorite code or text editor installed.
  • Read Modern Web Development on the JAMstack (report) for an introduction to JAMstack principles.

About your instructor

  • Tamas Piros is a director at Full Stack Training and a web developer turned technical instructor, curriculum developer, developer evangelist, and Google Developer Expert in web technologies. He has more than a decade of experience working with large, prestigious organizations. He’s delivered training classes for clients and regularly conducts presentations and workshops at conferences and meetups all over the world.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

A quick introduction to the JAMstack (15 minutes)

  • Poll and discussion
  • Poll

An introduction to Gatsby

  • Presentation: Using the Gatsby CLI (10 minutes)
  • Presentation: Discussing pages (15 minutes)
  • Presentation: Exploring Layouts & components (10 minutes)
  • Q&A
  • Break (5 minutes)

An introduction to Gatsby (continued)

  • Presentation: Using GraphQL in Gatsby (15 minutes)
  • Poll and discussion
  • Presentation: Exploring the source and transformation plugins 25 minutes)
  • Presentation: Discussing Gatsby themes (10 minutes)
  • Q&A
  • Poll
  • Break (5 minutes)

Overview of the APIs

  • Presentation: Demo and integration with Cloudinary (30 minutes)
  • Poll
  • Presentation: Demo and integration with Snipcart (30 minutes)
  • Poll
  • Q&A

Introduction to a CMS and Deployment platform

  • Presentation: NetlifyCMS Set up and configuration (20 minutes)
  • Poll
  • Presentation: Netlify Deployment (20 minutes)
  • Poll
  • Q&A