Woo-next-br - WooCommerce React CMS Theme built with NextJs Babel, Node, using GraphQL and Apollo Client

Overview

WooCommerce Nextjs React Theme ๐Ÿš€

Project Status: Active. Stars Forks Contributors Follow

  • This is a React WooCommerce theme, built with Next JS, Webpack, Babel, Node, GraphQl

๐Ÿ“น Full Course Video Tutorial

Important Note โญ :

The code for the Video Tutorial is in the branch youtube-course However, since there is continuous contribution and updates to this project. The 'master' branch is upto date with those changes. You can also refer to the PR notes for changes.

Demo Desktop ๐Ÿ“น

Live Demo:

Live Demo Site

Checkout Page Demo

Payment Demo ( Paypal example )

Order Received Demo

Stripe Checkout

Stripe Demo Video

Features:

  1. WooCommerce Store in React( contains: Products Page, Single Product Page, AddToCart, CartPage and Checkout Page with country selection ).
  2. SSR
  3. SEO friendly
  4. Automatic Code Splitting
  5. Hot Reloading
  6. Prefetching
  7. Incremental Static (Re)generation ( Next.js 10 support )
  8. GraphQL with Apollo Client
  9. Tailwindcss
  10. Stripe Checkout ( with Stripe Session and Stripe webhook)

Getting Started ๐Ÿš€

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Prerequisites ๐Ÿ“„

Installing ๐Ÿ”ง

  1. Clone this repo using terminal git clone [email protected]:imranhsayed/woo-next
  2. cd woo-next
  3. yarn install

Add GraphQl support for WordPress

  1. Download and activate the following plugins , in your WordPress plugin directory:
  • wp-graphql Exposes graphql for WordPress ( Tested with v-1.3.8 of this plugin )

  • wp-graphql-woocommerce Adds Woocommerce functionality to a WPGraphQL schema ( Tested with v-0.8.1 of this plugin )

  • headless-cms Extends WPGraphQL Schema ( Tested with v-1.8.0 of this plugin )

  • Make sure Woocommerce plugin is also installed in your WordPress site. You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install ) WP Dashboard > Tools > Import > WooCommerce products(CSV): The WooCommerce default products csv file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv

Hero Carousel.

To use Hero carousel, create a category called 'offers' from WordPress Dashboard > Products > Categories. Now create and assign as many child categories to this parent 'offers' category with name, description and image. These Child categories data will automatically be used to create hero carousel on the frontend.

Configuration(for GraphQL implementation) ๐Ÿ”ง

  • Note Below is for GraphQL implementation , for REST API check feature/rest-api branch
  1. (Required) Create a .env file taking reference from .env-example and update your WordPressSite URL.
  • NEXT_PUBLIC_WORDPRESS_URL=https://example.com

Branch details

  1. feature/rest-api Contains REST API Implementation.

  2. The master branch has the GraphQL implementation.

Common Commands ๐Ÿ’ป

  • dev Runs server in development mode

Code Contributors โœฐ

Thanks to all the people who contributed to the code of this project ๐Ÿค

Imran Sayed Daniel F Fandi Rahmawan yudyananda

Contributing ๐Ÿ‘ฅ

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning ๐Ÿ“‘

I use Git for versioning.

Author ๐Ÿ‘ค

License ๐Ÿ“ƒ

This project is licensed under the MIT License - see the LICENSE.md file for details

Owner
Entrepreneur - Full stack developer - WordPress dev
null
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Paco 1.5k Jan 13, 2022
Vulcan Next helps you build GraphQL-based applications with Next.js

Vulcan Next Vulcan Next helps you build GraphQL-based applications with Next.js. What's in the box? Vulcan Next provides: A production-grade Next.js +

null 6 Dec 29, 2021
Apollo HOC for Next.js

next-with-apollo Apollo HOC for Next.js. For Next v9 use the latest version. For Next v6-v8 use the version 3.4.0. For Next v5 and lower go here and u

