Ultimate Ecommerce Development with React & Next.js

Focused View

Ryan Dhungel

20:43:01

28 View

1. Introduction

1.1 React Next Ecommerce.pdf

1. Download PDF Booklet.html

2.1 nextecom.zip

2. Download Source Code.html

3. Create NextJs Project.mp4

03:20

4. Using Bootstrap Material CSS.mp4

05:42

5. Create Navigation.mp4

05:50

2. NextJs API and MongoDB

1. NextJs API Routes.mp4

02:40

2. Mongo Atlas Connection String.mp4

03:38

3. ENV Variables.mp4

03:27

4. Connect to MongoDB.mp4

03:49

3. User Registration

1. Create User Model.mp4

08:33

2. Register API Route.mp4

11:43

3. Register Page.mp4

06:42

4. Register Form.mp4

04:37

5. Register API Request.mp4

13:11

4. NextAuth Sign In

1. NextAuth Sign In.mp4

04:56

2. NextAuth Configuration.mp4

10:59

3. Session Provider.mp4

08:15

4. Logged In User Info and Logout.mp4

04:46

5. Pages (Loading, 404, Protected and Redirects)

1. Loading Page and Status.mp4

04:38

2. 404 Page Not Found.mp4

01:29

3. Protecting Pages and Middleware.mp4

05:22

4. Redirect Back to Intended Page.mp4

02:54

6. Social Login and Session

1. Login With Google.mp4

10:36

2. Social Login User in Database.mp4

05:30

3. User Role in Session.mp4

07:31

7. Protected Pages & Deployment to Vercel

1. Admin Layout and Page.mp4

08:43

2. Role Based Page Protection for Admin.mp4

06:57

3. Deploy to Vercel.mp4

07:16

8. Ecommerce Categories CRUD API

1. Planning Ecommerce Project.mp4

02:32

2. Create Category API.mp4

04:39

3. List Categories API.mp4

01:57

4. Updating Category.mp4

04:54

5. Category Delete.mp4

02:18

9. Ecommerce Categories Context

1. Category Context.mp4

08:21

2. Category Create Function.mp4

04:18

3. List Categories Function.mp4

01:32

4. Update Category Function.mp4

03:45

5. Category Delete Function.mp4

02:11

6. Category Provider.mp4

01:07

10. Ecommerce Categories CRUD by Admin

1. Admin Category Page.mp4

05:32

2. Category Create Form.mp4

08:49

3. Category Create API Request.mp4

10:48

4. Category Create Error Message.mp4

05:18

5. Category List Update Clear and Delete.mp4

09:24

11. Ecommerce Tags API

1. Tag Model.mp4

01:42

2. Tag Create and List API.mp4

02:08

3. Tag Create and Delete API.mp4

02:19

12. Ecommerce Tags Context

1. Tag Context.mp4

04:59

2. Tag Create Function.mp4

02:27

3. Tag List Function.mp4

01:11

4. Tag Update Function.mp4

03:18

5. Tag Delete Function.mp4

02:27

6. Tag Provider and Admin Tag Page.mp4

04:28

13. Ecommerce Tags CRUD

1. Tag Create Component.mp4

18:11

2. Tag List Update Delete and Clear.mp4

10:45

14. Ecommerce Product CRUD API

1. Product Model with Likes and Ratings Schema.mp4

15:54

2. Product Create API.mp4

04:41

3. Products List with Pagination API.mp4

08:34

4. Get Single Product API.mp4

01:59

5. Product Update and Delete API.mp4

04:03

15. Creating Product with Categories & Tags

1. Create Product API Request.mp4

11:47

2. Fetch Products API Request.mp4

03:52

3. Update Product API Request.mp4

02:58

4. Delete Product API Request.mp4

01:59

5. Product Context Provider.mp4

03:15

6. Product Create Page.mp4

03:05

7. Product Create Component.mp4

09:30

8. Add Product Input Fields.mp4

06:46

9. Categories Select on Product Create and Update.mp4

10:29

10. Tags for Each Category.mp4

07:59

11. Checked Unchecked Tags.mp4

07:01

16. Multiple Image Uploads

1. Image Uploads.mp4

05:45

2. Multiple Images Upload Request from Client.mp4

14:12

3. Delete Image.mp4

05:37

4. Cloudinary Name, API Key and Secret.mp4

02:00

5. Image Upload and Delete API.mp4

06:07

6. Multiple Images Uploads on Product Create.mp4

11:14

17. Products CRUD

1. Creating a Product.mp4

