E-Commerce tutorial with Next.js, React, Tailwind, MongoDB and Stripe
In this tutorial we are going to build a fully functional e-commerce app with next.js, react.js, tailwind css, mongodb and stripe. We are going to implement stripe checkout and webhook to receive information from stripe.
Source code: https://github.com/dejwid/nextjs-ecommerce
TIMESTAMPS
00:00:00 – Intro
00:00:20 – adding tailwind
00:02:04 – products page
00:07:56 – Adding all products to the mongo db
00:13:31 – Showing products from the database
00:29:49 – Horizontal products scroll with snapping
00:31:46 – Search bar
00:35:49 – Fetching products with getServerSideProps
00:39:34 – Footer navigation and layout
00:48:02 – Add to cart functionality
00:53:06 – Saving cart to localStorage
00:54:55 – Checkout page
01:25:37 – Implementing stripe checkout
01:44:35 – Saving orders to our database
01:50:03 – Success message on paid order
01:52:55 – Webhook for stripe information
02:06:58 – Review and suggestions for extra functionality