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

Intermediate

48 Lessons

15h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

60 Playgrounds

12 Quizzes

This course includes

60 Playgrounds

12 Quizzes

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

What You'll Learn

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

Course Content

Introduction

Getting Started

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

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

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

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

Deploying an E-commerce Application

6 Lessons

Conclusion

3 Lessons

Appendix

2 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!