React And Graphql Build An E Commerce App With Hygraph

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

Intermediate

48 Lessons

15h

Certificate of Completion

AI-POWERED

Explanations

Explanations

This course includes

60 Playgrounds

12 Quizzes

123 Illustrations

This course includes

60 Playgrounds

12 Quizzes

123 Illustrations

Course Overview

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 Ma...Show More

What You'll Learn

Hands-on experience building an e-commerce application using GraphQL

Familiarity with Hygraph and how to fetch data with GraphQL

Implementing Snipcart within React to manage cart operations

An understanding of fetching data into React from Hygraph with GraphQL

A working knowledge of GitHub and the Deploy React application

Course Content

1

Introduction

Getting Started

2

Building E-commerce Application Frontend with React

Introduction to React Setting up E-commerce Application Creating React Components Setting up Pages in a React Application Implementing Routing in E-commerce App Dynamic Routing in React for Single Products Challenge: Building an E-commerce Application’s Frontend with Rea Solution: Building an E-commerce Application’s Frontend with Reac Dynamic Routing for Each Category in React The Complete E-commerce Application Quiz: Build an E-commerce Application’s Frontend With React

3

Handling Content Management with Hygraph

What is Hygraph?Getting Started with Hygraph Create Schemas for Products Create a Schema for Categories Create and Publish Content to Hygraph Exploring and Configuring Hygraph API Challenge: Handling Content Management with Hygraph Solution: Handling Content Management with Hygraph Quiz: Handle Content Management with Hygraph

4

Fetch Content from Hygraph with GraphQL

What is GraphQL?Working with GraphQL and Hygraph in React Fetching All Products with GraphQL from the Hygraph API Implementing Dynamic Routing with GraphQL Challenge: Fetching Content from Hygraph with GraphQL Solution: Fetching Content from Hygraph with GraphQL Use GraphQL and Data from Hypgraph to Complete the Application Quiz: Fetching Content from Hygraph With GraphQL

5

Implementing a Carting System with Snipcart

What is Snipcart?Adding Products to Our Cart with Snipcart Adding Snipcart Data to Our Application’s Navbar Adding Payment Gateway in Snipcart Challenge: Implementing Carting System with Snipcart Solution: Implementing the Carting System with Snipcart Complete the Application with Carting Implementation Quiz: Implementing the Carting System with Snipcart

6

Deploying an E-commerce Application

6 Lessons

7

Conclusion

3 Lessons

8

Appendix

2 Lessons

COURSE AUTHOR

How You'll Learn

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Built-in assessments let you test your skills. Completion certificates let you show them off.

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath