Skip to content
UdemyReactPaid courseAll LevelsCertificate

BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS (Udemy.com)

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

Created by: Mohamed Hajji

Last updated January 2023

icon
What you will 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

How it compares

Against the other 173 rated Udemy courses in React on CourseDuck:

  • Rating4.5 out of 5higher than 53% of them
  • Reviews304#113 of 174 by number of reviews
  • Length46.4 hourslonger than 90% of them
  • Last updatedJanuary 2023earlier than 61% of them

icon
Course 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.

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Mohamed Hajji

Hello, I’m Mohamed Hajji!

I’m a passionate full-stack web developer with expertise in both frontend and backend development. Over the years, I’ve built countless applications using a variety of cutting-edge technologies, honing my skills to deliver scalable, efficient, and user-friendly solutions.

I understand the challenges of starting out in web development, especially in today’s rapidly evolving tech landscape. That’s why I’m here—to share my knowledge and help developers of all levels, especially beginners, navigate this exciting journey with confidence.

My goal as an instructor is simple: to empower you to build real-world, impactful projects while mastering the technologies that matter. Through my courses, you’ll gain the skills, insights, and hands-on experience needed to stand out as a developer in this competitive field.

Let’s embark on this learning journey together and take your skills to the next level. See you in class!

icon
More courses by Mohamed Hajji

$74.99

$10.99

icon
More React courses

$139.99

$94.99

$74.99

$69.99

$89.99

$99.99

icon
Reviews

4.5

304 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By محمد الزارعي on 1/23/2024

In this course, one can learn many features of programming language. To illustrate, this course uses Sass to style the website perfectly with simple CSS. It also uses redux to manage the state variables among react components. For database, this project uses the amazing database technology Mongo database. Furthermore, this project covers authentication with its various topics like resetting passwords. it also covers the admin dashboard with its various topics. Finally, there are a lot of backend programming processes that are covered like coupons, middlewares, and other topics. In the end, this project is really full-stack, it is really the best e-commerce website.

By Manas Bhatt on 6/23/2023

Started this course a while ago with no directions as to what could help me become a better programmer and code something like a ecommerce platform but shortly into the course i got the feeling of how one can build a complex full stack application like this, all thanks to the wonderful tutor Mr M Hazzi. I highly recommend this course to anyone who has entered web development and even if they have slight knowledge of html css and js they will know their way ahead. I am going to apply for my first jobs and this is a great asset into my portfolio. Again thanks for putting out this course.

By Christian Roberto Garcia Gutierrez on 6/22/2023

It is a very complete course, it teaches you too many tools, I have loved all the css teachings. It has a repository and is responsive. I have not finished it yet but I really liked everything that I have advanced. How to use next the deploy in vercel was too easy https://shoppay-xi.vercel.app/.

By Mohammed Gollapalli on 6/5/2023

This is one of the best course I have ever purchased as a mid developer. Concepts are advance however if you have minimum programming skills (in any language), this course is a must. I have C# background and learning as well as applying React and NextJs with this course is really smooth. As I am working on my business website and until now finished 3 sections....work is going extremely smooth. Some concepts are too advance, which requires learning before progressing. Thank you so much and I am looking forward in finishing and publishing my site soon.

By Manh Phung on 4/4/2023

Overall, your website looks pretty good, the interface, colors, and data flows are great, but there are also some errors in code organization and instructions that are not detailed that can make it difficult for users. novice or inexperienced. Besides, there are still some files, folders with syntax errors,... Through this, I hope you will improve your shortcomings and develop more. good skills and valuable knowledge in the future. Wish you success.

By Jim stephenson on 3/4/2023

This is a course difficult to give a review score too. In most aspects it is by far the best ecommerce course on Udemy by a country mile. It is a real world ecommerce site to match Amazon in complexity and in functionality. The database design doesn't dissapoint and caters for products with multi sizes and multi color options each with their own prices and stock. But then Mohamed disappoints massively by leaving out key elements such as editing a product with all its underlying complexity. These key elements basically render the entire product completely useless in a real world deployment. Mohamed also responds very quickly to simple questions but is completely missing when more complex questions are asked. Again very disappointing. I would very happily sign up to another course from Mohamed in which he attends to these missing elements. Call it Best Ecommerce Course Part 2. Other key elements missing include deployment again which are vital in any project. I was able to add the missing key elements myself but only after many weeks of googling and testing, which in many ways is due to the excellence of Mohamed's teaching which I guess is actually what doing a course is all about at the end of the day. Putting what you learn into practice. Thank you Mohamed for opening my eyes to how a real world Ecommerce site is created and giving me the skills to add myself all the elements you left out.

By Adam Wright on 1/17/2023

This guy is a legend. The way he teaches and things are explained, is brilliant. You will not get a better course than this. The technologies used in this course are perfect, I would like more courses using exactly the same tech. You won’t find a course anywhere remotely close to this. You can take this course and build so much from it. I have one or two of Mohammed’s other courses and you just can’t beat them. He’s a great teacher, well spoken, has a great capacity to understand what the junior and senior dev community needs. This course is wayyyy undervalued. (Mo, if you read this, please do more courses use the same tech and auth procedures. The more you repeat this actual process the better. Courses like this are like gold)

By Goktug Erol on 1/6/2023

I loved this course. Mohamed is a very helpful and practical developer with awesome Javascript and CSS skills. He has lots of knowledge about the tools he's using and I liked his teaching techniques. I learned a lot with this course, everything is crystal clear and at the end you can start developing your own React + NextJS apps. He's one of the best I've ever seen so far in Udemy! Great quality, great product, great course, it has everything you need!

By Nikolas Theodoropoulos on 12/27/2022

Overall, the e-shop building project had the potential to be a great course due to its rich content. However, the quality of the course degraded steeply around 1/4 of the way through, which was disappointing. The code provided had numerous bugs and broken links and required a significant amount of debugging on my part. The end-code the instructor has uploaded on their github is not the same as the end-code resulting from the course. The thing that prevented the course from being a complete failure is that it has a wealthy content with almost every aspect of an e-shop covered.

By Brandon Lockman on 12/26/2022

As someone who has taken several other react JavaScript related e-commerce guides, none of them compare to the one that Mr.Hajji is delivering here! I've taken Mr.Hajji's courses previously and they didn't let me down either. He always seems to genuinely think about what functionalities we want from developing software. Not just platonic basic CRUD operation software which currently plague udemy. Mr.Hajji is soft spoken, very informative, and reachable. The end result software functions absolutely beautifully and leaves us the plenty of opportunities to re-stylize everything as we like while keeping the focus of the course on functionality implementation. Take this course!

Showing all 10 reviews on CourseDuck

Read all 304 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 90 / 100