12:29

2. Products List Page for Admin.mp4

12:48

3. Product List for Admin.mp4

12:14

4. Product Price and Short Description.mp4

04:19

5. Product Update and Delete by Admin.mp4

12:46

18. Display Products with Pagination

1. Pagination Links.mp4

08:48

2. Fetch Products Server Side.mp4

09:07

3. Pagination Component.mp4

09:10

4. Product Card with Next Image.mp4

10:05

5. More Product Info on Product Card.mp4

10:36

6. Date and Brand Name on Card Footer.mp4

05:04

7. Product Card Horizontal Space.mp4

02:01

19. Single Product View with Modal for Image Preview

1. Single Product View Page.mp4

05:39

2. Single Product Details.mp4

06:28

3. Product Images Display.mp4

08:28

4. Preview Modal.mp4

08:26

5. Image on Preview Modal.mp4

05:51

6. Close Modal on Page Link.mp4

02:35

7. Readable Product Description.mp4

02:06

20. Products Like & Unlike

1. Current User from Server Session for Like API.mp4

08:44

2. User Liked Products and Unlike API.mp4

03:19

3. Product Like and Unlike Component.mp4

07:35

4. Like and Unlike API Request.mp4

14:59

21. Star Ratings & Reviews for Product

1. Reusable Modal Component.mp4

12:58

2. Star Rating Component.mp4

12:33

3. Calculate Average Rating Function.mp4

03:36

4. Product Rating Component.mp4

07:43

5. Already Rated and Average Rating.mp4

09:42

6. Show Hide Rating Modal.mp4

05:15

7. Leave a Rating Modal.mp4

08:02

8. Product Rating API Request.mp4

05:38

9. Product Review API.mp4

10:22

10. Trying Product Review.mp4

09:44

11. Stars Rating in Product Cards.mp4

05:05

22. Filtering Products by Price, Categories, Tags & more

1. Filter Option Price Range.mp4

08:56

2. Price Filtering Active Class.mp4

06:40

3. Clear Filters.mp4

12:41

4. Star Ratings Filter Option.mp4

08:03

5. Categories List for Filter Option.mp4

13:44

6. Tags List for Filter Option.mp4

09:19

7. Brands List API from Product Collection.mp4

03:58

8. Brands List for Filter Option.mp4

06:29

23. Filtered Products API

1. Filtered Products API Request.mp4

13:24

2. Filtered Products API 1.mp4

13:48

3. Filtered Products API 2.mp4

12:45

24. Search Products

1. Search State & Functions in Product Context.mp4

06:49

2. Product Search Form.mp4

05:44

3. Product Search API.mp4

08:05

4. Product Search Results Page.mp4

07:18

5. Search Request on Page Reload.mp4

06:15

25. Ratings Distribution, Reviews Comments & Metadata

1. Display User Reviews & Comments.mp4

09:11

2. Rating Distribution Progress Bars.mp4

10:14

3. Product Metadata Static and Dynamic.mp4

08:05

26. Add to Cart

1. Add to Cart Feature Overview.mp4

02:53

2. Cart Context.mp4

04:52

3. Cart Update Functions.mp4

09:22

4. Add to Cart Components.mp4

09:12

5. Add to Cart Component in Product Card.mp4

10:19

6. Cart Page.mp4

06:37

27. Multi Step Checkout Process

1. Multi Step Cart Page.mp4

07:11

2. 3 Step Checkout Headings.mp4

08:29

3. Display Cart Items.mp4

12:12

4. Review and Checkout Link.mp4

07:14

5. Cart Step 2 Contact Details.mp4

14:20

6. Step 3 Payment Component.mp4

09:41

7. Stripe Checkout Session Request.mp4

05:51

8. Order Summary.mp4

13:44

28. Checkout with Stripe

1. Signup to Stripe.mp4

05:28

2. Line Items and Tax Rate.mp4

10:49

3. Shipping Options and Discounts.mp4

13:34

4. Successful Checkout with Stripe.mp4

07:41

29. Webhooks and Orders

1. Stripe Webhook.mp4

09:55

2. Stripe Webhook API Endpoint.mp4

16:09

3. Order Model.mp4

08:16

4. Create Order Using Webhook.mp4

05:07

30. Coupons Discount, Referral Links & Sale Price

1. Handle Coupon in Cart Context.mp4

07:26

2. Apply Coupon.mp4

03:29

3. Discount Coupon Validity Check.mp4

08:58

4. Referral Links with Coupon Code.mp4

07:03