Luis Alvarez D. 751 Jan 13, 2022
Next-js movie-app - Sample movie app using NextJS and TMDB as an API

Next.JS Boilerplate with Typescript and Redux Toolkit A Next.JS Boilerplate in T

kadkad 1 Jan 12, 2022
The TypeScript-ready, minimal router and middleware layer for Next.js, Micro, Vercel, or Node.js http/http2

next-connect The smol method routing and middleware for Next.js (also works in other frameworks). Powered by trouter. Features Compatible with Express

Hoang 903 Jan 15, 2022
A Minimal PokรฉDex App built using Next.js and React

ToxaDex A PokรฉDex App built using Next.js and React. Uses the PokรฉAPI directly to fetch data on all 898 Pokรฉmon. Uses Static Site Generation for rende

Kushagra Shukla 2 Jan 15, 2022
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO Next SEO is a plugin that makes managing your SEO easier in Next.js projects. Pull requests are very welcome. Also make sure to check out the

Gary Meehan 4.3k Jan 21, 2022
next-useragent parses browser user-agent strings for next.js

next-useragent โš ๏ธ Version 2 of this library will work only with Next.js 9. If you're using Next.js 6-8 you can use previous versions. โš ๏ธ next-useragen

Tsuyoshi Tokuda 269 Jan 6, 2022
A plugin to generate terraform configuration for Nextjs 8 and 9

Terraform nextjs plugin A plugin to generate terraform configuration from nextjs pages The reason Nextjs supports serverless pages, where it creates f

Emanuele 47 Sep 30, 2021
The easiest way to translate your NextJs apps.

next-i18next The easiest way to translate your NextJs apps. If you are using next-i18next in production, please consider sponsoring the package with a

Isaac Hinman 2.9k Jan 13, 2022
nextjs + purgecss for smaller css bundles

next-purgecss Next.js + Purgecss = ?? Next.js makes it easy to create SSR and static React applications. Purgecss helps you remove unused CSS. Install

Luc Leray 129 Oct 7, 2021
Enable Fast Refresh for remote data in NextJS.

Enable Fast Refresh for remote data in NextJS.

Travis Arnold 35 Dec 21, 2021
๐Ÿ›  Next.js stateless session utility using signed and encrypted cookies to store data

next-iron-session ?? Next.js and Express (connect middleware) stateless session utility using signed and encrypted cookies to store data This Next.js,

Vincent Voyer 1.2k Jan 16, 2022
A beautiful and open source Landing Page Using Next JS

Taskia Landing Page Live Site Install Dependencies npm install Run App # Run in

Said Mounaim 2 Jan 6, 2022
Typed APIs using SWR and Next.js

Typed API with SWR Next.js plugin This Next.js plugin generates a TypeScript file to enhance the useSWR React Hook types so the return value is typed

Mohsen Azimi 1 Dec 29, 2021
React and Next.js site to display Discord server experiments and their rollouts

Discord Server Experiment Rollouts https://rollouts.advaith.io This is a site made with React and Next.js to display the current Discord server experi

Advaith 12 Dec 17, 2021
Cookie serializer and deserializer library for next.js

next-cookie Cookie serializer and deserializer library for next.js. Installation $ npm install next-cookie Usage HOCs The cookies are read and write

Tsuyoshi Tokuda 170 Jan 17, 2022
Simple promise-based session middleware for Next.js, micro, Express, and more

next-session Simple promise-based session middleware for Next.js. Also works in micro or Node.js HTTP Server, Express, and more. Project status: While

Hoang 229 Jan 14, 2022
Effortless deployment to AWS and GitHub Pages for Next.js apps ๐Ÿš€

Next Deploy Effortless deployment to AWS and GitHub Pages for Next.js apps ?? Table of Contents Getting Started Features Background CLI Distributed De

Egor Philippov 39 Jan 3, 2022