Learn about how you can build a Ecommerce website with React in the Front end and WordPress with Woocommerce in the backend

Features:

• Performant as its WooCommerce Store in React
• SSR
• SEO friendly
• Automatic Code Splitting
• Hot Reloading
• Prefetching
• Benefits of GraphQL with Apollo Client

Table of Content

Learn about how you can build a Ecommerce website with React in the Front end and WordPress with Woocommerce in the backend

• 1.WooCommerce with React - Content

  #1 Introduction to WooCommerce and React

  Learn about how you can build a Ecommerce website with React in the Front end and WordPress with Woocommerce in the backend

  #2 Project Set up and Understanding WooCommerce REST API

  Before we move onto using GraphQL, lets also see how would we build this if we were using REST API

  #3 Get Products data | Creating custom endpoint in Node

  Covers how to get the data for products by creating a custom endpoint in Node and fetch the data using WooCommerce REST API

  #4 Display the Products in the front end

  Covers how to display the products in the front end

  #5 Style Products | Using CSS

  Covers how to style your products displayed in the frontend.

  #6 Introduction to GraphQL | Install WPGraphQL, wp-graphql-woocommerce | Apollo Client

  We will now learn how to use GraphQL instead of WooCommerce REST API using wp-graphql and wp-graphql-woocommerce plugin

  #7 Write GraphQL query for fetching Products

  We will now learn how to fetch the dats using GraphQL and Apollo client

  #8 Serverless Deployment with zeit now

  Learn about how to do a server-less deployment with next.js using zeit's now

  #9 Adding Clean Url Single Product

  Adding a clean URL

  #10 Create a Single Product Page

  Covers how to create a single product page

  #11 Create store using React Context

  Learn about storing data in a universal storage called React Context to ensure its available to all components without having to pass in nested children( down the tree )

  #12 Creating Add to Cart

  Covers creating Add to cart button which when clicked store the product data into local storage.

  #13 Creating Add to Cart - Part 2

  Add to Cart - Part 2

  #14 Creating Cart Icon | Using Context API

  Using context API to make the product data available to all pages/ components.

  #15 Update Cart

  Covers how to build Update cart functionality.

  #16 Create Cart Page

  Covers the cart page

  #17 Display Cart Items

  Covers displaying cart items on the front end.

  #18 Update Cart Items on Cart Page

  #19 Remove items from the Cart

  Lets learn how to remove items from the Cart

  #20 Add Proceed to checkout button

  #21 Fetch Product Categories

  Learn about fetching Product categories

  #22 Display Products on Category Page

  #23 Single Category Page

  #24 Display Products on Single Category Page

  #25 Update and add support to WP-GRAPHQL-WOOCOMMERCE v0.3.2

  #26 Cart And Checkout Page

  Demo for the cart and checkout page , with GraphQL query and mutation.

  #27 Use of Apollo React hooks, React Context and apollo client.

  Explains about the use of Apollo React hooks, React Context and apollo client.

  #28 Cart Page Schema

  #29 Checkout Page Schema

  #30 Update and delete Cart Schema