/react-woocommerce

✨✨✨ An eCommerce template using TailWindCSS and NextJS Incremental Static Regeneration with WooCommerce's WooGraphQL and WP Headless CMS in the backend

Primary LanguageTypeScript

✨✨✨ React WooCommerce

Overview

This project is the version 2 of my original React eCommerce template. This version implements ISR or the Incremental Static Regeneration mode of NextJS framework. Instead of using built in REST API support, this project implements GraphQL via Apollo Client and WPGraphQL and WooGraphQL in the Wordpress Headless CMS backend. WooGraphQL exposes WooCommerce data via GraphQL.

The design system is powered by Tailwind CSS.

You can check the demo here!

Basic Setup

You should have a basic knowledge of NextJS framework and Wordpress in order to set up this project.

Backend

  • Install Wordpress as our Headless CMS
  • Install WooCommerce plugin
  • Install WP GraphQL plugin
  • Install WPGraphQL CORS plugin
  • Install WPGraphQL WooCommerce (WooGraphQL) plugin
  • If you want to have WooCommerce sample data you can export their provided sample CSV here

Frontend

git clone https://github.com/loq24/react-woocommerce
cd react-woocommerce
yarn install or npm install
yarn dev or npm run dev

Make sure that you update the .env file with your own WP url backend. Then open http://localhost:3000/

Copyright and license

MIT