This course aims to teach students how to create a WooCommerce React application using Next.js and REST API. The topics covered include setting up a Next.js project with TailwindCSS and SASS, fetching and displaying data from a WooCommerce REST API endpoint, creating Header and Footer components, using a combination of Next.js, Axios, and the WooCommerce API to fetch and display products, customizing the TailwindCSS theme with the configuration file, and utilizing React Context API to store cart data. By the end of the course, students will have an understanding of applied web development skills, enabling them to create a React WooCommerce app of their own.
Overview
Syllabus
#1 Setup Next.js Project for WooCommerce React Application | React WooCommerce Theme With REST API.
#2 Setting up TailwindCSS with SASS in Next.js | Combining tailwind css with sass using webpack.
#3 Header Footer REST API Endpoint | React WooCommerce Theme | Nextjs WooCommerce REST API Example.
#4 GetStaticProps with Axios in Next.js | React WooCommerce REST API | Data Fetching | next js axios.
#5 Fetch Site title, Logo in Next.js | React WooCommerce RESTAPI | WordPress React Ecommerce Example.
#6 Nav Menus Next.js | React WooCommerce REST API | Woocommerce React Theme Example | DOMPurify.
#7 Add SVG Icons Nextjs | React WooCommerce REST API | next js woocommerce example | Reactjs.
#8 Footer Widgets Next.js | React WooCommerce REST API | woocommerce react theme | tutorial.
#9 Footer Menus And Social Links Next.js | React WooCommerce REST API | WooCommerce React Theme.
#10 Fetch WooCommerce Products With REST API | @woocommerce/woocommerce-rest-api | Nextjs React.
#11 Display WooCommerce Products Next.js | React WooCommerce REST API | woocommerce react theme.
#12 Create Next.js Image Component | React WooCommerce REST API | woocommerce react theme.
#13 Add Product Image | | React WooCommerce REST API | woocommerce react theme | wordpress rest api.
#14 WooCommerce Products Price Next.js | React WooCommerce REST API | woocommerce react theme.
#15 Warning: Prop dangerouslySetInnerHTML did not match. | How to fix the `dangerouslySetInnerHTML`.
#16 Run Next.js Production Build | React WooCommerce REST API | woocommerce react theme.
#17 Add To Cart WooCommerce REST API | View Cart | React WooCommerce REST API | woocommerce react.
#18 Add To Cart Function | WooCommerce REST API | View Cart | React WooCommerce REST API | WordPress.
#19 View Cart | WooCommerce REST API | React WooCommerce REST API | woocommerce react theme.
#20 Add To Cart Demo | React WooCommerce REST API | WooCommerce react theme | javascript example.
#21 Tailwind CSS Customization | tailwind css react template | tailwind css tutorial | talwindConfig.
#22 Using React Context API To Store Cart Data | React WooCommerce REST API Theme Example.
#23 React Context Provider | Add To Cart | Set Cart | React WooCommerce REST API Example.
#24 Add View Cart Button | React WooCommerce REST API Example | Headless WordPress REST API.
#25 React WooCommerce Add To Bag | React WooCommerce REST API Theme Example | Add To Cart.
#26 How to use Google Fonts in TailwindCSS | Add a Custom Google Font to a Next.js and Tailwind CSS.
#27 The Complete Guide To Customizing A Tailwind CSS theme | Nextjs | Configuration - Tailwind CSS.
Taught by
Imran Sayed - Codeytek Academy
Related Courses
-
Advanced NextJS WooCommerce With REST API And TailwindCSS
-
Build a MERN application using Next.js
-
WooCommerce with React Next.js
-
Full-Stack Serverless Applications with Next.js & Fauna
-
Next.js React Framework Course – Build and Deploy a Full Stack App From scratch
5.0 -
Use React State and Props to Create an Online Quiz
