Mô tả

Hello my fellow developers and welcome to a new exciting course which maybe the best you will ever see ,m talking about building a fully advanced ecommerce website using react js next js mongodb redux toolkit and next auth and many other exciting tools ,which is a dream combo if you know what you are doing and will allow you to build some of the best websites you can imagine.

this video is a must watch till end so you dont miss any exciting features,and now let me show you why this build is actually awesome, i took a very different approach than most ecommerce websites you see in other courses, our products will be listed in swipers as you can see and that will allow you to see the product in its full form and all different styles cuz our prodycts consist of many (for example you have a jacket but the jacket can be black green red and every color will have diff sizes and every size has a diff qty and a diff price ) , so tell me have you seen smth like this in any other couse no and this is a first  which is a more realistoc approach that u see in websites like amazon ebay etc..

and every product will have its own page that looks awesome as you can clearly see also we added a zoom tool to zoom on the product for a better look also we have some stats on reviews with the ability to add a review in details and even you can use images and we have a table to showcase all reviews with filtering and pagination etc...

the most important part about an ecommerce experience starts with the cart which we have done a very good job on,  the products added will be displayed and even the logic behind it is impressive and also the cart gets updated everytime to make sure the products are still available and the prices are up to date,also you can change qty and delete a product and u will have to select the products you wanna checkout with and the total will be calculated and also adding the shippingFees to the count.

jumping to the checkout page where you can see a summary of your cart the addresses you have where you can select the address you wanna continue with and even add your own addresses and just a side note every form we have in this build is validated by formik and yup to make sure any data you type is strictly validated. you can choose a payment method and we also give you the option to use a coupon for a discount on your order.

and after placing the order the order gets created and now you can pay using three ways yes three we work on paypal payment which allows you to pay with paypal balance and even credit cards and also we we added a strpe gateway so you can pay with you credit card directly and also we have the option to pay cash on delievery.

now still so much exciting features i have to go through and i wanna start with the  browse page cuz its is absolutely awesome and just perfect you have your products displayed and you can search for products and you can filter through them using all kind of filters together u can choose the category brands sizes colors styles and mix it all together and adding pricing filters rating filters and on top of that you can sort in all different ways  and thats not the end of it we add the pagination to the mix to make sure it reaches perfection i dont think you can do better than this.

and after all of this i just wanna casualy tell u about the location detector so we will be able to detect which country the user is accessing our website from and get all informations needed and you can use those infos for your advantage to show certain and also hide certain products from a user from a certain region as big websites do. randomly also i can tell you we added a newsletter system connected to mailchimp api where we can gather all emails registerd in the news letter and you can send promotional emails to all of m at once.

okey before continuing i also wanna talk about our authentification system using next auth which can be really hard to customize depending on your needs but i will tell you that our authentification page has strictly validated forms and we allow you to register and we even send you an email after for verification and activating your account and we will create custom emails for activation forgetting password etc..and m gonna show how to create these high quality custom emails.

now we come to the login process so we will use next auth providers to log you in using credentials and also social login like google twitter github and even aith0 and all sessions will be handled with next auth and we also gonna use server side middlwares to protect every route using next auth itself not forgetting the ability to reset your password also.

not gonna forget about our home page with its beautiful design and swipers all arround and even custom components that have a countdown for flash deals and i added it because ive seen it a lot so i had to do it.

and before jumping to the admin dashboard i wanna talk about the profile page where you can customize your profile,go through your orders with all their different status and you can also manage your addresses and add and remove and even choosing a default payment method and even the ability to change your password.

and now we come to the admin dashboard which in itself should be a seperate course but i wanted to give you all you need in one course,

so lets talk about it its a well designed dashboard with beatiful colors and impressive functionality ofc.

the main page has a brief data of stats and recent orders and users whch is not that impressive but lets talk about the create product page first so you will be able to create a product with all the basics you need and more from pictures that will be uploaded to cloudinary so cloudinary is our cloud service then you can extract colors from those images to choose the main color of that product alongside the style, and you can also choose a category and all the subcategories the product belongs to,also you can decide if a product has a size then u can add the qty and the price of that size you can also add custom informations about the product to make every product details and description very unique whic also a new approach same thing goes for questions, also if the prduct belongs to an existing product you can choose it and it will fill all informations except the unique ones that related to that product only and then simply we update the existing product and add the subproduct to it, we also can manage categories and subcategories with the abilty to list and update a category or subcategory with the option to delete same goes for coupons where we can add a coupon with a starting date and an ending date that means we will work on dates which always good to get comfortable with.

