In this tutorial, we will learn how to build & deploy a full stack E-Commerce website with Next.js 13, Strapi Headless CMS & Tailwind CSS. Fully responsive and beautiful looking full stack e-commerce project with the latest trending top notch technologies, I have covered all important topics of creating a ecommerce website such as product listing, product detail page, shopping cart, payment gateway and so on…
In this tutorial you’ll learn:
- Next.js 13 and its latest features
- Core feature of Next.js
- Server side rendering (SSR, SSG) in Next.js
- Dynamic Routing in Next.js
- Rapid UI building with Tailwind CSS
- Mobile first responsive approach
- Functional Programming through utility methods
- Strapi Headless CMS and its features
- How to fetch data from strapi api’s in next.js application
- Redux fundamentals and its best usage for cart functionality
- Complete cart functionality with add,update,delete actions
- Project deployment for frontend and backend
👇 Time Stamps
00:00:00 Intro & Demo
00:07:50 Project Setup
00:28:15 Next.js Overview
00:33:01 Header
01:22:14 Header Scroll Functionality
01:31:32 Footer
01:37:22 Homepage Banner Carousel
01:51:20 Homepage Heading & Paragraph
01:55:05 Homepage Product Listing
02:02:45 Category Page
02:11:15 Product Details Page
02:27:54 Related Product Carousel
02:35:38 Cart Page
02:53:50 Success & Failed page
📚 Materials/References:
⭐ GitHub Repository - Frontend (give it a star ⭐): http://bit.ly/3LxFzJb
⭐ GitHub Repository - Backend (give it a star ⭐): http://bit.ly/3JOLGaT
⭐ Gist: http://bit.ly/3Fppphc
⭐ Starter Boilerplate - http://bit.ly/3TfTPrS
⭐ Assets: http://bit.ly/3mQVjwF
⭐ Products Data: http://bit.ly/3TkWz7c
Subscribe: https://www.youtube.com/@jsdevhindi/featured
