NextJS Tutorial: Build a Modern Full Stack Ecommerce React Application with NextJS

Описание

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.

?Join my Discord:

https://discord.gg/hc3zKUhj

✉️Sign up for my newsletter:

http://eepurl.com/h4X959

?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

⚛️More on React:

Build a Portfolio Website - https://youtu.be/hYv6BM2fWd8

MERN Stack Project: Food Ordering App - https://youtu.be/x4dIga_3S4I

☕Support the channel:

buymeacoff.ee/webdecoded5


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