now we come to orders who are displayed in smart way where you can see the main infos then expand to see first the user infos and the shipping informations then under that we can see the order in details so you know exacly which product we have to ship and the actual qty and style etc...

we have also a page for users where we can see all the users and mange em.also we have a page for all products where we can see all of the products grouped showing all different styles and subproducts for that products and you edit or delete or make a product in the flash deals or doing whatever you like cuz in this course you will be able to creates an ewesome propject but at the same time your skills will just get waaay better and you will get comfortable with very complicated large projects and you will learn the archeticture of a project and how you organise it and how to be professional learn clean code.

its almost 50 hours of content that can be expanded with 220+ videos for the amount of content you get access to this is a no brainer course so come join us and become a better developer.

Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

28 sections

Introduction

1 lectures
Project Showcase
09:42

Let's setup our project

7 lectures
Create next app
06:37
Explaining css in next js and mixing sass with modules
04:49
Reset Css styles
09:49
Create a Mongodb Atlas cluster and get the connection url
05:57
Connect,Disconnect to the database
11:43
Let's setup Redux toolkit with Redux Persist
13:16
Making global variables accessible in next config
05:36

Header Component

5 lectures
Ad header
07:15
Ad top
14:14
Top Menu part 1
16:43
Top Menu part 2
05:43
Search component
13:13

Footer Component

4 lectures
Footer links
09:02
Footer Socials & Newsletter
09:37
Footer Payment & Copyright
09:00
Responsive Footer
05:31

Location Detection

1 lectures
Detect user location using IpRegistry
12:34

Authentification

24 lectures
Next auth setup
08:30
JSON web tokens & Mongodb adapter
08:14
Github provider
05:55
Google provider
05:01
Header session
05:08
Twitter provider
05:04
Auth0 provider
06:10
Sign in page 1
12:21
Sign in page 2
16:57
Sign in page 3 - Custom input with yup
17:02
Sign in page 4 button submit
14:11
Sign in page 5 Socials
13:41
Sign in page 6 sign in and yup validation
12:15
Sign up 1
12:29
Sign up 2 User model
09:15
Sign up 3
14:08
Sign up 4 Send email 1
09:39
Sign up 5 Send email 2
09:27
Sign up 6 Send email 3
13:46
Sign up 7 submit
09:01
Sign up 8 loader, success, error, redirect ...
11:42
Sign in with Next auth and submit
17:18
Callbacks in Next auth
05:10
csrfTOken redirect
11:05

forgot,reset password

4 lectures
Forgot page 1
09:34
Forgot page 2
17:51
Reset password 1
09:34
Reset password 2
11:47

Home page

17 lectures
Home main structure
11:30
Home swiper part 1
16:19
Home swiper 3
05:27
Home offers main
16:12
Home menu
10:17
Home user menu markup
11:23
Home user menu markup styles
17:40
Home main header
03:24
Home main responsive
17:11
Flash deals 1
14:10
Flash deals 2
14:22
Flash deals responsive
09:08
Flash deals Countdown
26:46
Category cards
12:04
Category cards responsive
11:09
Home products swiper
13:56
Home products swiper extra
07:12

Product card

6 lectures
Product model and explaining the most perfect approach for products
18:13
Category and subcategory model
06:37
Add and get products from database
09:03
Product card 1
14:23
Product card 2
10:32
Product card 3
16:03

Product page

17 lectures
Get, filter and prepare product data
18:52
product page content start
09:04
product images main swiper
19:41
product infos 1
14:42
product infos 2
19:27
product infos 3
16:04
product infos 4 & share to social media accounts
14:26
product infos 5 accordian
09:20
product simillar swiper
14:55
product reviews overview card
19:56
add review 1
24:59
add review 2
15:58
add review 3
12:46
add review 4 working with images upload form
21:46
reviews table : pagination functionality
12:09
review card
15:38
reviews table header
21:57

Cart

14 lectures
cart page 1
18:00
cart slice & add to cart 1
16:41
03-add to cart and update cart 2
18:05
cart product card markup
23:09
cart product card styles
13:53
update product qty & remove from cart
08:11
cart header
06:12
cart checkout card
11:01
cart select and unselect products
16:19
cart calculate total subtotal and shipping fee
08:35
cart payment methods and swiper
10:33
add cart to database 1
18:59
add cart to database 2
06:52
Keeping the cart updated always
11:24

Checkout (coupons, addresses, ,also auth middlware ...)

