Build Next.js 14+ E-Commerce Web App with Stripe Payment and Tailwind CSS

Buy me a coffee: https://buymeacoffee.com/umairjameel In this video, you will learn how to build a small but fully functional e-commerce web app that includes loading products from json data, add to cart, remove from cart, increment/decrement quantity of products added in cart, calculating total price, validations, creating new products in stripe dashboard using stripe apis, passing cart data to stripe, processing payments, redirect to success or cancel pages and more. You can use same code in next.js 14 as well. This simple is built using tailwindcss and state management is being handled using context api. 00:08 Overview 05:17 Refer more next.js 13 tutorials 06:25 Create new next.js 13.5 project 07:10 Modifying home route and folder structure for Cart and Products 08:50 Adding products in Json data and Build UI 12:50 Build Product Component UI 18:25 Build Cart Component UI 26:50 Build Cart Context Api for State Management 43:50 Wrap Context Provider in Layout file 45:10 Use Context data in Product component 49:20 Use Context data in Cart component 01:02:55 Setup Stripe in Next.js 13 Project 01:05:10 Add api route in next.js 13 for stripe payment processing 01:13:40 Create stripe products with code using stripe apis 01:23:10 Process Payments with Stripe 01:27:55 Build success and cancel routes 01:30:25 Testing stripe payment process 01:31:40 Learn More #nextjs13 #stripe #nextjs14 #ecommercewebsite #nextjs React tutorials:    • React.js Tutorials   JavaScript Tutorials and Projects:    • JavaScript Tutorial and Projects   Angular Tutorials:    • Angular 16 Life Cycle Hooks - Explained wi...   Angular 16 Crash Course For Begineers:    • Angular 16 Crash Course   Tech Tutorials - Random:    • Postman Tutorial - Testing APIs and Build ...   Complete Next.js 13 Crash Course:    • Next.js 13 Tutorials - App Directory   Node Express MongoDB Bootcamp:    • Build REST API with Node Express MongoDB   ChatGPT Tutorials:    • LLM, AI, Agents   Join our facebook group:   / 996305460498149   Contact us for development services:   / umair-jameel-24aa5368   Source Code (Give it a star ⭐️): Don't forget to SUBSCRIBE my channel. https://github.com/umairjameel321/eco...