Companies Home Search Profile

BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS

Focused View

Mohamed Hajji

46:05:13

279 View
  • 1. Project Showcase.mp4
    09:42
  • 1. Create next app.mp4
    06:37
  • 2. Explaining css in next js and mixing sass with modules.mp4
    04:49
  • 3. Reset Css styles.mp4
    09:49
  • 4. Create a Mongodb Atlas cluster and get the connection url.mp4
    05:57
  • 5. Connect,Disconnect to the database.mp4
    11:43
  • 6. Let's setup Redux toolkit with Redux Persist.mp4
    13:16
  • 7. Making global variables accessible in next config.mp4
    05:36
  • 1. Ad header.mp4
    07:15
  • 2. Ad top.mp4
    14:14
  • 3. Top Menu part 1.mp4
    16:43
  • 4. Top Menu part 2.mp4
    05:43
  • 5. Search component.mp4
    13:13
  • 1. Footer links.mp4
    09:02
  • 2. Footer Socials & Newsletter.mp4
    09:37
  • 3. Footer Payment & Copyright.mp4
    09:00
  • 4. Responsive Footer.mp4
    05:31
  • 1. Detect user location using IpRegistry.mp4
    12:34
  • 1. Next auth setup.mp4
    08:30
  • 2. JSON web tokens & Mongodb adapter.mp4
    08:14
  • 3. Github provider.mp4
    05:55
  • 4. Google provider.mp4
    05:01
  • 5. Header session.mp4
    05:08
  • 6. Twitter provider.mp4
    05:04
  • 7. Auth0 provider.mp4
    06:10
  • 8. Sign in page 1.mp4
    12:21
  • 9. Sign in page 2.mp4
    16:57
  • 10. Sign in page 3 - Custom input with yup.mp4
    17:02
  • 11. Sign in page 4 button submit.mp4
    14:11
  • 12. Sign in page 5 Socials.mp4
    13:41
  • 13. Sign in page 6 sign in and yup validation.mp4
    12:15
  • 14. Sign up 1.mp4
    12:29
  • 15. Sign up 2 User model.mp4
    09:15
  • 16. Sign up 3.mp4
    14:08
  • 17. Sign up 4 Send email 1.mp4
    09:39
  • 18. Sign up 5 Send email 2.mp4
    09:27
  • 19. Sign up 6 Send email 3.mp4
    13:46
  • 20. Sign up 7 submit.mp4
    09:01
  • 21. Sign up 8 loader, success, error, redirect ....mp4
    11:42
  • 22. Sign in with Next auth and submit.mp4
    17:18
  • 23. Callbacks in Next auth.mp4
    05:10
  • 24. csrfTOken redirect.mp4
    11:05
  • 1. Forgot page 1.mp4
    09:34
  • 2. Forgot page 2.mp4
    17:51
  • 3. Reset password 1.mp4
    09:34
  • 4. Reset password 2.mp4
    11:47
  • 1. Home main structure.mp4
    11:30
  • 2. Home swiper part 1.mp4
    16:19
  • 3. Home swiper 3.mp4
    05:27
  • 4. Home offers main.mp4
    16:12
  • 5. Home menu.mp4
    10:17
  • 6. Home user menu markup.mp4
    11:23
  • 7. Home user menu markup styles.mp4
    17:40
  • 8. Home main header.mp4
    03:24
  • 9. Home main responsive.mp4
    17:11
  • 10. Flash deals 1.mp4
    14:10
  • 11. Flash deals 2.mp4
    14:22
  • 12. Flash deals responsive.mp4
    09:08
  • 13. Flash deals Countdown.mp4
    26:46
  • 14. Category cards.mp4
    12:04
  • 15. Category cards responsive.mp4
    11:09
  • 16. Home products swiper.mp4
    13:56
  • 17. Home products swiper extra.mp4
    07:12
  • 1. Product model and explaining the most perfect approach for products.mp4
    18:13
  • 2. Category and subcategory model.mp4
    06:37
  • 3. Add and get products from database.mp4
    09:03
  • 4. Product card 1.mp4
    14:23
  • 5. Product card 2.mp4
    10:32
  • 6. Product card 3.mp4
    16:03
  • 1. Get, filter and prepare product data.mp4
    18:52
  • 2. product page content start.mp4
    09:04
  • 3. product images main swiper.mp4
    19:41
  • 4. product infos 1.mp4
    14:42
  • 5. product infos 2.mp4
    19:27
  • 6. product infos 3.mp4
    16:04
  • 7. product infos 4 & share to social media accounts.mp4
    14:26
  • 8. product infos 5 accordian.mp4
    09:20
  • 9. product simillar swiper.mp4
    14:55
  • 10. product reviews overview card.mp4
    19:56
  • 11. add review 1.mp4
    24:59
  • 12. add review 2.mp4
    15:58
  • 13. add review 3.mp4
    12:46
  • 14. add review 4 working with images upload form.mp4
    21:46
  • 15. reviews table pagination functionality.mp4
    12:09
  • 16. review card.mp4
    15:38
  • 17. reviews table header.mp4
    21:57
  • 1. cart page 1.mp4
    18:00
  • 2. cart slice & add to cart 1.mp4
    16:41
  • 3. 03-add to cart and update cart 2.mp4
    18:05
  • 4. cart product card markup.mp4
    23:09
  • 5. cart product card styles.mp4
    13:53
  • 6. update product qty & remove from cart.mp4
    08:11
  • 7. cart header.mp4
    06:12
  • 8. cart checkout card.mp4
    11:01
  • 9. cart select and unselect products.mp4
    16:19
  • 10. cart calculate total subtotal and shipping fee.mp4
    08:35
  • 11. cart payment methods and swiper.mp4
    10:33
  • 12. add cart to database 1.mp4
    18:59
  • 13. add cart to database 2.mp4
    06:52
  • 1. Checkout ,get cart, work on shipping address form 1.mp4
    25:49
  • 2. custom shipping input.mp4
    17:38
  • 3. shipping form full markup and styles.mp4
    17:34
  • 4. custom select componenet with yup and formik validation.mp4
    09:55
  • 5. save address to db.mp4
    07:48
  • 6. list all addresses and change active status 1.mp4
    15:22
  • 7. AUTH MIDDLEWARE (VERY IMPORTANT).mp4
    09:53
  • 8. list all addresses and change active status 2.mp4
    28:05
  • 9. remove address and add shipping section header.mp4
    12:19
  • 10. checkout cart.mp4
    12:18
  • 11. Select a payment method.mp4
    23:10
  • 12. Order model.mp4
    09:01
  • 13. Coupon model and create coupons to test with.mp4
    11:31
  • 14. Summary.mp4
    21:37
  • 15. apply coupon.mp4
    11:49
  • 16. create order.mp4
    14:45
  • 1. create order page and adding coupon to order.mp4
    07:13
  • 2. order header & products list.mp4
    18:55
  • 3. order products total with coupon shown.mp4
    09:04
  • 4. order shipping billing address.mp4
    08:12
  • 5. paypal payment setup.mp4
    22:00
  • 6. stripe setup.mp4
    17:25
  • 7. stripe finish.mp4
    15:46
  • 1. middlware.mp4
    10:14
  • 1. cloudinary setup.mp4
    11:35
  • 2. upload image middleware.mp4
    07:52
  • 3. upload images to cloudinary.mp4
    11:15
  • 1. admin dashboard setup + redux expand Sidebar setup.mp4
    09:57
  • 2. admin dashboard layout.mp4
    07:23
  • 3. Admin Dashboard Sidebar part 1.mp4
    17:06
  • 4. Admin Dashboard Sidebar part 2.mp4
    18:03
  • 5. admin Dashboard Sidebar part 3.mp4
    09:12
  • 6. Toastify setup and explained.mp4
    06:43
  • 1. categories page setup.mp4
    07:32
  • 2. create category start.mp4
    10:28
  • 3. Admin custom input with validation and fixing issues.mp4
    16:27
  • 4. create category submit and api + fixing regex issue.mp4
    09:45
  • 5. list all categories.mp4
    14:29
  • 6. finish list item and delete a category.mp4
    07:52
  • 7. update a category.mp4
    06:03
  • 1. subcategories page setup & create subCategory.mp4
    13:42
  • 2. list update and delete SubCategory.mp4
    18:16
  • 1. coupons page setup.mp4
    09:24
  • 2. coupons dates picker.mp4
    10:33
  • 3. Submit coupon.mp4
    06:35
  • 4. update, delete coupon.mp4
    10:42
  • 1. all products page setup.mp4
    07:50
  • 2. list products beautifully part 1.mp4
    07:32
  • 3. list products beautifully part 2.mp4
    09:19
  • 1. create product page setup & extra.mp4
    18:51
  • 2. working on the form.mp4
    18:50
  • 3. working on the form 2.mp4
    14:47
  • 4. form validation, styles & select header and fixing issues.mp4
    20:39
  • 5. Dialog modal.mp4
    16:05
  • 6. Create product images 1.mp4
    15:52
  • 7. Create product images 2.mp4
    15:59
  • 8. Create product images 3.mp4
    10:07
  • 9. extract colors and pick a product main color.mp4
    20:56
  • 10. Product Style.mp4
    05:33
  • 11. click to add - SIzes Qty Price 0.mp4
    10:49
  • 12. click to add - SIzes Qty Price 1.mp4
    17:19
  • 13. click to add - Details & Questions.mp4
    12:44
  • 14. Full validation for all inputs and fixing issues 1.mp4
    15:41
  • 15. Full validation for all inputs 2.mp4
    09:31
  • 16. Admin middleware.mp4
    04:40
  • 17. Submit create product 1.mp4
    12:01
  • 18. Submit create product 2.mp4
    13:26
  • 1. users page and advanced mui table setup.mp4
    07:44
  • 2. filling the table data.mp4
    12:17
  • 1. orders setup & Collapsible table.mp4
    13:01
  • 2. Filling the orders table.mp4
    10:52
  • 3. Filling the orders table - shipping informations.mp4
    07:21
  • 4. Filling the orders table - list products.mp4
    14:15
  • 1. dashboard header 1.mp4
    19:11
  • 2. dashboard header 2.mp4
    23:17
  • 3. dashboard status cards.mp4
    14:37
  • 4. data tables markup.mp4
    07:39
  • 5. data tables styles.mp4
    16:24
  • 1. Add a review client side.mp4
    15:07
  • 2. Add a review server side.mp4
    22:53
  • 3. Add to whishlist.mp4
    06:56
  • 4. Work on reviews and loader.mp4
    14:04
  • 1. profile and layout setup.mp4
    12:35
  • 2. profile sidebar.mp4
    09:00
  • 3. profile sidebar 2.mp4
    15:20
  • 4. profile - orders 1.mp4
    11:45
  • 5. profile - orders 2.mp4
    09:30
  • 6. profile - orders 3.mp4
    15:38
  • 7. profile - addresses.mp4
    09:41
  • 8. profile - default payment method.mp4
    17:12
  • 9. profile - security (change password 1).mp4
    07:39
  • 10. profile - security (change password 2).mp4
    11:08
  • 1. Getting the data first.mp4
    15:18
  • 2. Browse heading, tags, listing products.mp4
    14:17
  • 3. Category filter component.mp4
    12:10
  • 4. Colors & Sizes filter component.mp4
    11:30
  • 5. Styles Patterns Materials Gender.mp4
    20:13
  • 6. Heading Filters - Pricing & Sorting.mp4
    22:14
  • 7. Heading Filters styles.mp4
    09:53
  • 8. Filtering algorithm and full search feature.mp4
    25:42
  • 9. filtering by category brand styles & working on multiple filtiring.mp4
    26:58
  • 10. filtering by multiple brands sizes colors.mp4
    14:54
  • 11. filtering by patterns materials gender.mp4
    16:35
  • 12. filtering by price (live filtering and buttons).mp4
    18:07
  • 13. Re-Creating a global filtiring function with select unselect and active stat.mp4
    31:32
  • 14. Apply the new QueryReplace function on filters.mp4
    14:56
  • 15. Filtering by free shipping and ratings.mp4
    10:36
  • 16. sorting.mp4
    30:17
  • 17. Pagination.mp4
    11:01
  • 18. fixed filters and clear button.mp4
    11:02
  • 1. Newsletter full guide.mp4
    22:17
  • Description


    BUIL THE BEST ECOMMERCE WEBSITE EVER WITH REACT JS NEXT JS REDUX TOOLKIT AND NEXT AUTH

    What You'll Learn?


    • Build the most exciting ecommerce project with react js, next js, mongodb, redux toolkit and next auth
    • Learn and master next js and remove all confusion
    • Master Next auth for full authentication system, learn about callbacks and crfTOkens
    • User Redux Toolkit with redux persist for a killer combination for managing state
    • Master Next js and all of its secrets and tricks and become comfortable using it for you frontend and backend work
    • Learn how to work with Mongodb and how to add ,update, remove and query like a pro.
    • Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary.
    • Build a mailing system from scratch to send emails to the user for email verification links and reset code password.
    • Strong advanced form validation using Formik and Yup and learn about the best form validation techniques used
    • Learn how to use react redux toolkit to have a global store shared across all of our application.
    • Learn how to create protected routes using next auth and secure your application and pages.
    • Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners

    Who is this for?


  • react js beginners
  • next js beginners
  • Beginner web developer
  • Junior web developer
  • React js developer
  • Node js developer
  • web developer
  • next js developer
  • More details


    Description

    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.

    Who this course is for:

    • react js beginners
    • next js beginners
    • Beginner web developer
    • Junior web developer
    • React js developer
    • Node js developer
    • web developer
    • next js developer

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Mohamed Hajji
    Mohamed Hajji
    Instructor's Courses
    Hello there ?My name is Mohamed HAJJI, i am a full stack web developer and a good one of course, i have great knowledge in the web development field in both frontend and backend ,i have built countless applications using many different technologies, and my job here is to take everything i know and try and share it with all my fellow developers from all levels especially for new developers because i have been there and i know the struggle of trying to learn and  adapt to all the technologies we have nowadays and i will try in my new journey as an instructor to have different courses to build different major projects using different technologies.
    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.
    • language english
    • Training sessions 210
    • duration 46:05:13
    • Release Date 2023/02/06