API_URL

Replace this URL with your content API if you have similar Hygraph project

SNIPCART_PUBLIC_API

Replace this with your own public API KEY

Gain insights into creating a React e-commerce app, delve into using Hygraph for content storage, learn about Snipcart for cart management, and explore Netlify deployment strategies.

“React and GraphQL While Building an E-commerce App with GraphCMS”-01.png

react.tar.gz

react

React-with-watcher

React-without-watcher

This course will teach you how to create an e-commerce application from the ground up using React. Then, you’ll learn how to use Hygraph to store and organize e-commerce products, as well as to pull this content into your e-commerce application. Finally, you’ll use Snipcart to implement a cart management system and then deploy your application to Netlify.

By the end of this course, you’ll have practical experience with the various types of routing in React. Moreover, you’ll learn what a Headless Content Management System (CMS) is, how it works and create a project that stores product text and images, and how to consume data with GraphQL by fetching content from Hygraph. You’ll also get a good understanding of what Snipcart does and how it can help you manage your cart without having to start from scratch. Furthermore you’ll learn how to deploy your code by pushing it to GitHub and then using Netlify to deploy it. Finally, you will be able to make your application live so that others can see what you’ve done.

React and GraphQL: Build an E-commerce App with Hygraph

What aspect of a headless CMS does the term “headless” refer to?

What aspect of a headless CMS does the term “headless” refer to?

Which one of the following is not a benefit of a headless CMS?

Which one of the following is not a benefit of a headless CMS?

Hygraph is a unique content management system that allows us to fetch content (data) from a content repository via an API.

Hygraph is the first GraphQL native headless CMS aimed at removing traditional content management pain points by using the power of GraphQL.

Hygraph is a content management system that allows us to fetch content (data) through Axios.

Hygraph allows us to deliver content from a single source to endless front-end platforms via APIs, such as websites, mobile apps, TVs, and so on, using a single CMS or content repository.

Which one of the following definitions best describes Hygraph?

Which one of the following definitions best describes Hygraph?

Allows a maximum of five models to be referenced

When creating a reference between two models, we have two reference types. Which of the following describes a reference type?

When creating a reference between two models, we have two reference types. Which of the following describes a reference type?

The API ID is used to query for multiple items from our content repository.

The Plural ID is used to query for multiple items from our content repository.

The Plural ID is used to query for a single item from our content repository.

The API ID is used to query for both single and multiple item(s) from our content repository.

The API ID and Plural API ID are generated automatically from the display name when we create our models. These IDs function as queries. Which one of the following statements is true?

The API ID and Plural API ID are generated automatically from the display name when we create our models. These IDs function as queries. Which one of the following statements is true?

Test your understanding

Test your understanding

Test your understanding of the concepts covered in this chapter.

Introduction

Building E-commerce Application Frontend with React

Handling Content Management with Hygraph

Fetch Content from Hygraph with GraphQL

Implementing a Carting System with Snipcart

Deploying an E-commerce Application

Conclusion

Appendix

Quiz: Handle Content Management with Hygraph