16 lectures
Checkout ,get cart, work on shipping address form 1
25:49
custom shipping input
17:38
shipping form full markup and styles
17:34
custom select componenet with yup and formik validation
09:55
save address to db
07:48
list all addresses and change active status 1
15:22
AUTH MIDDLEWARE (VERY IMPORTANT)
09:53
list all addresses and change active status 2
28:05
remove address and add shipping section header
12:19
checkout cart
12:18
Select a payment method
23:10
Order model
09:01
Coupon model and create coupons to test with
11:31
Summary
21:37
apply coupon
11:49
create order
14:45

Order page

8 lectures
create order page and adding coupon to order
07:13
order header & products list
18:55
order products total with coupon shown
09:04
order shipping billing address
08:12
paypal payment setup
22:00
Stripe setup
17:25
Stripe finish
15:46
Finishing Paypal payment
06:03

Protected routes and access (middlware next js next auth)

1 lectures
middlware
10:14

Upload images to cloudinary (full setup frontend and backend)

3 lectures
cloudinary setup
11:35
upload image middleware
07:52
upload images to cloudinary
11:15

Admin Dashboard - setup

6 lectures
admin dashboard setup + redux expand Sidebar setup
09:57
admin dashboard layout
07:23
Admin Dashboard Sidebar part 1
17:06
Admin Dashboard Sidebar part 2
18:03
admin Dashboard Sidebar part 3
09:12
Toastify setup and explained
06:43

Admin Dashboard - Categories

7 lectures
categories page setup
07:32
create category start
10:28
Admin custom input with validation and fixing issues
16:27
create category submit and api + fixing regex issue
09:45
list all categories
14:29
finish list item and delete a category
07:52
update a category
06:03

Admin Dashboard - SubCategories

2 lectures
subcategories page setup & create subCategory
13:42
list update and delete SubCategory
18:16

Admin Dashboard - Coupons

4 lectures
coupons page setup
09:24
coupons dates picker
10:33
Submit coupon
06:35
update, delete coupon
10:42

Admin Dashboard - all products

3 lectures
all products page setup
07:50
list products beautifully part 1
07:32
list products beautifully part 2
09:19

Admin dashboard - create product

18 lectures
create product page setup & extra
18:51
working on the form
18:50
working on the form 2
14:47
form validation, styles & select header and fixing issues
20:39
Dialog modal
16:05
Create product images 1
15:52
Create product images 2
15:59
Create product images 3
10:07
extract colors and pick a product main color
20:56
Product Style
05:33
click to add - SIzes Qty Price 0
10:49
click to add - SIzes Qty Price 1
17:19
click to add - Details & Questions
12:44
Full validation for all inputs and fixing issues 1
15:41
Full validation for all inputs 2
09:31
Admin middleware
04:40
Submit create product 1
12:01
Submit create product 2
13:26

Admin Dashboard - users

2 lectures
users page and advanced mui table setup
07:44
filling the table data
12:17

Admin dashboard - orders

4 lectures
orders setup & Collapsible table
13:01
Filling the orders table
10:52
Filling the orders table - shipping informations
07:21
Filling the orders table - list products
14:15

Admin dashboard - dashboard

5 lectures
dashboard header 1
19:11
dashboard header 2
23:17
dashboard status cards
14:37
data tables markup
07:39
data tables styles
16:24

Product page 2 (add review,whishlist,related...)

4 lectures
Add a review client side
15:07
Add a review server side
22:53
Add to whishlist
06:56
Work on reviews and loader
14:04

Profile

10 lectures
profile and layout setup
12:35
profile sidebar
09:00
profile sidebar 2
15:20
profile - orders 1
11:45
profile - orders 2
09:30
profile - orders 3
15:38
profile - addresses
09:41
profile - default payment method
17:12
profile - security (change password 1)
07:39
profile - security (change password 2)
11:08

Browse page filters, search and pagination

18 lectures
Getting the data first
15:18
Browse heading, tags, listing products
14:17
Category filter component
12:10
Colors & Sizes filter component
11:30
Styles Patterns Materials Gender
20:13
Heading Filters - Pricing & Sorting
22:14
Heading Filters styles
09:53
Filtering algorithm and full search feature
25:42
filtering by category brand styles & working on multiple filtiring
26:58
filtering by multiple brands sizes colors
14:54
filtering by patterns materials gender
16:35
filtering by price (live filtering and buttons)
18:07
Re-Creating a global filtiring function with select unselect and active stat
31:32
Apply the new QueryReplace function on filters
14:56
Filtering by free shipping and ratings
10:36
sorting
30:17
Pagination
11:01
fixed filters and clear button
11:02

Newsletter using MailChimp api

1 lectures
Newsletter full guide
22:17

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.