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

{
  categories {
    id
    image {
      url
    }
  }
}

Practice fetching content from Hygraph with GraphQL.

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

Challenge: Fetching Content from Hygraph with GraphQL

Task 1: Fetch all categories from the Hygraph API