Advanced NextJS WooCommerce With REST API And TailwindCSS

Learn to Build A React WooCommerce Theme With REST API And TailwindCSS

3.95 (93 reviews)
Udemy
platform
English
language
Web Development
category
instructor
5,939
students
2 hours
content
Jul 2022
last update
$19.99
regular price

What you will learn

Building Nextjs Application

Decoupled Application With WordPress And WooCommerce

Building A Headless CMS

WooCommerce REST API

Setting Up And Using TailwindCSS

Description

In this course, you will learn

  • How to create a react application with the next.js framework.

  • The backend will be in WordPress using WooCommerce Plugin.

  • The data will be fetched using REST API.

  • For CSS we will use TailwindCSS and we will also learn how to customize it as per our needs.

  • We will build:

    • Header

    • Footer

    • Product Page

    • Add To Cart.

  • All the data will be dynamic fetched from WordPress.

  • Pages will also be cached and fresh data will also be updated on a regular basis. So that the data is never stale.

  • We will display all the products with their images, price, and discounts with add to cart feature.

  • We will take advantage of Next.js Image optimization, and Incremental Static Regeneration.

  • Incremental Static (Re)generation and automatic creation of New Static post pages without having to re-build next.js the application.

  • Gutenberg styles support

  • REST API endpoints.

Once you complete this course. You can avail the next part of the course - Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

It's available under my courses.


WordPress Rest API is one of the many great features WordPress offers. It enables developers to create fascinating plugins and themes and allows them to power third-party applications with WordPress CMS.

The content management system is also developed to manage the web site’s content in modern web applications. This can add an extra workload for the developers. With so many possibilities that Rest API offers, one can also think of using WordPress with React as a headless CMS for their JavaScript-based web application(s).

Content

Introduction

Setup Nextjs Project
Setup Tailwind CSS with SASS

Header and Footer

Header Footer REST API
Using getStaticProps and axios to Fetch Data from WordPress
Add Dynamic Site Title, Tagline, Logo
Add Header Menus
Add SVG Icons
Add Footer Widgets
Footer Menus and Social Icons

WooCommerce Products

Setup WooCommerce Auth Key , Fetch WooCommerce Products
Display Products: Title
Create a Next.js Image Component
Adding Product Image
Adding Product Price
Fixing dangerouslySetInnerHTML Warnings

Screenshots

Advanced NextJS WooCommerce With REST API And TailwindCSS - Screenshot_01Advanced NextJS WooCommerce With REST API And TailwindCSS - Screenshot_02Advanced NextJS WooCommerce With REST API And TailwindCSS - Screenshot_03Advanced NextJS WooCommerce With REST API And TailwindCSS - Screenshot_04

Reviews

Ion
September 17, 2023
Thanks Imran Sayed ? I must say it was a highly informative and hands-on experience. This course, delves into the world of modern web development by teaching participants how to create a WooCommerce theme using React, leverage REST API, and style it with Tailwind CSS.
Gabriel
July 8, 2023
I liked it, althought needs some update, one frustrating thing is the whole course is free on YouTube, so that was dissappointing. The title is very self explanatory, it is advanced,, but it'll be good if he shared the gist so you can follow up the class, Overall a good course being a free resource. Thanks
Benbensenton
June 20, 2023
- no explaination why some things get used - dependens on a repo(headless wordpress) for a project which doesent get maintained in the foreseable future
Rahul
May 1, 2022
Sayed Imran is a gem as an instructor! His way of explaining things is very intuitive and easily understandable. His video content is top-notch in quality and I hardly have seen anyone giving so much informative content in their free course. Kudos to Imran's efforts.

Charts

Price

Advanced NextJS WooCommerce With REST API And TailwindCSS - Price chart

Rating

Advanced NextJS WooCommerce With REST API And TailwindCSS - Ratings chart

Enrollment distribution

Advanced NextJS WooCommerce With REST API And TailwindCSS - Distribution chart
4256638
udemy ID
8/22/2021
course created date
4/7/2022
course indexed date
Bot
course submited by