5. Discount Price in Coupon Code URL.mp4

05:49

6. Checkout with Discount Price.mp4

09:08

7. Sale Price.mp4

08:48

31. User Dashboard, Orders & Receipt

1. User Orders API.mp4

02:45

2. User Success Page.mp4

03:58

3. User Orders Page.mp4

15:32

4. Order Display on Table with Receipt URL.mp4

09:49

5. Display Order Shipping Details.mp4

02:36

6. Display Order Products Info.mp4

07:32

32. Refunds & Cancellation

1. Cancel the Order Request.mp4

04:39

2. Refund API.mp4

12:20

3. Cancel Order API Request.mp4

07:48

4. Clear Cart Items.mp4

05:13

33. Admin Dashboard Order Management

1. All Orders for Admin.mp4

05:08

2. Update Order Delivery Status.mp4

03:21

3. Orders Page for Admin.mp4

14:25

4. Order Status Update by Admin.mp4

09:24

Description

[With 175 page PDF] FullStack Course with Advance CRUD Cart Filtering Rating Likes Payments Tax Refunds Orders & more.

What You'll Learn?

Build a Modern Ecommerce Application
Master React and NextJs FullStack Web Development
Implement User Authentication using NextAuth
Integrate Payment Gateway using Stripe
Tax Calculations, Shipping & Coupons
Credit Card Payment (Supports Apple Pay / Google Pay)
Dashboard for Users and Admin
Managing Products and Orders
Learn to use ChartJs Material CSS
Star Rating and Comments System
Advance Filtering, Pagination and more

Who is this for?

Web Developers

React Enthusiasts

Aspiring Full Stack Developers

Ecommerce Enthusiasts

Students and Professionals

Entrepreneurs and Business Owners

What You Need to Know?

Basic Web Development Knowledge

Familiarity with JavaScript and React

Desire to Learn

More details

Description
[Includes a 175-page PDF that accompanies video lectures]
Learn to Build and Ultimate Ecommerce Application using latest cutting edge technologies:
React 18
Nextjs 13
React Context
Nextjs API Development
Next Auth
Full Login & Registration System
Social Login
Stripe Payment Gateway
Emailing Users
Bootstrap Material CSS
Chart.js
MongoDB
Dashboard for Users and Admin
Advance Product Searching & Filtering
Star Rating & Commenting System
Likes Feature
Pagination
Sale Price
Shipping
Coupons
Credit Card, Apple Pay, Google Pay
Referral Links / Promotional url
SEO
Tax calculation
Order Management
Deployment
Includes 175 Page PDF
Plus 100's of tips
Welcome to "Full-Stack Ecommerce App with Next.js, React.js, NextAuth and NextAPI" In this comprehensive course, you'll learn how to develop a modern and fully functional ecommerce application using an array of powerful and popular technologies in the web development ecosystem.
Throughout this course, we'll dive deep into Next.js, the leading React framework for building server-rendered applications, and React.js, the renowned JavaScript library for building user interfaces. You'll gain hands-on experience with both frameworks and leverage their powerful features to create dynamic and high-performance web applications.
We'll explore entire JavaScript eco-system to harness the power of building advance full stack application all the way from scratch to deploying to live servers.
Additionally, we'll cover Next.js API, a built-in API route feature that allows you to create serverless API endpoints effortlessly. You'll learn how to leverage this feature to handle backend logic, process data, and communicate with your ecommerce application.
NextAuth will also be a focal point of this course. You'll discover how to integrate NextAuth into your application to provide secure and user-friendly authentication and authorization functionality. With NextAuth, you'll be able to implement features like sign-up, sign-in, password reset, and more.
To enhance the visual appeal and maintain a responsive design, we'll incorporate Bootstrap Material CSS, a most popular, easy to use CSS framework. You'll grasp the foundations of Bootstrap CSS and leverage its extensive collection of utility classes to create a sleek and visually stunning ecommerce application.
By the end of this course, you'll have the skills and knowledge to confidently build a full-stack ecommerce application using Next.js, React.js, NextAuth, NextAPI, Bootstrap Material CSS and Stripe. Join me on this exciting journey and take your web development skills to the next level!
Enroll now and start building your own full-stack ecommerce application today, along with the core fundamentals of React and Next.js!
Who this course is for:
Web Developers
React Enthusiasts
Aspiring Full Stack Developers
Ecommerce Enthusiasts
Students and Professionals
Entrepreneurs and Business Owners

User Reviews

Rating

average 0

Total votes0

Focused display

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.