In this tutorial, we will build a full-stack e-commerce application with features like: re-usable layout, authentication, cart page & checkout process, order confirmation, payment integration, different user roles, and a simple admin dashboard.
00:04:13 Next JS + Chakra UI Installation
00:07:01 Layout & Header
00:17:29 Footer
00:20:12 Add dummy product data
00:23:00 List Products
00:31:40 Creating Product links
00:34:50 Building Product Page
00:44:50 Implement Dark Mode: Theme Switch
00:47:10 Connecting to the Database: MongoDB
00:55:40 Creating Schema
00:58:50 Router & Middleware using Next-Connect
00:59:40 Seeding the Database
01:04:29 Create Products API
01:08:00 Fetch Products from API
02:00:40 Login & Sign Up Forms
02:19:30 Form Validation
02:26:00 Creating User Schema
03:17:00 Setting up Redux Store
03:28:10 Building Shipping Form
03:49:40 Building Stepper for Forms
04:13:00 Payment
04:51:50 Securing Pages and API Routes
04:56:00 Order Confirmation
05:31:00 Admin Dashboard
🌐Code & Assets:
package.json - https://gist.github.com/judygab/697406e927896097bdbcec17377dc800
data.js - https://gist.github.com/judygab/a61f4f8cc75061dce51c936b7e56fa91
Images - https://www.buymeacoffee.com/webdecoded5/e/115688
Source code - https://www.buymeacoffee.com/webdecoded5/e/115691
Subscribe: https://www.youtube.com/@webdecoded/featured
