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

Which attribute and value are added to the hidden `div` in our `public/index.html` file to make our cart appear on the side rather than the full page?

Which attribute and value are added to the hidden <code>div</code> in our <code>public/index.html</code> file to make our cart appear on the side rather than the full page?

To make our "Add to cart" button work with Snipcart, what class value should we add?

To make our “Add to cart” button work with Snipcart, what class value should we add?

Which of the following is _not_ one of the attributes used to obtain data from products when adding items to a shopping cart?

Which of the following is not one of the attributes used to obtain data from products when adding items to a shopping cart?

Which class do we add to the HTML element to display the number of items in our cart?

Which class do we add to the HTML element to display the number of items in our cart?

Which class do we add to the HTML element to display the total price of all items in our cart?

Which class do we add to the HTML element to display the total price of all items in our cart?

Snipcart allows us to use any payment gateway we want and even has a list of some of the most popular payment gateways to easily integrate into our Snipcart account. Which one of the following is _not_ included in that list?

Snipcart allows us to use any payment gateway we want and even has a list of some of the most popular payment gateways to easily integrate into our Snipcart account. Which one of the following is not included in that list?

Test your understanding

Test your understanding

Test your knowledge of implementing the cart system with Snipcart.

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: Implementing the Carting System with Snipcart