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 one of the following is not a Git provider?

Which one of the following is not a Git provider?

What type of variables are stored in the `.env` file?

What type of variables are stored in the <code>.env</code> file?

Which one of the following is not used to push code to the Git provider?

Which one of the following is not used to push code to the Git provider?

Which one of the following Git providers does Netlify not allow us to connect to?

Which one of the following Git providers does Netlify not allow us to connect to?

The options below are the steps for importing a project to Netlify. Which one of them is incorrect?

The options below are the steps for importing a project to Netlify. Which one of them is incorrect?

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: Deploy E-commerce Application